Zrychlete své CSS

Nedávno psal Yuhů a další (viz odkazy) o knize Andrew B. Kinga Zrychlete své WWW stránky!. Jsem přibližně v polovině a n…

Nedávno psal Yuhů a další (viz odkazy) o knize Andrew B. Kinga Zrychlete své WWW stránky!. Jsem přibližně v polovině a nad kapitolou Optimalizace CSS mě tak svrběly prsty, že mi to nedalo a podíval se na svůj CSS soubor. Cílem podívání bylo jej zmenšit, při čtení knihy jsem totiž nabyl dojmu, že vše jde zkrátit nebo zmenšit o polovinu a soubory se styly nejsou vyjímkou.

Nejprve jsem použil techniku, o které se zmínil Petr Weida, tedy odstranění prázdných řádek, formátování souboru a odstranění komentářů. Soubor se mi smrskl o cca 42%, viz tabulka zcela dole, již v tuto chvíli jsem mohl být spokojen.

Autor knihy, ale nabízí také další techniky, které jsem aplikoval dále:

  1. odstraňte prázdná místa (již jsem provedl)
  2. odstraňte komentáře (již jsem provedl)
  3. minimalizujte HTTP požadavky (používejte jen jeden CSS soubor)
  4. krátké názvy selektorů class a id
  5. používejte skupinové selektory a deklarace
  6. využívejte maximálně dědičnosti

Vypustil jsem ještě několik již nepotřebných deklarací a zjednodušil některé CSS konstrukce. Například místo zápisu

background-color: #ee9e22;background-image: url(„/img/tovar­na.gif“);backgrou­nd-position: right top;background-repeat: no-repeat;

… jsem použil zkrácené zápisy, které autor také doporučuje:

background:#ee9e22 url(„/img/tovar­na.gif“) right top no-repeat;

…. a následovaly úpravy s využitím dědičnosti a odstranění zdvojených definic téhož. Výsledek byl na světě.

Přehled úprav velikosti CSS:

  • původně: 8,22 kB (8427 bajtů), 8429 znaků
  • komprimováno: 4,79 kB (4909 bajtů), 4933 znaků = úspora 42%
  • + optimalizované CSS: 3,40 kB (3490 bajtů), 3492 znaků = úspora 59%

Určitě si řeknete, že ten původní soubor musel vypadat, ale o to nejde. Určitě nejsem sám komu oprášení definice stylů pomůže a výsledkem budou nejen rychleji se načítající stránky, ale hlavně spokojení uživatelé.

Až knihu dočtu, možná si z ní na Vás ještě něco vyzkouším.

Související:

Jirka Ch | 19. Květen 2004, 0:48 | „Články“ | Trvalý odkaz | Komentáře (10) | Štítky: ,

Komentáře:

[1] Jiří Bureš | 19.5. 2004, 8:01

Pěkný spot. Jenom bych připomenul rčení „všeho s mírou“. Aby nevznikaly přeoptimalizované soubory, ve kterých je:

  • celá definice na jediném řádku (aby se ušetřilo 50 B z 5 kB),
  • selektory se jmenují a, b, c, d atd. (aby se ušetřilo místo pro dlouhé názvy) a
  • kaskáda je zacuchaná, že se v ní ani prase nevyzná.

Tohle ale není případ rozumné optimalizace, o které píšeš.

[2] Pavel SPS | 19.5. 2004, 8:23

S nazvy mas urcite pravdu, jinak jiz bych nesouhlasil… preci jenom muzes mit svou editacni verzi a pak druhou – zkomprimovanou, kterou davas na servery…

[3] Jiří Bureš | 19.5. 2004, 9:17

[2] Jesli mi to ale kvůli úspoře 0,2 % stojí za to. Mě tedy (zatím) ne. Jednou dobře udělanou kaskádou ušetřím desetkrát tolik. Ale proti gustu…

[4] Jirka Ch | 19.5. 2004, 9:44 | jiri@chomat.net

[1] Ano je samozřejmá (aspoň doufám) jistá míra soudnosti. Pokud je úspora v jednotkách % pak je lepší neoptimalizovat a už vůbec neoptimalizovat za každou cenu.
[2] a [3] Editační verzí bych rozuměl soubor s odřádkováním, s odsazením hodnot a podobně.
Hlavní úspora je stejně kaskádách a také v odstranění zbytečných mezer, ale ne vše na jednu řádku :-)

[5] Jiří Bureš | 19.5. 2004, 14:00

[4] Myslím, že si rozumíme a jsme ve shodě.
ad Úspora v kaskádách) Když jsem pře pár měsící „optimalizoval“ své CSS soubory, tak jsem se divil, co jsem to vlastně vytvořil. A opravoval jsem a opravoval. Kdybych se na to podíval teď, tak dojdu asi k podobnému poznání a zase bych optimalizoval :-)
Je potřeba být pragmatický. Neoptimalizovat za každou cenu. Někdy je lepší mít delší zápis, který je přehledný i po čase, než dělat nejaké šílené kotrmelce. Tohle ale samozřejmě není připomínka ke spotu. Je to taková obecná úvaha.

[6] Jirka Ch | 19.5. 2004, 14:13 | jiri@chomat.net

[5] Mám stejný pocit, minule jsem zapoměl poděkovat za pochvalu, takže děkuji dodatečně.
Sám jsem byl překvapen kolik věcí jsem byl schopen zcela vypustit. Především různé zbytečné marginy, paddingy a podobně.
Kniha o které se zmiňuji je spíše opačný příklad kde se jde až do extrémů, ale je jasné, že si člověk vždy má vybrat to svoje. Hlavní je neblbnout a dělat vše s rozmyslem :-)

[7] Meky | 19.5. 2004, 16:43 | radek.stolpa@tiscali.cz

Díky za moc zajímavej článek. Určitě si odkaz na něho schovám do svého elitního archivu.

[8] Milan Kryl | 19.5. 2004, 21:16 | krylm@email.cz

Myslim, ze zalezi jak kde. Na hodne navstevovanejch serverech se ti vyplati zkratit ten CSSkovej soubor i jen o nekolik bajtu. V celkove sume to totiz uz da hodne zajimavy vysledky a usetri to minimalne prenosovou sirku pasma, kde se jiz muzou posilat dalsi soubory.
Co se tyka neprehlednosti – resit jak doporucuji v knizce. Mit puvodni soubor, ktery je lidsky citelny a potom optimalizovanou verzi, kterou posilam ctenarum webu.
Ale optimalizace na blogu pro par stovek uzivatelu za den je spis malym cvicenim nez nejakou uzitecnou veci a brutalnim zrychlenim. To uz se spis vyplati cacheovat, protoze uzivatele na blog chodi pravidelne a styl se casto nemeni.

[9] Jirka Ch | 20.5. 2004, 9:10 | jiri@chomat.net

Milane samozřejmě, že jsem to bral jako malé cvičení pro sebe a jako ukázku ostatním. Výsledek mě prostě příjemě překvapil.
Původní neoptimalizovaný soubor je vážně nutnost.

Vložit komentář:

Přidávání komentářů bylo zastaveno, ale můžete mi napsat třeba email.
Děkuji za pochopení.
~Jirka Chomát~