Kako dijagnosticirate i poboljšavate spor LCP?

Question

IT Interview Practice · Accepted Answer

Počnite pronalaskom **koji je LCP element** i **zašto kasni**. LCP se dijeli na četiri podfaze — popravite najveću. ## Dijagnoza: četiri LCP podfaze ```text [ TTFB ] ─▶ [ Kašnjenje učitavanja resursa ] ─▶ [ Vrijeme učitavanja resursa ] ─▶ [ Kašnjenje renderiranja ] poslužitelj kad dohvat POČINJE preuzimanje slike iscrtaj je ``` Chrome DevTools i PageSpeed Insights pokazuju koji odsječak dominira. Uobičajeni krivci: spor poslužitelj (TTFB), LCP slika otkrivena kasno ili render-blocking skripta/CSS koji odgađaju iscrtavanje. ## Popravci po podfazi - **Spor TTFB** → keširajte HTML na CDN-u, koristite SSG/ISR, ubrzajte izvor/bazu podataka. - **Kašnjenje učitavanja (slika pronađena kasno)** → preloadajte je i podignite joj prioritet kako bi je preglednik dohvatio odmah umjesto nakon CSS/JS-a: ```html

``` - **Vrijeme učitavanja (slika prevelika)** → poslužite AVIF/WebP, dimenzionirajte je ispravno sa `srcset`, komprimirajte. - **Kašnjenje renderiranja** → uklonite render-blocking CSS/JS; ugradite kritični CSS inline; `defer` skripte. ## Zamke - Lazy-loading LCP slike (ili skrivanje iza JS hidracije) — samonanesena LCP rana broj 1. - Web fontovi koji blokiraju LCP tekst; koristite `font-display: swap` i `preload` fonta. - Optimiziranje laboratorijskog LCP-a dok stvarni korisnici na 4G ostaju spori — uvijek potvrdite terenskim podacima. ## Zašto je to važno LCP je glavna metrika učitavanja i faktor rangiranja u pretrazi. Sposobnost imenovanja četiri podfaze i mapiranja svake na konkretan popravak upravo je strukturiran, dokazima vođen pristup koji ispitivači traže.

Dijagnoza: četiri LCP podfaze

Popravci po podfazi

Zamke

Zašto je to važno

Povezana pitanja