Základy zrychlování

Rychlost, jakou se webová stránka načítá v prohlížeči, je faktor, který na návštěvníka působí po každém kliknutí, proto je důležité, aby ho pomalejší načítání stránky neobtěžovalo. Ideální stav je ten, kdy si návštěvník vůbec neuvědomí, že na něco musí čekat. Většina z nás asi už řešila otázku, jak načítání stránky urychlit. Pomineme-li optimalizaci výkonnosti samotné aplikace, tak mezi základní zásady patří odesílat prohlížeči obsah generovaný na serveru postupně, ne až potom, co se vygeneruje celá odpověď, a dále komprimovat textový obsah pomocí gzip. Výrazného zrychlení docílíme, pokud necháme prohlížeč vyměňovat data se serverem asynchronně.

V posledních letech se rozšířily i další postupy, jak rychlost načítání zrychlit:

• Obrázky, které jsou součástí grafického designu, spojovat do tzv. „CSS sprites“, což je umístění většího množství obrázků do jediného souboru. Tato technika šetří počet dotazů na server.
• Minimalizovat javascriptový kód pomocí nástrojů jako je Google Closure Compiler nebo YUI Compressor.
• Minimalizovat i CSS kód (odstranění bílých znaků, komentářů a přebytečných středníků).
• Externí javascriptové knihovny, které nejsou důležité pro zobrazení a funkčnost stránky (Google Analytics, Facebook, Skype), načítat asynchronně.

Pokud načítání stránky trvá déle, je důležité dbát na to, aby při postupném vykreslování stránky v prohlížeči nedocházelo k nepěkným mezistavům a „přeskokům“ elementů po stránce. To by vydalo na samostatný článek, ale k základním pravidlům patří: zapisovat rozměry do elementů s obrázkem, elementům s obrázkem na pozadí nastavovat i barvu pozadí, nepoužívat tabulkový layout atd. Velmi příjemné je, pokud se všechny grafické prvky načtou najednou, což je další užitečná vlastnost uvedených CSS sprites.

Diagnostika

Pokud máte chuť dále optimalizovat nebo jste zvědaví, co načítání vašich stránek nejvíce zpomaluje, doporučuji jako diagnostický nástroj použít rozšíření do prohlížeče Page Speed od Google. Rozšíření je k dispozici pro prohlížeče Google Chrome a Firefox, případně můžete použít online verzi.

Nástroj zanalyzuje stránku a vypíše vám seznam doporučení seřazený podle důležitosti. U každého doporučení je podrobný popis toho, co je třeba udělat a jakého zlepšení tím dosáhnete.

Nástroj testovanou stránku analyzuje v souladu s pravidly a osvědčenými postupy, které zformulovali vývojáři v Google. Částečně jsou to obecně známé postupy, částečně vlastní příspěvek výzkumu v Google a komunity kolem Page Speed.

Pro jistotu bych vás rád varoval před bezhlavou honbou za co nejvyšším Page Speed skóre. Nad výsledky testu je třeba se zamyslet a některá doporučení brát s rezervou (nemusí mít žádný či negativní přínos). Může se také stát, že některé výsledky jsou nepřesné či zcela špatné; nástroj je stále ve vývoji a některé vstupní informace může interpretovat chybně. (Stalo se mi, že mě upozorňoval, že není zapnutá gzip komprese, přestože byla.)

Zrychlení jako služba

Máte výsledky testu rychlosti své stránky, jak tedy postupovat dále? Přímočarou možností je nechat si poradit doporučeními z výsledků testu a upravit podle toho aplikaci a konfiguraci serveru. Ve zmíněném seznamu pravidel naleznete kromě samotných pravidel také návody a doporučení, jak daného zlepšení dosáhnout. Chcete-li být důslední, bude to vyžadovat dost mravenčí práce. Nicméně pokud máte vlastní server a používáte nějaký framework pro vaše aplikace, budete to dělat jen jednou. Existují však i rychlejší cesty.

První z nich je nedávno spuštěná služba Google Page Speed Service. Jedná se o proxy server, který přepisuje obsah poskytovaný vaším server a přitom provádí velké množství optimalizací. Služba je zatím zdarma, před nasazením si můžete otestovat, jakého zrychlení tím dosáhnete (většinou v rozmezí 25–60%).

Pokud používáte HTTP server Apache, existuje další nástroj, který je možné nasadit téměř okamžitě. Do rodiny nástrojů Page Speed patří totiž modul pro Apache mod_pagespeed, o kterém pojednáme podrobněji.

mod_pagespeed

mod_pagespeed je open source modul pro Apache, který se skládá ze sady filtrů, které automaticky provádí optimalizace webové stránky a k ní připojených zdrojů (JavaScript, CSS i obrázky).

Instalace

Kromě zdrojových kódů můžete stáhnout i zkompilované deb a rpm balíčky. V prostředí odvozeném od Debian, CentOS či Fedora je tedy instalace bezproblémová, do systému se rovněž přidá repozitář Google, takže dochází k pravidelným aktualizacím. Mod se po instalaci sám aktivuje, takže po restartu serveru by měl mod_pagespeed už dělat svou práci dle výchozí konfigurace. Podle hlavičky X-Mod-Pagespeed v HTTP odpovědi serveru poznáte, že je mod aktivní.

Mod je implementován jako output filtr pro Apache 2, který přepisuje veškerý HTML výstup serveru. Pokud některý aktivní modul používá direktivu SetOutputFilter (což je docela pravděpodobné), nebude mod_pagespeed fungovat, jelikož používá direktivu AddOutputFilterByType. V tom případě je třeba všechny direktivy SetOutputFilter v konfiguraci serveru nahradit direktivou AddOutputFilter.

Konfigurace

Konfigurace je v souboru pagespeed.conf. Obsah souboru je bohatě komentován, takže základní konfiguraci zvládnete, aniž byste museli studovat dokumentaci. Mod se zapíná pomocí direktivy ModPagespeed (on|off). Při debugování se hodí rychle zapnutí či vypnutí modu přidáním parametru do URL: ModPagespeed=(on|off).

Mod obsahuje sadu filtrů, které lze jednotlivě zapínat či vypínat pomocí direktiv ModPagespeedEnableFilters a ModPagespeedDisableFilters (mohou se opakovat). Zapnuté filtry lze kontrolovat i přes URL pomocí parametru ModPagespeedFilters.

Důležitá je direktiva ModPagespeedRewriteLevel, která určuje, jaké filtry jsou ve výchozím stavu zapnuté, čímž zjednodušuje konfiguraci. Má dvě hodnoty: PassThrough a CoreFilters. Při první úrovni jsou všechny filtry vypnuté, druhá úroveň obsahuje ty filtry, které by měly být bezpečné pro většinu webových stránek (v níže uvedeném seznamu mají název tučně), v budoucích verzích se však tento seznam může rozšiřovat, pokud některé další filtry budou dostatečně vylepšeny. Některé filtry nejsou do úrovně CoreFilters zařazeny, protože mají v průměru malý přínos, jejich zapnutí potom záleží na vás.

V následující tabulce popíšeme nejdůležitější filtry. Doporučuji si při tom procházet příklady, jak jednotlivé filtry v praxi fungují na konkrétních HTML dokumentech.

Filtry zapínejte s rozvahou, některé mohou mít kvůli vyšší výpočetní náročnosti při zpracovávání HTML dokumentu na serveru ve výsledku zanedbatelný, nebo dokonce negativní vliv – například elide_attributes či remove_quotes. Velice také záleží na tom, jak kvalitní výstup vytváři vaše serverová aplikace, některé filtry jako combine_heads pak mohou být zcela zbytečné.

Při výchozí konfiguraci v úrovni CoreFilters jsem na našich webech narazil na jediný problém, kterým byly pluginy Facebooku, které nerozumí zkráceným URL adresám v HTML atributech vytvořených filtrem trim_urls, neporozumí například URL //zdrojak.root.cz.

Mod má kromě filtrů také několik direktiv, které určují, jak bude zacházeno s doménami přepisovaných URL. Jednou z nich je direktiva ModPagespeedShardDomain, pomocí které lze nastavit, aby přepsané URL byly rovnoměrně rozděleny mezi několik domén (doporučený počet je 2–4) – jedná se o tzv. „sharding“ domén. Jelikož prohlížeče omezují počet aktivních připojení v rámci jedné domény, docílí se tímto paralelizace stahování jednotlivých souborů, čímž se sníží celková doba stahování.

Se zapnutým domain sharding však mají problémy javascriptové knihovny (například selectivizr či TinyMCE), které si samy ze serveru stahují další soubory, protože jim prohlížeč nepovolí stahovat obsah z jiných domén, než samy pochází (cross domain policy). Pak nezbývá než upravit kód dotyčných knihoven, aby při dotazování serveru uváděly URL včetné správné domény (nebo použít CORS).

Závěr

Výše popsaným způsobem lze diagnostikovat místa, které nejvíce zpomalují načítání stránky v prohlížeči. Zvýšit rychlost načítání stránek kombinací řady osvědčených způsobů nám pomůže snadno nasaditelný modul mod_pagespeed pro server Apache.

Na závěr se podívejte, jaké zrychlení lze s mod_pagespeed dosáhnout.