Štítek: komprese

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í:

• Online komprimace CSS – (Petr Weida, About weblog, 7.5.2004)
• Kniha o rychlosti stránek – (Dušan Janovský, Yuhůův weblog o webu, 29.4.2004)
• Andrew B. King: Zrychlete své WWW stránky – (Milan Kryl, Kryl Blog, 11.5.2004)
• Zrychlete své WWW stránky! – (Vilém Málek, Interval, 13.5.2004)
• Zrychlete své WWW stránky! – (Nakladatelství ZonerPress)