Come si diagnostica e si migliora un LCP lento?

Question

IT Interview Practice · Accepted Answer

Inizia trovando **qual è l'elemento LCP** e **perché è in ritardo**. L'LCP si scompone in quattro sotto-parti — risolvi quella più grande. ## Diagnosi: le quattro sotto-parti dell'LCP ```text [ TTFB ] ─▶ [ Resource load delay ] ─▶ [ Resource load time ] ─▶ [ Render delay ] server quando INIZIA il fetch download dell'immagine il paint ``` Chrome DevTools e PageSpeed Insights mostrano quale segmento domina. Colpevoli comuni: server lento (TTFB), immagine LCP scoperta in ritardo, o uno script/CSS render-blocking che ritarda il paint. ## Correzioni per sotto-parte - **TTFB lento** → metti in cache l'HTML su una CDN, usa SSG/ISR, velocizza l'origin/database. - **Load delay (immagine trovata in ritardo)** → fai il preload e alza la sua priorità così il browser la scarica subito invece che dopo CSS/JS: ```html

``` - **Load time (immagine troppo grande)** → servi AVIF/WebP, dimensionala correttamente con `srcset`, comprimi. - **Render delay** → elimina CSS/JS render-blocking; metti inline il CSS critico; usa `defer` sugli script. ## Insidie - Fare il lazy-load dell'immagine LCP (o nasconderla dietro la hydration JS) — la ferita da LCP autoinflitta numero uno. - Web font che bloccano il testo LCP; usa `font-display: swap` e fai il `preload` del font. - Ottimizzare l'LCP di laboratorio mentre gli utenti reali su 4G restano lenti — conferma sempre con i dati di campo. ## Perché è importante L'LCP è la metrica di caricamento principale e un fattore di ranking nella ricerca. Saper nominare le quattro sotto-parti e mappare ciascuna a una correzione concreta è esattamente l'approccio strutturato e basato sull'evidenza che gli intervistatori cercano.

Diagnosi: le quattro sotto-parti dell'LCP

Correzioni per sotto-parte

Insidie

Perché è importante

Domande correlate