← Cloudflare Web Analytics / web-analytics / data-metrics

Core Web Vitals

Core Web Vitals ↗ jsou metriky vysoké úrovně, které měří vnímaný výkon webů a webových aplikací.

Měří se tři klíčové metriky Core Web Vitals: Largest Contentful Paint, Interaction to Next Paint a Cumulative Layout Shift. Každé z těchto metrik se automaticky přiřadí hodnocení Good, Needs Improvement nebo Poor na základě prahových hodnot definovaných společností Google.

Core Web Vitals vám ve vizuální podobě umožňuje snadno zjistit, které prvky na stránce ovlivňují uživatelský zážitek při procházení vašeho webu. Přístup ke Core Web Vitals získáte takto:

1. V dashboardu Cloudflare přejděte na Web Analytics stránce.

   Přejděte na Web analytics ↗

2. Vyberte svůj web a klikněte na Core Web Vitals.

Core Web Vitals se dělí na tři hlavní sekce, z nichž každá obsahuje informace o konkrétní funkci ovlivňující uživatelský zážitek:

• Largest Contentful Paint (LCP) ↗: Měří vnímanou rychlost načítání stránky uživatelem, tedy dobu, za kterou se načte hlavní obsah stránky.
• Interaction to Next Paint (INP) ↗: Měří odezvu uživatelského rozhraní, tedy jak rychle web reaguje na akce uživatele, jako jsou kliknutí, klepnutí nebo stisknutí kláves.
• Cumulative Layout Shift (CLS) ↗: Měří vizuální stabilitu, tedy do jaké míry dochází k neočekávaným posunům rozložení stránky během načítání a po něm.

Každá z těchto metrik představuje dopad na uživatelský dojem, který Web Analytics kvantifikuje a hodnotí.

Cloudflare Web Analytics umožňuje interaktivní zkoumání metrik Core Web Vitals, protože data můžete filtrovat podle URL, prohlížeče, operačního systému, země, prvku a dalších kritérií.

Pod každým grafem najdete sekci 'Debug View' s pěti prvky, které mají na danou metriku největší negativní vliv. Kliknutím na prvek v datové tabulce zobrazíte další podrobnosti.

Každá tabulka, tedy LCP, INP a CLS, navíc na první pohled ukazuje výkon těchto prvků na 75. percentilu (P75). Výběrem libovolného řádku tabulky prvek rozbalíte a získáte přístup k dalším informacím, včetně metrik P50, P90 a P99.

Tato čísla vyjadřují, jak si daný prvek vede v porovnání s ostatními prvky na stránce. Pokud se například prvek načte za 3,900 ms a nachází se v 75. percentilu, znamená to, že se načítá pomaleji než 75% prvků na stránce.

Web Analytics shromažďuje informace pro Vitals Explorer pomocí svého odlehčeného JavaScriptového beaconu. Nevyužívá přitom žádný stav na straně klienta, jako jsou cookies nebo localStorage, ke shromažďování metrik využití. Vitals Explorer navíc jednotlivé uživatele neidentifikuje pomocí fingerprintingu na základě IP adresy, řetězce User Agent ani žádných jiných údajů.

Selektor CSS reprezentující uzel DOM. Pomocí tohoto řetězce můžete použít document.querySelector(<element_name>) ve vývojářské konzoli prohlížeče a zjistěte, který DOM uzel negativně ovlivňuje vaše skóre či hodnoty.

Cesta URL adresy v okamžiku zaznamenání metrik Core Web Vitals.

Hodnota metriky ↗ pro každý z Core Web Vitals. U LCP a INP je tato hodnota v milisekundách, u CLS jde o skóre.

Zdrojová adresa URL (například obrázku, textu nebo webových fontů).

Velikost zdrojového objektu v bajtech.

Informace o rozložení je hodnota JSON, která obsahuje šířku, výšku, pozici na ose x, pozici na ose y a hodnoty left, right, top a bottom. Tyto hodnoty představují posuny rozložení, ke kterým na stránce dochází.

Zachycuje informace o rozložení prvku DOM s největší plochou po posunu na stránce. Tato hodnota JSON se zobrazuje jako Current v Debug View sekci. Chcete-li se k ní dostat, přejděte dolů na Cumulative Layout Shifts (CLS) grafika > Debug View. Výběrem libovolného prvku v této tabulce zobrazíte Posuny rozložení sekci, kde Current se zobrazí.

Zachycuje informace o rozložení prvku DOM s největší plochou před posunem na stránce. Tato hodnota JSON se zobrazuje jako Předchozí v Debug View sekci. Chcete-li se k ní dostat, přejděte dolů na Cumulative Layout Shifts (CLS) grafika > Debug View. Výběrem libovolného prvku v této tabulce zobrazíte Posuny rozložení sekci, kde Předchozí se zobrazí.