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.

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.

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.

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

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.