LCP (Largest Contentful Paint): Čas vykreslení největšího obsahového prvku

Co je LCP (Largest Contentful Paint) a proč na něm záleží

Largest Contentful Paint (LCP) je základní metrika Core Web Vitals, která měří čas od začátku načítání stránky do okamžiku, kdy se ve viditelné oblasti (above the fold) zobrazí největší obsahový prvek. Jejím cílem je zhodnotit, jak rychle návštěvník uvidí klíčový obsah, který ho ujistí, že se stránka skutečně „načetla“.

Dobré: ≤ 2,5 s
Vyžaduje zlepšení: > 2,5 s až 4,0 s
Špatné: > 4,0 s

Google doporučuje, aby alespoň 75 % návštěv (napříč zařízeními a sítěmi) splňovalo „dobrou“ hranici.

Jaké prvky se mohou stát kandidátem na LCP

Prohlížeč průběžně identifikuje kandidáty na LCP. Konečným LCP je nakonec největší kandidát těsně před první interakcí uživatele nebo skrytím karty. Mezi kandidáty patří:

<img> – klasické rastrové obrázky.
Obrázek definovaný pomocí CSS background-image na blokovém prvku (pokud je viditelný).
Náhledový obrázek videa – <video poster="...">.
Obrázky SVG – <image> v rámci SVG.
Velké textové bloky (textové uzly v blokových prvcích), pokud představují největší obsah.

Životní cyklus LCP a časté „nástrahy“

Okno měření: Kandidáti se sledují od navigace až do první interakce uživatele nebo skrytí stránky. Při těchto událostech se LCP „uzamkne“.
Pozdější nahrazení kandidáta: Pokud se nejprve zobrazí dočasné logo a až poté přijde velký banner, LCP se změní na nový, větší prvek – výsledek se zhorší.
CLS a LCP: Náhlé posuny rozvržení (CLS) mohou posunout prvek LCP mimo viewport nebo oddálit jeho stabilní vykreslení.
Líné načítání nad přehybem: Nesprávné použití loading="lazy" u hero obrázku způsobuje zbytečné zpoždění LCP.

Field vs. lab: kde LCP měřit a jak výsledky interpretovat

Field data (reálný provoz): Chrome User Experience Report (CrUX), Google Search Console (sekce Core Web Vitals). Odráží různá zařízení, sítě a skutečné interakce.
Lab data (diagnostika): Lighthouse, PageSpeed Insights (lab část), WebPageTest. Pomáhají najít příčiny, ale hodnoty se mohou od field dat lišit (např. jiná síť, CPU, žádná interakce).

Doporučení: řídit optimalizaci podle field dat a laboratorními měřeními ověřovat dopad konkrétních změn.

Hlavní faktory ovlivňující LCP

Doba do prvního bajtu (TTFB): Pomalý backend nebo síť zpomalují všechno ostatní.
Zdroje blokující vykreslování: Především CSS a někdy JS brání vykreslení prvku LCP.
Dostupnost a priorita zdroje LCP: Hero obrázek bez preload a bez fetchpriority="high" se načte pozdě.
Velikost a formát: Neoptimalizované obrázky a neefektivní formáty (např. starší JPEG oproti AVIF/WebP) prodlužují dekódování i přenos.
Náročnost vykreslování: Složité styly, velké fonty bez font-display, náročná rozvržení, efekty a animace.

Audit LCP: diagnostický postup krok za krokem

Identifikujte prvek LCP: V PageSpeed Insights nebo Lighthouse se podívejte na „Largest Contentful Paint element“.
Změřte TTFB: Pokud je vysoké, řešte server (kešování, geo-CDN, databázové indexy, vykreslování na okraji sítě, Early Hints 103).
Zkontrolujte CSS/JS blokující vykreslování: Minimalizujte je, rozdělte, načítejte pomocí media queries a nad přehybem použijte kritické CSS vložené přímo do stránky.
Upřednostněte zdroj LCP: <link rel="preload" as="image" href="hero.avif" imagesrcset="..." imagesizes="..."> a na prvku fetchpriority="high".
Optimalizujte obrázek: AVIF/WebP, správné width/height, srcset/sizes, případně oříznutí a komprese.
Fonty a textové LCP: font-display: swap, předběžné načtení kritických fontů, subsetování (pouze potřebné glyfy).
Odstraňte líné načítání hero obsahu: Z prvku LCP odstraňte loading="lazy"; pod přehybem jej ponechte.
Omezte JS: Odložte kód, který se nespouští okamžitě (defer, async), používejte dělení kódu a pouze nezbytné knihovny.

Server a síť: TTFB, CDN a edge

Kešování HTML: Pro statické/SSR části využijte krátkodobou cache; u CSR minimalizujte HTML shell.
CDN: Umístěte statické prostředky (obrázky, CSS, JS) blíže k uživateli; spravujte klíče cache a varianty.
HTTP/2 a HTTP/3: Multiplexování a nižší latence pomáhají s paralelním stahováním zdrojů LCP.
Early Hints (103): Nasměrujte prohlížeč k preload ještě před TTFB.

Strategie CSS pro rychlé LCP

Kritické CSS přímo v HTML: Malý blok stylů pro obsah nad přehybem vložte přímo do HTML; zbytek načtěte neblokujícím způsobem.
Rozdělení CSS: Modulární bundly podle šablon; atributy media pro nekritické styly.
Minimalizace a deduplikace: Odstraňte nepoužívané selektory a omezte nadbytečné frameworky na minimum.
Stabilita obsahu: Nastavte šířku/výšku kontejnerů hero, aby nedocházelo k CLS, které může sekundárně ovlivnit vnímání LCP.

Optimalizace obrázků – nejčastější prvek LCP

Moderní formáty: AVIF (nejlepší komprese), WebP (široká podpora).
Správná velikost: srcset a sizes pro responzivní doručování; neposílejte rastrové obrázky 2–3× větší, než je potřeba.
Preload a priorita: <link rel="preload" as="image" href="hero.avif" imagesrcset="..." imagesizes="(min-width: 1024px) 100vw, 100vw"> + fetchpriority="high" na <img>.
Rozměry v HTML: Nastavte width/height (nebo aspect-ratio) kvůli rezervaci místa.
Dekódování a vykreslování: decoding="async", loading="eager" pro LCP nad přehybem; pro hero nepoužívejte lazy.
Transformace CDN: Ořez za běhu, komprese podle zařízení, inteligentní doručování pro DPR 1–3.

JavaScript a jeho vliv na LCP

Defer a async: Veškerý nepotřebný JS načítejte pomocí defer; skripty nezávislé na DOM mohou mít atribut async.
Dělení kódu: Načtěte pouze to, co potřebujete pro první vykreslení. Zbytek hydratujte později.
Minimalizace práce za běhu: Méně překreslování, méně náročných výpočtů před zobrazením prvku LCP.
Odložení nerelevantního kódu: Analytika, chaty, widgety – až po LCP nebo pomocí requestIdleCallback.

Fonty a textové LCP

Předběžné načtení kritických fontů: <link rel="preload" as="font" href="Inter-Var.woff2" type="font/woff2" crossorigin>.
font-display: Použijte swap nebo optional, aby text nezůstal neviditelný (FOIT).
Subsetování: Odstraňte nepoužívané glyfy (latin-ext pouze v případě potřeby).

Priority Hints a signály pro prohlížeč

Prohlížeči můžete výslovně naznačit, co je pro LCP klíčové:

fetchpriority="high" na obrázku LCP (nebo low u méně důležitých).
rel="preload" s atributem as (as="image", as="style", as="font").
Early Hints (103): Umožní klientovi začít stahovat klíčové zdroje ještě před TTFB.

Specifika SPA/SSR/SSG a LCP

SSR/SSG: Rychlejší první zobrazení HTML a často lepší LCP, pokud CSS neblokuje vykreslování a hero má správnou prioritu.
CSR/SPA: Vyhněte se „prázdné stránce“ – skeletony, streamování HTML, částečná hydratace a architektura islands zkracují dobu do zobrazení prvního obsahu.
Navigace a LCP na podstránkách: V SPA sledujte LCP i při navigaci mezi routami (uživatel vnímá LCP opakovaně).

Interakce LCP s ostatními Core Web Vitals (INP, CLS)

LCP vs. INP: Agresivní optimalizace, které odloží interaktivitu (náročný JS po LCP), mohou zhoršit INP. Hledejte kompromis.
LCP vs. CLS: Rezervujte místo pro prvky hero, obrázky a fonty, aby zobrazený prvek LCP nenarušovaly posuny.

Nejčastější anti-patterny, které zhoršují LCP

Líné načítání hero obrázku: loading="lazy" nad přehybem.
Obrovské univerzální bundly CSS a JS: 300 kB+ před prvním vykreslením.
Chybějící preload zdrojů LCP: Prohlížeč je objeví pozdě.
Nespecifikované rozměry obrázku: Zvyšují CLS a oddalují stabilní vykreslení.
Pomalý server: Vysoké TTFB pro všechny návštěvníky.

Kontrolní seznam (checklist) pro rychlé výsledky

Hero obrázek: AVIF/WebP, správná velikost, width/height, srcset/sizes, decoding="async", fetchpriority="high", loading="eager".
Preload: obrázek LCP, kritický font (crossorigin), kritické CSS vložené přímo do HTML.
Server: CDN, HTTP/2/3, cache, optimalizovaná databáze, Early Hints.
CSS: minimalizované, rozdělené, nekritické načítané odloženě, stabilní kontejnery.
JS: defer, dělení kódu, odložení nepotřebných skriptů až po LCP.
Fonty: font-display: swap, subsetování.
Monitoring: GSC Core Web Vitals + CrUX – cílit na 75. percentil ≤ 2,5 s.

Měření a monitoring v praxi

PageSpeed Insights: Kombinuje CrUX (field) a Lighthouse (lab). Použijte jej k rychlé diagnostice prvku LCP a doporučení.
WebPageTest: Podrobné waterfall grafy, priority, filmstrip – skvělý nástroj pro hledání pozdních závislostí.
Real User Monitoring (RUM): Měřte LCP přímo u svých návštěvníků pomocí knihovny Web Vitals JS a odesílejte metriky do analytiky.

Příklady implementačních vzorů

Hero obrázek (HTML): <img src="hero.avif" srcset="hero-768.avif 768w, hero-1280.avif 1280w, hero-1920.avif 1920w" sizes="(min-width: 1024px) 100vw, 100vw" width="1920" height="1080" alt="..." decoding="async" fetchpriority="high" loading="eager">
Preload obrázku (HEAD): <link rel="preload" as="image" href="/img/hero.avif" imagesrcset="/img/hero-768.avif 768w, /img/hero-1280.avif 1280w" imagesizes="100vw">
Kritické CSS vložené přímo do HTML: <style>/* pouze styly pro hero sekci nad přehybem */</style> a zbytek načtěte se zpožděním.
Preload fontu: <link rel="preload" as="font" href="/fonts/Inter-Var.woff2" type="font/woff2" crossorigin> + font-display: swap.

Metodika zlepšování: od hypotézy k výsledku

Formulujte hypotézu: „Preload a AVIF zkrátí LCP o 400 ms.“
Proveďte izolovanou změnu: Například upravte pouze hero obrázek a jeho prioritu, nic dalšího.
Ověřte v laboratorním prostředí: Lighthouse/WebPageTest – změřte rozdíl.
Vyhodnoťte field data: Po nasazení sledujte 75. percentil LCP v GSC/CrUX.
Opakujte: Postupně řešte TTFB, CSS, JS, fonty…

Speciální scénáře a pokročilé tipy

Content-visibility: Použijte u bloků pod přehybem (content-visibility: auto), aby se obsah nad přehybem vykreslil dříve.
Aspect-ratio: Rezervujte místo v rozvržení pro obrázky/komponenty s proměnlivou velikostí.
Server Components / Islands: Méně JS pro hydrataci = nižší riziko blokování LCP.
Obrázky v CSS: Pokud je kandidátem na LCP background-image, zvažte jeho přesunutí do <img> kvůli lepšímu předběžnému načtení a prioritizaci.

Co sdělit stakeholderům

Dopad na podnikání: Rychlé zobrazení hero obsahu snižuje míru odchodů a zlepšuje konverze.
Cíle: 75. percentil LCP ≤ 2,5 s na mobilech i počítačích.
Plán: Server → CSS/JS → Obrázky/Fonty → Monitoring a iterace.

Shrnutí

LCP je klíčovým ukazatelem toho, zda návštěvník rychle uvidí podstatný obsah. Dosažení skvělého LCP vyžaduje kombinaci několika oblastí: rychlý server (nižší TTFB), minimální blokování vykreslování (kritické CSS, defer JS), správně prioritizované a optimalizované prostředky (hero obrázek, fonty) a průběžný monitoring skutečných uživatelů. Pokud budete uvedené postupy systematicky uplatňovat, udržíte LCP v zelených číslech i u moderních a obsahově bohatých frontendů.