Largest Contentful Paint

Příklady z praxe

1. 01

   Hero obrázek e-shopu se načítá až po JavaScriptu

   Karusel na homepage byl vykreslován React komponentou, takže prohlížeč se o zdroji dozvěděl až po stažení a spuštění bundlu. LCP na mobilu vycházelo kolem 4,3 s, přičemž resource load delay tvořil víc než polovinu. Vložení prvního snímku přímo do serverem generovaného HTML s vysokou prioritou stáhlo hodnotu pod 2,5 s bez jakéhokoli zásahu do backendu.

   <img src="/hero-1200.avif"
        srcset="/hero-800.avif 800w, /hero-1600.avif 1600w"
        sizes="100vw"
        fetchpriority="high"
        decoding="async"
        alt="Zimní kolekce">

2. 02

   Měření skutečné hodnoty u návštěvníků

   Analytický tým potřeboval vědět, který prvek je LCP kandidátem na produkci, protože v Lighthouse vycházel nadpis, ale v CrUX byla data výrazně horší. Sběr přes PerformanceObserver ukázal, že u části uživatelů se jako největší prvek vyhodnotí cookie lišta s velkým textem. Úprava její velikosti odstranila falešně vysoké hodnoty.

   new PerformanceObserver((list) => {
     const entries = list.getEntries();
     const last = entries[entries.length - 1];
     console.log(last.startTime, last.element);
   }).observe({ type: 'largest-contentful-paint', buffered: true });

Časté omyly

MýtusStačí zrychlit server a LCP se opraví.

Ve skutečnostiTime to First Byte je jen první ze čtyř složek LCP. U většiny stránek s velkým hero obrázkem tvoří většinu času objevení a stažení zdroje, takže rychlejší server posune výsledek jen o desetiny sekundy.

MýtusLazy loading zrychluje načítání, takže ho dám na všechny obrázky.

Ve skutečnostiAtribut loading="lazy" na LCP prvku výsledek naopak zhorší, protože prohlížeč odloží stahování až do fáze layoutu. Lazy loading patří výhradně na obrázky pod ohybem stránky.

MýtusZelené LCP v Lighthouse znamená, že je stránka v pořádku.

Ve skutečnostiLighthouse je laboratorní simulace jednoho běhu na jednom zařízení. Google hodnotí 75. percentil reálných návštěv z CrUX, kde se projeví pomalé sítě, starší telefony a studená cache.

Časté dotazy

Jaká hodnota LCP se považuje za dobrou?

Largest Contentful Paint do 2,5 sekundy je hodnocen jako dobrý, rozmezí 2,5 až 4 sekundy vyžaduje zlepšení a nad 4 sekundy je špatný. Klíčové je, že se hodnota nepočítá jako průměr, ale jako 75. percentil návštěv za posledních 28 dní, zvlášť pro mobil a desktop. Znamená to, že tři čtvrtiny uživatelů musí zažít načtení pod hranicí. Průměrná hodnota bývá optimističtější, protože ji táhnou dolů návštěvy s naplněnou cache a rychlým připojením.

Který prvek na stránce se stane LCP kandidátem?

LCP kandidátem může být obrázek v elementu img, obrázek na pozadí načtený přes CSS funkci url(), poster u videa, první snímek videa a blokové textové elementy včetně nadpisů a odstavců. Prohlížeč porovnává viditelnou plochu v rámci viewportu a vybírá největší z nich. Prvky mimo viditelnou oblast, průhledné obrázky a obrázky s nízkou informační hustotou vůči své ploše se vyřazují. Kandidát se v průběhu načítání může několikrát změnit, platí poslední zaznamenaný před první interakcí uživatele.

Jak zjistím LCP na svém webu bez placených nástrojů?

Pro reálná data slouží zpráva Core Web Vitals v Google Search Console a PageSpeed Insights, který u dostatečně navštěvovaných URL zobrazí sekci s daty z CrUX. Pro vlastní měření stačí PerformanceObserver v prohlížeči nebo knihovna web-vitals od Chrome týmu, která hodnotu posílá do analytiky. V Chrome DevTools panel Performance označí LCP prvek přímo v časové ose, takže je vidět, který blok obsahu za výsledek odpovídá.

Ovlivňuje LCP pozice ve vyhledávání?

Largest Contentful Paint je součástí signálů page experience, které Google používá při řazení výsledků. Jeho váha je ale výrazně menší než relevance a kvalita obsahu, takže samotné zezelenání metriky pořadí obvykle nepřevrátí. Reálný přínos leží v chování uživatelů: pomalé vykreslení hlavního obsahu zvyšuje podíl návštěvníků, kteří odejdou dřív, než stránku uvidí. Optimalizace LCP se proto vyplatí primárně kvůli konverzím a až sekundárně kvůli SEO.

Proč se LCP liší mezi mobilem a desktopem?

Rozdíl vzniká hlavně proto, že na úzkém viewportu je největším viditelným prvkem často něco jiného než na širokém monitoru, například celoplošný obrázek místo nadpisu. K tomu se přidává slabší procesor telefonu, který déle zpracovává JavaScript a CSS, a pomalejší mobilní síť. Google navíc vyhodnocuje mobilní a desktopová data odděleně, takže stránka může na desktopu splňovat limit a na mobilu ne. Optimalizace se proto vždy ladí podle mobilní varianty.

Zdroje

1. Largest Contentful Paint API(otevře se v novém okně)W3C
2. LargestContentfulPaint(otevře se v novém okně)MDN Web Docs

Související pojmy

• CDNCDN je síť serverů rozmístěných po světě, které drží kopie vašeho obsahu a doručují ho z místa nejblíže návštěvníkovi. Zkracuje dobu načtení, snižuje zátěž původního serveru a tlumí špičky v provozu.
• Core Web VitalsCore Web Vitals je sada uživatelsky orientovaných metrik, kterými Google hodnotí rychlost načtení, odezvu na interakce a vizuální stabilitu webové stránky. V praxi jde hlavně o LCP, INP a CLS, tedy signály, které pomáhají odhalit pomalý obsah, zaseknuté rozhraní nebo poskakující layout.
• Cumulative Layout ShiftCumulative Layout Shift je metrika ze sady Core Web Vitals, která měří, jak moc se viditelný obsah stránky během načítání a používání samovolně posune. Hodnota vzniká součtem jednotlivých posunů, kde každý se počítá jako podíl zasažené plochy viewportu vynásobený vzdáleností posunu. Za dobrou se považuje hodnota do 0,1.
• Lazy loadingLazy loading je technika, při níž aplikace, stránka nebo knihovna načte data, komponentu či obrázek až ve chvíli, kdy jsou skutečně potřeba. Odkládá práci mimo první vykreslení nebo inicializaci, čímž může zrychlit start, snížit přenos dat a paměť, ale přidává složitost při měření, chybách a načítání obsahu.
• Splash screenSplash screen je úvodní obrazovka s logem nebo grafikou, kterou aplikace zobrazí okamžitě po spuštění a nechá běžet, dokud se nenačte hlavní rozhraní. Slouží k překlenutí startovací prodlevy a k potvrzení, že se aplikace opravdu spustila. Na Androidu i iOS ji definuje systém, na webu ji řeší manifest progresivní webové aplikace.
• Page experiencePage experience je souhrn signálů, kterými Google hodnotí, jak se návštěvníkovi stránka používá nezávisle na obsahu: rychlost načtení a stabilita měřené přes Core Web Vitals, zabezpečení přes HTTPS, použitelnost na mobilu a absence rušivých vyskakovacích prvků. Do vyhledávání vstupuje jako doplňkový faktor, nikoli jako náhrada za kvalitní obsah.
• 3D model3D model je digitální reprezentace objektu nebo prostoru ve třech rozměrech, složená z geometrie, materiálů a často i textur, animací či fyzikálních vlastností. Používá se v hrách, filmech, průmyslovém návrhu, architektuře, e-commerce i simulacích, kde software z modelu počítá zobrazení nebo další data.
• A/B testováníA/B testování je řízený experiment, který porovnává dvě varianty stránky, funkce, ceny nebo sdělení na podobných skupinách uživatelů. Měří předem zvolenou metriku, například konverzi nebo retenci, a pomáhá rozhodnout, zda změna skutečně zlepšuje výsledek, nebo zda pozorovaný rozdíl mohl vzniknout náhodou.