Ještě rychlejší webové stránky

V článku si probereme možnosti, jak optimalizovat rychlost načítání webové stránky v prohlížeči nezávisle na výkonnosti samotné aplikace na serveru. Tématem dne je optimalizace komunikace mezi serverem a prohlížečem, kešování a efektivita kódu, který prohlížeč zpracovává. Představíme si i některé užitečné nástroje.

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.

Název filtru Popis
Optimalizace kešování

extend_cache
Přepisuje URL adresy připojených souborů v HTML dokumentu, tyto soubory kešuje a v HTTP hlavičce jim nastavuje hodnotu max-age na jeden rok, čímž donutí prohlížeč (proxy server), aby je kešoval po dlouhou dobu. Mod pravidelně každých 300 sekund kontroluje, zda se obsah souboru nezměnil. Pokud se změní, soubor znovu zakešuje a změní mu URL.
outline_css,
outline_javascript
Objemný CSS, resp. JavaScript kód, který se nachází přímo v HTML, přesune do samostatného souboru, který je pak možné kešovat.
Minimalizace počtu HTTP dotazů
combine_css,
combine_javascript
Pokud stránka odkazuje na více CSS, resp. JavaScript souborů (v rámci domény), spojuje tyto soubory do jednoho.
inline_css,
inline_javascript
Obsah malých externích CSS, resp. JavaScript souborů vkládá přímo do HTML kódu dokumetu.
sprite_images
Tento filtr vyžaduje zapnutý filtr rewrite_css. Deteguje obrázky (zatím pouze PNG a GIF) použité jako pozadí v CSS a kombinuje je do jednoho velkého obrázku, CSS kód je podle toho patřičně upraven. Toto je možné bezpečně provádět jen tehdy, pokud je HTML element stejně velký nebo menší než obrázek na pozadí, proto se filtr aplikuje pouze na CSS selektory, které kromě pozadí nastavují i šířku a výšku, které jsou menší nebo rovny rozměrům obrázku.
Minimalizace velikosti stahovaných dat a optimalizace vykreslování stránky
collapse_whitespace
Odstraňuje zbytečné bílé znaky z HTML souboru, kromě obsahu elementů <pre>, <textarea>, <script> a <style>.
Rizika: Nelze použí CSS vlastnost white-space: pre na libovolný element.
combine_heads
Pokud HTML dokument obsahuje více sekcí <head>, zkombinuje je do jedné.
Rizika: Dojde ke změně pořadí CSS a JS kódu, pokud se nějaký vyskytuje mezi dvěmi <head> sekcemi.
elide_attributes
Odebere z HTML dokumentu všechny zbytečné atributy, tj. ty, které
mají defaultní hodnotu, a zkrátí tzv. boolean atributy (například disabled="disabled" na disabled).
Rizika: Například přestane fungovat CSS selektor input[type="text"].
rewrite_images
Optimalizuje obrázky: vkládá width a height atributy do elementů <img>, malé obrázky nahrazuje pomocí Data URI, provádí rekompresi obrázků (odstraňuje veškerá metadata), přeškáluje obrázky, které jsou větší než <img> element. Filtry lze ovládat jednotlivě, jejich názvy jsou insert_image_dimensions, inline_images, recompress_images, resize_images.
rewrite_javascript
Minimalizace JavaScript kódu pomocí programu JSMin.
remove_quotes Odstraňuje zbytečné úvozovky v atributech HTML  elementů.
remove_comments Odstraňuje HTML komentáře.
rewrite_css,
rewrite_style_attributes
,
rewrite_style_attributes_with_url
Minimalizace CSS – odstraňuje komentáře, bílé znaky, zbytečné středníky, zkracuje jména barev.
trim_urls
URL adresy v atributech src a href přepisuje tak, aby byly relativní vůči URL aktuálního dokumentu.
convert_meta_tags
HTML meta hlavičky s atributem http-equiv jsou zkopírovány a převedeny do hlavičky HTTP odpovědi.
move_css_to_head
Všechny <link> elementy odkazující na CSS soubory jsou přesunuty do <head> elementu.
Ostatní
add_instrumentation
Tento filtr vkládá do stránky JavaScriptový kód, který měří a odesílá dobu načítání stránky zpátky na server. Naměřené hodnoty je možné statisticky zpracovávat pomocí mod_pagespeed_beacon.
make_google_analytics_async
Úpraví kód Google Analytics, aby se načítal asynchronně.

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.

Věděli jste, že nám můžete zasílat zprávičky? (Jen pro přihlášené.)

Komentáře: 4

Přehled komentářů

snek Diky
Honza Zná někdo optimizator.cz?
Jan Prachař Re: Zná někdo optimizator.cz?
NgN Debiam - GPG error
Zdroj: https://www.zdrojak.cz/?p=3587