rarouš.weblog

Dnes jsem zapracoval něktreté drobné změny designu, které jsem už delší dobu připravoval. Hlavním cílem změny byla patička webu, protože na ní jsem se při původním návrhu moc nesoustředil.

Nyní by měla být trochu uspořádanější. Styl jsem tak trochu opajcnul ze slajdů PDC 2008. Homepage taky doznala lehké přeurovnání do mřížky. Další změnou jsou fonty. V boxu s agregací blogu, by měl být styl více podobný tomu, co je na blogu. Trochu se změnil i hledací formulář, který teď kopíruje aktuální styl Live Search, který je pro zdejší hledání použit.

Změny to jsou jen kosmetické, ale i tak zabraly dost času. Každopádně to není ještě vše. Na blogu brzo přibude patičkový box pro agregaci. Další EVO by pak měla mít jeden stylopis pro celý web. Že by dárek k pátým narozeninám?

Výkon webových stránek můžeme obecně zvýšit snížením počtu dotazů na server, snížením objemu přenášených dat, optimalizacemi HTML kódu a v neposlední řadě optimalizací výkonného kódu aplikace. První tři pravidla lze uplatnit i na obyčejných prezentacích, proto se na ně podíváme blížeji.

Snížení počtu dotazů na server

Prvním krokem v optimalizaci by mělo být snížení počtu dotazů na server. Čím víc dotazů, tím více se musí přenášet dat, tím více musí server vynaložit prostředků na jejich obsloužení.

Snažte se snížit počet souborů, které vaše stránka tahá s sebou. Pokuste se sloučit externí skripty do jednoho souboru, stejně tak stylopisy. Místo toho, abyste měli zvláštní stylopis pro tisk, využijte pravidla @media print. Dále omezte @import pravidla na minimum. Další spoustu dotazů mají jistě na svědomí obrázky. Využijte chytře techniku spojování obrázků a snižte tak počet dotazů na minimum.

Dalším krokem ke snížení počtu dotazů je správně nastavené kešování. Většinou se setkávám s tím, že kešování není řízeno vůbec nebo je rovnou zakázáno. To považuju za velikou chybu. Místo zakázání kešování, zkuste nastavit cache na minutu, dvě. Nedělejte to však pomocí meta tagů, to nemá žádný význam. Posílejte HTTP hlavičky. Např. Cache-Control: public, must-revalidate, proxy-revalidate, max-age=120 nastavuje veřejné kešování na dvě minuty a za tuto dobu musí jak lokální, tak proxy cache stránku obnovit.

Dalším účinným pomocníkem je Entity Tag – ETag. ETag je hash obsahu. Pokud se obsah změní, změní se i hash. Tento hash je posílán v hlavičce klientovi a ten ho může připojit do opětovného dotazu. Pokud se obsah na serveru nezměnil, server odpoví kódem 304 Not Modified. V takovém případě je odpověď krátká a přenáší se jen několik bajtů a klient ví, že může použít lokální verzi.

Správným nastavením hlaviček Cache-Control a ETag můžete svému serveru hodně odlehčit.

Snížení objemu přenášených dat

Když už máme snížený počet dotazů – tedy zátěž serveru, ve druhém kroku bychom se měli pokusit snížit trafic – množství přenášených dat. Zkoušel jsem několik technik. Rád používám XHTML protože ho pak můžu zpracovávat pomocí obecného XML readeru. A XHTML vyžaduje oproti HTML o dost bajtů navíc. Proto jsem si udělal takový malý benchmark mojí titulní stránky. Rozdíl mezi HTML a XHTML verzí je cca 3 %. Pak jsem zkusil ořezat přebytečné bílé znaky. Tam už to bylo o něco lepší úspora 13 %. Kombinace HTML bez bílých znaků pak je na šestnácti 16%. Je to sice pěkné číslo, ale zase taková úspora to není.

Proto jsem nasadil kompresi. Ta konečně přinesla kýžený výsledek – úspora 64 %. Docela zajímavý nástroj, který vám zjistí, zda kompresi používáte a kolik byste byli schopní uspořit, najdete na stránkách www.aspnetresources.com. Zkoušel jsem pokusně české portály a kompresi používá pouze Seznam.cz. Přitom zcela jistě ji dříve používal i Atlas.cz, nechápu, proč už není zapnutá.

Jak zprovoznit kompresi na vašem serveru? Pokud máte IIS 6 a možnost nastavit si server sám, tak detaily najdete v článku Enabling HTTP Compression (IIS 6.0), v případě IIS 7 zase v článku Changes to compression in IIS7. Pokud k nastavení serveru přístup nemáte, můžete použít HttpModul pro kompresi. Uživatelé Apache jistě znají mod_deflate a mod_gzip.

Správně nastavenou kompresí ušetříte trafik. Ať už platíte vy nebo váš poskytovatel, je nejen ekonomické ale i solidární mít kompresi zapnutou.

Optimalizace kódu stránky

Správně napsaným kódem se dá zrychlit vykreslování stránky.

• Pokud je vaše stránka well-formed a je validní, může být její vykreslení mnohem rychlejší.
• Pokud nastavíte obrázkům rozměry, bude vykreslování stránky plynulejší a nebude se nepříjemně natahovat.
• Pokud u dlouhých tabulek správně použijete thead, tfoot a vícero tbody, taktéž docílíte rychlejšího zpracování stránky.
• Pokud externí skripty a jiné větší objekty, na jejichž zpracování musí prohlížeč čekat, připojíte až na konec stránky, nebude se na ně zbytečně čekat na začátku nebo uprostřed. Je to třeba častý nešvar magazínů, kde se vám načte perex, pod ním se 20 sekund načítá reklama a pak najednou nablikne zbytek stránky.

Spoustu zajímavých tipů na zrychlení najdete ve vývojářské části Yahoo v článku Best Practices for Speeding Up Your Web Site. Užitečný nástroj ze stejné dílny, který vám stránku zkontroluje přímo ve vašem prohlížeči je Add-on do Firebugu s názvem Y-Slow.

Mnoho z vás si jistě řekně, „k čemu bych měl optimalizovat, když moje stránky navštěvuje pár lidí denně?“ Já jsem toho názoru, že plýtvat se nemá. Doma taky určitě nemáte neustále otevřený vodovodní kohoutek…

Tento člán je pouze spekulativní, píšu ho, abych si utřídil myšlenky a rozvedl jeden možná úplně blbý nápad.

Jak tak pročítám weblůžky narazil jsem na dva články: What I’m missing in CSS a Parametrizované CSS. A uvědomil jsem si, že podpoře lepšího psaní CSS, nebo spíš jeho použitelnosti a usnadnění práce kodérů, se moc pozornosti nevěnuje.

Rozhodl jsem se, že bych mohl napsat vlastní preprocesor pro asp.net, který rozšíří syntaxi CSS o některé nové možnosti, ale zůstane zpětně kompatibilní s lexikálními pravidly CSS. Preprocesor by měl také umožňovat komprimaci stylopisu, jak textovou, tak GZip. Měl by umět slučovat importované stylopisy a snížit tak počet http požadavků. Dále cachování a další nezbytnosti. :)

Proměnné

Prvním vylepšením CSSX jsou proměnné, které se definují na začátku dokumentu (kvůli lepší přehlednosti). Deklarace proměnné začíná zavináčovým pravidlem @var následuje název proměnné začínající na znak dolaru, např. $firemni-modra následuje dvojtečka a přiřazená hodnota. Deklaraci uzavírá středník. V praxi to může vypadat třeba následovně:

/* definice proměnných */
@var $firemni-modra: #2465B7;
@var $firemni-zelena: #A0B424;

a{color:$firemni-modra;}
a:hover{color:$firemni-zelena;}

/* další pravidla… */

V syntaxi využívám lexikální pravidla CSS, např. to, že neznámá zavináčová pravidla jsou ignorována až k následujícímu středníku nebo se ignoruje následující blok uzavřený ve složených závorkách.

Podmínky

Podmínky slouží k definování podmíněného bloku pravidel. Podmínky se definují pomocí zavináčového pravidla @if následovaného symbolem a blokem s definicemi:

@if IE6 {
/* pravidla pouze pro IE6 */
}

@if BLUE {
/* pravidla pro pozadavek  style.cssx?symbols=blue */
}

Symboly jsou definovány jednak pomocí „browser caps“ z asp.net a druhak pomocí GET parametru symbols. Podmínky jsou proto vhodné pro validní hackování stylopisu pro určité prohlížeče nebo pro skinování. Užití určitě může být povícero.

Pokud máte další nápady na rozšíření nebo vylepšení mých návrhů, klidně to písněte do komentářů, diskusi se nebráním. :)