Core Web Vitals: come misurare e migliorare l'esperienza utente del sito

Oggi questi valori si identificano attraverso i Core Web Vitals, un gruppo di metriche che traduce in numeri l'esperienza di navigazione percepita da chi visita il sito, tutti elementi che rientrano poi tra i segnali di ranking di Google.

Il loro valore in SERP resta inferiore a quello della qualità dei contenuti, ma a parità di risposta offerta all'utente un sito fluido può avere la meglio sul sito lento della concorrenza.

LCP, INP e CLS: le tre metriche dei Core Web Vitals

Una delle prime metriche da prendere in considerazione è il LCP che misura il tempo necessario per mostrare l'elemento più grande presente nella parte visibile dello schermo, che di solito coincide con l'immagine di apertura o con il titolo principale, e per essere considerato buono deve restare entro i 2,5 secondi.

Da marzo 2024 la reattività viene misurata con l’INP, la metrica che ha sostituito il First Input Delay e che, a differenza di quest'ultimo, considera tutte le interazioni della visita, dai clic sui pulsanti alla digitazione nei campi di un modulo, registrando quanto tempo passa prima che il browser mostri una risposta a schermo, con una soglia da rispettare pari a 200 millisecondi.

Infine, con la metrica del CLS, si quantificano invece gli spostamenti imprevisti degli elementi durante la vita della pagina, come quando un banner compare sopra il paragrafo che si stava leggendo e spinge tutto verso il basso proprio mentre l'utente sta per cliccare un link, e in questo caso il valore deve restare pari o inferiore a 0,1.

Google considera una pagina conforme quando tutte e tre le metriche rientrano nelle soglie, calcolate sul 75° percentile delle visite reali.

Come misurare i Core Web Vitals con PageSpeed Insights e Search Console

Il primo strumento da usare per misurare i Core Web Vitals è Google PageSpeed Insights, gratuito e immediato perché richiede soltanto l'URL della pagina: il report restituisce sia i dati di campo, raccolti dagli utenti reali di Chrome, sia i dati di laboratorio ottenuti con una simulazione, e sotto i punteggi elenca anche tutti i suggerimenti tecnici ordinati in base al risparmio di tempo stimato.

Per avere una visione d'insieme su tutto il sito bisogna però passare a Google Search Console, dove nella sezione Esperienza si trova il rapporto dedicato ai Core Web Vitals, che divide gli URL nelle fasce Buono, Da migliorare e Scadente distinguendo anche tra la versione mobile e quella desktop.

Il report opera per gruppi di pagine simili, quindi permette di capire subito se il problema riguarda le schede prodotto, gli articoli del blog o un singolo template.

Come leggere i dati dei Core Web Vitals

Nell'interpretare i numeri a cui dare la precedenza sono i dati di campo, perché sono quelli su cui si basa la valutazione di Google e riflettono connessioni, dispositivi e comportamenti dei visitatori veri, mentre i dati di laboratorio servono a riprodurre un problema e a verificare l'effetto di una correzione prima che i dati reali si aggiornino dopo 28 giorni.

Con l'indicizzazione mobile-first il punto di partenza deve essere la versione da smartphone, che quasi sempre ottiene valori peggiori di quella desktop per via di processori meno potenti e reti più lente e che, per la maggior parte dei siti, genera anche la quota più ampia del traffico.

Quando si osserva il rapporto di Google Search Console bisogna riuscire a comprendere l’eventuale presenza di schemi ricorrenti, dato che spesso capita che questo permetta di capire se il problema è dato ad esempio dalle pagine oppure dal template.

Naturalmente, non bisogna inseguire il 100 su PageSpeed, ma l’obiettivo deve essere portare le pagine in una fascia almeno a livello di “Buono” e mantenerle così attraverso un monitoraggio regolare delle prestazioni.

Come migliorare i Core Web Vitals: interventi su LCP, INP e CLS

Sul fronte del caricamento, Wolf Agency, Agenzia SEO di Torino, consiglia di partire sempre dalle immagini, che spesso sono l'elemento LCP e il file più pesante della pagina: vanno compresse, convertite in formati come WebP o AVIF e caricate in lazy loading solo quando si trovano sotto la parte visibile, mentre l'immagine principale deve avere la priorità.

Contano anche i tempi di risposta del server, che si riducono con un hosting adeguato, una cache ben configurata e una CDN come Cloudflare.

Per abbassare l'INP il lavoro si concentra sul JavaScript, perché il thread principale del browser, quando è occupato a eseguire script lunghi, non riesce a rispondere ai clic dell'utente.

Bisogna quindi spezzare le attività pesanti in blocchi più piccoli, rimandare il codice non necessario al primo rendering, eliminare quello inutilizzato e valutare con attenzione ogni script di terze parti, dalle chat ai tracciamenti pubblicitari.

Per la stabilità visiva la regola principale è riservare in anticipo lo spazio a ogni elemento, indicando larghezza e altezza di immagini, video e iframe e definendo contenitori di dimensioni fisse per banner e annunci, così il browser non deve ricalcolare il layout quando ogni volta.

Infine, vanno evitati anche i contenuti inseriti sopra quelli già caricati, salvo che rispondano a un'azione dell'utente, e le animazioni andrebbero realizzate con la proprietà CSS transform invece di modificare dimensioni e posizione degli elementi; i web font, infine, si gestiscono precaricando i file principali e impostando font-display.