LCP (Largest Contentful Paint)

Co je to LCP?

LCP neboli Largest Contentful Paint je metrika, která měří rychlost načtení největšího viditelného prvku na vaší webové stránce. Jde o klíčový ukazatel toho, jak rychle vidí návštěvník hlavní obsah stránky. Může to být velký obrázek, video, textový blok nebo jakýkoliv jiný významný prvek, který zabírá největší plochu na obrazovce. LCP odpovídá na jednoduchou otázku: „Kdy se návštěvníkovi zobrazí to nejdůležitější?"

Představte si situaci: Otevřete web obchodu s nábytkem. Největším prvkem je obvykle hlavní obrázek produktu nebo banneru. LCP měří přesně čas od kliknutí na odkaz do okamžiku, kdy se tento obrázek plně zobrazí. Čím rychlejší LCP, tím rychleji návštěvník vidí, že stránka je připravená a funkční. To přímo ovlivňuje, zda zůstane na webu, nebo odejde ke konkurenci.

LCP je součástí Core Web Vitals – sady tří klíčových metrik, které Google od roku 2021 používá jako ranking faktor pro SEO. Spolu s INP (interaktivitou) a CLS (vizuální stabilitou) tvoří základ hodnocení uživatelské zkušenosti webu. Google tím dává jasně najevo: rychlost není jen bonus, ale nutnost.

Proč je LCP důležité pro váš web?

LCP má přímý dopad na úspěch vašeho webu ve třech klíčových oblastech. První je SEO – Google LCP přímo zohledňuje při hodnocení pozic ve vyhledávání. Pokud mají dva weby stejnou kvalitu obsahu a odkazů, vyhraje ten s rychlejším LCP. V konkurenčních oborech může rozdíl v sekundách znamenat rozdíl mezi první a pátou pozicí – tedy tisíce zákazníků měsíčně.

Druhá oblast je uživatelská zkušenost. Studie Googlu ukazují, že pravděpodobnost opuštění stránky roste o 32 % při zpoždění z 1 na 3 sekundy. Pokud se hlavní obsah načítá pomalu, návštěvníci ztrácejí trpělivost. Rychlý LCP vytváří důvěru – uživatel okamžitě vidí, že web funguje správně. Pomalý LCP způsobuje frustraci a návštěvníci odcházejí ještě před tím, než stránka dokončí načítání.

Třetí oblast jsou konverze – tedy akce, které od návštěvníků očekáváte. Ať už jde o nákup produktu, vyplnění formuláře nebo zavolání na telefon, rychlejší web konvertuje lépe. Data ukazují, že snížení LCP o jednu sekundu může zvýšit konverze až o 7-12 %. Pro e-shop s tisíci návštěvníků měsíčně to znamená desítky dodatečných objednávek bez investice do reklamy.

Co měří LCP? Které elementy se počítají?

LCP se zaměřuje výhradně na největší viditelný prvek v oblasti obrazovky, kterou návštěvník vidí bez scrollování (tzv. above the fold). Nepočítají se všechny prvky na stránce, pouze ten největší v zorném poli uživatele při načtení.

• Obrázky

Klasické <img> tagy, obrázky uvnitř <svg> elementu a obrázky načítané jako background-image přes CSS. Obrázky jsou nejčastějším LCP prvkem – hlavní bannery, produktové fotky, hero sekce.

• Video elementy

První snímek (thumbnail) videa načteného pomocí <video> tagu. Pokud je video největším prvkem na stránce, jeho thumbnail je LCP prvek.

• Textové bloky

Velké bloky textu uvnitř <div>, <p>, <h1> až <h6> nebo jiných elementů. Typicky jde o nadpisy nebo odstavce v hlavní části stránky.

• Plakáty videí

Poster image (předobrazovka) definovaná pomocí atributu poster u <video> elementu.

Důležité je vědět, že LCP prvek se může během načítání změnit. Například nejdřív se načte nadpis, ten je dočasně největším prvkem. Pak se načte hlavní obrázek, který nadpis převýší. LCP je čas načtení toho posledního největšího prvku.

Ideální hodnoty LCP

Google definuje tři kategorie pro hodnocení LCP, které jasně říkají, jak si váš web vede:

• Dobré (zelená zóna) – LCP do 2,5 sekundy

Toto je cílová hodnota, ke které byste měli směřovat. Znamená, že největší prvek se zobrazí do 2,5 sekundy od začátku načítání. Tato rychlost zajišťuje pozitivní uživatelskou zkušenost a podporuje dobré SEO pozice.

• Potřebuje zlepšení (oranžová zóna) – LCP mezi 2,5 a 4 sekundami

Váš web sice funguje, ale není optimální. Návštěvníci už začínají pociťovat zpoždění. V této kategorii byste se neměli zdržovat dlouho – konkurence s rychlejšími weby vás postupně předežene.

• Špatné (červená zóna) – LCP nad 4 sekundy

To je kritická oblast. Při čekání nad 4 sekundy prudce roste pravděpodobnost, že návštěvník stránku opustí. Google tento výkon hodnotí negativně a může to ovlivnit vaše pozice ve vyhledávání. Okamžitá akce je nutná.

Google vyžaduje, aby alespoň 75 % návštěv vašeho webu mělo dobrou hodnotu LCP. To znamená, že nestačí mít rychlý web jen pro některé uživatele. Optimalizace musí fungovat konzistentně – na pomalých i rychlých připojeních, na starších i nových zařízeních.

Nejčastější příčiny pomalého LCP

• Pomalý server (Server Response Time)

Pokud server odpovídá pomalu na první požadavek, celé načítání stránky startuje se zpožděním. Hlavní příčiny: přetížený nebo nekvalitní hosting, pomalé databázové dotazy, chybějící server-side cachování, geografická vzdálenost serveru.

• Velké a neoptimalizované obrázky

Nejčastější zabiják LCP. Hero obrázky o velikosti 3-5 MB jsou běžné, ale katastrofální pro rychlost. Obrázky ve formátech JPEG nebo PNG bez komprese, nepoužívání moderních formátů (WebP, AVIF), chybějící responzivní obrázky.

• Blokující JavaScript a CSS

Když prohlížeč musí čekat na stažení a zpracování CSS nebo JavaScriptu, než může vykreslit stránku, LCP trpí. Velké CSS soubory v <head> blokují renderování. JavaScript bez atributů async nebo defer zpomaluje celé načítání.

• Pomalé načítání fontů

Vlastní webové fonty mohou způsobit FOIT (Flash of Invisible Text) – situaci, kdy text zůstává neviditelný, dokud se font nenačte. Pokud je text částí LCP prvku, prodlužuje to dobu načtení.

• Client-side rendering

Weby postavené na JavaScriptových frameworcích bez server-side renderingu musí nejdřív načíst JavaScript, spustit ho, vygenerovat HTML a teprve pak zobrazit obsah. To výrazně prodlužuje LCP.

Jak zlepšit LCP – praktické tipy

• Optimalizace obrázků – priorita číslo jedna

Komprimujte všechny obrázky pomocí nástrojů jako TinyPNG nebo Squoosh. Používejte moderní formáty – WebP je až o 30 % menší než JPEG. Implementujte responzivní obrázky pomocí srcset a sizes atributů. Nastavte správné rozměry (width a height atributy).

• Lazy loading – ale opatrně

Lazy loading odloží načítání obrázků mimo první obrazovku, což uvolní zdroje pro LCP prvek. POZOR: Nikdy nepoužívejte lazy loading na LCP obrázek! To by paradoxně LCP zhoršilo. LCP obrázek musí být načten s vysokou prioritou.

• Preload klíčových zdrojů

Řekněte prohlížeči předem, které zdroje jsou kritické. Pro LCP obrázek použijte: <link rel="preload" as="image" href="hero.webp">. Pro fonty podobně. Tyto direktivy umístěte do <head> co nejvýš.

• Optimalizace serveru a hostingu

Vyberte kvalitní hosting s rychlými SSD disky. Implementujte server-side cachování. Použijte HTTP/2 nebo HTTP/3 pro paralelní načítání zdrojů. Zapněte Gzip nebo Brotli kompresi.

• CDN (Content Delivery Network)

CDN doručuje statické soubory z geograficky nejbližšího serveru. Pokud je váš server v Praze a návštěvník přistupuje z USA, CDN může snížit latenci o stovky milisekund. Populární CDN: Cloudflare, BunnyCDN.

• Kritické CSS (Critical CSS)

Extrahujte CSS styly potřebné pro above-the-fold obsah a vložte je inline do <head>. Zbylé CSS načítejte asynchronně. To umožní prohlížeči okamžitě vykreslit viditelný obsah.

Jak změřit LCP – nástroje pro monitoring

• Google PageSpeed Insights

Nejjednodušší a nejpřístupnější nástroj. Zadejte URL vašeho webu a během pár sekund dostanete detailní report. Ukazuje jak laboratorní data, tak polní data ze skutečných uživatelů. Zobrazí přesnou hodnotu LCP a konkrétní doporučení.

• Google Lighthouse

Integrovaný nástroj v Chrome Developer Tools. Stiskněte F12, přejděte na záložku Lighthouse a spusťte audit. Můžete testovat lokální verze webu a simulovat různá zařízení a typy připojení.

• Google Search Console

Sekce "Core Web Vitals" zobrazuje agregované hodnoty LCP pro celý váš web na základě dat z reálných uživatelů. Vidíte, které skupiny URL mají problémy. Google vás upozorní na kritické stránky.

• Chrome DevTools Performance Tab

Pro pokročilou analýzu. Spusťte záznam načítání stránky a získáte detailní timeline všech eventů. Vidíte přesně, kdy nastává LCP a co blokuje renderování.

Pro SEO ranking počítají polní data, protože odrážejí skutečnou zkušenost vašich návštěvníků. Laboratorní data jsou užitečná pro testování změn před nasazením.

Související pojmy