LCP – Largest Contentful Paint

Largest Contentful Paint (LCP) je metrika zaměřená na uživatele, která měří vnímanou rychlost načítání stránky. Označuje okamžik v časové ose načítání, kdy se pravděpodobně dokončilo vykreslování hlavního obsahu stránky.

1. Hodnoty a hodnocení

Aby web poskytoval dobrou uživatelskou zkušenost, měl by LCP nastat do 2,5 sekundy od začátku načítání stránky.

Hodnocení	Čas (sekundy)
Dobré (Good)	0 – 2,5 s
Vyžaduje zlepšení (Needs Improvement)	2,5 – 4,0 s
Špatné (Poor)	nad 4,0 s

—

2. Co se považuje za největší prvek?

Lighthouse a další nástroje pro měření LCP sledují pouze prvky uvnitř viewportu (viditelné části obrazovky):

Prvky <img> (obrázky).
Prvky <image> uvnitř <svg>.
Náhledové obrázky u videa (poster images).
Prvky s obrázkem na pozadí načteným přes url().
Blokové prvky (např. <div>, <h1>, <p>), které obsahují textové uzly.

—

3. Hlavní příčiny špatného LCP

Pokud je hodnota LCP vysoká, obvykle za tím stojí jeden ze čtyř faktorů:

1. **Pomalá odezva serveru:** Serveru trvá příliš dlouho, než pošle první data (vysoké TTFB).
2. **JavaScript a CSS blokující vykreslování:** Prohlížeč musí nejprve stáhnout a zpracovat velké soubory, než začne kreslit pixely.
3. **Pomalé načítání zdrojů:** Samotný prvek (např. 5MB neoptimalizovaný obrázek) se stahuje příliš dlouho.
4. **Vykreslování na straně klienta (CSR):** Prohlížeč musí nejprve stáhnout a spustit JavaScript, aby vůbec věděl, co má vykreslit.

—

4. Jak optimalizovat LCP?

Optimalizace LCP vyžaduje kombinaci technických úprav:

Priority Hints: Použijte <link rel=„preload“> nebo atribut fetchpriority=„high“ pro kritické obrázky, aby je prohlížeč stáhl přednostně.
Optimalizace obrázků: Používejte moderní formáty (WebP, AVIF), správnou kompresi a responzivní obrázky (srcset).
Odstranění render-blocking zdrojů: Odložte (defer) nebo asynchronně načtěte JavaScript a CSS, které nejsou nutné pro úvodní zobrazení.
CDN a Caching: Přibližte obsah uživateli pomocí Content Delivery Network a nastavte správné hlavičky pro mezipaměť.

—

5. LCP a SEO

Od roku 2021 je LCP oficiálním faktorem hodnocení (ranking factor) ve vyhledávači Google. Stránky s lepším LCP mají vyšší šanci na lepší umístění ve výsledcích vyhledávání, protože Google preferuje weby s rychlou uživatelskou odezvou.

Související články:

Tagy: dev web performance lcp lighthouse seo google core-web-vitals