ugrás a tartalomhoz

Fogyókúra tippek stíluslapok optimalizálásához

yaanno · 2009. Nov. 10. (K), 11.42
Nem kérdéses, hogy nagy terheltségű és nagy forgalmú weboldalak fejlesztésekor és karbantartásakor elsőrendű szempont kell legyen az optimalizálás – értve ez alatt a kliensnek küldött artwork, CSS, HTML, JavaScript, esetleg JSON adat nyers mennyiségét, a letöltési szálak okos kézben tartását és így tovább.

A legutóbbi NewTech Meetup kapcsán felmerült a kérdés, hogy miképp lehetne egy adott webdokumentum vagy egy komplett weboldal stíluslapját úgy optimalizálni, hogy előzetesen elemezzük a nem használt deklarációkat, szabályokat. A kérdés szerintem a CSS keretrendszerek terjedő használata miatt egyre érdekesebb lesz a fejlesztők számára.

Szerencsére számos lehetőség is rendelkezésünkre áll. Első körben két online eszközt említenék, a Clean CSS és a CSS Redundancy Checker webszolgáltatásokat. Mindkét esetben a dokumentum és a stíluslap parse-olásán alapuló, megleletősen egyszerű szolgáltatásról van szó. Nem érdemes rájuk sok szót vesztegetni, komolyabb munkakörnyezetben kényelmetlen a használatuk, csupán referenciaként említem őket.

Ha integrálni szeretnénk egy-egy megoldást saját rendszerünkbe, jó kiindulópont lehet a széles körű optimalizálási lehetőségeket nyújtó Web Optimizer, esetleg a Liquidcity CSS Cleaner, amely egy meglehetősen egyszerű PHP szkript. Ha az illesztést Java környezetben kell megoldanunk, jól jöhet a Jacqueline nevű könyvtár, amely szintén sok lehetőséget biztosít. Végül pedig megemlíteném a Ruby/Rails környezetben fejlesztők számára a Deadwight nevű programot, amelyhez szép bevezetőt is találni.

Kliens oldalon is többféle megoldás lehetséges. Itt van mindjárt egy futtatható Windows állomány, a CSS Cleaner, amely automatikusan és kíméletlenül pusztítja a nem használt stíluslap elemeket. Személy szerint a Dust-Me Selectors Firefox kiegészítőt ajánlanám, amely – megfelelő webtérkép betáplálásával – komplett weboldalakat is képes végigellenőrizni, majd CSV állományba menteni az eredményt. Végül ott van természetesen a Google Page Speed elemzője vagy a CSS Usage kiegészítő, amely gyors analízist tesz lehetővé.