====== 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ů.