LCP – Largest Contentful Paint

LCP (zkratka z anglického Largest Contentful Paint) je metrika zaměřená na uživatelskou zkušenost, která měří rychlost načítání hlavního obsahu webové stránky. Konkrétně určuje čas, za který se v prohlížeči vykreslí největší viditelný prvek v oblasti nad záhybem (above the fold) – typicky jde o hlavní obrázek, video nebo rozsáhlý blok textu.

Od roku 2020 je LCP klíčovou součástí sady Core Web Vitals, kterou Google používá jako jeden z faktorů pro hodnocení kvality webu a jeho pořadí ve výsledcích vyhledávání (SEO).

1. Co LCP měří a co ne?

Na rozdíl od starších metrik (jako je *Load* nebo *DOMContentLoaded*), které měří technické milníky sítě, LCP se soustředí na vnímání uživatelem.

Měřené prvky: Obrázky (<img>), obrázky uvnitř SVG, náhledové obrázky videí, obrázky na pozadí načtené přes CSS (url()) a blokové textové prvky.
Kdy měření končí: Metrika se zastaví v momentě, kdy je vykreslen největší prvek a uživatel začne se stránkou interagovat (skrolování, kliknutí).

2. Hodnocení metriky LCP

Google definuje tři pásma pro hodnocení rychlosti vykreslení největšího obsahu:

Čas LCP	Hodnocení	Interpretace
do 2,5 s	Dobré (Good)	Stránka se pocitově načítá okamžitě.
2,5 s – 4,0 s	Vyžaduje zlepšení (Needs Improvement)	Uživatel začíná pociťovat prodlevu.
nad 4,0 s	Špatné (Poor)	Vysoké riziko opuštění stránky uživatelem.

3. Faktory ovlivňující LCP

Špatné výsledky LCP jsou nejčastěji způsobeny čtyřmi faktory:

Pomalá odezva serveru (TTFB)

Pokud serveru trvá dlouho, než odešle první bajt dat, celé vykreslování se posouvá. Řešení: Optimalizace databáze, cachování na straně serveru, využití CDN (Content Delivery Network).

JavaScript a CSS blokující vykreslování

Prohlížeč musí nejprve stáhnout a zpracovat soubory stylů a skriptů, než začne vykreslovat obsah. Řešení: Minifikace souborů, odložení nepodstatného JS (defer/async) a extrakce kritického CSS.

Dlouhá doba načítání zdrojů

Pokud je největším prvkem neoptimalizovaný, obří obrázek, LCP bude vysoké. Řešení: Formáty nové generace (WebP, Avif), responzivní obrázky (srcset) a prioritizace načítání (fetchpriority=„high“).

Vykreslování na straně klienta (Client-side Rendering)

U aplikací v Reactu či Vue se obsah generuje až v prohlížeči, což přirozeně oddaluje moment LCP. Řešení: Server-side Rendering (SSR) nebo statické generování (SSG).

4. Jak měřit LCP?

Pro diagnostiku LCP existují dva typy nástrojů:

Lab Tools (Laboratorní data): Simulované podmínky. Používají se při vývoji (např. Lighthouse, Chrome DevTools).
Field Tools (Data z reálného provozu): Data od skutečných uživatelů (např. PageSpeed Insights, Google Search Console – CrUX report).

Závěr

LCP je dnes nejdůležitější metrikou rychlosti webu, protože nejlépe koreluje s tím, zda uživatel považuje stránku za užitečnou a funkční. Optimalizace LCP není jen technickým úkolem pro programátory, ale klíčovým prvkem digitálního marketingu a konverzního poměru e-shopů.