Rychlé webové stránky výrazně zlepšují uživatelský prožitek. Doba načítání stránek má navíc vliv na pořadí přirozených výsledků vyhledávání na Seznamu a na Googlu a je také součástí hodnocení kvality stránek (Quality Score) v PPC reklamě. V době, kdy počet uživatelů na mobilních zařízeních překonal počet uživatelů na desktopech, je čím dál důležitější, aby se stránka načetla rychle - ať už je dostupné připojení jakkoli kvalitní. Jak na to?
Vývoj počtu uživatelů mobilních a desktopových zařízení
Zdaleka ne všichni a všude disponují ve svých mobilních zařízeních rychlým internetovým připojením. Optimalizace rychlosti načítání jde tedy v první řadě vstříc uživateli. S každou vteřinou, kterou návštěvník na načtení webové stránky čeká, se výrazně zvyšuje riziko, že ji nespokojen opustí. Nástroj Google PageSpeed Insights například proklamuje, že ze stránky odejde polovina lidí, pokud se jim nenačte do 3 vteřin.
Doba načtení webových stránek je ale důležitá také z marketingového hlediska . V rámci Quality score ji zohledňuje algoritmus Google Adwords a čím dál významnější roli hraje také v optimalizaci webu pro vyhledávače (SEO).
Na to, jak rychle se stránka načte, má kromě rychlosti internetového připojení vliv řada dalších okolností. Načtení webové stránky se skládá z posloupnosti následujících kroků:
Z toho plyne, že dobu načítání a vykreslování webu může brzdit několik věcí:
Na měření rychlosti načítání webových stránek existuje řada šikovných nástrojů. Některé jsou zcela zdarma, za jiné je třeba zaplatit, abyste získali jejich plnou funkcionalitu.
Webpagetest.org dokáže změřit rychlosti načtení z různých lokalit, mezi nimiž nalezneme i Prahu. V pokročilém nastavení je k dispozici také možnost změření doby opakovaného načtení stránky, tedy po té, kdy si stránku uloží prohlížeč do mezipaměti. Měření je rovněž možné emulovat na mobilní prohlížeč. Výstupem je vodopádový graf (viz obrázek níže) a ohodnocení hlavních složek, které mohou při načítání dělat problémy (Time To First Byte, Obrázky, Komprese, Cache, používání CDN). Velkou výhodou jsou konkrétní doporučení toho, co a jak optimalizovat.
Vodopádový graf v nástroji webpagetest.org
Nástroj od Google je vhodný zejména pro rychlé testování. Stejně jako webpagetest.org poskytují PageSpeed Insights doporučení, jak web po stránce rychlosti načítání zlepšit. Velmi užitečná jsou zejména doporučení ohledně CSS a JS souborů, které blokují plynulé renderování stránky (viz obrázek níže).
Pagespeed insights: soubory blokující vykreslení
Informace o rychlosti načítání poskytují také nástroje pro webmastery integrované v prohlížeči Google Chrome (kliknutí pravým tlačítkem a vybrání možnosti "prozkoumat"). Překliknete na záložku Timeline, obnovíte stránku a nástroj záhy ukáže graficky vyjádřený proces načítání. K dispozici je také log událostí. Záložka Network potom poskytuje užitečné informace o výkonu sítě.
Chrome Dev Tools - záložka Timeline
Dalšími nástroji, které poskytují užitečná data a podklady pro optimalizaci doby načítání jsou například Pingdom nebo GT Metrix.
Optimalizace obrázků je jednou z nejsnadnějších a nejefektivnějších činností, která vede k okamžitému zrychlení webu. Pomohou Vám nástroje, které umožňují optimalizovat obrázky dávkově a bez ztráty kvality. Za všechny vyjmenuji například Kraken.io, IrfanView nebo plugin Smush pro WordPress. Novinkou v optimalizaci obrázků ve formátu JPEG je enkodér Guetzli, který dokáže obrázky v tomto formátu zmenšit až o 35% bez ztráty kvality pro lidské oko.
Zásady:
Optimalizací Cache říkáte internetovému prohlížeči na jak dlouho si má určité soubory uložit do své mezipaměti. S takovými soubory je potom při opakovaném načtení schopen pracovat výrazně rychleji. Kešování si můžete nastavit v konfiguračním souboru .htaccess. Kód může vypadat například takto:
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault A600
ExpiresByType text/javascript A604800
ExpiresByType application/javascript A604800
ExpiresByType text/css A604800
ExpiresByType image/gif A604800
ExpiresByType image/png A604800
ExpiresByType image/jpeg A604800
ExpiresByType image/x-icon A604800
ExpiresByType text/html A60
</IfModule>
Více informací:
Sloučení Javascriptových a CSS souborů může výrazně snížit počet požadavků na server a dobu načtení stránky výrazně zrychlit. Sloučení můžete samozřejmě provést manuálně, ale k dispozici jsou i hotová automatizovaná řešení pro vývojáře.
Podobný postup lze aplikovat také u obrázků. V případě ikonek se často uplatňuje tzv. CSS sprite, tedy sloučení všech malých obrázků do jednoho, který se načte jednou a pomocí CSS atributů (rozměry, XY pozice v rámci CSS spritu) je možné z něj konkrétní ikonku vybrat.
Další možností optimalizace je Gzip komprese soborů, která snižuje objem přenášených dat. Nastavit lze opět v .htaccess.
CDN (Content Delivery Network) výrazně zrychlí váš web v situaci, kdy působíte na globální úrovni, a na váš web chodí lidé z různých částí světa. Zjednodušeně vzato se jedná o síť úložišť rozmístěných po celém světě, kde jsou uložena statická data webu, jako jsou obrázky, videa nebo CSS soubory. Pokud si web otevře například uživatel v Severní Americe, tato data se mu načtou z jemu bližší lokality (např. z New Yorku) a nemusí putovat přes celý svět ze serveru umístěného v ČR.
Schématická ukázka CDN Zdroj: https://4cornermedia.com
Výhodou CDN může být také to, že pro poskytování obsahu často používají protokol HTTP/2, který je rychlejší než standardní HTTP protokol (viz níže). Pokud o využití CDN vážně uvažujete, doporučuji zamířit například na stránky CDN77. Český startup je jednou z předních firem v oboru.
Time To First Byte (TTFB) je metrika, která zaznamenává dobu odpovědi serveru na dotaz prohlížeče při načítání webové stránky. Čas se měří od odeslání požadavku až po přijetí prvního byte odpovědi. TTFB ovlivňují zejména tyto faktory:
Problém s velkou vzdáleností mezi lokalitami požadavku a serveru vyřeší CDN (viz výše). Zbytek optimalizace je zejména záležitostí procesů na serveru.
Více informací:
Rychlost, potažmo výkon webu lze zlepšit také optimalizací přednačítání. O co jde? Zejména Google Chrome, ale v zásadě většina novějších verzí standardních prohlížečů, podporuje přednačítání prvků ve formě tagů v hlavičce HTML, jako je například <link rel="prerender" ...>. Tyto umožňují výrazně zrychlit renderování stránky přednačítáním jejích důležitých prvků (preload, prefetch) nebo spekulativně přednačíst předpokládanou následující navštívenou stránku (prerender). Jedná se o:
Více informací:
Pro zpravodajské servery a blogy lze docílit výrazného zrychlení webu prostřednictvím Accelerated Mobile Pages (AMP). Jedná se o relativně novou technologii, rollout na českém Google proběhl na podzimu roku 2016. Stránky, které na AMP běží, poznáte na mobilu ve výsledcích vyhledávání Google nebo na své Facebookové zdi podle ikonky blesku umístěné u příspěvku (viz obrázek níže). Takové stránky se načítají i na pomalejších připojeních téměř okamžitě. Proč?
AMP stránky ve výsledcích vyhledávání
Princip spočívá v tom, že poskytnete médiu, které s AMP umí pracovat (Google, Facebook apod.) alternativní „AMP verzi“ svých stránek, která je redukovaná podle AMP standardu pouze na povolené HTML, CSS a JS prvky. Načítání urychluje také speciální Google AMP Cache, která statický obsah poskytuje rychleji. Pro podrobnější vysvětlení mechanismu fungování AMP se podívejte na následující video:
Uživatele WordPressu potěší, že pro převedení příspěvků na jejich webových stránkách do AMP existuje snadno použitelný plugin.
I české hostingy pomalu začínají nabízet nový protokol HTTP/2. Díky „multiplexování“ dokáže zpracovávat více požadavků naráz a tak přenos dat výrazně zrychluje. Podle údajů serveru W3techs.com běží v současnosti (březen 2017) na protokolu HTTP/2 12,8% všech světových webových stránek.
Více informací:
Jaké máte zkušenosti s optimalizací rychlosti webu vy? Podělte se o ně s ostatními v komentáři pod článkem.
