Kako diagnosticiraš in izboljšaš počasen LCP?

Question

IT Interview Practice · Accepted Answer

Začni tako, da najdeš, **kateri je LCP element** in **zakaj je pozen**. LCP se razčleni na štiri poddele — popravi največjega. ## Diagnoza: štirje poddeli LCP ```text [ TTFB ] ─▶ [ Resource load delay ] ─▶ [ Resource load time ] ─▶ [ Render delay ] server when fetch STARTS download the image paint it ``` Chrome DevTools in PageSpeed Insights pokažeta, kateri rezinec prevladuje. Pogosti krivci: počasen strežnik (TTFB), pozno odkrita LCP slika ali render-blocking skript/CSS, ki zavlačuje izris. ## Popravki po poddelu - **Počasen TTFB** → predpomni HTML na CDN, uporabi SSG/ISR, pospeši izvor/podatkovno bazo. - **Zamik nalaganja (slika najdena pozno)** → prednaloži jo in dvigni njeno prioriteto, da jo brskalnik pridobi takoj, ne šele za CSS/JS: ```html

``` - **Čas nalaganja (slika prevelika)** → postrezi AVIF/WebP, pravilno jo dimenzioniraj s `srcset`, stisni. - **Zamik izrisa** → odreži render-blocking CSS/JS; vgradi kritični CSS; `defer` skripte. ## Pasti - Lazy-loading LCP slike (ali skrivanje za JS hidracijo) — samopovzročena rana LCP številka 1. - Spletne pisave blokirajo LCP besedilo; uporabi `font-display: swap` in `preload` pisavo. - Optimiziranje laboratorijskega LCP, medtem ko dejanski uporabniki na 4G ostajajo počasni — vedno potrdi s terenskimi podatki. ## Zakaj je to pomembno LCP je vodilna metrika nalaganja in dejavnik razvrščanja pri iskanju. Zmožnost poimenovati štiri poddele in vsakega preslikati v konkreten popravek je natanko strukturiran, na dokazih temelječ pristop, ki ga spraševalci iščejo.

Diagnoza: štirje poddeli LCP

Popravki po poddelu

Pasti

Zakaj je to pomembno

Povezana vprašanja