Jak diagnostikujete a zlepšujete pomalé LCP?

Question

IT Interview Practice · Accepted Answer

Začněte tím, že zjistíte, **jaký je LCP prvek** a **proč je pozdě**. LCP se rozpadá na čtyři dílčí části — opravte tu největší. ## Diagnóza: čtyři dílčí části LCP ```text [ TTFB ] ─▶ [ Zpoždění načtení zdroje ] ─▶ [ Doba načtení zdroje ] ─▶ [ Zpoždění vykreslení ] server kdy fetch ZAČNE stažení obrázku vykreslení ``` Chrome DevTools a PageSpeed Insights ukážou, který díl dominuje. Časté viníky: pomalý server (TTFB), pozdě objevený LCP obrázek nebo render-blocking skript/CSS zdržující vykreslení. ## Opravy podle dílčí části - **Pomalé TTFB** → cacheujte HTML na CDN, použijte SSG/ISR, zrychlete origin/databázi. - **Zpoždění načtení (obrázek nalezen pozdě)** → preloadujte ho a zvyšte mu prioritu, aby ho prohlížeč stáhl okamžitě místo až po CSS/JS: ```html

``` - **Doba načtení (obrázek příliš velký)** → servírujte AVIF/WebP, správně jej dimenzujte pomocí `srcset`, komprimujte. - **Zpoždění vykreslení** → omezte render-blocking CSS/JS; kritické CSS vložte inline; skripty dejte `defer`. ## Úskalí - Lazy-loading LCP obrázku (nebo jeho skrytí za JS hydrataci) — zranění LCP číslo 1, které si způsobíte sami. - Web fonty blokující LCP text; použijte `font-display: swap` a `preload` fontu. - Optimalizace laboratorního LCP, zatímco reální uživatelé na 4G zůstávají pomalí — vždy potvrďte terénními daty. ## Proč je to důležité LCP je hlavní metrika načítání a faktor hodnocení ve vyhledávání. Schopnost pojmenovat čtyři dílčí části a přiřadit každé konkrétní opravu je přesně ten strukturovaný, důkazy podložený přístup, který tazatelé hledají.

Diagnóza: čtyři dílčí části LCP

Opravy podle dílčí části

Úskalí

Proč je to důležité

Související otázky