Rychlost webových stránek se řešila již dříve, ale v poslední době se toto téma dostává na výsluní. Způsobeno je to mj. prohlášením společnosti Google z května loňského roku. Core Web Vitals se podle něj stanou v květnu 2021 hodnotícím faktorem. To však není jediný důvod, proč se zaměřit na rychlost načítání webu.

Obsah

Proč je důležité se zaměřit na rychlost webových stránek

Určitě souhlasíte s tím, že současná doba je hlavně o rychlosti a plně ji vystihuje rčení „čas jsou peníze“.

Na téma rychlosti načítání webových stránek proběhlo několik případových studií. Jejich základními poznatky jsou:

  • Pokud se doba načítání stránky zvýší z 1 sekundy na 3 sekundy, zvýší se míra okamžitého opuštění o 32 %. [Google].
  • Pokud se doba načítání stránky zvýší z 1 sekundy na 6 sekund, zvýší se míra okamžitého opuštění o 106 %. [Google].
  • Shopzilla snížila načtení stránky o 5 vteřin, získala tím o 12 % lepší konverzní poměr a o 25 % více zhlédnutí stránek [Proč mít rychlý web].

Zajímají vás další výhody zrychlení vašich webových stránek? Na wpostats.com najdete případové studie a experimenty, které vedly ke zlepšení uživatelské přívětivosti a plnění obchodních cílů.

Posuďte sami všechny výhody, které optimalizace rychlosti přináší:

  • snížení hodnoty okamžitého opuštění stránky,
  • snížení hodnoty dwell time,
  • do určité míry zlepšení pozic ve výsledcích vyhledávání [záleží na míře optimalizace rychlosti],
  • zvýšení návštěvnosti,
  • zvýšení konverzí,
  • zlepšení ceny za reklamu,
  • lepší využití crawler budgetu.

Co potřebujete vědět o Core Web Vitals

Core Web Vitals jsou 3 metriky, které slouží k vyhodnocení použitelnosti webových stránek. Je výsledkem snahy Google zjednodušit tuto oblast tak, aby byla snadno pochopitelná i pro laika.

Google vyhodnocuje především tyto metriky:

  • Largest Contentful Paint [LCP],
  • First Input Delay [FID],
  • Cumulative Layout Shift [CLS].

Každá metrika je zaměřená na něco jiného. LCP se zabývá hlavně dobou načítání, oproti tomu FID se zaměřuje na interaktivitu. CLS měří vizuální stabilitu webových stránek.

Jaké hodnoty tedy musí webové stránky vykazovat, aby byly vyhodnoceny jako dobré?

core web vitals a jeho hodnocení

Core Web Vitals a jeho hodnocení

Je také důležité se zmínit, že jednotlivé metriky mají svoji vlastní váhu. Při kontrole rychlosti webových stránek v nástroji PageSpeed Insights vám informace o jednotlivých metrikách a jejich váze poskytne odkaz See Calculator.

Data v nástroji PageSpeed Insights

Data v nástroji PageSpeed Insights

Largest Contentful Paint [LCP]

První z metrik udává, jak dlouho od žádosti uživatele o adresu URL trvalo vykreslení největšího obsahového prvku viditelného ve viewportu. Jinými slovy se jedná o čas od kliknutí na odkaz v SERPU až po zobrazení většiny obsahu na stránce. Jde o něco mezi FCP a SpeedIndexem.

Vykreslení tohoto prvku je důležité, protože podle něj uživatel pozná, že se daná URL adresa opravdu načítá. Nejčastěji se jedná o velký obrázek, video nebo text.

Largest Contentful Paint

Largest Contentful Paint, zdroj: https://web.dev/

First Input Delay [FID]

FID udává čas mezi interakcí uživatele se stránkou a jejím reálným provedením. Google považuje FID za důležitý, protože bere v úvahu interakci skutečných uživatelů s webovými stránkami. Metrika je měřená pomocí nástrojů pro monitoring reálných uživatelů [RUM], jako je SpeedCurve nebo Chrome UX Report.

Příklady interakce na webových stránkách:

  • výběr možnosti z nabídky menu,
  • kliknutí na odkaz v navigaci webu,
  • zadání e-mailu do pole,
  • kliknutí na tlačítko odkazu.

Pro stránky se 100 % obsahem to není velký problém, FID je tedy například scrolling na stránce.

FID ovlivňuje hlavně JavaScript. Stránka je zobrazená a uživatel se snaží kliknout na tlačítko, rolovat s ní, ale stránka nereaguje, protože hlavní vlákno prohlížeče je zaměstnané zpracováním kódu.

First Input Delay

First Input Delay, zdroj: https://web.dev/

Cumulative Layout Shift [CLS]

CLS udává stabilitu vzhledu stránky během vykreslování, tedy jak moc se mění rozvržení stránky při načítání.

Určitě jste někdy z výsledků hledání vybrali stránku, která po otevření vypadala plně vykreslená, nicméně nebyla. V momentě, kdy jste se na ni totiž chystali kliknout, spustil se externí skript, který vám posunul rozvržení, a vy jste nechtěně klikli na reklamu.

 

Problémy s metrikou CLS může způsobovat:

  • webový font, který nahrazuje systémové písmo,
  • obrázek nebo video bez definovaných rozměrů,
  • komponenta třetí strany, která se vykreslí pozdě a ještě mění velikost.

CLS nabývá těchto hodnot:

Comulative Layout Shift

Comulative Layout Shift, zdroj: https://web.dev/

Na co se při měření rychlosti webu rozhodně zaměřte

Před samotným měřením je důležité si položit pár základních otázek:

  • Zajímají mě syntetická nebo uživatelská data?
  • Zaměřím se na kontrolu mobilního zařízení nebo desktopu?
  • Jak si na tom stojí konkurence oproti mě?
  • Chci sledovat rychlost na hlavní stránce nebo jinde?
  • Kdy je nejlepší měřit rychlost?

Syntetická data nebo uživatelská?

Syntetická data jsou taková, kdy robot prohlédne vaše stránky a zjistí aktuální výsledky.  Mezi syntetické nástroje sledování těchto dat se řadí Lighthouse nebo Webpagetest.

Oproti tomu uživatelská data můžete získat z nástroje Google Analytics nebo Chrome UX Reports. Pro optimalizaci rychlosti webových stránek je daleko důležitější sledovat data přímo od uživatelů [RUM – real user monitoring].

Za předpokladu, že vás budou zajímat jak data sesbíraná reálnými uživateli, tak roboty, využijte nástroje PageSpeed Insights, Pagespeed, Google Search Console či SpeedCurve.

Mobilní zařízení versus desktop

Při měření rychlosti se zaměřte převážně na mobilní zařízení. S každým přibývajícím rokem totiž jeho využívání [oproti desktopu] roste. Dalším důvodem je tzv. mobile first index, už nyní totiž weby z velké části prochází Gooblebot pro telefon.

Postavení konkurence

Při měření rychlosti je také dobré zaměřit se na to, jak si v rámci jednotlivých metrik a nejlépe i v rámci delšího časového období stojí konkurence.

Při výběru sledované konkurence je důležité se zamyslet, co vaše konkurenty definuje, a srovnávat stejný typ šablony [např. detail produktu] a stejný typ webových stránek.

Pro taková měření sáhněte po nástroji  Pagespeed.cz. Nastavíte si porovnání s až čtyřmi konkurenty a nejen metriky Core Web Vitals, ale i další.

Pagespeed.cz

Stránka Pagespeed.cz

Výběr stránky k měření

Většina lidí trpí tzv. home page slepotou, což znamená, že se zaměřují a upínají pouze na hlavní stránku. Daleko výhodnější je změřit několik stránek a současně posoudit i odlišné typy šablon.

Vyberte si nejnavštěvovanější stránky. Ukáže vám je nástroj Google Analytics a poté klikněte na Chování – Obsah webu – Vstupní stránky. Také nezapomeňte na vhodné nastavení časového období.

Nejlepší čas na měření rychlosti

Je důležité si pohlídat, kdy k měření dochází. Pokud budete měřit rychlost v noci, krásná data potěší i toho největšího mrzouta. Měření ve špičce zase přinese výsledky dost špatné.

Je tedy vhodnější zaměřit se na období, kdy není ani špička, ani nulová návštěvnost. Současně pokud se chcete rychlostí zabývat více, je lepší, když budete měřit rychlost vícekrát za den několik dní po sobě.

Vyberte si k měření rychlosti webu správný nástroj

Mezi ty nejpoužívanější nástroje určitě patří:

  • Google Search Console,
  • PageSpeed Insights,
  • PageSpeed,
  • Marketing Miner,
  • Rozšíření Web Vitals,
  • Lighthouse,
  • Web.Dev,
  • Screaming Frog SEO Spider,
  • Redicco SERP Speed.

Jak si z celé řady nástrojů vybrat ten pravý? Záleží na tom, co od něj kromě základního měření rychlosti očekáváte. Pojďme se společně podívat na jednotlivé nástroje vhodné pro test rychlosti webu.

Google Search Console
V Google Search Console přibyla nabídka Core Web Vitals, kde najdete informace jak pro mobilní zařízení, tak také pro desktop.

Core Web Vitals v Google Search Console

Core Web Vitals v Google Search Console

Při bližším prozkoumání vám nástroj ukáže, s jakou metrikou máte na jakých stránkách problém. Tím pádem pak nemusíte v nástroji PageSpeed Insights kontrolovat jednu stránku za druhou.

PageSpeed Insights

Tento nástroj vám poskytne informace o syntetických i uživatelských datech. Ta uživatelská však budete mít k dispozici pouze se souhlasem uživatelů se shromažďováním dat Googlem [CrUX].

PSI data uživatelů

Data uživatelů

Současně pokud vás zajímá souhrn informací o celé webové stránce [ne pouze o doméně], jednoduše si zaškrtněte Zobrazit souhrn pro zdroj. Tato informace se vám ukáže, pouze pokud mají vaše webové stránky velkou návštěvnost.

PageSpeed

O českém nástroji PageSpeed se zmiňuji již výše, ale co vše dokáže tento nástroj?

  • Sledovat konkurenci – tím pádem můžete porovnávat s vaším projektem.
  • Informace o změně rychlosti v čase.
  • Uživatelská měření.
  • Syntetická data.
  • Návrhy pro zlepšení rychlosti.

Určitě řadu z vás potěším, když se zmíním o tom, že tento nástroj je zdarma.

Marketing Miner

V rámci Marketing Mineru existuje miner Rychlost načtení. Můžete si zvolit, jakou konkrétní URL chcete měřit, jestli chcete znát výsledek pro mobilní zařízení nebo desktop.

Podívejte se na ukázku auditu a udělejte si představu, jak následný výsledek vypadá. Pro ještě více informací si můžete přečíst článek Kontrola rychlosti načtení stránek a jejich použitelnosti.

Chrome User Experience Report [CrUX]

Jedná se o data od samotných uživatelů. Můžete využít vytvořenou šablonu pro Google Data Studio od Pagespeed, kde jsou zaznamenány nejdůležitější metriky, a to: LCP, CLS a FID. V rámci šablony si můžete také zadat své konkurenty a sledovat jejich rychlost, jak se mění v čase.

Rozšíření Web Vitals

Do svého prohlížeče si můžete přidat rozšíření Web Vitals, díky nimž rychle zjistíte, jak si na tom stojí metriky LCP, CLS a FID. Pro důkladnější rozbor to však není vhodné řešení.

Lighthouse

Ačkoliv tento nástroj měří pouze syntetická data, je vhodný pro zjišťování konkrétních problémů, které nastaly na webových stránkách.

Jakým způsobem se dostat k informacím z Lighthouse?

Web.Dev

Jedná se o online verzi nástroje Lighthouse, o kterém se zmiňuji výše. Tento nástroj pochází z dílny Google a může nabídnout informace od rychlosti, výkonu a například i jestli splňujete základní věci v SEO. Podívejte se a vyzkoušejte jej – https://web.dev/measure/.

Screaming Frog SEO Spider

Určitě potěším řadu z vás, kteří již používají tento nástroj například k SEO auditu stránek. Screaming Frog se propojí přes API s informacemi z PageSpeed Insights. Výsledkem bude, že budete znát konkrétní hodnoty k daným stránkám. Celý návod, jak vše nastavit najdete na stránkách Screaming Frogu.

Redicco SERP Speed

Úplnou novinkou je nástroj od firmy Redicco – SERP Speed. Změří rychlost dané stránky, ale současně vám ukáže, jakou rychlost mají stránky, které se vyskytují na TOP 10 ve výsledcích vyhledávání pro dané klíčové slovo.

Čím webové stránky zrychlíte

Před samotnou optimalizací rychlosti je potřeba udělat si audit webových stránek a teprve na základě toho se pustit do optimalizování. Zaměřit se pouze na zlepšení Lighthouse skóre není dostačující, je nutné věnovat se samotným metrikám. Nástroj PageSpeed Insights vám sám navrhne, co je potřeba pro zlepšení.

Efektivními možnostmi zrychlení jsou:

  • nastavení přesného rozměru obrázků, videí [CLS],
  • použití „líného načtení“ obrázků [LCP],
  • komprese obrázků [LCP],
  • vhodný formát obrázků – doporučovaný je např. JPEG 2000 [LCP],
  • zajištění rychlého vykreslení hlavního prvku na stránce [LCP],
  • komprese textu [LCP],
  • odstranění zbytečných skriptů třetích stran – nevyužívaných nástrojů [LCP, FID],
  • odstranění datové velikosti CSS [LCP],
  • použití cashe [LCP],
  • zmenšení datového objemu JavaScriptu [FID],
  • komprese JS souborů [FID].

Pokud využíváte jeden z nejčastějších redakčních systémů, tak vás určitě potěší, že i ten se dá zrychlit. Podívejte se na článek 10 nejdůležitějších věcí, které regulují vaši WordPress výkonnost, který o tom informuje.

Jestli si nebudete vědět rady ohledně optimalizace rychlosti, tak se na nás můžete obrátit a podívejte, co vám můžeme nabídnout.

Štítky: content Google online marketing SEO vzdělávání

Ondřej Smolen

Ondřej Smolen [1]
[1] SEO & Copy Team Leader

Specializuje se na optimalizaci stránek z hlediska technického a obsahového SEO. Zaměří se na chyby webu a doporučení, jak nalezené mezery odstranit.

Související články

Jak a kdy stanovit SEO strategii
Advisio

Advisio

13. 8. 2020 5 minut čtení

  • [SEO]

Jak a kdy stanovit SEO strategii

Optimalizace webu pro vyhledávače je důležitá ve všech fázích života webu od prvopočátečního návrhu přes běžné fungování až po přechod na nové řešení, ale nejdůležitější…

Článek Budujte zpětné odkazy efektivně
Advisio

Advisio

21. 4. 2020 6 minut čtení

  • [Aktuality]

Budujte zpětné odkazy efektivně

Snahou každé značky je zvyšovat povědomí o ní, budovat kvalitní a funkční web a být ve vyhledávání na vysokých pozicích. Jak toho dosáhnout? Začněte pracovat na kvalitních zpětných odkazech.…