Hvordan diagnostiserer og forbedrer du en treg LCP?

Question

IT Interview Practice · Accepted Answer

Start med å finne **hva LCP-elementet er** og **hvorfor det er sent**. LCP brytes ned i fire deler — fiks den største. ## Diagnostiser: de fire LCP-delene ```text [ TTFB ] ─▶ [ Resource load delay ] ─▶ [ Resource load time ] ─▶ [ Render delay ] server når fetch STARTER last ned bildet mal det ``` Chrome DevTools og PageSpeed Insights viser hvilken del som dominerer. Vanlige syndere: treg server (TTFB), LCP-bildet oppdaget sent, eller et render-blokkerende skript/CSS som forsinker paint. ## Fikser per del - **Treg TTFB** → cache HTML på en CDN, bruk SSG/ISR, gjør origin/databasen raskere. - **Load delay (bilde funnet sent)** → preload det og hev prioriteten så nettleseren henter det umiddelbart i stedet for etter CSS/JS: ```html

``` - **Load time (bildet for stort)** → server AVIF/WebP, størrelsestilpass det med `srcset`, komprimer. - **Render delay** → kutt render-blokkerende CSS/JS; inline kritisk CSS; `defer` skript. ## Fallgruver - Lazy-lasting av LCP-bildet (eller å gjemme det bak JS-hydrering) — det #1 selvpåførte LCP-såret. - Web-fonter som blokkerer LCP-teksten; bruk `font-display: swap` og `preload` fonten. - Å optimalisere lab-LCP mens reelle brukere på 4G forblir trege — bekreft alltid med field-data. ## Hvorfor det er viktig LCP er den fremste lastemetrikken og en faktor i søkerangering. Å kunne navngi de fire delene og mappe hver til en konkret fiks er akkurat den strukturerte, evidensdrevne tilnærmingen intervjuere ser etter.

Diagnostiser: de fire LCP-delene

Fikser per del

Fallgruver

Hvorfor det er viktig

Relaterte spørsmål