PageSpeed Insights – jak interpretovat výsledky a proč vám to pomůže

Než začneme

Na začátek je důležité si uvědomit, co vlastně PageSpeed Insights měří. Ten totiž neměří rychlost, ale měří výkon – a to jsou dvě různé věci. Proč? Zkuste si porovnat rychlost a výkon traktoru a klasického osobního auta – auto vám pojede rychleji, ale traktor toho utáhne víc.

Už jsem viděla weby, které se načítaly přes 10 vteřin, a přitom měly PSI skóre lepší než weby, které byly načtené za 3 sekundy. Sledujte proto výkon webu průběžně během vývoje. Můžete tak sledovat, jak vám s ním “zamává” přidávání různých doplňků nebo složitost stránky. Po dokončení používejte cache a vhodné optimalizace, ať ulevíte hostingu.

Upozornění: dobu načítání webu ve vašem přihlížeči mohou ovlivnit např. i doplňky do prohlížeče. Proto je potřeba rychlost i výkon testovat v nějakém nezávislém prostředí.

Jedno číslo vládne všem…

Hned na začátku vám PageSpeed Insights ukáže několik čísel, které hodnotí:

• Výkon (ano, výkon, ne rychlost)
• Přístupnost
• Doporučené postupy
• SEO

Každou z těchto oblastí tvoří desítky testů, které se díky ne/splnění a nějaké “váze” testu složí do výsledného skóre. Mobilní výsledky jsou zobrazeny jako první, protože mobilní zařízení vládnou světu a zpravidla bývají horší.

• 85–100: Výborné skóre, kde téměř není co dalšího řešit.
• 50–84: Průměr, kdy stránka funguje, ale je tu prostor pro zlepšení.
• 0–49: Slabé skóre, kdy je potřeba řešit problémy a jejich příčiny.

Metriky

Metriky PSI se snaží “změřit uživatelskou zkušenost s načítáním a interakcí stránky”. Jinými slovy – nejde ani tak o to, jak rychle se stáhnou všechny soubory, ale kdy už uživatel vidí něco použitelného a od kdy stránka reaguje a je použitelná (a to nemusí znamenat, že se načetla celá). Hodnocení se zaměřuje především na to, co je vidět „above the fold“ – tedy v horní viditelné části stránky, kterou uživatel vidí bez scrollování.

First Contentful Paint (FCP)

• Co to testuje: Čas od začátku načítání stránky, kdy se poprvé zobrazí jakýkoli obsah (text, obrázek, SVG, atd.). Je to vlastně indikátor toho, že uživatel něco „vidí“ a stránka začíná být použitelná.
• Ideální hodnoty: <1,8 s
• Čím je ovlivněn:
  • Velikostí a načítáním kritického CSS a JS (kritických = těch, které jsou potřeba na viditelné části obrazovky).
  • Počet a velikost prvních obrázků / fontů
  • Server Response Time (TTFB – Time to First Byte, tj. výkon serveru a doba, než server začne posílat první bajt odpovědi)

Largest Contentful Paint (LCP)

• Co to testuje: Čas, kdy se načte největší obsahový prvek viditelný ve viewportu (většinou hlavní obrázek, banner nebo textový blok). Ukazuje, kdy stránka vypadá kompletně „načtená“ pro uživatele.
• Ideální hodnoty: <2,5 s
• Čím je ovlivněn:
  • Velké obrázky, videa, hero bannery
  • CSS a JS, které blokují renderování

Total Blocking Time (TBT)

• Co to testuje: Součet času, kdy stránka je „blokovaná“ a není schopná reagovat na interakce uživatele (např. kliknutí nebo scroll).
• Ideální hodnoty: <200 ms
• Čím je ovlivněn:
  • Těžký JS kód, dlouhé skripty, spojené do sebe (ne vždy je sloučení skriptů a stylů vhodné).
  • Soubory načítané synchronně – co je možné odložit, je třeba odložit.
  • Frameworky a pluginy, které spouští spoustu JS při načtení.

Cumulative Layout Shift (CLS)

• Co to testuje: Stabilitu layoutu při načítání stránky. Měří „posuny“ obsahu, které uživatele překvapí (např. obrázek načtený až po textu, tlačítko, které se posune, prvky, které nemají výšku před svým načtením…).
• Ideální hodnoty: <0,1
• Čím je ovlivněn:
  • Nevymezené velikosti obrázků a iframů.
  • Dynamický obsah (reklamy, widgety).

Speed Index (SI)

• Co to testuje: Jak rychle se obsah stránky vizuálně vykresluje do viewportu.
• Ideální hodnoty: <3 s
• Čím je ovlivněn:
  • Velikost a pořadí načítání vizuálního obsahu
  • Render-blocking CSS/JS
  • Velikost obrázků a fontů

Pro vývojáře – chcete se dozvědět více o rychlosti webu?
Podívejte se na připravené kurzy:

Nejčastější problémy

V oblasti výkonu si vysvětlíme nejčastější problémy, které se tu vyskytují:

Minimize main-thread work (Minimalizovat práci hlavního vlákna)

• Prohlížeč má jedno hlavní vlákno, které vykresluje stránku a reaguje na interakce uživatele (kliknutí, scroll, input). „Práce hlavního vlákna“ je čas, kdy je toto vlákno zaneprázdněné zpracováním JavaScriptu, stylů nebo layoutu a nemůže reagovat na uživatele.
• Pokud hlavní vlákno tráví příliš mnoho času těžkými skripty, stránka se může zpožďovat s vykreslováním obsahu nebo a možností interaktivity s uživatelem.
• Zvyšuje Total Blocking Time (TBT) a zhoršuje FID (reakce na první vstup).
• Jak to řešit:
  • Rozdělte dlouhé JS na menší a načítejte je asynchronně (defer nebo async).
  • Použijte lazy-load pro nepotřebné skripty a další zdroje – načítejte je v okamžiku, kdy jsou potřeba.
  • Optimalizujte a minimalizujte JS a CSS.
  • Zmenšete layout – snížíte čas nutný pro sestavení DOMu a aplikaci skriptů a stylů.

Serve Images in Next-Gen Formats (Podávat obrázky v moderních formátech)

• Tradiční formáty obrázků jako JPEG nebo PNG jsou funkční, ale dnes existují formáty, které slouží stejně dobře, jsou široce podporované a výsledný obrázek zabírá méně místa (až o 30–80 % při stejné vizuální kvalitě). Díky (datově) menším obrázkům se rychleji načte web.
• Jak to řešit:
  • Převést obrázky do WebP nebo AVIF
  • Komprimovat obrázky
  • Vkládat obrázky ve velikosti, v jaké jsou potřeba (ikona nemusí být 1500px široká)
  • Používat lazy-load pro obrázky mimo viewport, díky čemuž se budou načítat později a web bude rychlejší.

Eliminate Render-Blocking Resources (Odstranit blokující zdroje při vykreslování)

• Když se stránka načítá, prohlížeč musí stáhnout a zpracovat všechny CSS a JS, které blokují vykreslení stránky. „Render-blocking resources“ jsou totiž soubory, bez kterých se stránka nemůže zobrazit, a jejich načtení zhoršuje metriky FCP a LCP.
• Pokud je CSS nebo JS načítáno synchronně, prohlížeč nejdříve stáhne a vyhodnotí celý soubor, než začne vykreslovat obsah. To znamená, že uživatel vidí prázdnou stránku déle, i když server rychle odpovídá.
• Jak to řešit:
  • Kritické CSS – do hlavičky vložte jen CSS potřebné pro zobrazení obsahu „above the fold“. Zbytek může být načten asynchronně.
  • Minimalizace a kombinace souborů – zmenší počet HTTP requestů a velikost souborů.
  • Odstranit nepoužívané CSS/JS – například pluginy, které načítají kód, který stránka vůbec nepoužívá.

Minify Resources (Minimalizovat zdroje)

• „Minifikace“ znamená odstranit všechny zbytné znaky ze souborů CSS, JS a někdy i HTML: mezery, komentáře, zalomení řádků… vše, co není potřeba pro jejich zpracování, protože je zpracovává stroj, nikoli člověk.
• Výsledkem je menší velikost souboru, který se rychleji stahuje a zpracovává.
• Jak to řešit:
  • Minifikovat CSS a JS – ujistěte se, že vám minifikace na webu něco nerozbije (vizuál, konzole prohlížeče…)
  • Kombinovat soubory, kde to dává smysl. Díky tomu bude potřeba méně requestů pro načtení stránky a rychlejšímu načítaní.
  • Kontrolovat, co pluginy načítají – někdy pluginy načítají celé knihovny, i když se použije jen malá část načteného kódu.

Defer Offscreen Images (Odložit načítání obrázků mimo viewport)

• „Offscreen images“ jsou obrázky, které se neobjevují na obrazovce při prvním načtení stránky, ale někde níže na stránce. Tyto obrázky je potřeba načítat až ve chvíli, kdy jsou potřeba.
• Jak to řešit:
  • Rozdělení obrázků – načíst kritické obrázky „above the fold“ normálně, ostatní odložit
  • Placeholder / blur-up – pro plynulý vizuální efekt, aby uživatel neviděl prázdné místo

Serve Static Assets with an Efficient Cache Policy (Podávat statické zdroje s efektivní cache politikou)

• „Statické zdroje“ jsou soubory, které se často nemění, například obrázky, CSS, JS nebo fonty. Pro ně je třeba nastavit správnou cache politiku, aby prohlížeč nestahoval tyto soubory při každém načtení stránky, ale vzal si je z mezipaměti.
• Pokud server neposílá efektivní cache hlavičky, prohlížeč musí stahovat stejné soubory znovu, i když se nezměnily.
• Jak to řešit:
  • Nastavit cache headers – Cache-Control a Expires pro statické soubory (ideálně 1 měsíc – 1 rok, pokud se soubory nemění).
  • Používat verze souborů – style.css?v=1.2.3, aby při aktualizaci bylo načteny nové soubory v okamžiku, kdy je třeba.
  • Používat CDN – často nastavuje cache automaticky a zrychluje doručení souborů.

Ensure Text Remains Visible During Webfont Load (Zajistit viditelnost textu během načítání fontů)

• Když stránka používá webfonty (např. Google Fonts nebo vlastní fonty), prohlížeč čeká, než se font stáhne, než vykreslí text. Pokud to není nastaveno správně, může uživatel vidět prázdná místa místo textu (tzv. FOUT – Flash of Invisible Text) nebo posuny layout (FOUC – Flash of Unstyled Content).
• Jak to řešit:
  • Omezit počet fontů a řezy – načítat jen potřebné znaky a styly.
  • Self-hosting fontů – lokální verze fontů se načítají rychleji než z externí služby.
  • Preload kritických fontů – pro hlavní texty above the fold, aby se stáhly co nejdříve.

Image Elements Do Not Have Explicit Width and Height (Obrázky nemají definovanou šířku a výšku)

• Každý obrázek na stránce by měl mít explicitně definovanou šířku a výšku (width a height atribut nebo CSS). Pokud nejsou tyto hodnoty nastavené, prohlížeč není schopen vyhradit prostor pro obrázek před jeho načtením. A právě kvůli tomu pak vzniká posun layoutu.
• Jak to řešit:
  • Definovat atributy width a height přímo v HTML
  • Použít CSS aspect-ratio – pokud se obrázky přizpůsobují různým rozlišením.
  • Rezervovat místo pro obrázky mimo viewport – lazy-loading s vyhrazeným prostorem.

Reduce the Impact of Third-Party Code (Snížit dopad kódu třetích stran)

• Třetí strany jsou externí skripty a služby, které vaše stránka načítá – např. analytika (Google Analytics, Hotjar), reklamní sítě, chat widgety, sociální pluginy. Tyto skripty často blokují hlavní vlákno, zpomalují vykreslení stránky a interaktivitu. Uživatelé mohou pocítit pomalé reakce, „zaseknutý“ web nebo zpožděné vykreslení obsahu.
• Jak to řešit:
  • Asynchronní načítání skriptů – async nebo defer pro JS třetích stran.
  • Lazy-load pro externí obsah
  • Omezit počet externích skriptů – používat jen ty, které jsou opravdu potřeba.

Avoid an Excessive DOM Size (Vyhnout se příliš velkému DOMu)

• Velký DOM často vzniká kvůli šablonám, které generují zbytečné elementy a wrappery, některým page builderům s nadměrnými strukturami nebo automatickému generování velkého množství elementů pro listy, galerie či tabulky.
• Šablonami, které generují zbytečné <div> a wrappery, některými page buildery s nadměrnými strukturami, automatickým generováním velkého množství elementů pro listy, galerie nebo tabulky atd.
• Jak to řešit:
  • Používat vhodné nástroje a šablony.
  • Optimalizace struktury stránky – odstranit zbytečné wrappery a nadbytečné elementy.
  • Snížit počet widgetů a pluginů – každý plugin může přidávat vlastní HTML.
  • Lazy-load pro obsah – načítat sekce stránky jen při scrollu, ne vše najednou.

A nezapomeňte na kurzy pro webaře: