Largest Contentful Paint (LCP) – klíčová metrika rychlosti načítání webu

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

Largest Contentful Paint (LCP) je klíčová 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 stránka skutečně „dorazila“.

• 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 (rozdělených podle zařízení a sítí) splňovalo „dobrou“ hranici.

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

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

• <img> – klasické bitmapové obrázky.
• Obrázek definovaný pomocí CSS background-image na blokovém prvku (pokud je viditelný).
• Poster videa – <video poster="...">.
• SVG obrázky – <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é „pastičky“

• Okno měření: Kandidáti se sledují od navigace po první interakci uživatele nebo skrytí stránky. LCP se „zamkne“ při těchto událostech.
• Pozdní nahrazení kandidáta: Pokud se zobrazí dočasné logo a následně velký banner, LCP se překvalifikuje na nový větší prvek – výsledkem je zhoršení.
• CLS a LCP: Náhlé posuny rozložení (CLS) mohou posunout LCP prvek mimo viewport nebo oddálit jeho stabilní vykreslení.
• Lazy-loading nad the fold: Nesprávné použití atributu loading="lazy" na hlavním (hero) obrázku způsobuje zbytečné zpoždění LCP.

Field vs. Lab: kde LCP měřit a jak 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 reálné interakce.
• Lab data (diagnostika): Lighthouse, PageSpeed Insights (lab část), WebPageTest. Pomáhají najít příčiny, ale čísla se mohou lišit od field dat (např. jiná síť, CPU, bez interakce).

Doporučení: optimalizaci řídit field daty a laboratorní měření používat k ověřování dopadu konkrétních změn.

Hlavní faktory ovlivňující LCP

1. Čas do prvního bajtu (TTFB): Pomalý backend nebo síť zpomalují vše ostatní.
2. Blokující zdroje: Především CSS a někdy JavaScript brání vykreslení LCP prvku.
3. Dostupnost a priorita LCP zdroje: Hlavní obrázek bez preload a bez fetchpriority="high" přijde příliš pozdě.
4. Velikost a formát: Neoptimalizované obrázky, neefektivní formáty (například staré JPEG vs. AVIF/WebP) zvyšují čas dekódování i přenosu.
5. Náročnost vykreslení: Složité styly, velké fonty bez font-display, náročné layouty, efekty a animace.

Audit LCP: diagnostický postup krok za krokem

1. Identifikujte LCP prvek: V PageSpeed Insights nebo Lighthouse si zobrazte „Largest Contentful Paint element“.
2. Změřte TTFB: Pokud je vysoký, řešte server (cachování, geo-CDN, databázové indexy, edge rendering, Early Hints 103).
3. Zkontrolujte blokující CSS/JS: Minimalizujte, rozdělte, načítejte pomocí media queries, použijte kritické CSS inline pro obsah above-the-fold.
4. Preferujte prioritu LCP zdroje: <link rel="preload" as="image" href="hero.avif" imagesrcset="..." imagesizes="..."> a na elementu atribut fetchpriority="high".
5. Optimalizujte obrázek: AVIF/WebP, správné width/height, srcset/sizes, případné ořezání a komprese.
6. Fonty a textové LCP: Použijte font-display: swap, preloading kritických fontů, subsetting (pouze potřebné glyfy).
7. Zrušte lazy-loading nad hlavním obsahem: Odstraňte loading="lazy" z LCP prvku; pod záhybem jej ponechte.
8. Minimalizujte JavaScript: Odložte kód, který není nutný k okamžitému spuštění (defer, async), používejte code-splitting a pouze nezbytné knihovny.

Server a síť: TTFB, CDN a edge

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

CSS strategie pro rychlý LCP

• Kritické CSS inline: Malý blok stylů pro obsah nad záhybem vložte přímo do HTML; zbytek načítejte neblokujícím způsobem.
• Rozdělení CSS: Modulární balíčky podle šablon; media atributy pro nekritické styly.
• Minimalizace a deduplikace: Odstraňte nepoužívané selektory, omezte zásuvné frameworky na minimum.
• Stabilita obsahu: Šířka/výška pro kontejnery hlavního obsahu, aby se zabránilo CLS, který sekundárně ovlivňuje vnímání LCP.

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

• Moderní formáty: AVIF (nejlepší komprese), WebP (široká podpora).
• Správná velikost: Používejte srcset a sizes pro responzivní doručování; zabraňte zasílání bitmap 2–3× větších, 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>.
• Určené rozměry: Nastavte width/height (nebo aspect-ratio) pro rezervaci místa.
• Decoding a rendering: decoding="async", loading="eager" pro LCP nad záhybem; vyhněte se lazy u hlavních obrázků.
• CDN transformace: On-the-fly ořez, komprese dle zařízení, inteligentní doručování s DPR 1–3.

JavaScript a jeho vliv na LCP

• Defer a async: Veškerý nezbytný JavaScript načítejte s atributem defer; skripty bez závislosti na DOM lze mít async.
• Code-splitting: Načítejte pouze to, co potřebujete pro první vykreslení. Zbytek hydratujte později.
• Minimalizace runtime práce: Méně reflow, méně náročných výpočtů před zobrazením LCP prvku.
• Odklad nerelevantního kódu: Analytika, chaty, widgety – po LCP nebo na requestIdleCallback.

Fonty a textové LCP

• Preload 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).
• Subsetting: Odstraňte nepoužívané glyfy (latin-ext jen pokud je potřeba).

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

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

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

Specifika SPA/SSR/SSG a LCP

• SSR/SSG: Rychlejší první zobrazení HTML a často lepší LCP, pokud CSS není blokující a hlavní prvek je správně priorizován.
• CSR/SPA: Vyhýbejte se „prázdné stránce“ – skeletony, streamování HTML, partial hydration, islands architecture snižují čas do prvního obsahu.
• Routing 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 odkládající interaktivitu (těžký JS po LCP) mohou zhoršit INP. Hledejte kompromis.
• LCP vs. CLS: Rezervujte místo pro hlavní prvky, obrázky a fonty, aby „vnímaný“ LCP nebyl narušen posuny.

Nejčastější anti-patterny, které ničily LCP

• Lazy-loading hlavního obrázku: loading="lazy" nad záhybem.
• Obrovské univerzální CSS a JS balíčky: 300 kB+ před první malbou.
• Bez preloadu pro LCP zdroje: Prohlížeč je nalezne příliš pozdě.
• Nespecifikované rozměry obrázků: Zvýšení CLS a zpoždění stabilního vykreslení.
• Pomalý server: Vysoký TTFB pro všechny návštěvníky.

Kontrolní seznam (Checklist) pro rychlé úspěchy

• Hlavní (hero) obrázek: AVIF/WebP, správná velikost, width/height, srcset/sizes, decoding="async", fetchpriority="high", loading="eager".
• Preload: LCP obrázek, kritický font (crossorigin), kritické CSS inline.
• Server: CDN, HTTP/2/3, cache, optimalizovaná databáze, Early Hints.
• CSS: minimalizované, rozdělené, nekritické odložené, stabilní kontejnery.
• JS: defer, code-splitting, odklad nevyhnutných skriptů po LCP.
• Fonty: font-display: swap, subsetting.
• 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 pro rychlou diagnostiku LCP prvku a doporučení.
• WebPageTest: Detailní waterfall grafy, priority, filmstrip – výborné 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í Web Vitals JS knihovny a posílejte metriky do analytiky.

Příklady implementačních vzorů

• Hlavní 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 inline: <style>/* pouze nadzáhybové styly pro hero sekci */</style> a zbytek načt