Core Web Vitals: cosa sono e come migliorarli

Se stai approfondendo la SEO da un punto di vista più tecnico, ti sarà capitato di sentir parlare dei Core Web Vitals (CWV) di Google.

I Core Web Vitals sono un insieme di metriche introdotte da Google nel 2020 per valutare le prestazioni dei siti web, con l'obiettivo di migliorare l'esperienza degli utenti.

Questi parametri sono diventati un fattore di ranking SEO importante dell'algoritmo di Google, quindi ottimizzarli è fondamentale per migliorare il posizionamento sui motori di ricerca.

In questa guida esamineremo nel dettaglio i Core Web Vitals, come influenzano il ranking di Google e come ottimizzarle per migliorare la SEO del tuo sito web.

Core Web Vitals: Indice

Core Web Vitals: Definizione

Come detto, i Core Web Vitals sono le tre metriche principali che Google utilizza per valutare l'esperienza utente sui siti web. Si dividono in:

Largest Contentful Paint (LCP): misura il tempo impiegato per visualizzare il contenuto principale di una pagina. Idealmente dovrebbe essere inferiore a 2,5 secondi.
First Input Delay (FID): misura la reattività di una pagina, quantificando la latenza dal momento in cui l'utente interagisce con la pagina a quando questa risponde. Dovrebbe essere inferiore a 100 millisecondi.
Cumulative Layout Shift (CLS): misura quanto il contenuto di una pagina si sposta durante il caricamento, influenzando negativamente l'esperienza utente. Dovrebbe essere il più vicino possibile a 0.

Google ha scelto di focalizzarsi su queste metriche perché sono strettamente correlate con l'esperienza percettiva degli utenti sui siti web. Forniscono una valutazione oggettiva di quanto una pagina sia veloce, reattiva e visivamente stabile.

Core Web Vitals	Cosa misura	Valore ottimale
LCP	tempo per visualizzare il primo contenuto	< 2,5 secondi
FID	tempo di reazione della pagina con l'utente	< 100 millisecondi
CLS	spostamento degli elementi in pagina in caricamento	~0

Perché i Core Web Vitals contano per la SEO

Migliorare l'esperienza utente è sempre stato un fattore chiave per il posizionamento su Google. Tuttavia, con l'introduzione dei Core Web Vitals, questo aspetto è diventato ancora più rilevante.

Google ha chiarito che i Core Web Vitals sono un fattore di ranking importante per i siti web. Questo significa che siti con metriche scadenti rischiano di scendere nelle SERP, mentre quelli ottimizzati saliranno.

Ottimizzare i Web Vitals significa anche migliorare metriche come il tasso di rimbalzo e le pagine viste per sessione, anch'esse influenti per la SEO. Inoltre, gli utenti insoddisfatti dalle prestazioni di un sito difficilmente torneranno o consiglieranno quel sito ad altri.

Come misurare i Core Web Vitals

Per migliorare i Core Web Vitals, il primo passo è misurarle accuratamente. Ecco alcuni strumenti utili:

PageSpeed Insights: strumento gratuito di Google che genera un report sulle prestazioni del sito, incluse le Web Vitals. È disponibile sia come estensione Chrome che come tool online.
Search Console: la sezione “Esperienza utente” nella Search Console di Google riporta dati aggregati sulle Web Vitals del sito.
Google Analytics: integra un report sui Core Web Vitals negli ultimi 30 giorni. Richiede la configurazione con Google Tag Manager.
Strumenti di terze parti: software come SpeedCurve, WebPageTest e Lighthouse generano report dettagliati sulle prestazioni.

È bene testare le Web Vitals su diversi tipi di pagine (homepage, categorie di prodotto, articoli di blog, ecc) e da diversi dispositivi (mobile, desktop, tablet) per ottenere una visione completa.

Ora veniamo alle singole metriche e vediamo come migliorarne i valori.

Come migliorare il Largest Contentful Paint (LCP)

lcp core web vitals — *fonte:* *web.dev*

Per abbassare il LCP, ovvero il tempo per visualizzare il contenuto principale, è bene ottimizzare immagini, codice HTML/CSS/JavaScript e web font. Ecco alcuni consigli specifici:

Ottimizzare immagini: ridurre peso e dimensioni; utilizzare CDN per servirle più velocemente.
Eliminare code-blocking JavaScript: posticiparne il caricamento o servirlo in modo asincrono.
Minificare HTML/CSS/JS: rimuovere spazi e caratteri superflui per ridurre le dimensioni dei file.
Utilizzare web font self-hosting: evitare font dai CDN poco performanti.
Lazy loading: caricare immagini/contenuti solo quando servono, non tutti immediatamente.
Caching lato server: impostare header di cache adeguati.
Comprimere contenuti: abilitare gzip/brotli compression su server.
Ottimizzare Server-Side Rendering: generare il markup HTML già pronto lato server.

Migliorare il First Input Delay (FID)

fid first input delay — *fonte: web.dev*

Per ridurre il FID, ovvero la latenza tra l'interazione dell'utente e la risposta della pagina, è necessario ottimizzare il processo di runtime JavaScript:

Eliminare/posticipare script bloccanti: come detto, limitare JS sync che blocca l'interattività.
Minificazione ed eliminazione codice inutilizzato: ridurre overhead del runtime JavaScript.
Cache API: memorizzare risultati di elaborazioni complesse per riutilizzarli.
Web Workers: delegare operazioni computazionali intensive ai web worker per non bloccare l'UI thread.
Virtual DOM: utilizzare React/Vue/Angular per gestire l'DOM in modo performante.
Tree shaking: rimuovere codice JavaScript inutilizzato con bundler come Webpack.
Bundle splitting: dividere bundle JavaScript troppo “pesanti”.
Preload hints: precaricare risorse essenziali indicandole con <link rel=preload>.

Ridurre il Cumulative Layout Shift (CLS)

cls cumulative layout shift — *fonte: web.dev*

Per minimizzare il CLS, ovvero lo spostamento visibile di elementi durante il caricamento, è importante la corretta gestione di:

Dimensioni delle immagini: specificare width/height per evitare ri-layout.
Web font: utilizzare self-hosting e preload hints.
Layout dinamici: evitare inserimenti dinamici di annunci o elementi tra il contenuto.
Containers a larghezza variabile: preferire width fisse per elementi principali.
Lazy loading: implementarlo correttamente per evitare spostamenti di contenuto.
Rendere i CSS critici inline: inserire direttamente nell'HTML gli stili necessari al primo render.
Server Side Rendering: genera il markup già con i CSS critici incorporati.
Skeleton screens: mostrare placeholder durante il caricamento per prevenire CLS.

Strumenti per migliorare i Core Web Vitals

Per seguire le best practice sopraelencate non serve per forza essere un guru del codice e della programmazione.

In alcuni casi, ci vengono in aiuto alcuni plugin SEO che possono aiutare a migliorare le prestazioni correlate ai Core Web Vitals:

ImageOptim: comprime immagini lossless riducendone le dimensioni.
ShortPixel: ottimizza e converte le immagini in next-gen format come WebP.
PurgeCSS: rimuove CSS inutilizzato riducendo l'overhead.
Autoptimize: aggrega, minifica e comprime JS, CSS e HTML.
WP Rocket: plugin WordPress che ottimizza vari aspetti delle prestazioni.
Swift Performance: plugin WordPress con report dettagliati sulle Web Vitals.

Investire nel miglioramento dei Core Web Vitals può richiedere un certo impegno iniziale, ma i benefici in termini di user experience e SEO sono decisamente significativi.

Monitorare regolarmente le metriche e apportare continue ottimizzazioni è la chiave per stare al passo con i requisiti di Google ed offrire ai propri utenti la migliore esperienza possibile.

Oltre i Core Web Vitals: l'Interaction to Next Paint (INP)

Da alcuni giorni Google Search Console sta inviando avvisi di errore relativi ad una nuova metrica chiamata INP.

L'Interaction to Next Paint (INP) è un indicatore aggiuntivo che Google utilizzerà per misurare la reattività di una pagina web. Come si legge, andrà a sostituire FID come Core Web Vital a partire da marzo 2024.

google interaction to next paint — *Una delle email di GSC che segnalano problemi INP*

INP misura il tempo che intercorre tra l'ultima interazione dell'utente (click, tap ecc.) e il momento in cui viene disegnato il frame successivo sullo schermo. In altre parole, quanto tempo impiega la pagina a rispondere visivamente dopo un'interazione dell'utente.

L'obiettivo raccomandato per l'INP è un valore inferiore a 100 millisecondi, per una reattività ottimale. Un INP alto indica potenziali problemi di prestazioni che impattano negativamente l'esperienza utente.

Sebbene l'INP non sia ancora considerato un Core Web Vital, è comunque una metrica importante per valutare la capacità di una pagina di rispondere rapidamente agli input. Google la tiene in considerazione come fattore per il posizionamento mobile-first e la raccomanda per creare esperienze reattive di alta qualità.

L'INP può essere misurato con gli stessi strumenti utilizzati per gli altri Core Web Vitals, in particolare Lighthouse. Ottimizzare le prestazioni complessive della pagina, la gestione degli eventi in JavaScript e l'utilizzo efficiente di CPU e GPU contribuisce a ridurre l'INP.

Vuoi imparare la SEO e ottimizzare i Core Web Vitals?

Trova un corso online di ottimizzazione per i motori di ricerca. Impara a migliorare le metriche di esperienza e utente e velocità del tuo sito. Vedrai salire le tue pagine fra i risultati di Google, aumentare il traffico al tuo sito web e generare più contatti, vendite e fatturato.