Co je LCP a jak ho zkrátit — návod pro rychlejší web

Když si někdo otevře váš web, chce vidět obsah. Ne prázdnou bílou plochu, ne otáčející se kolečko. LCP (Largest Contentful Paint) měří přesně to: za jak dlouho se na obrazovce objeví největší prvek — nejčastěji velký obrázek v hlavičce, případně velký nadpis nebo video náhled.

Je to jedno z mála čísel, které má smysl řešit. Google ho bere jako signál kvality stránky a hlavně: je to číslo vašich zákazníků, ne odhad z laboratoře.

Jaké číslo je dobré

• do 2,5 s — dobré. Nic neřešte.
• 2,5 až 4 s — „chce to zlepšit“. Ztrácíte část návštěvníků.
• nad 4 s — špatné. Velká část lidí odejde dřív, než něco uvidí.

Měřeno na telefonech skutečných návštěvníků, ne na vašem rychlém notebooku. Proto se vaše číslo může zdát horší než to, co vidíte u sebe.

LCP se skládá ze čtyř částí

Tohle je nejdůležitější věta celého článku: LCP není jedna věc. Když se řekne „web je pomalý“, může to znamenat čtyři různé problémy a každý se opravuje jinak:

1. Odezva serveru (TTFB) — jak dlouho server přemýšlí, než pošle první bajt. Velký problém u levného hostingu a u stránek, které při každém načtení počítají něco složitého.
2. Zpoždění, než se obrázek začne stahovat — prohlížeč o hlavním obrázku ještě neví, protože ho objeví až v CSS nebo až po spuštění JavaScriptu. Tohle bývá nejčastější vina.
3. Doba stahování obrázku — obrázek je prostě moc velký (5 MB fotka z foťáku) nebo se stahuje pomalu.
4. Zpoždění vykreslení — obrázek už je stažený, ale stránka ho ještě neumí zobrazit, protože čeká na fonty, reklamy nebo skripty.

Kde zjistíte svoje číslo

• Náš SEO test zdarma — po zadání domény uvidíte v reportu sekci Rozklad LCP, která rovnou řekne, která ze čtyř částí vás zdržuje nejvíc.
• PageSpeed Insights od Googlu — laboratorní i reálná data.
• Chrome DevTools → záložka Performance (pro technicky zdatné).

Sedm kroků, které LCP nejčastěji spraví

1. Označte hlavní obrázek za hlavní

Řekněte prohlížeči, že tenhle obrázek je nejdůležitější a má se stahovat první. Bez toho se stahuje spolu s dvaceti ikonkami.

<img src="hero.webp" fetchpriority="high" width="1200" height="600" alt="Popis obrázku">

2. Dejte mu přednačtení (preload)

Když je obrázek schovaný v CSS na pozadí nebo se načítá až později, přidejte do hlavičky stránky:

<link rel="preload" as="image" href="hero.webp" fetchpriority="high">

3. Zmenšete obrázek

Fotka 4000 px na šířku v hero sekci, která je na obrazovce 1200 px, je zbytečná. Cíl: šířka podle reálného zobrazení (typicky 1600 px pro široké monitory, 800 px pro mobil), formát WebP nebo AVIF, hmotnost do 200 kB.

4. Nepoužívejte lazy loading na hlavní obrázek

Tohle je klasická past. loading="lazy" na hlavním obrázku říká prohlížeči „počkej, až se to bude hodit“ — a tím si LCP zhoršíte o celou sekundu i víc. Lazy loading patří obrázkům až níž na stránce.

5. Zrychlete server (TTFB)

Když je nejpomalejší částí „odezva serveru“, nepomůže žádné zmenšování obrázků. Řešením je kešování stránek, jednodušší dotazy do databáze a hosting blíž k zákazníkům. Cíl: do 0,8 s.

6. Zrušte, co blokuje vykreslení

Reklamní skripty, chat widgety a velké CSS soubory v hlavičce odsouvají zobrazení obsahu. Načtěte je až po zobrazení stránky (odloženě), případně až po kliknutí.

7. Ověřte to na mobilu, ne na notebooku

Tři čtvrtiny návštěv z mobilu znamenají, že právě tam se rozhoduje. Testujte na pomalém připojení a se zapnutým omezením procesoru — nebo se podívejte na reálná data v našem reportu.

Co si odnést

LCP není o tom „mít rychlý web“, ale o tom, jak rychle návštěvník uvidí to, kvůli čemu přišel. Začněte tím, že zjistíte, která ze čtyř částí vás zdržuje — oprava té jedné věci obvykle zabere méně času než slepé zmenšování všech obrázků na webu.

Otestujte svůj web zdarma — do dvou minut uvidíte svoje LCP, rozklad na části i konkrétní doporučení. Pokud chcete rovnou i hlídání a historii, podívejte se na tarify.