Come correggere i punteggi scarsi dei Core Web Vitals?

Scopri quale metrica fallisce, su quale dispositivo e per quale gruppo di pagine: il report Core Web Vitals di Search Console mostra tutte e tre le metriche a partire dalle visite reali in Chrome. Poi correggi la causa alla base di quella metrica: per LCP, la velocità con cui arrivano l'immagine o il testo principale; per INP, i task JavaScript lunghi che ritardano le risposte; per CLS, i contenuti che compaiono senza che sia stato riservato lo spazio per loro. I dati sul campo coprono gli ultimi 28 giorni, quindi valuta la correzione nell'arco di un mese.

Passaggio 1: individua cosa non va

1. Apri il report Core Web Vitals in Search Console e scegli Dispositivi mobili o Desktop; i due vengono valutati separatamente.
2. Apri uno dei problemi elencati, ad esempio un problema di LCP su dispositivi mobili, per vedere il gruppo di URL interessato e alcuni URL di esempio. L'intero gruppo condivide un unico stato, determinato dalla metrica peggiore.
3. Analizza un URL di esempio con PageSpeed Insights per vedere i dati sul campo di quella pagina accanto a un test di laboratorio utile per il debug.

Gli strumenti di laboratorio come Lighthouse non possono misurare l'INP perché nessuno interagisce con la pagina, e riportano invece il Total Blocking Time. Per l'INP, la misurazione su utenti reali è la guida affidabile.

Come correggere un LCP lento

La guida di web.dev all'ottimizzazione dell'LCP suddivide l'LCP in quattro parti: tempo di risposta del server, ritardo prima che inizi il caricamento della risorsa principale, tempo di download e ritardo prima del rendering. Intervieni prima sulla parte più grande:

• Rendi individuabile l'immagine LCP nell'HTML iniziale, invece di inserirla con JavaScript o CSS, e assegnale fetchpriority="high".
• Non applicare mai il lazy loading all'immagine LCP.
• Servila più leggera: dimensioni corrette, formato moderno, compressione e una CDN vicina ai visitatori.
• Elimina le risorse che bloccano il rendering: fogli di stile più piccoli, nessuno script sincrono nell'<head>, rendering lato server per il contenuto principale.
• Velocizza la risposta del server: riduci i redirect e consenti la memorizzazione nella cache delle pagine sull'edge.

Come correggere un INP scarso

La guida all'ottimizzazione dell'INP scompone ogni interazione in ritardo di input, tempo di elaborazione e ritardo di presentazione:

• Ritardo di input: riduci il JavaScript eseguito durante il caricamento della pagina, in modo che il thread principale sia libero quando qualcuno tocca lo schermo.
• Tempo di elaborazione: suddividi i gestori di eventi lunghi in task più piccoli e cedi il controllo al thread principale, eseguendo prima l'aggiornamento visibile e rimandando il resto.
• Ritardo di presentazione: mantieni il DOM di dimensioni contenute, evita di forzare il layout leggendo gli stili subito dopo averli modificati e usa content-visibility per le pagine lunghe.

Come correggere un CLS elevato

La guida all'ottimizzazione del CLS elenca le cause più comuni e le relative soluzioni:

• Immagini e video senza dimensioni: aggiungi gli attributi width e height, oppure una proprietà CSS aspect-ratio.
• Annunci, contenuti incorporati e iframe: riserva il loro spazio nel layout prima che vengano caricati.
• Contenuti inseriti sopra quelli esistenti: usa un segnaposto delle dimensioni corrette, oppure inserisci i nuovi contenuti sotto quelli che il visitatore sta leggendo.
• Web font: precarica quelli importanti, in modo che il testo non venga riposizionato tardivamente.
• Animazioni: anima transform anziché proprietà come top o left.

Anche le pagine che possono sfruttare la back/forward cache del browser evitano gli spostamenti di layout quando i visitatori vi ritornano.

Passaggio 3: conferma la correzione

Esegui il deploy, poi apri il problema nel report Core Web Vitals e avvia la convalida. Google monitora il gruppo per 28 giorni; la convalida non attiva una nuova scansione né accelera nulla, si limita a verificare se il problema è stato risolto. Poiché i dati sul campo si aggiornano su una finestra mobile di 28 giorni, aspettati un miglioramento graduale del report. Per il significato di ciascuna metrica, consulta Che cosa significano LCP, INP e CLS?.

Come ti aiuta AutoPSEO

Il report Core Web Vitals di AutoPSEO mostra in grafico circa sei mesi di dati settimanali del Chrome UX Report per il tuo sito o per un singolo URL, su smartphone, desktop o tablet. Così puoi vedere la settimana in cui una correzione ha avuto effetto, o quella in cui un rilascio ha peggiorato la situazione, senza attendere la chiusura della successiva finestra di 28 giorni.