Vyžívám se v optimalizaci obzvlášť, pokud je vidět a cítit. Jednou z věcí, kterou jsem se v poslední době zabýval je minimalizace rychlosti načítání stránek a aplikací ve webových prohlížečích. Rychlost, jakou se stránka načte, je první věc, která na návštěvníka působí, proto je důležité, aby pomalejší načítání stránky neobtěžovalo, nejlépe pokud by si ho ani nevšiml. Dodržuji tyto zásady:

• Obrázky, které jsou součástí grafického designu spojovat do tzv. „CSS sprites“, což jsou spojení většího množství obrázků do jediného obrázku. Tato technika šetří počet dotazů na server.
• Nepoužívám inline CSS deklarace, abych prohlížeči umožnili si je kešovat.
• CSS soubory spojuji do jednoho, výsledný kód minimalizuji (odstraňuji bílé znaky, komentáře a přebytečné středníky).
• Rovnež javascriptové soubory spojuji do jednoho a minimalizuji pomocí Google Closure Compileru.
• CSS kód píšu v rámci možností co nejoptimálněji. Nepoužívám univerzální selektor, v jednom selectoru nepoužívám více než jeden descendant selector (pokud možno žádný), upřednostňuji child selectory. Obecně se snažím, aby selectory byly co nejspecifičtější, dávám přednost id a class selectoru před tag selektorem. Dbám, aby se CSS deklarace příliš neopakovali. Nepoužívám CSS hacky, pro Iternet Explorer mám speciální CSS šablony.
• Javascriptové knihovny, které nejsou důležité pro zobrazení a funkčnost stránky (Google Analytics, Facebook, Skype), načítám asynchronně, aby nezdržovali načtení stránky.

Jak dále zrychlovat?

S tímto jsem se však nespokojil a hledal jsem další způsoby, jak načítání stránek ještě zrychlit. Rozhodl jsem se pro modpagespeed od Googlu, což je mod pro Apache čili rozšíření webového serveru. Je k němu také k dispozici analytický nástroj. Modpagespeed toho umí opravdu hodně, je intenzivně vyvíjen, některé funkce jeho jsou zatím spíše experimentální a do budoucna slibné. Pro bezproblémový provoz rozšíření je důležité si uvědomit, že řada funkcí vyžaduje, abychom se řídili jistou konvencí například při kódování stránky. Pokud necháváme z html kód stránky odstraňovat všechny bílé znaky, nelze přirozeně používat CSS vlastnost white-space: pre. 

Modpagespeed zjednodušuje řadu věcí, o kterých jsem psal výše (například kombinování a minimalizace CSS souborů). V produkčním prostředí mám dále zapnuté:

• Rozšíření keše – modpagespeed spravuje keš všech souborů, které se načítájí spolu s html stránkou. Zařídí, aby je prohlížeč kešoval po dostatečně dlouhou dobu, a umí říct prohlížeči, pokud se soubor změní.
• Obrázky – překódovává obrázky a optimalizuje formát, odstraňuje přebytečné pixely, malé obrázky transformuje na inline data, přídává šířku a výšku do <img> tagů.
• Minimalizace HTML souboru – odstraňuje z něj všechny nepotřebné bílé znaky.
• Domain sharding – soubory se nestahují z jedné hlavní domény, ale z několika. Je experimentálně ověřené, že prohlížeč v tomto případě navazuje více spojení na server. Pro zrychlení se na dodatečných doménách nepoužívají cookies.
• A další.

Instalace modpagespeed

Instalace modu na server byla jednoduchá, pro distribuci Debian existuje deb balíček pro 32- i 64bitový systém. Mod se po instalaci i sám aktivuje, takže po restartu serveru by měl modpagespeed už dělat svou práci, to poznáte podle hlavičky „X-Mod-Pagespeed“ v HTTP odpovědi serveru.

Můžete (jako já) narazit na problém, pokud některý aktivní mod používá direktivu SetOutputFilter. Jelikož modpagespeed přidává filtr pomocí AddOutputFilterByType, je třeba všechny direktivy SetOutputFilter v konfiguraci serveru nahradit direktivou AddOutputFilter.

Při základní a výchozí konfiguraci jsme na našich webech nenarazili na žádný problém. Jedinou výjimkou byly pluginy Facebooku, které nerozumí zkráceným adresám vytvořených filterm trim_urls, ten například url http://www.google.com/ zkrátí na //www.google.com.

Po zapnutí domain sharding se projevili problémy s javascriptovými knihovnami selectivizr a TinyMCE. V prvním případě se mi problém podařilo snadno vyřešit –, protože selectivizr stahuje a parsuje CSS soubor připojený ke stránce, stačilo zajistit, aby si onen soubor stáhnul ze stejné domény, ze které pochází on sám. 

V případě TinyMCE bylo problémů více – předeším kvůli cross domain policy prohlížečů, která neumožňuje javascriptu stahovat soubory z jiných domén, než sám pochází, a zrovna TinyMCE stahuje velké množství souborů. Nakonec bylo nutné přistoupit k deaktivaci domain sharding pro všechny stránky, které používají TinyMCE.

ModpageSpeed úspěšně používám již téměř rok, rychlost načítání stránek se znatelně zlepšila.