I Core Web Vitals sono i segnali di ranking più importanti per Google. Questa guida spiega LCP, INP e CLS in modo semplice, come misurarli, e da dove iniziare a ottimizzarli per SEO e conversioni.
LCP, INP e CLS descrivono tre momenti diversi della stessa esperienza: il contenuto che arriva, la risposta al gesto e la stabilità del layout. Misurarli insieme aiuta a scegliere interventi tecnici che migliorano anche la fiducia e le conversioni.
I Core Web Vitals sono tre metriche di performance che misurano come gli utenti percepiscono l'esperienza su una pagina web. Non è un'opinione soggettiva: sono numeri concreti che misura il browser.
Google ha reso questi KPI obbligatori per il ranking organico perché rispecchiano l'esperienza reale dell'utente. Un sito può avere contenuto di qualità, ma se è lento, instabile o non risponde agli input, gli utenti lo abbandonano.
I Core Web Vitals sono tre:
Se anche uno solo di questi tre è scarso, Google penalizza il ranking. Non puoi compensare un buon LCP con un cattivo INP.
Google sa che le persone abbandonano i siti lenti. Se rimani su un sito lento, è perché il contenuto è talmente rilevante che compensi la lentezza. Ma nella maggior parte dei casi no: è semplicemente frustrazione.
Dal punto di vista di Google, premiare i siti veloci ha senso:
Quindi i Core Web Vitals non sono uno scherzo di Google: sono il segnale di ranking più importante dopo contenuto e backlink.
Ognuno dei tre Core Web Vitals misura un aspetto diverso dell'esperienza:
LCP (Largest Contentful Paint) misura il tempo fino a quando il pezzo più grande di contenuto (immagine, video, blocco di testo) non diventa visibile. È quello che l'utente percepisce come 'il sito si sta caricando?'.
INP (Interaction to Next Paint) misura il ritardo tra il momento in cui l'utente interagisce (clicca un bottone, scrive in un form) e il momento in cui il browser risponde visivamente. È la responsività percepita.
CLS (Cumulative Layout Shift) misura quanto il layout della pagina si sposta mentre si carica. Se clicchi un link e una pubblicità appare improvvisamente sopra, spostando il link di 100px, è un CLS negativo.
Tutte tre sono misure di percezione, non di velocità tecnica assoluta. Un sito può essere tecnicamente veloce su desktop ma terribile su mobile perché il JavaScript blocca l'interazione.
LCP misura quando il contenuto principale della pagina diventa visibile all'utente. Non il caricamento della pagina completa, solo la parte che l'utente vede.
Su mobile, 2.5 secondi è incredibilmente veloce. La maggior parte dei siti italiani non la raggiunge.
Ottimizzazione immagini: Usa formato WebP, comprimi, usa le dimensioni giuste. Lazy loading per immagini sotto il fold.
Ridurre JavaScript: Non caricare script grandi e inutili. Defer o async per gli script non-critical.
Inline CSS critico: Il CSS necessario per renderizzare above-the-fold deve essere inline nel tag <head>, non in un file esterno.
CDN globale: Se serve a italiani, il server deve essere in Europa. Un CDN come Cloudflare accelera anche i server lontani.
INP misura il tempo tra il momento in cui l'utente clicca un bottone, scrive in un form, o interagisce con la pagina, e il momento in cui il browser risponde visivamente.
200ms è il tempo di percezione umano: oltre, l'interazione 'sente' lenta.
Ridurre il lavoro nel main thread: Long tasks (JavaScript che impiega più di 50ms) bloccano le interazioni.
Usare Web Workers: Sposta il calcolo pesante su un thread separato, il main thread resta disponibile per rispondere agli utenti.
Debounce/throttle gli event listener: Se ascolti scroll, non reagire a ogni pixel. Aspetta che l'utente finisca di scrollare.
Ridurre DOM: Un DOM gigante (5000+ nodi) rende il browser lento. Virtualizza liste lunghe.
CLS misura quanto il layout della pagina si sposta visivamente dopo il caricamento. Se clicchi un link e una pubblicità appare spostandolo, è un cattivo CLS.
CLS è un numero (non millisecondi): 0.1 significa che il 10% della viewport si sposta.
Sempre specificare dimensioni immagini: <img width='800' height='600' src='...' />
Preallocare spazio per gli ad: Usa un contenitore con altezza fissa per le pubblicità. Se non carica, lo spazio rimane vuoto, niente shift.
Usare font-display: swap nel CSS per i web font. Il testo appare con fallback subito, il font personalizzato si sostituisce quando carica.
Animazioni controllate: Se usi CSS animations, assicurati che non causino layout shifts. Usa transform e opacity, che non causano ricalcolo.
Per approfondire CLS e le strategie di ottimizzazione, consulta l'articolo dedicato su CLS e cumulative layout shift.
Non è indovinare. Ci sono strumenti ufficiali Google per misurare i Core Web Vitals su ogni pagina.
Lo strumento più semplice: vai su pagespeedinsights.web.dev, inserisci l'URL, e ottieni un report dei Core Web Vitals per mobile e desktop.
Pro: Gratuito, semplice, report visual e suggerimenti specifici.
Contro: Misura una sola volta, non vedi trend. I dati non sono i reali dati di utenti.
Se il sito è verificato in Google Search Console, vai su 'Core Web Vitals' nel menu laterale. Vedrai:
Pro: Dati reali da utenti che visitano il tuo sito. Trend nel tempo. Permette di identificare le pagine peggiori.
Contro: I dati hanno un ritardo di ~3 giorni.
Google raccoglie dati da milioni di browser Chrome reali. Puoi visualizzare i dati in chromeuxreport.web.dev inserendo il tuo dominio.
Pro: Dati di utenti reali a livello di pagina e di device type. Puoi confrontare il tuo sito con i competitor.
Contro: Meno granulare di Search Console, più orientato all'analisi.
Apri Chrome, premi F12, vai su 'Lighthouse', e clicca 'Analyze page load'. Ottieni un report dettagliato con Core Web Vitals e suggerimenti specifici.
Pro: Locale, immediato, mostra ogni dettaglio di cosa rallenta la pagina.
Contro: I numeri dipendono dal tuo computer. Un Lighthouse su un MacBook M2 non è comparabile a uno su un vecchio telefono Android.
Prima volta: PageSpeed Insights per una misurazione veloce.
Monitoraggio continuo: Google Search Console per trend reali.
Debug specifico: Lighthouse per capire perché una pagina è lenta.
Benchmark vs competitor: Chrome UX Report per confronti pubblici.
Non è solo un segnale di ranking. I Core Web Vitals influenzano direttamente il tuo fatturato.
Google ha confermato ufficialmente che i Core Web Vitals sono fattori di ranking. Un sito con buoni Core Web Vitals ottiene una migliore visibilità sui risultati di ricerca, a parità di contenuto. Se sei in posizione #2 con Core Web Vitals scarsi e il competitor in #3 li ha buoni, Google può promuovere il competitor.
La ricerca di settore mostra che molti utenti mobile abbandonano un sito se la pagina impiega troppo tempo a caricare. Per e-commerce, ogni aumento di latenza causa una riduzione misurabile nelle conversioni. Un sito di e-commerce lento perde visitatori e fatturato potenziale rispetto a un sito veloce.
Un sito veloce, responsivo e stabile è un sito che l'utente visita di nuovo. Un sito lento e instabile genera frustrazione. La frustrazione diventa un'associazione mentale negativa con il tuo brand.
Per chi sviluppa e mantiene il sito, i Core Web Vitals danno chiarezza. Non è più 'il sito è veloce?' ma 'LCP è 3 secondi, INP è 450ms, CLS è 0.15: dobbiamo migliorare INP e CLS'. È data-driven.
Se il tuo sito ha Core Web Vitals scarsi, da dove inizi? Il rischio è affogare in mille cose da fare.
Non puoi ottimizzare quello che non misuri. Fai una misurazione baseline:
Non devi ottimizzare tutti e tre i Core Web Vitals contemporaneamente. Identifica quale è il peggiore e inizia da quello.
Se il peggiore è LCP: Ottimizza immagini, ridurci JavaScript bloccante, usa CDN.
Se il peggiore è INP: Ridurci JavaScript nel main thread, debounce event listener, virtualizza DOM grandi.
Se il peggiore è CLS: Specifica dimensioni immagini, preallocare spazio per ad, font-display: swap.
Ci sono fix che si implementano in 1-2 giorni:
Questo impiega 1-2 settimane:
Dopo 2-3 settimane, rimisura. Google Search Console aggiornerà i dati ogni 3 giorni.
Questa checklist ti guida passo dopo passo:
Questo piano riduce il caos. Inizi da misurazioni concrete, poi fix rapidi, poi miglioramenti più grandi.
I Core Web Vitals non sono dettagli tecnici astratti. Sono il ponte tra il tuo codice e l'esperienza concreta dell'utente. Velocità, reattività, stabilità: sono quello che ogni utente sente quando usa il tuo sito.
Approfondisci gli argomenti di questo articolo:
LCP, INP, CLS: la velocità conta per ranking e conversioni. Ti aiutiamo a misurare, diagnosticare e ottimizzare i Core Web Vitals del tuo sito per SEO e user experience.