Jak píší vývojáři z Google: „The web should be fast.“ Rychlost webů a aplikací je velmi důležitá pro uživatelskou spokojenost. Pokud je aplikace pomalá, dochází nejen ke ztrátě návštěvníků, ale i potenciálních zákazníků. Když je stránka pomalá, uživatelé na ní stráví méně času.
A od té doby, co Google zahrnul do algoritmu hodnocení stránek i rychlost načítání, je rychlost důležitá i z pohledu SEO - optimalizace pro vyhledávače.
Optimalizace na straně webového serveru
Optimalizace na webovém serveru jsou změny ve zdrojových kódech, důsledkem čehož má být snížení časové náročnosti webu a optimalizace databáze – její normalizace, správné nastavení indexů a pod. Velmi efektivní technikou je použití memcache, kdy obsah, který se často nemění, nemusíme generovat ani získávat z databáze.
V současné době je dobře optimalizovaná aplikace standardem a zpracování jedné podstránky by mělo trvat maximálně 1 sekundu. Základem tvorby rychlého webu je dodržování několika programátorských konvencí.
Optimalizace na straně webového klienta
Ze statistik vyplývá, že až 80% času potřebného na zobrazení stránky je použitého na frontend. Pokud se jedná o rozsáhlé komplexní webové aplikace, nejefektivnější cesta je optimalizovat rychlost načítání na straně prohlížeče.
Nástroje na analýzu rychlosti webových aplikací
V ui42 jsme při tvorbě webů vyzkoušeli množství nástrojů, např. Google page speed, Yslow, Pingdom tools, GTMetrics a pod. Zatím nejlepším nástrojem je Webpagetest.org. Umožňuje testovat prostřednictvím mnoha dedikovaných serverů z celého světa, vybrat rychlost připojení, možnost udělat za sebou až 10 testů a vypočítat průměrný čas načítání celého webu jako i jednotlivých komponentů.
Hlavní techniky optimalizace rychlosti
Nastavení hlaviček cachování
Moderní webové stránky obsahují množství obsahu, který si prohlížeč umí uložit do vyrovnávací paměti (cache). Pokud máme správně nastavené hlavičky cachování pro jednotlivé komponenty, prohlížeč tyto komponenty nemusí opět stahovat ale použije ty, které má již stažené a uložené v cache. Jedná se hlavně o obrázky, CSS soubory, Javascript soubory a další. Musíme přitom dávat pozor na to, abychom v případě změny prohlížeči řekli, že si má změněné zdroje stáhnout znovu. Například pokud děláme redesign webu a uděláme změny CSS souborů, pokud to prohlížeči neřekneme, tak bude mít množství opakovaných návštěvníků rozbitou stránku, protože budou mít nové HTML ale staré CSS.
Optimalizace velikosti obrázků
Každý obrázek, který je na webu, by měl být stahován v přesně takové velikosti, v jaké je potřebný na webu. Velké obrázky znamenají přenášení většího množství údajů, než je potřebné. Některé weby stále přenášejí obrázek ve větším objemu, než je potřebný. To znamená nejen pomalejší načítání, ale i zvýšený traffic a tím pádem vyšší provozní náklady.
Redakční systém Buxus má vlastní nástroj, který každý obrázek vygeneruje přesně ve velikosti, která je potřebná. Pozor na to, aby měl daný obrázek vždy stejnou URL, protože obrázky se cachují a tím pádem se nemusí při opakovaném zobrazení stahovat znovu.
Minimalizace počtu HTTP requestů
Nejvyšší podíl na čase zpracování stránky má stažení všech komponentů na stránce: obrázky, CSS soubory, javascript soubory, flash, atd. Redukováním počtu komponentů na stránce můžeme snížit počet HTTP požadavků nezbytných na zobrazení stránky a zrychlit web.
Jednou z možností jsou CSS sprites – tato technika je kombinace více obrázků do jednoho a tím pádem snížení počtu stahovaných obrázků a tedy i požadavků na server. Výsledný obrázek může někdy sice mít větší velikost, ale rychlost načítání je v důsledku snížení requestů vyšší než u více obrázků. Tato technika je ale použitelná, pouze když jsou obrázky na jedné stránce. To znamená, že ji můžeme použít například na pozadí navigace, tlačítka a pod, v žádném případě ne na produktové obrázky.
Kombinovat můžeme i další zdroje jako například JavaScript soubory. Musíme dát ale pozor na to, aby výsledný soubor nebyl příliš velký a neobsahoval velké části kódu, které se využívají pouze v některých specifických částech webu, ke kterým se zákazník často ani nedostane.
Rozložení obrázků na více subdomén (domén)
Webové prohlížeče limitují počet paralelních spojení na jednu doménu (Firefox - 6 spojení, Chrome – 6 spojení, IE7 – 2 spojení), přičemž celkový počet paralelních spojení na všechny domény je až 30 – 60. Pokud máme na jedné podstránce hodně obrázků (případně i dalších souborů), můžeme je rozložit na více subdomén (nebo domén) např. img1.mujweb.cz, img2.mujweb.cz, img3.mujweb.cz. Velkou výhodou je, že prohlížeč bere do úvahy každou subdoménu jako samostatnou doménu a nemusíme mít kvůli obrázkům zaregistrované více domén. Při testování různého počtu takovýchto subdomén jsme v ui42 zjistili, že nejvyšší zrychlení je při použití 2 – 4 subdomén. Musíme ale být opatrní, protože při vyšších počtech nemusí dojít k zrychlení, dokonce může dojít ke zpomalení.
Nevyhnutelné je zachování konzistence jednotlivých subdomén, abychom neztratili další benefity jako cachování. To znamená, že pokud máme obrázek na jedné subdoméně, prohlížeč si ho uloží do cache, aby ho nemusel stahovat opět. Pokud se obrázek nachází i na jiné stránce webu, musíme mu ho nabídnout ze stejné subdomény, jinak se bude zbytečně dvakrát stahovat, důsledkem čehož může být spíše zpomalení než zrychlení webu.
Pokročilejší metodou při této technice je využití služeb jako Flickr, Piccasa a pod. které mají API a také vlastní CDN.
CDN (Content delivery network)
Fyzická vzdálenost jednotlivých serverů od uživatele má také vliv na rychlost načítání. Při tvorbě zejména mezinárodních webů má velký smysl použití CDN sítě. Ta se stará o to, aby se uživatel dostal k obsahu z nejbližšího serveru. Použití CDN sítě je někdy náročné, zejména při komplexních webových aplikacích, ale pokud používáme různé pluginy jako např. jQuery, Google maps a pod. které mají vlastní CDN, je vhodné je do stránky vložit přímo z CDN. Tím také redukujeme traffic na svůj server a umožníme paralelní načítání, protože se daný plugin bude stahovat z jiné domény.
Vaše zkušenosti s optimalizací rychlosti webů?
Uvedli jsme si několik základních technik na optimalizaci rychlosti webů a webových aplikací. Existuje velké množství dalších, ke kterým se možná dostaneme v dalších pokračováních blogu.
Máte nějaké ověřené techniky, které používáte na zrychlení svých webů?
