Optimalizace rychlosti webu: Užitečné nástroje a tipy pro měření výkonu vašich stránek

Kvě 30, 2022 | Optimalizace, Webové stránky

Rychlost načítání webu je hned po atraktivitě stránky druhým nejdůležitějším faktorem pro vaše potenciální zákazníky. Optimalizace rychlosti webu není důležitá jen z technického pohledu, ale především z toho uživatelského. Vaše stránka může mít perfektní grafiku, vypilované texty, srozumitelné dělení do podsekcí i skvělé logo: pokud ale zapomenete na rychlost webu, bude lidská netrpělivost hrát proti vám, vašim konverzím a tedy potenciálním příjmům. A co je ještě zásadnější problém: budete se objevovat na nižších pozicích ve vyhledávačích.

Co je rychlost webu a proč se jí zabývat?

Rychle se načítající, hladce běžící web výrazně zvyšuje vaše šance přilákat potenciální zákazníky nebo rovnou prodat vaše zboží. Lidé s takovou stránkou raději interagují a mají chuť na ní strávit více času. Přesná data hovoří za vše: Google zjistil, že prodloužení doby načítání stránky z 0,4 na 0,9 sekund snížilo provoz na jeho webu, potažmo příjmy z reklam o celých 20 %.

Odkud se vzala hodnota 0,4? Je to doba mrknutí oka a označuje pocitovou hranici, při jejímž překočení má uživatel pocit dlouhého načítání webu a odchází pryč. Amazon ve vlastním průzkumu ověřil, že každých 100 ms zpoždění v načítání stránky snižuje prodeje o 1 % (více zde a zde). 

Faktory, které negativně ovlivňují rychlost webu

Z technického hlediska označuje rychlost webu celkový čas, za který se obsah stránky stáhne z příslušných hostingových serverů a zobrazí se v uživatelově prohlížeči. Negativní vliv na rychlost načítání webu má například:

  • nekvalitní a neoptimalizovaný script a kód webové stránky,
  • nevhodně zvolený (například poddimenzovaný) hosting,
  • příliš velké obrázky a rozsáhlá videa, nevyužívání komprese,
  • automaticky přehrávaná videa,
  • nadměrné množství použitých pluginů a widgetů,
  • neaktualizované prostředí, v němž web tvoříte (například WordPress),
  • více pluginů, které plní stejnou funkci a jsou tak spolu ve vzájemném konfliktu (conflicting plugins),
  • těžké, neoptimalizované šablony,
  • pomalé nebo chybějící cache optimalizace a také
  • přesměrování stránek a odkazů na webové stránce.

Některé faktory dále ovlivňují rychlost načítání stránek přímo na straně uživatele: například zastaralý prohlížeč, promazané nebo nepoužité cachování či problémy s hardwarem.

Metriky Googlu, zásadní pro měření a optimalizaci rychlosti načítání webu

Soubor 3 hlavních ukazatelů pro měření výkonu a optimalizace se označuje jako Core Web Vitals (CWV). Soustředí se na hlavní důvody, proč uživatelé předčasně opouští webové stránky, konkrétně na rychlost načítání, interaktivitu a vizuální stabilitu stránky.

Podle Googlu jsou pro měření rychlosti webu zásadní tyto metriky:

  • LCP (Largest Contentful Paint, vykreslení největšího obsahu) představuje dobu načítání největšího obsahového prvku (například obrázku, videa či bloku textu). Ideální hodnota je do 2,5 sekund. 
  • FID (First Input Delay, prodleva prvního vstupu) udává čas od uživatelovy první interakce s některým prvkem webu po okamžik, kdy na ni stránka zareaguje. Optimálně by se tato hodnota měla držet pod 100 milisekund.
  • CLS (Cumulative Layout Shift, kumulativní změna rozvržení) měří vizuální stabilitu stránky, tedy počet posunů layoutu během načítání. To může například zapříčinit stisk špatného tlačítka. CLS dobře optimalizované stránky se pohybuje do 0,1 sekundy.
core web vitals, článek optimalizace rychlost
Metriky pro měření rychlosti webových stránek

LCP, FID a CLS společně tvoří souhrnné skóre, které se zbarví zeleně, oranžově nebo červeně v závislosti na dílčích výsledcích jednotlivých CWV. Výsledek mezi 90 – 100 body (v zelené barvě) znamená velmi dobré skóre.

Výsledek v oranžové barvě, který odpovídá 51 – 89 bodům indikuje možnosti ke zlepšení. Skóre v červené barvě, ohodnocené 0 – 49 body je považované za slabé a jednoznačně ukazuje, že web potřebuje další optimalizaci.

Jak otestovat rychlost webu?

V současné době prochází webové stránky z mobilu více než polovina všech uživatelů (zdroj), a protože toto číslo pravděpodobně dál poroste, je důležité při optimalizaci webu myslet především na tuto skupinu. Jak zjistíte, jak si stojí váš web? Stačí se podívat na PageSpeed Insights, kde si můžete ověřit své skóre na mobilu i desktopu. 

Dalším užitečným nástrojem je Lighthouse, který funguje jako rozšíření prohlížeče Chrome. Po instalaci pluginu otevřete stránku, kterou chcete otestovat, klikněte na ikonku majáku a nástroj vám vygeneruje report v závislosti na testovaných parametrech.

Rozdíly mezi nástroji Lighthouse a PageSpeed Insights

Výhodou Lighthouse oproti PageSpeed Insights je, že měří i další parametry navíc a jde tedy za uživatelskou přívětivost stránky. Zaměřuje se například i na SEO či přístupnost webu. PageSpeed Insights přitom využívá informace z Lighthouse, obohacené o data z reálného světa. Oba nástroje vám dají i konkrétní tipy, jak váš web vylepšit, a zobrazí souhrnnou diagnostiku problémů.

Při analýze webu, kterou nabízím jako samostatnou službu, vždy nejdříve testuji v Lighthouse. Výhodu nástroje vidím zejména v tom, že poskytuje komplexnější přehled o kondici stránky a nenabízí pouze náhled na rychlost webu. Mám tak přesnější představu, v jakém stavu web je a můžu lépe identifikovat slabá místa, která by optimalizací bylo vhodné vylepšit.

Rychlost webu: Šampioni a poražení

Splnit náročné nároky Googlu nejen na rychlost webu není vůbec jednoduché, a tak řada stránek zatím stále selhává v optimalizaci především pro mobilní telefony. Pár příkladů za všechny: například Wikipedia získává souhrnné skóre (Performance) na mobilních zařízeních 98 bodů ze 100, na desktopu plných 100 bodů. Měření v PageSpeed Insights jsou z 20. 5. 2022 kolem 8:00.

měření rychlosti webu, příklad rychlého webu, wikipedia, článek Optimalizace rychlosti webu
Měření rychlosti webu Wikipedia v PageSpeed Insights – mobilní zařízení
měření rychlosti webu, příklad rychlého webu, wikipedia, článek Optimalizace rychlosti webu
Měření rychlosti webu Wikipedia v PageSpeed Insights – desktop

Mnohem nižšího skóre dosahuje například web TechCrunch, který nabízí zprávy ze světa podnikání, technologií a startupů. Na home page uvedené webové stránky je obrovské množství obrázků a widgetů, které načítání zpomalují. Velká koncentrace reklam načítání webu také nepomáhá.

Oproti jednoduché Wikipedii je rychlost nesrovnatelně nižší. Celkové skóre tohoto webu z pohledu PageSpeed Insights je 15 bodů ze 100 na mobilech, na desktopu dosahuje hodnoty 52.

měření rychlosti webu, příklad pomalého webu, techcrunch, článek Optimalizace rychlosti webu
Měření rychlosti webu TechCrunch v PageSpeed Insights – mobilní zařízení
měření rychlosti webu, příklad pomalého webu, techcrunch, článek Optimalizace rychlosti webu
Měření rychlosti webu TechCrunch v PageSpeed Insights – desktop

Přísné metriky versus uživatel: Jděte na to selským rozumem 

Metriky CWV jako ukazatele technické kondice webu nejsou samospásné. Pokud se výsledky měření neukazují v zelené barvě (tedy nad 90 bodů), neznamená to automaticky, že je váš web špatně zpracovaný a uživatelsky nepřívětivý. Vždy je dobré hodnotit nejen měření, ale i reálný stav webu, například pocitovou rychlost načítání.

Z pohledu uživatelské přívětivosti (ne technických parametrů) to znamená, že pokud váš uživatel má pocit nebo dojem, že se web načítá pomalu, mělo by se pátrat po příčině a rychlost optimalizovat, přestože web může mít relativně dobré technické parametry po měření CWV.

Platí to i naopak. Pokud se váš web načte mrknutím oka, nemusí to automaticky znamenat, že tomu bude odpovídat skóre v PageSpeed nebo Lighthouse.

Příklad pocitového testu rychlosti webu

Pocitovou rychlost můžete jednoduše otestovat načtením webu na mobilu či desktopu. Výše zmíněná Wikipedie se na mobilu načte za cca 1,5 sekundy (měřeno na telefonu Samsung A40 s kvalitním internetovým připojením), což odpovídá dobré zkušenosti.

Načtení TechCrunch na stejném telefonu pocitově trvá zhruba 7 sekund. Tuto ne zcela příjemnou zkušenost navíc narušuje velká cookie lišta, u které musí uživatel scrollovat dolů, aby cookies odsouhlasil. Konečný reálný čas, za který se dostanete na tento web, se pohybuje mezi 15 – 20 sekundami.

Špatné metriky? Důvodem může být vytížený server i nevhodný hosting

Špatné metriky může způsobit i momentální vytíženost serveru. Mohou také různě kolísat během dne (ráno budete mít dobré výsledky a odpoledne horší či naopak). Záleží i na tom, kde máte hosting a odkud přichází uživatelé vašeho webu.

Pokud například jako český podnikatel používáte český hosting, ale velká část audience vašeho webu je z USA, pak může být web pro americké uživatele významně pomalejší, než pro ty české (kvůli hostingu v ČR). Jestliže je to váš případ, můžete se obrátit na společnost PEKK Consulting s.r.o., která vás s problémem ráda pomůže a web optimalizuje pro mezinárodní audienci.

Kdy se (ne)řídit pouze pocitovou rychlostí načítání?

Je-li cílem vašeho webu přinášet konverze, nabízí se otázka, zda není výhodnější zaměřit se pouze na pocitovou rychlost načítání, která má vliv na uživatelskou přívětivost pro návštěvníky vašeho webu. Zdá-li se jim web pomalý, budou odcházet bez ohledu na metriky.

Tento přístup bych však nedoporučila, pokud vám záleží na organické vyhledatelnosti. Technická rychlost webu je jedním ze zásadních faktorů, které ovlivňují, na jakých pozicích váš web vyhledávače ukazují. Nejlepším řešením je tedy zhodnotit uživatelský dojem i technické údaje a web optimalizovat tak, aby byl v ideálním stavu

Potřebujete pomoct s optimalizací webových stránek?

Nejste si jistí, zda si s CWV poradíte sami a podaří se vám web optimalizovat z pohledu Googlu i uživatelů? Od toho jsem tu já: ozvěte se mi, analyzuji současný stav vaší webové stránky, zkontroluji i aktuální rychlost webu a společně zjistíme, na čem je potřeba zapracovat. Rovnou pro vás také implementuji vybraná vylepšení.