Metrika Largest Contentful Paint (LCP): průvodce rychlejším načtení webu
Svět metriky Largest Contentful Paint (LCP) by se dal přirovnat k adrenalinovému prostředí automobilových závodů - jde o nekonečný souboj s časem. Pojďme teď projet všechny zatáčky a nástrahy naší závodní dráhy, ať jsme co nejlépe připravení. Co se tedy dozvíme?
- Co je metrika LCP?
- Jaké jsou její doporučené hodnoty?
- Proč je důležitá?
- Jak se metrika LCP počítá?
- Jak a kde ji doporučujeme měřit?
- Jaké jsou časté chyby a možnosti optimalizace?
Seznamte se s metrikou LCP
Metrika LCP měří dobu, po které na stránce zobrazí největší element. To pomáhá uživatelům vyhodnotit užitečnost stránky.
Tato metrika je součástí Core Web Vitals, používaných pro měření rychlosti načítání webových stránek. Metriky Core Web Vitals jsou také jedním ze signálů zohledňovaných Googlem při řazení výsledků výhledávání.
Držte LCP pod 2,5 sekundy
Pokud chcete mít Largest Contentful Paint v zeleném vyhovujícím pásmu, hodnota musí být do 2,5 sekundy. LCP mezi 2,5 až 4 sekundy je v oranžovém pásmu a vyžaduje úpravy. Čas metriky LCP nad 4 sekundy Google hodnotí jako nevyhovující.
Dobrá | Vyžaduje zlepšení | Špatná | |
---|---|---|---|
LCP | ≤ 2,5 s | 2,5 - 4 s | > 4 s |
Metrika Largest Contentful Paint (LCP) je důležitá z několika klíčových důvodů, které mají zásadní vliv na celkový uživatelský zážitek a úspěšnost webových stránek.
Patří mezi ně například snížení míry okamžitého opuštění webu, vliv na konverze e-shopů, důvěryhodnost značky nebo pozice ve výsledcích vyhledávání.
Metrika LCP na webech našich klientů často koreluje s konverzním poměrem. Toto děláme v rámci analýzy konverzí.
Co je to LCP element?
Zjednodušeně jde o největší vizuální prvek na stránce, který je zobrazen během procesu načítání stránky v hlavním viewportu uživatele. LCP element je ten prvek, který prohlížeč sleduje a měří dobu, za jakou nastane jeho zobrazení.
LCP element můžeme identifikovat v některém z vývojářských nástrojů - Lighthouse, Performance Tab v DevTools nebo Web Vitals rozšíření do Chrome. Do detailu si můžete o hledání a testování (nejen) LCP přečíst v mém článku Klíčová dovednost vývojáře: testování Web Vitals v prohlížeči.
Jako LCP element se mohou vyhodnotit následující prvky:
<img>
elementy<image>
element uvnitř<svg>
elementu<video>
element s „poster" obrázkem- obrázek na pozadí, pomocí vlastnosti
background-image
(CSS gradient je ignorován) - block-level elementy obsahující text nebo další textové inline-level potomky
LCP elementem naopak nemohou být následující prvky:
- Elementy s vlastností
opacity: 0
a dalšími, které jsou pro uživatele neviditelné. - Elementy, které vyplňují celý viewport. Ty jsou spíše považovány za ilustrační než obsahové.
- Zástupné obrázky s nízkou mírou obsažené informace. Zde jde o ochranu před LCP hacky, kdy vývojáři vložili do stránky velký obrázek bez informace. Pokud máte pochybnosti o míře informací ve vašich obrázcích, můžete si je otestovat v kalkulačce Image BPP (bits per pixel).
Základem je identifikovat „LCP element". Jen pozor, na v různých rozlišeních může jít o různý prvek.
Podívejte se, jak LCP prvek najít.
Jak se LCP element vyhodnocuje?
Pro správné vyhodnocení a optimalizace je potřeba pochopit, jak se metrika LCP počítá. U LCP elementu se obvykle vyhodnotí jeho velikost viditelná na obrazovce uživatele. V úvahu se neberou ořezané části, části skryté pomocí overflow:hidden
, ani vlastností padding
, margin
, border
a další. Pokud chcete do detailů vyhodnocení LCP zabrousit více, je tu na toto téma fajn článek na web.dev.