Proč a jak zrychlit web?

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?

image

Vývoj počtu uživatelů mobilních a desktopových zařízení

Proč optimalizovat dobu načítání webu?

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).

 

Co všechno má na rychlost načítání webu vliv?

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ů:

  1. Prohlížeč v DNS vyhledá IP adresu, podle jména domény, které bylo zadáno do adresního řádku a pokouší se k ní připojit.
  2. Jakmile je připojení nastavené, začíná se zpracovávat zdrojový kód.
  3. Prohlížeč ze staženého HTML zpracovává (parsuje) Document Object Model (DOM), pokud nenarazí na CSS, v takovém případě začíná parsovat CSS do CSS Object Modelu (CSSOM).
  4. Pokud v jakémkoli z těchto bodů narazí prohlížeč na Javascript, parsování se přerušuje a spouští se daný kód JavaScriptu (pokud neprobíhá asynchronně, viz AJAX).
  5. Po provedení těchto kroků prohlížeč začíná renderovat (vykreslovat) webovou stránku. Doba načítání tak trvá, dokud nejsou všechny prvky na stránce vykresleny.

Z toho plyne, že dobu načítání a vykreslování webu může brzdit několik věcí:

  • Špatné připojení.
  • Poloha serveru (vzdálenost od místa požadavku).
  • Neoptimalizované procesy na serveru (např. databázové dotazy).
  • Příliš požadavků na server (příliš mnoho souborů ke stažení).
  • Příliš velké soubory ke stažení.
  • CSS.
  • JavaScript.


Jak rychlost načítání měřit?

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

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.

image

Vodopádový graf v nástroji webpagetest.org

Google PageSpeed Insights

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).

image

Pagespeed insights: soubory blokující vykreslení

Chrome Dev Tools

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ě.

image

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.

Jak dobu načítání zlepšit?

Optimalizace obrázků

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:

  • Kde to jde, nahraďte PNG soubory formátem JPG
  • Používejte optimalizované JPG soubory
  • Načítejte obrázky ve velikosti, ve které jsou na webu používané (nezmenšujte je HTML atributem nebo pomocí CSS)

Optimalizace Cache

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í:

Slučování souborů

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.

Gzip Komprese

Další možností optimalizace je Gzip komprese soborů, která snižuje objem přenášených dat. Nastavit lze opět v .htaccess.

Využití CDN

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.

image

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.

Optimalizace Time To First Byte

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:

  • Síťová latence (vzdálenost serveru od lokality požadavku, počet síťových uzlů apod.).
  • Čas, který server potřebuje ke zpracování požadavku.

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í:

"Přednačítání" - prefetch, preload, preconnect a spol.

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:

  • <link rel="preload" href="/skript.js" as="script">
  • <link rel="prefetch" href="/obrazek.png">
  • <link rel="dns-prefetch" href="domena.cz">
  • <link rel="prerender" href="domena.cz">
  • <link rel="preconnect" href="cdn.domena.com" crossorigin>

Více informací:

AMP – Accelerated Mobile Pages

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č?

image

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.

HTTP/2

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.

loading...

  • Celkový průměr hodnocení: 5.0 z 5
  • 1
  • 2
  • 3
  • 4
  • 5

6. dubna 2017

Zaujal vás článek? Sdílejte ho.

Máte k článku výhrady? Dejte to autorovi sežrat!

Zatím nikdo nepřidal komentář. Buď první!

  (nebude nikde zveřejněn)
Položky označené hvězdičkou jsou povinné