Guida ai Core Web Vitals: LCP, INP e CLS Spiegati Semplici
Cosa sono i Core Web Vitals (CWV) di Google? Una guida completa per capire LCP (caricamento), il nuovo INP (reattività) e CLS (stabilità visiva).
Cosa sono i Core Web Vitals (e la Page Experience)?
Da anni Google cerca di misurare non solo *cosa* c'è in una pagina (il contenuto), ma *come* l'utente la vive. Questo concetto è chiamato Page Experience (Esperienza sulla Pagina).
I Core Web Vitals (CWV) sono le tre metriche specifiche e misurabili che Google ritiene "fondamentali" (core) per definire una buona esperienza utente. Non sono metriche di laboratorio teoriche, ma misurano l'esperienza *reale* degli utenti che visitano il tuo sito.
Queste metriche sono diventate un fattore ufficiale di ranking SEO e sono il cuore del report "Performance" nello strumento PageSpeed Insights. I tre CWV misurano tre aspetti diversi dell'esperienza:
- Caricamento (LCP)
- Interattività (INP)
- Stabilità Visiva (CLS)
1. LCP (Largest Contentful Paint): La Velocità di Caricamento
L'LCP risponde alla domanda: "Quanto velocemente l'utente percepisce che la pagina è *caricata*?"
Cosa Misura?
Misura il tempo (in secondi) che intercorre tra l'inizio del caricamento della pagina e la comparsa sullo schermo (rendering) dell'elemento di contenuto più grande. Questo "elemento" è solitamente l'immagine principale (hero image), un video o un grande blocco di testo.
Non misura il caricamento *totale* della pagina (che può richiedere molti più secondi), ma il momento in cui l'utente sente che "ecco, il contenuto principale è arrivato".
Valori Ottimali (secondo Google):
- Buono: $\le 2.5$ secondi
- Da Migliorare: Tra $2.5$ e $4$ secondi
- Scarso: $> 4$ secondi
Cosa causa un LCP scarso?
Solitamente: server lenti (hosting di bassa qualità), immagini non compresse (troppo pesanti), o risorse (come file CSS e JavaScript) che bloccano il rendering della pagina. È un pilastro dell'ottimizzazione tecnica.
2. INP (Interaction to Next Paint): La Reattività
L'INP risponde alla domanda: "Quando l'utente clicca su qualcosa, la pagina è *pronta* a rispondere?"
Cosa Misura? (Aggiornamento 2024)
Attenzione: Da Marzo 2024, l'INP ha sostituito ufficialmente il vecchio FID (First Input Delay) come metrica di reattività.
L'INP è molto più completo del FID. Misura la latenza di *tutte* le interazioni dell'utente (click, tap, digitazione) durante la sua visita. Calcola il tempo che passa da quando l'utente interagisce (es. clicca su un menu a tendina) a quando il browser mostra il risultato visivo successivo (es. il menu che si apre).
Una pagina può sembrare veloce (buon LCP), ma se poi è "bloccata" (perché sta caricando JavaScript in background) e non risponde ai clic, l'esperienza è pessima. L'INP misura proprio questa "lentezza" percepita.
Valori Ottimali (secondo Google):
- Buono: $\le 200$ millisecondi
- Da Migliorare: Tra $200$ e $500$ millisecondi
- Scarso: $> 500$ millisecondi
Cosa causa un INP scarso?
Quasi sempre, la colpa è di un eccesso di JavaScript. Script pesanti, codice non ottimizzato o troppi script di terze parti (es. tracking, widget) possono "intasare" il browser, impedendogli di rispondere rapidamente ai comandi dell'utente.
3. CLS (Cumulative Layout Shift): La Stabilità Visiva
Il CLS risponde alla domanda: "La pagina è stabile o gli elementi *saltano* mentre cerco di leggerla?"
Cosa Misura?
Misura l'instabilità visiva della pagina. È quella fastidiosissima esperienza in cui stai per cliccare un link o un pulsante, e un attimo prima che il tuo dito tocchi lo schermo, un banner pubblicitario o un'immagine (caricati in ritardo) appaiono sopra, spingendo il contenuto verso il basso e facendoti cliccare sulla cosa sbagliata.
Il CLS assegna un punteggio a questi "salti" (layout shift) inaspettati. Un sito professionale deve avere un CLS quasi pari a zero.
Valori Ottimali (secondo Google):
- Buono: $\le 0.1$
- Da Migliorare: Tra $0.1$ e $0.25$
- Scarso: $> 0.25$
Cosa causa un CLS scarso?
Principalmente: immagini senza dimensioni (altezza e larghezza) specificate nel codice, annunci o iframe che si caricano senza uno spazio riservato, e font che cambiano (causando un "flash" e un riadattamento del testo).
Perché i CWV sono Fondamentali (per la SEO e per il nostro Badge)
Google ha confermato che i Core Web Vitals sono un fattore di ranking. Un sito con CWV eccellenti avrà un leggero vantaggio SEO rispetto a un concorrente lento e instabile, a parità di contenuti. Ma l'impatto reale è molto più profondo.
Impatto sull'Utente (e sul Business)
L'impatto principale è sull'utente. Un sito lento e frustrante (LCP e INP scarsi) o instabile (CLS scarso) causa un aumento della frequenza di rimbalzo (gli utenti se ne vanno) e un crollo del tasso di conversione (gli utenti non comprano o non contattano).
Il Senso del "Digital Quality Eagle"
Questo è il motivo esatto per cui il nostro progetto si basa sui punteggi di PageSpeed Insights. Un punteggio elevato (come il nostro $\ge 80$) nelle 4 categorie (Performance, Accessibilità, Best Practice e SEO) non è un vanto tecnico fine a se stesso.
È la dimostrazione oggettiva che un'agenzia o un consulente rispetta l'utente. È la prova che l'agenzia possiede le competenze tecniche necessarie per la realizzazione di un sito web di alta qualità e che applica (prima di tutto a se stessa) quei principi di performance che Google ritiene fondamentali per un web migliore.
Risorse Ufficiali per Misurare i Core Web Vitals
Per misurare i CWV del tuo sito, puoi usare gli strumenti gratuiti di Google che analizzano sia dati "di laboratorio" (Lab) sia dati "sul campo" (Field), basati sugli utenti reali:
- Google PageSpeed Insights: Lo strumento più usato. Fornisce un report completo con i punteggi CWV e suggerimenti di ottimizzazione.
- Google Search Console: Nella sezione "Core Web Vitals", mostra i dati "Field" raccolti dai tuoi utenti reali nel tempo.