====== 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://
  * [[it:dev:lighthouse|Google Lighthouse a audity webu]]
  * [[it:dev:web_vitals|Core Web Vitals: Komplexní přehled]]
  * [[it:dev:web_tech|Optimalizace frontendu]]

//Tagy: {{tag>dev web performance lcp lighthouse seo google core-web-vitals}}//