Core Web Vitals

Cosa sono i Core Web Vitals

I Core Web Vitals sono un insieme di metriche definite da Google per misurare la qualità dell'esperienza utente su un sito web. Introdotti nel 2020 e diventati fattore di ranking nel 2021, sono parte integrante della SEO Tecnica e hanno un impatto diretto sul posizionamento organico.

I Core Web Vitals si concentrano su tre aspetti fondamentali dell'esperienza utente:

• Velocità di caricamento (LCP)
• Interattività (INP)
• Stabilità visiva (CLS)

Queste metriche fanno parte del più ampio sistema di segnali "Page Experience" che Google utilizza per valutare la qualità complessiva di una pagina, insieme a HTTPS, assenza di interstitial invasivi e compatibilità mobile.

"I Core Web Vitals rappresentano il modo in cui Google traduce la qualità dell'esperienza utente in metriche misurabili e actionable. Un sito veloce e stabile non solo si posiziona meglio, ma converte di più."

LCP: Largest Contentful Paint

Il Largest Contentful Paint (LCP) misura il tempo necessario per rendere visibile l'elemento di contenuto più grande nel viewport della pagina. Questo elemento è tipicamente un'immagine hero, un video o un blocco di testo prominente.

Le cause più comuni di un LCP lento includono tempi di risposta del server elevati, risorse CSS e JavaScript che bloccano il rendering, tempi di caricamento delle immagini e rendering lato client. La velocità del sito è strettamente legata al miglioramento dell'LCP.

Nella pratica, il primo passo è identificare quale sia l'elemento LCP della pagina: PageSpeed Insights e Chrome DevTools lo evidenziano esplicitamente. Una volta individuato, l'obiettivo è renderlo visibile il prima possibile, ad esempio precaricando l'immagine hero con <link rel="preload"> ed evitando il lazy-loading proprio su quell'elemento. Per le pagine di un e-commerce o di un blog, dove l'immagine principale è spesso l'elemento LCP, servire formati moderni come WebP o AVIF e dimensionare correttamente le immagini può ridurre i tempi anche di diversi secondi.

INP: Interaction to Next Paint

L'Interaction to Next Paint (INP) ha sostituito il FID (First Input Delay) come metrica di interattività a marzo 2024. L'INP misura la latenza complessiva delle interazioni dell'utente con la pagina, considerando tutti i click, i tap e le interazioni da tastiera durante l'intera sessione.

A differenza del FID che misurava solo la prima interazione, l'INP tiene conto di tutte le interazioni durante la visita, fornendo un quadro più completo della reattività della pagina. Le principali cause di un INP scarso sono i long task JavaScript, il main thread bloccato e gestori di eventi troppo complessi.

L'INP è particolarmente critico sui siti ricchi di JavaScript, come single page application, dashboard e store online costruiti con framework moderni. Quando l'utente fa tap su un pulsante "aggiungi al carrello" o apre un menu, ogni millisecondo di attesa prima del successivo rendering visibile peggiora la percezione di lentezza. In ottica pratica conviene misurare l'INP sul traffico mobile reale, dove i dispositivi meno potenti amplificano il costo dei task JavaScript pesanti.

CLS: Cumulative Layout Shift

Il Cumulative Layout Shift (CLS) misura la stabilità visiva della pagina, quantificando quanto gli elementi si spostano inaspettatamente durante il caricamento. Un CLS elevato causa un'esperienza utente frustrante, ad esempio quando un pulsante si sposta proprio mentre l'utente sta per cliccarlo.

Le cause più frequenti di CLS elevato sono immagini e video senza dimensioni specificate, annunci pubblicitari che si caricano dinamicamente, font web che causano FOIT/FOUT e contenuti iniettati dinamicamente sopra il contenuto esistente.

Il CLS è spesso la metrica più semplice da correggere e quella con il maggior impatto sulla percezione di affidabilità del sito: basta riservare in anticipo lo spazio per ogni elemento che si caricherà in un secondo momento. In termini concreti, significa indicare sempre gli attributi width e height (o aspect-ratio) sulle immagini, definire un'altezza minima per i contenitori di banner e widget di terze parti, e caricare i font con strategie che evitino lo spostamento del testo. Su pagine con molti contenuti dinamici, anche un piccolo accorgimento riduce il rischio che l'utente clicchi per errore sull'elemento sbagliato.

Come misurarli

Esistono diversi strumenti per misurare i Core Web Vitals, suddivisi in strumenti di campo (dati reali) e di laboratorio (dati simulati):

• Google Search Console: report "Core Web Vitals" con dati di campo aggregati per tutte le pagine del sito
• PageSpeed Insights: analisi dettagliata con dati di campo (CrUX) e di laboratorio (Lighthouse)
• Chrome DevTools: strumenti di sviluppo del browser per analisi di laboratorio dettagliate
• Lighthouse: audit automatizzato disponibile in Chrome DevTools e come tool standalone
• Chrome UX Report (CrUX): dataset pubblico con dati di campo accessibile tramite BigQuery
• Web Vitals Extension: estensione Chrome per monitorare i CWV in tempo reale durante la navigazione

Una regola pratica per interpretare i dati: usa gli strumenti di laboratorio (Lighthouse, DevTools) per fare diagnosi e testare le modifiche in modo ripetibile, perché restituiscono risultati controllati e immediati; affidati invece ai dati di campo (Search Console, CrUX) per capire come stanno realmente le cose per i tuoi utenti, perché sono questi a influenzare il ranking. Spesso un punteggio di laboratorio ottimo convive con dati di campo mediocri: in quel caso il problema riguarda dispositivi reali, connessioni lente o configurazioni che il test simulato non riproduce.

Come ottimizzarli

Ecco le strategie principali per ottimizzare ciascun Core Web Vital:

Ottimizzare l'LCP

• Ottimizzare il Time to First Byte (TTFB) del server
• Utilizzare una CDN per ridurre la latenza
• Implementare il preload per le risorse critiche (immagini hero, font)
• Ottimizzare e comprimere le immagini (formati WebP/AVIF)
• Eliminare CSS e JavaScript render-blocking

Ottimizzare l'INP

• Ridurre il tempo di esecuzione dei long task JavaScript
• Utilizzare requestAnimationFrame e requestIdleCallback per suddividere i task
• Minimizzare il lavoro del main thread
• Utilizzare Web Workers per operazioni pesanti
• Ottimizzare i gestori di eventi e ridurre la complessità del DOM

Ottimizzare il CLS

• Specificare sempre le dimensioni (width/height) per immagini e video
• Riservare spazio per gli annunci pubblicitari e i contenuti caricati dinamicamente
• Usare font-display: swap con dimensioni di fallback corrispondenti
• Evitare di iniettare contenuti sopra il contenuto esistente
• Utilizzare le proprietà CSS contain e content-visibility

L'ottimizzazione dei Core Web Vitals è un processo iterativo che richiede monitoraggio continuo. Utilizza Google Search Console per tenere sotto controllo i dati di campo e PageSpeed Insights per analisi dettagliate pagina per pagina. Per una panoramica completa sull'ottimizzazione delle performance, consulta la guida sulla velocità del sito.

Perché contano per ranking e conversioni

I Core Web Vitals non sono un esercizio puramente tecnico: sono uno dei pochi segnali in cui qualità dell'esperienza e obiettivi di business coincidono. Sul fronte SEO funzionano come fattore di "spareggio": a parità di rilevanza dei contenuti, Google tende a premiare la pagina che offre l'esperienza migliore, e questo diventa decisivo nelle query molto competitive. Migliorare i CWV rafforza quindi il lavoro fatto su SEO On-Page e SEO Tecnica anziché sostituirlo.

Sul fronte del business, l'impatto è ancora più diretto: pagine più veloci e stabili riducono il tasso di abbandono e aumentano le conversioni, perché ogni secondo di attesa in più allontana l'utente prima ancora che possa interagire. Per chi lavora nel marketing, presentare i Core Web Vitals come leva di fatturato — e non solo come metrica per gli sviluppatori — è spesso il modo più efficace per ottenere le risorse necessarie a ottimizzarli. Un sito performante è inoltre più facile da scansionare per i crawler e offre una base più solida anche all'ottimizzazione mobile.