PageSpeed Insights

https://developers.google.com/speed/docs/insights/v5/about

Co PageSpeed Insights dělá?

PageSpeed Insights provádí analýzu webové stránky a poskytuje dvě hlavní hodnoty:

1. Výkon (Performance) skóre: Jedná se o číselnou hodnotu od 0 do 100, která reflektuje celkový výkon webu na základě několika metrik (například Largest Contentful Paint, Cumulative Layout Shift atd.). Čím vyšší skóre, tím lépe stránka funguje.
2. Doporučení pro optimalizaci: Nástroj poskytuje seznam konkrétních kroků, jak lze stránku zrychlit, například:
   1. Minimalizace velikosti JavaScriptu a CSS.
   2. Optimalizace obrázků.
   3. Urychlení doby odpovědi serveru (zlepšení TTFB).
   4. Implementace caching technik.
   5. Snížení blokujících zdrojů (TBT).

Jak funguje?

PageSpeed Insights využívá dvě hlavní metody hodnocení:

Field data (Field Performance):

Získává reálná data od uživatelů (pokud jsou k dispozici) pomocí tzv. Chrome User Experience Report. Tyto údaje zobrazují skutečný výkon stránky na základě chování uživatelů v reálném čase.

Lab data (Laboratory Performance):

PageSpeed Insights provádí simulaci načítání stránky na předem definovaném zařízení a síťových podmínkách, aby analyzoval různé metriky a zjistil, jak stránka reaguje. Z této simulace generuje zmíněné výkonové skóre.

Popis metrik používaných v reportu PageSpeed Index

Time to First Byte (TTFB)

https://web.dev/articles/ttfb 
Měří dobu, kterou server potřebuje k tomu, aby začal reagovat na požadavek uživatele. Je to doba od požadavku prohlížeče do chvíle, kdy prohlížeč obdrží první bajt dat od serveru. TTFB ovlivňuje rychlost načítání stránky, protože pomalejší server může významně zdržet zobrazování obsahu.

First Contentful Paint (FCP)

https://web.dev/articles/fcp 
Měří čas od začátku načítání stránky do chvíle, kdy je první obsah (např. text, obrázek) viditelný pro uživatele. FCP je důležitý pro uživatelský dojem, protože značí, kdy uživatel začíná něco vidět.

Largest Contentful Paint (LCP)

https://web.dev/articles/lcp 
Udává čas, kdy byl načten největší viditelný prvek stránky, což může být obrázek, video nebo velký textový blok. Tato hodnota je důležitá, protože udává, kdy má uživatel pocit, že stránka je připravena. Doporučuje se, aby LCP bylo pod 2,5 sekund pro lepší uživatelský zážitek.

Speed Index (SI)

https://developer.chrome.com/docs/lighthouse/performance/speed-index 
Ukazuje, jak rychle je obsah stránky viditelný během načítání. Nižší hodnota znamená, že obsah se zobrazuje rychleji. Jedná se o vizuální metriku, která odráží vnímanou rychlost uživatelem.

Cumulative Layout Shift (CLS)

https://web.dev/articles/cls 
Měří vizuální stabilitu stránky. Hodnota CLS určuje, jak moc se obsah stránky pohybuje při načítání. Velké změny v rozložení, ke kterým dojde během načítání stránky, mohou být pro uživatele rušivé. Nižší hodnota znamená lepší stabilitu.

Total Blocking Time (TBT)

https://web.dev/articles/tbt 
Měří celkový čas, během kterého je stránka "zablokovaná" (nemůže reagovat na vstupy uživatele) mezi First Contentful Paint (FCP) a Time to Interactive (TTI). Blokování způsobují například dlouhotrvající skripty. Čím nižší hodnota, tím lépe, protože to znamená, že stránka je dříve interaktivní.

Time to Interactive (TTI)

https://web.dev/articles/tti 
TTI je metrika, která měří, jak dlouho trvá, než se webová stránka načte a stane plně interaktivní. Konkrétně jde o dobu od začátku načítání stránky do okamžiku, kdy je stránka připravena reagovat na všechny uživatelské vstupy bez prodlevy.

TTI měří několik aspektů:

• Stránka je vizuálně načtená (hlavní obsah je zobrazen).
• Uživatelské rozhraní je dostatečně rychlé a je schopné reagovat na všechny interakce (například kliknutí, posouvání, psaní) bez výrazných prodlev.
• Žádné dlouhotrvající úlohy (těžké skripty) nezdržují uživatelské akce.

Nižší hodnota TTI znamená, že stránka je rychleji použitelná, což zlepšuje uživatelský zážitek. Ideální je, když TTI nepřesáhne 5 sekund, přičemž čím nižší hodnota, tím lepší interaktivita stránky.

Interaction to Next Paint (INP)

https://web.dev/articles/inp 
Nová metrika, která měří dobu mezi interakcí uživatele (například kliknutí, klávesový vstup) a vizuální odezvou stránky (kdy se stránka "znovu vykreslí"). Nízká hodnota INP znamená, že stránka rychle reaguje na uživatele.

Řazení metrik podle různých kritérií

Řazení metrik podle časové posloupnosti

1. Time to First Byte (TTFB): První fáze načítání, měří dobu, než server začne odpovídat na požadavek.
2. First Contentful Paint (FCP): Moment, kdy se na stránce zobrazí první obsah (text, obrázky).
3. Largest Contentful Paint (LCP): Čas, kdy je načten největší viditelný prvek na stránce.
4. Speed Index (SI): Zobrazuje rychlost načítání obsahu stránky, což je spojeno s uživatelským vnímáním rychlosti načítání.
5. Cumulative Layout Shift (CLS): Měří vizuální stabilitu během načítání stránky (pohyby prvků na stránce).
6. Total Blocking Time (TBT): Udává dobu, kdy je stránka neinteraktivní kvůli blokujícím skriptům.
7. Time to Interactive (TTI): Udává, kdy je stránka plně interaktivní a schopná reagovat na vstupy.
8. Interaction to Next Paint (INP): Zohledňuje dobu mezi interakcí uživatele a vizuální reakcí stránky po plném načtení.

Řazení metrik podle vnímání uživatele

1. Time to First Byte (TTFB): První fáze načítání, měří dobu, než server začne odpovídat na požadavek.
2. First Contentful Paint (FCP): Moment, kdy se na stránce zobrazí první obsah (text, obrázky).
3. Largest Contentful Paint (LCP): Čas, kdy je načten největší viditelný prvek na stránce.
4. Speed Index (SI): Zobrazuje rychlost načítání obsahu stránky, což je spojeno s uživatelským vnímáním rychlosti načítání.
5. Cumulative Layout Shift (CLS): Měří vizuální stabilitu během načítání stránky (pohyby prvků na stránce).
6. Total Blocking Time (TBT): Udává dobu, kdy je stránka neinteraktivní kvůli blokujícím skriptům.
7. Time to Interactive (TTI): Udává, kdy je stránka plně interaktivní a schopná reagovat na vstupy.
8. Interaction to Next Paint (INP): Zohledňuje dobu mezi interakcí uživatele a vizuální reakcí stránky po plném načtení.