Rychlost webu – díl II.
Nástroj YSlow od Yahoo
vám poví, kde jsou slabiny vašeho webu a napoví, jak je opravit a jak se jich do budoucna vyvarovat. Kompletní návod v angličtině najdete na adrese http://developer.yahoo.com/yslow/help/
Konkrétní testy, které YSlow provádí a jejich vysvětlení najdete na adrese http://developer.yahoo.com/performance/rules.html
Minimalizujte HTTP požadavky
Každý CSS soubor, externí Javascript, každý obrázek (ano, i ty v CSS) se načítá ze serveru a zpomaluje načítání stránky. Snažte se, aby těchto souborů byl co nejmenší počet.
- Zkombinujte CSS soubory do jednoho (pokud možno), ať už pomocí skriptu nebo ručně.
- To samé můžete udělat s Javascripty.
- Desítky mrňavých ikonek jsou zabijáci HTTP požadavků. Zkuste využít CSS Sprites!
- Pro malé obrázky, které máte v HTML dokumentu můžete využít DATA URIs.
Používejte Content Delivery Network (CDN)
To platí pro mezinárodní weby, pro ty české moc význam nemá. Velmi zjednodušeně, statické soubory (css, js, obrázky) jsou servírovány ze serveru, který je nejblíže návštěvníkovi stránek.
Používejte hlavičky Expires a Cache-Control
Kešování je nejdůležitější a nejefektivnější metoda pro urychlení načítání webu. Jakmile si návštvník poprvé načte logo, css soubor nebo javascriptovou knihovnu, není důvod k tomu, proč by měl při dalším procházení webu stahovat ty samé soubory znovu a znovu, pokud se nezměnil jejich název. Tady jsem našel praktickou ukázku.
GZipuj!
Komprese je podporována ve většině nových prohlížečů, proč toho nevyužít? Gzipovat můžete HTML stránku, CSS soubory i Javascript. Pro server Apache existují moduly mod_gzip a mod_deflate. Tady je anglický článek na toto téma.
CSS styly patří nahoru, Javascript dolů!
Yahoo vyzkoumal, že načtením CSS souborů v hlavičce HTML se stránka načítá progresivně (postupně). Oproti tomu načítání Javascriptu před koncem HTML dokumentu nedochází k blokaci paralelních HTTP spojení, takže se na tyto soubory zbytečně nečeká (návštěvník vidí obsah dřív). Nezapomeňte však veškeré Javascriptové operace s DOM a vypisováním textu dělat až po načtení celého dokumentu. S pomocí jQuery jednouše:
$(document).ready(function() {
// kod, ktery se provede po nacteni stranky
});
Zmenšujte!
Efektivně zmenšit se dá Javascriptový kód, z CSS kódu lze alespoň odebrat komentáře a bílé znaky, obrázky lze také optimalizovat. Tady je super knihovna minify, která zvládne JS i CSS. Na obrázky pak můžete zkusit nástroj Smush It, dokáže zmenšit obrázek i o desítky procent.
Nejdříve vysypte hlavičku
Zajímavá technika, kterou jsem v praxi ještě nevyzkoušel. Kód je jednoduchý převzal jsem jej z Yahoo. Vpodstatě stačí do šablony za konec HEAD vložit PHP funkci flush(), která vypíše obsah bufferu ihned. Než se tedy dokončí celá HTML stránka, lze těch několik desítek až stovek milisekund efektivně využít.
<!-- css, js --> </head> <?php flush(); ?> <body> ... <!-- content -->
Méně důležité objekty načítejte později
Mrkněte na hlavní stránku Googlu. Co se načte první? Logo a vyhledávací pole. Pohnete myší a máte horní panel a spodní odkazy. Na nějaké stránce jsem viděl super techniku, obrázky uvnitř článku se načítaly, až když jsem k nim došel skrolováním. Geniální ;) Podívejte se na ImageLoader od Yahoo.
Další tipy z Google Page Speed a pokročilé techniky zase příště ;)
