LCP měří čas, než se načte hlavní obsah. Hlavním obsahem je největší textový blok nebo obrázek na stránce. U většiny stránek je LCP klíčová metrika, protože určuje, kdy se stránka stane pro návštěvníka užitečná.
Návštěvník přijde na stránku. Stránka se začne načítat. Prohlížeč stáhne HTML. Prohlížeč stáhne CSS. Prohlížeč stáhne JavaScript. HTML se vykreslí. CSS použije styly. JavaScript se spustí. Objeví se hlavní obsah. To je LCP.
LCP jedna sekunda je výborné. Návštěvník vidí obsah rychle. LCP tři sekundy je pomalé. Návštěvník čeká. LCP pět sekund je velmi pomalé. Návštěvník odejde.
Co se počítá jako Largest Contentful Paint
Největší prvek na stránce v horní části obrazovky. Obvykle obrázek nebo nadpis. Příklad: úvodní stránka s hlavním obrázkem. Hlavní obrázek je největší prvek. Čas jeho zobrazení je LCP.
Příklad: článek na blogu s nadpisem. Nadpis je největší prvek. Čas zobrazení nadpisu je LCP.
Příklad: stránka produktu s obrázkem produktu. Obrázek produktu je největší prvek. Čas jeho zobrazení je LCP.
LCP se měří od chvíle, kdy návštěvník klikne na odkaz (začátek načítání stránky), do chvíle, kdy se objeví největší prvek. Zahrnuje čas stažení HTML, CSS, JavaScriptu, stažení obrázku a vykreslení stránky.
Optimalizace LCP
Cíl optimalizace: LCP pod dvě a půl sekundy.
Strategie jedna: optimalizujte dobu odezvy serveru (TTFB). Rychlejší server znamená, že HTML dorazí dřív. Doručení HTML je předpokladem vykreslení. TTFB snížíte zlepšením serveru, použitím CDN a omezením databázových dotazů.
Strategie dvě: zmenšete soubor CSS. Menší CSS se stáhne rychleji. CSS se musí stáhnout, než se stránka vykreslí. CSS zmenšíte odstraněním nepoužívaných stylů, minifikací a odložením nekritického CSS.
Strategie tři: zmenšete soubor JavaScriptu. Velký JavaScript zdržuje spuštění a vykreslení. JavaScript zmenšíte odstraněním nepoužívaného kódu, rozdělením velkých souborů a odložením nekritického JavaScriptu.
Strategie čtyři: optimalizujte obrázky. Obrázky bývají největšími prvky (LCP). Velikost souboru snížíte kompresí, moderními formáty (WebP) a menšími rozměry obrázku.
Strategie pět: předem načtěte kritické zdroje. Řekněte prohlížeči, aby kritický obrázek nebo písmo stáhl dřív. Obrázek se stahuje souběžně s HTML a CSS. Snižuje to LCP.
Reálný příklad: optimalizace LCP u článku na blogu
Výchozí LCP: dvě celé osm sekundy.
Analýza: hlavní obrázek článku je největší prvek. Obrázek má dva megabajty. Stahuje se jednu celou dvě sekundy. Úzkým místem je stažení obrázku.
Optimalizace
Komprese obrázku: z dvou megabajtů na nulu celá pět megabajtu. Doba stažení je teď nula celá tři sekundy.
Převod do formátu WebP: další snížení na nulu celá tři megabajtu. Doba stažení je teď nula celá jedna sekundy.
Předběžné načtení obrázku: řekněte prohlížeči, aby obrázek stáhl dřív. Obrázek se stahuje souběžně s HTML. Ušetří nulu celá dvě sekundy.
Kritické CSS přesunout do horní části obrazovky: zkrátí se čas, než se stránka může vykreslit. Ušetří nulu celá tři sekundy.
Nové LCP: jedna celá sedm sekundy.
Dvě celé osm minus jedna celá dvě (stažení obrázku) plus nula celá jedna (stažení zkomprimovaného obrázku) se rovná jedna celá sedm sekundy. Pod cílem dvě a půl.
LCP a různé typy stránek
Úvodní stránka
LCP je obvykle hlavní obrázek. Optimalizujte kompresí obrázku, použitím CDN a předběžným načítáním.
Článek na blogu
LCP je nadpis nebo první obrázek. Optimalizujte omezením zpoždění CSS a JavaScriptu a předběžným načtením písem.
Stránka produktu
LCP je obrázek produktu. Optimalizujte kompresí obrázku a responzivními obrázky pro různá zařízení.
Stránka pokladny
LCP je formulář nebo tlačítko. Optimalizujte omezením CSS a JavaScriptu a předběžným načtením kritických zdrojů.
Různé typy stránek mají různé strategie optimalizace. Zjistěte, který prvek je vaše LCP. Ten prvek optimalizujte.
LCP na mobilu a na počítači
LCP na mobilu je obvykle pomalejší než na počítači. Mobilní síť je pomalejší. Mobilní zařízení mají menší výkon.
Výchozí LCP na počítači: jedna celá pět sekundy. Výchozí LCP na mobilu: tři sekundy.
Mobil je dvakrát pomalejší. Mobilní návštěvníci pomalost pociťují silněji.
Optimalizujte nejdřív mobil. Zaměřte se na zmenšení obrázků (mobilní pásmo je omezené). Omezte JavaScript (mobilní zařízení ho zpracovávají pomaleji). Používejte formáty vhodné pro mobily.
Měření zlepšení LCP
Výchozí LCP
Změřte před optimalizací.
Provedení optimalizace
Nové LCP
Změřte po optimalizaci.
Zlepšení
Výchozí LCP minus nové LCP.
Příklad
Výchozí stav dvě celé osm sekundy. Po optimalizaci jedna celá sedm sekundy. Zlepšení je jedna celá jedna sekundy.
Výpočet dopadu
Zlepšení o jednu celou jednu sekundu může zvýšit konverzní poměr o jedno procento (podle výchozího stavu a oboru). Při padesáti tisících návštěvnících měsíčně je to pět set dalších konverzí při hodnotě objednávky sto dolarů. Padesát tisíc dolarů měsíčně. Šest set tisíc dolarů ročně.
Porovnejte to s náklady na optimalizaci. Pokud stojí padesát tisíc dolarů, vrátí se za měsíc. Výborná návratnost.
Často kladené otázky
Jak poznáme, který prvek je naše LCP?
Použijte Google Chrome DevTools. Klikněte na stránku pravým tlačítkem. Prozkoumat. Karta Výkon. Nahrajte načítání stránky. DevTools ukážou prvek LCP. Nebo se podívejte do PageSpeed Insights. Lighthouse prvky LCP označí. Zkontrolujte také přehled Core Web Vitals v Search Console. Ukazuje prvky LCP na stránkách. S WEMASY Tvůrcem webů to nastavíte přímo na svém webu.
Máme LCP optimalizovat na všech stránkách, nebo jen na úvodní?
Optimalizujte všechny stránky. Ale určujte priority podle návštěvnosti. Úvodní stránka je důležitá, stejně jako stránky produktů (u e-shopu) nebo stránky článků (u publikování). Změřte LCP na všech důležitých stránkách. Optimalizaci řaďte podle objemu návštěvnosti.
Pomáhá předběžné načítání vždy?
Ne vždy. Předběžné načítání spotřebovává pásmo. Pokud předem načtete nedůležitý zdroj, spotřebujete pásmo, které mohlo stáhnout důležitý zdroj. Předem načítejte jen kritické zdroje (hlavní obrázek, kritické písmo). Nekritické zdroje předem nenačítejte.
Jak optimalizovat LCP, když je hlavní obsah dynamický (načítá se z API)?
Zpoždění volání API se přičítá k LCP. Zkraťte odezvu API optimalizací databáze, ukládáním odpovědí do mezipaměti a použitím CDN. Zobrazte také kostru stránky nebo zástupný obsah, než se API načte. Zástupný obsah se objeví okamžitě. Návštěvník vnímá stránku jako načtenou. Skutečný obsah se doplní. Vnímané LCP je rychlejší než skutečné.
Máme u prvku LCP použít líné načítání?
Ne. Líné načítání zdrží obrázek, dokud se nechystá vstoupit do viditelné oblasti. Pokud je obrázek v horní části obrazovky (prvek LCP), líné načítání ho zbytečně zdrží. Líně načítejte jen obrázky pod okrajem obrazovky. Prvek LCP načtěte hned.
Čím se LCP liší od FCP (First Contentful Paint)?
FCP je okamžik, kdy se objeví jakýkoli obsah (může to být malý text). LCP je okamžik, kdy se objeví hlavní obsah (obvykle větší obrázek nebo nadpis). FCP je rychlejší než LCP. LCP je pro zážitek návštěvníka důležitější. Zlepšujte nejdřív LCP.