Largest Contentful Paint (LCP): doba zobrazení hlavního obsahu stránky

Robinson

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é části stránky (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ý mu potvrzuje, že stránka skutečně „dorazila“.

  • Dobré: ≤ 2,5 s
  • Potřebné zlepšení: > 2,5 s až 4,0 s
  • Špatné: > 4,0 s

Google doporučuje, aby alespoň 75 % návštěv (včetně různých 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. Finálním LCP se stává 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> uvnitř 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 až 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í nejdříve dočasné logo a až později velký banner, LCP se překvalifikuje na nový, větší prvek – výsledek se zhorší.
  • CLS a LCP: Náhlé posuny rozvrž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 obrázku způsobuje zbytečné zpoždění LCP.

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

  • Field data (reálný provoz): Chrome User Experience Report (CrUX), Google Search Console (sekce Core Web Vitals). Odráží rozmanitost zařízení, sítí a skutečných interakcí uživatelů.
  • Lab data (diagnostika): Lighthouse, PageSpeed Insights (lab část), WebPageTest. Pomáhají identifikovat příčiny, ale čísla se mohou lišit od field dat (např. odlišná síť, CPU, bez uživatelské interakce).

Doporučení: optimalizaci řídit podle field dat a laboratorní měření používat k ověření dopadů konkrétních změn.

Hlavní faktory ovlivňující LCP

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

Audit LCP: diagnostický postup krok za krokem

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

Server a síť: TTFB, CDN a edge

  • Kešování HTML: Pro statické či SSR části používejte krátkodobé cache; pro CSR minimalizujte HTML shell.
  • CDN: Umístěte statické aktivy (obrázky, CSS, JS) co nejblíže uživateli; spravujte cache keys a variace.
  • HTTP/2 a HTTP/3: Multiplexing a nižší latence podporují paralelní stahování 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 above-the-fold obsah vložte přímo do HTML; zbytek načtěte neblokujícím způsobem.
  • Rozdělení CSS: Modulární bundly podle šablon; media atributy pro nekritické styly.
  • Minimalizace a deduplikace: Odstraňte nepoužívané selektory, redukujte zásuvné frameworky na minimum.
  • Stabilita obsahu: Nastavte šířku a výšku kontejnerů hero, aby se předešlo CLS, které sekundárně ovlivňuje vnímání LCP.

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

  • Moderní formáty: AVIF (nejefektivnější komprese), WebP (široká podpora).
  • Správná velikost: srcset a sizes pro responzivní doručování; zabraňte odesílání 2–3× větších bitmap, 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>.
  • Popisné rozměry: Nastavte width/height (nebo aspect-ratio) kvůli rezervaci místa.
  • Dekódování a renderování: decoding="async", loading="eager" pro LCP nad průhybem; žádné lazy pro hlavní obrázek.
  • Transformace CDN: On-the-fly ořez, komprese dle zařízení, inteligentní doručování podle DPR 1–3.

JavaScript a jeho vliv na LCP

  • Defer a async: Veškerý nezbytný JS načítejte s defer; skripty bez závislosti na DOM můžete mít s async.
  • Code-splitting: Načítejte jen to, co je potřeba 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 (např. latin-ext pouze 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žňuje 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 není blokující a hlavní obsah je správně priorizován.
  • CSR/SPA: Vyhněte se „blank page“ – skeletony, streamování HTML, partial hydration, islands architecture snižují čas do prvního obsahu.
  • Routing a LCP na podstránkách: V rámci 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 kompromisy.
  • LCP vs. CLS: Rezervujte prostor pro hero prvky, obrázky a fonty, aby „zaznamenaný“ LCP nebyl narušen posuny obsahu.

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

  • Lazy-loading hlavního obrázku: loading="lazy" nad průhybem.
  • Obrovské univerzální CSS a JS balíky: 300 kB+ před první malbou obsahu.
  • Žádný preload pro LCP zdroje: Prohlížeč je objeví pozdě.
  • Neurčené rozměry obrázků: Zvyšuje CLS a oddaluje stabilní vykreslení.
  • Pomalý server: Vysoký TTFB pro všechny návštěvníky.

Kontrolní seznam (Checklist) pro rychlá zlepšení

  • Hlavní 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é deferred, stabilní kontejnery.
  • JS: defer, code-splitting, odklad nespustitelný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í knihovny Web Vitals JS a zasí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 above-the-fold styly pro hero sek

Súvisiace články