Hur diagnostiserar och förbättrar du en långsam LCP?

Question

IT Interview Practice · Accepted Answer

Börja med att hitta **vad LCP-elementet är** och **varför det är sent**. LCP delas upp i fyra delar — åtgärda den största. ## Diagnostisera: de fyra LCP-delarna ```text [ TTFB ] ─▶ [ Resource load delay ] ─▶ [ Resource load time ] ─▶ [ Render delay ] server when fetch STARTS download the image paint it ``` Chrome DevTools och PageSpeed Insights visar vilken skiva som dominerar. Vanliga bovar: långsam server (TTFB), att LCP-bilden upptäcks sent, eller ett render-blocking skript/CSS som fördröjer målning. ## Åtgärder per del - **Långsam TTFB** → cacha HTML vid ett CDN, använd SSG/ISR, snabba upp origin/databasen. - **Load delay (bilden hittas sent)** → preload:a den och höj dess prioritet så att webbläsaren hämtar den omedelbart istället för efter CSS/JS: ```html

``` - **Load time (bilden för stor)** → servera AVIF/WebP, dimensionera rätt med `srcset`, komprimera. - **Render delay** → skär bort render-blocking CSS/JS; inline:a kritisk CSS; `defer` skript. ## Fallgropar - Att lazy-loada LCP-bilden (eller gömma den bakom JS-hydrering) — det mest självförvållade LCP-såret. - Webbfonter som blockerar LCP-texten; använd `font-display: swap` och `preload` fonten. - Att optimera lab-LCP medan verkliga användare på 4G förblir långsamma — bekräfta alltid med fältdata. ## Varför det är viktigt LCP är det tongivande laddningsmåttet och en rankningsfaktor för sök. Att kunna namnge de fyra delarna och mappa var och en till en konkret åtgärd är precis det strukturerade, evidensdrivna tillvägagångssätt som intervjuare letar efter.

Diagnostisera: de fyra LCP-delarna

Åtgärder per del

Fallgropar

Varför det är viktigt

Relaterade frågor