LCP vysvětleně: jak ho optimalizovat pro SEO

LCP je zásadní metrika uživatelského zážitku a faktor hodnocení Googlem. Když uživatel otevře vaši stránku, nezajímá ho celková doba načtení. Zajímá ho, kdy uvidí hlavní obsah a může začít číst nebo s ním pracovat. LCP měří přesně tento okamžik: kdy se stane viditelným největší prvek obsahu. Když je LCP v pořádku, stránka působí rychle. Pokud není, působí pomalu, i když jsou ostatní metriky v pořádku.

Optimalizace LCP vyžaduje přístup ze tří stran: zlepšení doby odezvy serveru (TTFB), odstranění zdrojů blokujících vykreslení a optimalizaci obrázků. Každý přístup řeší jiná úzká místa LCP. Kombinace přináší výrazná zlepšení.

Co je LCP a jak se měří

Largest Contentful Paint (LCP) je doba vykreslení největšího viditelného prvku obsahu na vaší stránce. Může jít o velký obrázek, video, nadpis nebo blok textu. LCP měří od chvíle, kdy uživatel přejde na stránku, až do okamžiku, kdy je tento prvek viditelný. Dokumentace Googlu k LCP podává podrobné technické informace a strategie optimalizace.

LCP není binární ukazatel splněno nebo nesplněno. Je to plynulé skóre. Google stanovil, že LCP pod 2,5 sekundy je „dobré“, LCP mezi 2,5-4 sekundami potřebuje zlepšení a LCP nad 4 sekundy je špatné. Uživatelé vnímají stránky s LCP pod 2 sekundy jako velmi rychlé. Stránky s LCP 3-4 sekundy působí znatelně pomaleji. Stránky s LCP přes 5 sekund jsou často opuštěny.

LCP se během načítání stránky mění, jak se objevují větší prvky obsahu. Pokud se velký obrázek načte až ve třetí sekundě, LCP skočí z 1 sekundy na 3 sekundy. To je důležité: nestačí optimalizovat jen čas prvního vykreslení. Musíte zajistit, aby se všechny velké prvky obsahu načítaly rychle.

Pochopení Time to First Byte (TTFB)

Time to First Byte (TTFB) je doba od zahájení navigace do chvíle, kdy server vrátí první bajt HTML dokumentu. TTFB určuje spodní hranici LCP. Pokud je TTFB 2 sekundy, LCP nemůže být lepší než 2 sekundy, protože prohlížeč ještě nedostal HTML. Snížení TTFB je předpokladem snížení LCP.

Dobré TTFB je pod 600 ms. TTFB mezi 600-1800 ms potřebuje zlepšení. TTFB nad 1800 ms je špatné. Pokud je vaše TTFB pomalé, zaměřte se nejdřív na optimalizaci serveru. Žádná optimalizace na straně frontendu nedokáže pomalý server vynahradit.

Běžné příčiny pomalého TTFB: neefektivní kód na backendu, databázové dotazy nebo přetížení serveru. Pomalý hosting také způsobuje vysoké TTFB. Sdílený hosting bývá extrémně pomalý. Přejděte na VPS nebo cloudový hosting pro lepší výkon. Použijte CDN, které sníží TTFB tím, že obsah doručuje ze serverů blízko uživatelů.

PageSpeed Insights ukazuje vaše TTFB v sekci „Doba odezvy serveru“. Pokud je TTFB úzké místo, bude zvýrazněno jako priorita.

Určení největšího prvku obsahu

LCP závisí na tom, co je na vaší stránce největší prvek obsahu. U blogového článku může být největším prvkem velký úvodní obrázek. U produktové stránky to může být fotka produktu. U zpravodajského webu může jít o nadpis článku. Určení prvku LCP je prvním krokem k jeho optimalizaci.

Prvek LCP určíte pomocí nástrojů pro vývojáře v Chromu. Otevřete DevTools, přejděte na záložku Performance, spusťte nahrávání a stránku znovu načtěte. V záznamu výkonu hledejte značku „Largest Contentful Paint“. Najetím na ni uvidíte, který prvek LCP spustil. Jakmile prvek znáte, optimalizujte ho.

Prvkem LCP je často obrázek. Obrázky jsou velké a načítají se až po zpracování HTML. Optimalizace načítání obrázků má u většiny webů na LCP největší dopad. Obrázky pod hranicí záhybu lze načítat líně, čímž se zrychlí LCP obsahu nad hranicí záhybu.

Předběžné načítání kritických zdrojů

Předběžné načítání (preload) říká prohlížeči, aby začal stahovat zdroj včas, dřív než je potřeba pro vykreslení. Preload vašeho obrázku LCP nebo jiných kritických zdrojů zapíšete pomocí `` značek v hlavičce HTML. To prohlížeči sdělí: „začni tento zdroj stahovat okamžitě.“

Příklad: `` říká prohlížeči, aby začal stahovat úvodní obrázek okamžitě, a nečekal, až se zpracuje CSS. To může snížit LCP o 100-500 ms podle velikosti zdroje.

S předběžným načítáním buďte opatrní. Příliš mnoho preloadů plýtvá přenosovým pásmem. Předběžně načítejte jen ty nejkritičtější zdroje (úvodní obrázek, kritická písma, nezbytné CSS). Průvodce Googlu k optimalizaci Core Web Vitals vysvětluje osvědčené postupy předběžného načítání.

Optimalizace obrázků pro LCP

Pokud je vaším prvkem LCP obrázek, optimalizujte velikost souboru i strategii načítání. Existují tři postupy:

Zkomprimujte obrázek. Použijte nástroje jako TinyPNG, ImageOptim nebo Squoosh, které komprimují bez ztráty kvality. Komprese JPEG může zmenšit velikost souboru 10-40x. Každých 100 KB velikosti obrázku přidá na sítích 4G 100-200 ms k LCP. Komprese má nejvyšší návratnost.

Použijte moderní formáty. WebP je o 25-35% menší než JPEG. AVIF je ještě menší. Pomocí HTML elementu `` podávejte WebP moderním prohlížečům a JPEG starším prohlížečům kvůli zpětné kompatibilitě. Samotný výběr formátu může zlepšit LCP o 200-400 ms.

Uveďte rozměry obrázku. Atributy šířky a výšky zabrání posunům rozložení a umožní prohlížeči vyhradit místo, než se obrázek načte. To přímo LCP nezlepší, ale zlepší to Cumulative Layout Shift (CLS), další metriku Core Web Vitals.

CSS a JavaScript blokující vykreslení

CSS blokující vykreslení brání prohlížeči zobrazit stránku, dokud se CSS nestáhne a nezpracuje. Velké soubory CSS vykreslení zpožďují. Blokování vykreslení minimalizujete vložením kritického CSS přímo do HTML a odložením zbytku.

Kritické CSS je CSS potřebné pro obsah nad hranicí záhybu. Toto CSS vložte do `