Core Web Vitals spiegati: LCP, INP e CLS (e come migliorarli)

I Core Web Vitals sono tre metriche che Google usa per misurare l'esperienza reale su una pagina: quanto velocemente si carica, quanto velocemente risponde e quanto è stabile durante il caricamento. Fanno parte dei segnali di esperienza sulla pagina che Google considera nel ranking e – cosa ancora più importante – riflettono come i visitatori percepiscono davvero il tuo sito.

I tre Core Web Vitals

Una pagina supera la valutazione quando almeno il 75% delle visite reali (il 75° percentile) rispetta la soglia “buono” per tutte e tre le metriche.

L'INP ha sostituito il First Input Delay (FID) come Core Web Vital a marzo 2024. L'INP è più severo: considera la reattività delle interazioni durante tutta la visita, non solo della prima.

Dati sul campo vs dati di laboratorio

I dati sul campo provengono da utenti reali di Chrome e vengono raccolti nel Chrome UX Report (CrUX) su una finestra mobile di 28 giorni. Sono questi i dati che Google usa per l'esperienza sulla pagina. Puoi vederli nel report Core Web Vitals di Search Console e in PageSpeed Insights.

I dati di laboratorio provengono da un test simulato, come Lighthouse, su un dispositivo e una rete fissi. Sono ottimi per il debug e per testare le modifiche, ma non sono ciò che Google usa per il ranking – e non possono misurare direttamente l'INP (il Total Blocking Time è l'indicatore di laboratorio più vicino).

Le pagine con poco traffico potrebbero non avere abbastanza dati sul campo; in quel caso Google può usare i dati di pagine simili o dell'intero sito (l'“origine”).

Largest Contentful Paint (LCP)

L'LCP indica il momento in cui l'immagine o il blocco di testo più grande nell'area visibile finisce di essere visualizzato – di solito l'immagine hero, un titolo grande o l'immagine di copertina di un video in evidenza.

L'LCP si può scomporre in quattro parti, che indicano la correzione:

1. Time to First Byte – quanto tempo impiega il server a rispondere
2. Ritardo di caricamento della risorsa – quanto tempo passa prima che il browser inizi a scaricare la risorsa dell'LCP
3. Tempo di caricamento della risorsa – quanto dura il download
4. Ritardo di rendering dell'elemento – il tempo tra il download e la visualizzazione

Come migliorare l'LCP

• Velocizza il server: cache delle pagine, una CDN, un hosting più veloce e meno query al database
• Fai scoprire presto l'immagine dell'LCP: usa un normale <img> nell'HTML (non uno sfondo CSS o un'immagine inserita con JavaScript) e aggiungi fetchpriority="high"
• Non applicare mai il lazy loading all'immagine dell'LCP
• Ottimizza l'immagine: dimensioni giuste, WebP o AVIF, buona compressione
• Riduci le risorse che bloccano il rendering: inserisci in linea il CSS critico, rimanda il JavaScript non critico
• Usa il preconnect verso le origini di terze parti necessarie, come una CDN per le immagini

Interaction to Next Paint (INP)

L'INP misura il ritardo tra un'interazione dell'utente – un clic, un tocco o la pressione di un tasto – e il successivo aggiornamento visivo sullo schermo. Riporta una delle interazioni più lente della visita.

Un INP scarso deriva di solito da troppo JavaScript in esecuzione sul thread principale, che impedisce al browser di rispondere rapidamente.

Come migliorare l'INP

• Riduci e suddividi il JavaScript: rimuovi le librerie inutilizzate, suddividi il codice e carica le funzioni solo quando servono
• Spezza i task lunghi: i task oltre i 50 ms bloccano il thread principale; restituisci il controllo al browser tra un blocco di lavoro e l'altro
• Esamina gli script di terze parti: tag manager, widget di chat, strumenti di A/B test e script pubblicitari sono colpevoli frequenti
• Mantieni il DOM snello: le pagine molto grandi rendono più lento ogni aggiornamento
• Dai un riscontro visivo immediato all'interazione, poi esegui il lavoro pesante

Cumulative Layout Shift (CLS)

Il CLS misura gli spostamenti inattesi del layout – l'esperienza frustrante di un pulsante che salta via proprio mentre lo tocchi. Valuta quanto contenuto si sposta e di quanto.

Come migliorare il CLS

• Imposta larghezza e altezza di immagini e video, oppure usa la proprietà CSS aspect-ratio, così lo spazio viene riservato
• Riserva spazio per annunci, embed e iframe con contenitori di dimensioni fisse
• Evita di inserire contenuti sopra quelli già presenti, come banner che spingono in basso la pagina dopo il caricamento
• Usa font-display: swap con attenzione e precarica i web font principali, oppure usa metriche dei font di ripiego, così il testo non si riorganizza
• Anima con transform, non con proprietà come top o height che provocano un nuovo calcolo del layout

Un flusso di lavoro pratico

1. Controlla il report Core Web Vitals di Search Console per vedere quali gruppi di URL non superano la valutazione e per quale metrica
2. Scegli un'URL rappresentativa di ogni gruppo che non supera la valutazione
3. Esegui un test di laboratorio per diagnosticare cosa è lento
4. Correggi a livello di template – la maggior parte dei problemi colpisce tutte le pagine che usano lo stesso layout
5. Convalida: in Search Console, avvia la convalida dopo il rilascio; i dati sul campo impiegano fino a 28 giorni a riflettere i miglioramenti

Quanto incidono i Core Web Vitals sul posizionamento?

Google è stato chiaro: l'esperienza sulla pagina è un segnale tra molti, e pertinenza e contenuti utili contano di più. Una pagina veloce con contenuti deboli non supererà una pagina eccellente. Ma quando le pagine sono ugualmente pertinenti, un'esperienza migliore può aiutare – e le pagine più veloci convertono costantemente meglio, il che conta indipendentemente dal posizionamento.

Consigli per piattaforma

WordPress

• Usa un plugin di cache o la cache a livello di hosting per ridurre il tempo di risposta del server
• Scegli un tema leggero; i page builder pesanti spesso aggiungono grandi quantità di CSS e JavaScript
• Esamina i plugin: ognuno può aggiungere script a ogni pagina, peggiorando l'INP
• Usa un plugin di ottimizzazione delle immagini che serva WebP o AVIF e aggiunga gli attributi di larghezza e altezza
• Rimanda o rimuovi gli script di terze parti che non ti servono in ogni pagina

Shopify

• Rivedi le app installate – molte inseriscono script in ogni pagina anche quando non vengono usate
• Usa le funzioni per le immagini responsive integrate nel tema
• Limita il numero di sezioni e slider in homepage
• Comprimi e ridimensiona le immagini prima di caricarle

Siti su misura e con molto JavaScript

• Usa il rendering lato server o la generazione statica, così i contenuti compaiono senza aspettare il JavaScript
• Suddividi il codice per route e carica i componenti su richiesta
• Misura l'INP degli utenti reali con la libreria JavaScript web-vitals e invia i dati ad analytics, così vedi quali interazioni sono lente

Misurare da soli i dati degli utenti reali

Search Console e PageSpeed Insights mostrano dati aggregati di Chrome, ma solo per le pagine con traffico sufficiente e con un certo ritardo. Per vedere i Core Web Vitals di ogni pagina e di ogni visitatore, aggiungi il monitoraggio degli utenti reali (RUM). La libreria open source web-vitals rileva LCP, INP e CLS dai browser dei visitatori; puoi inviare i valori a Google Analytics 4 o a un altro strumento di analytics. Il RUM registra anche quale elemento è stato l'LCP e quale interazione è stata la più lenta – esattamente ciò che ti serve per risolvere il problema.

Una nota su Total Blocking Time e Speed Index

Lighthouse riporta altre metriche oltre ai Core Web Vitals. Il Total Blocking Time (TBT) misura per quanto tempo il thread principale è rimasto bloccato durante il caricamento ed è correlato all'INP. Il First Contentful Paint (FCP) indica quando compare qualcosa per la prima volta. Lo Speed Index misura quanto velocemente si riempie l'area visibile. Sono diagnostiche utili, ma non sono Core Web Vitals.

Miti comuni

• “Per posizionarsi serve un punteggio di 100 in PageSpeed.” No. Per l'esperienza sulla pagina conta superare le soglie dei Core Web Vitals nei dati sul campo, e la pertinenza conta molto di più.
• “I Core Web Vitals contano solo per Google.” Pagine più veloci e stabili migliorano conversioni e soddisfazione per ogni visitatore, qualunque sia la via da cui è arrivato.
• “Aggiungere altri plugin di cache aiuta.” Sovrapporre più plugin di cache o di ottimizzazione causa spesso conflitti. Usa una sola soluzione ben configurata.

Punti chiave

• I Core Web Vitals misurano caricamento (LCP), reattività (INP) e stabilità visiva (CLS).
• Le soglie buone sono LCP ≤ 2,5 s, INP ≤ 200 ms e CLS ≤ 0,1 al 75° percentile delle visite reali.
• Contano i dati sul campo degli utenti reali di Chrome; i test di laboratorio servono a diagnosticare i problemi.
• L'LCP di solito migliora con server più veloci e immagini hero meglio ottimizzate.
• L'INP migliora quando riduci e suddividi il JavaScript, soprattutto gli script di terze parti.
• Il CLS migliora quando riservi spazio per immagini, annunci ed embed.

Domande frequenti

Perché i miei punteggi di laboratorio e sul campo sono diversi?

I test di laboratorio simulano un solo dispositivo e una sola rete. I dati sul campo riflettono i dispositivi, le reti e il comportamento dei tuoi visitatori reali, comprese interazioni che i test di laboratorio non eseguono.

Quanto ci vuole perché i miglioramenti compaiano in Search Console?

I dati sul campo coprono i 28 giorni precedenti, quindi servono fino a quattro settimane perché una correzione si rifletta completamente.

I Core Web Vitals contano su desktop?

Sì. Google valuta separatamente mobile e desktop. Su mobile di solito è più difficile superare la valutazione, perché dispositivi e reti sono più lenti.

Qual è un buon punteggio PageSpeed?

90 o più è buono. Ma il punteggio è una sintesi di laboratorio; per l'esperienza sulla pagina conta superare i Core Web Vitals nei dati sul campo.