Co je Largest Contentful Paint (LCP) a jak ho zlepšit

Largest Contentful Paint (LCP) měří, za jak dlouho se po otevření stránky vykreslí její největší viditelný prvek. Obvykle je to hlavní obrázek, video nebo blok textu. LCP je jedna ze tří metrik Core Web Vitals vedle INP a CLS a říká, kdy návštěvník vidí, že se stránka opravdu načetla.

Obsah článku

Jaká hodnota je dobrá
Co se počítá jako LCP prvek
Jak LCP prvek najít
Z čeho se LCP skládá
Jak LCP zlepšit
LCP a FCP
Časté otázky

Jaká hodnota je dobrá

Dobré LCP je do 2,5 sekundy. Google počítá hodnotu, kterou splní 75 % návštěv, zvlášť pro mobil a počítač.

Dobré	Vyžaduje vylepšení	Špatné
do 2,5 s	2,5–4 s	nad 4 s

Hranice 2,5 s platí pro mobil i počítač. Pokud někde vidíte pro počítač 1,2 s, jde o bodování laboratorního testu Lighthouse, ne o hodnocení Core Web Vitals. Stránka tak může mít v Search Console dobré LCP a v Lighthouse na počítači špatné.

Pozor na 75 %. Když se u čtvrtiny návštěv hlavní obrázek načítá přes 2,5 s, stránka neprojde. Nezáleží na tom, že vám v kanceláři na rychlé síti naskočí hned.

Hodnoty LCP: do 2,5 sekundy dobré, do 4 sekund vyžaduje vylepšení, nad 4 sekundy špatné — Grafika vytvořena s pomocí OpenAI

Co se počítá jako LCP prvek

LCP prvkem může být obrázek, video i obyčejný text:

obrázek („<img>“, nebo „<image>“ uvnitř SVG),
video, a to podle toho, co se zobrazí dřív: náhledový obrázek (poster), nebo první snímek,
prvek s obrázkem na pozadí načteným přes CSS,
blok textu, třeba nadpis nebo odstavec.

Nepočítá se samotné SVG, barevný přechod v CSS, neviditelný prvek (opacity 0), prvek přes celou obrazovku ani zástupný obrázek s minimem obsahu.

Prohlížeč přestane LCP měřit, jakmile návštěvník klepne, posune stránku nebo stiskne klávesu. Co se objeví až potom, se nepočítá.

Když PageSpeed Insights hlásí jako LCP prvek text, není to chyba. Text bývá rychlejší než obrázek. Brzdí ho hlavně fonty a styly, viz opravy níže.

Jak LCP prvek najít

Nejrychleji ho najdete v PageSpeed Insights:

Zadejte adresu stránky a otevřete výsledek pro mobil.
V laboratorní části najděte položku Rozdělení LCP (anglicky LCP breakdown). Ukáže, který prvek to je, a rozdělí jeho čas na čtyři části.
Pro detail otevřete stránku v Chromu, spusťte DevTools a v panelu Performance nahrajte načtení stránky. LCP prvek je v záznamu vyznačený a stejný rozpad času najdete i tady.

Zkontrolujte, jestli je LCP prvkem to, co čekáte. Když je to cookie lišta nebo vyskakovací okno, začněte u nich.

Z čeho se LCP skládá

Načtení LCP se dělí na čtyři části. Podle toho, která trvá nejdéle, poznáte, kde začít opravy.

Část	Co měří	Cílový podíl
Odezva serveru (TTFB)	od otevření stránky po první bajt HTML	asi 40 %
Zpoždění načtení	od TTFB po chvíli, kdy prohlížeč začne stahovat LCP obrázek nebo font	pod 10 %
Načtení zdroje	stahování samotného obrázku nebo fontu	asi 40 %
Zpoždění vykreslení	od stažení po zobrazení prvku na obrazovce	pod 10 %

Když LCP prvek nic nestahuje (text se systémovým písmem), zpoždění načtení je nula. Častý problém je, když prohlížeč najde hlavní obrázek až v CSS nebo v JavaScriptu, a začne ho proto stahovat pozdě.

Příklad: LCP je 4 s a z toho 2 s připadá na zpoždění načtení. Komprese obrázku tu skoro nepomůže. Pomůže, když ho prohlížeč najde hned v HTML.

Časová osa LCP rozdělená na odezvu serveru, zpoždění načtení, načtení zdroje a vykreslení

Jak LCP zlepšit

Opravujte část, která v rozpadu trvá nejdéle. Postup se liší podle toho, jestli je LCP prvkem obrázek, nebo text.

Když je LCP obrázek

Žádný lazy loading. Atribut „loading="lazy"“ u hlavního obrázku LCP vždy zhorší.
Přidejte mu „fetchpriority="high"“, ať ho prohlížeč stahuje přednostně.
Obrázek musí být vidět přímo v HTML („<img src>“). Obrázek na pozadí v CSS nebo vložený JavaScriptem ohlaste předem přes „<link rel="preload">“.
Zmenšete ho: správné rozměry, formát WebP nebo AVIF, komprese.
Zkraťte cestu: obrázek na stejné doméně jako stránka, nebo přes obrazové CDN.

Když je LCP text

U textu brzdí hlavně písmo a všechno, co blokuje vykreslení:

Fonty zmenšete a nastavte jim vhodné „font-display“, ať se text ukáže dřív než vlastní písmo.
Blokující CSS zmenšete, malé kritické styly vložte přímo do HTML.
Synchronní skripty v „<head>“ odložte přes „defer“ nebo „async“.

Pomalý server

Když odezva serveru zabírá výrazně víc než doporučených 40 % času, obrázky ani fonty to nespraví. Omezte přesměřování, zapněte cache nebo CDN a hlídejte URL parametry, které cache obcházejí. Typicky jde o parametry přidávané kvůli analytice.

LCP a FCP

FCP (First Contentful Paint) měří první vykreslený obsah, LCP ten největší.

	FCP	LCP
Co měří	první kus obsahu (text, obrázek, SVG)	největší prvek na obrazovce
Dobrá hodnota	do 1,8 s	do 2,5 s
Core Web Vital	ne	ano

Velký rozdíl mezi nimi znamená, že se stránka ukáže rychle, ale hlavní obsah se dotahuje pozdě. Za tím bývá pozdě objevený obrázek.

Nevíte, co vaši stránku brzdí?

Domluvit schůzku

Časté otázky

Proč má PageSpeed Insights jiné LCP než Search Console?

Každý nástroj ukazuje jiná data. Laboratorní test v PageSpeed Insights proběhne jednou, na jednom simulovaném zařízení a s prázdnou mezipamětí. Search Console ukazuje data od skutečných návštěvníků za 28 dní a podobné stránky hodnotí dohromady. Přednost mají data od návštěvníků.

Proč je LCP na mobilu jiné než na počítači?

Na menší obrazovku se vejde jiný obsah, takže LCP prvkem bývá jiný obrázek nebo text. Telefony a mobilní připojení jsou často pomalejší. Proto Google hodnotí mobil a počítač zvlášť.