Core Web Vitals: cosa sono e come rendere veloce il sito

I Core Web Vitals sono tre misure con cui Google valuta l'esperienza che una pagina offre a chi la visita: LCP (Largest Contentful Paint) misura quanto velocemente compare il contenuto principale, e dovrebbe stare entro 2,5 secondi; INP (Interaction to Next Paint) misura quanto la pagina risponde ai comandi, entro 200 millisecondi; CLS (Cumulative Layout Shift) misura quanto gli elementi si spostano mentre la pagina si carica, con un valore sotto 0,1. Si misurano sui visitatori reali, e una pagina supera la verifica solo se tutte e tre le misure sono buone per almeno tre visite su quattro.

Sono numeri tecnici, ma descrivono cose che chiunque ha provato: la pagina bianca che non arriva, il pulsante che non risponde, il testo che salta giù proprio mentre stai per toccare un link.

Cosa misura, in parole semplici, ciascun indicatore?

• LCP, il caricamento. È il tempo che passa da quando apri la pagina a quando compare l'elemento più grande visibile, di solito l'immagine principale o il titolo. Se è lento, la persona pensa che il sito non funzioni.
• INP, la reattività. Misura il ritardo tra un'azione (un tocco, un clic, la pressione di un tasto) e la risposta visibile della pagina. Dal marzo 2024 ha sostituito il vecchio indicatore FID, che misurava solo la prima interazione. Un INP alto è tipico dei siti appesantiti da molti script.
• CLS, la stabilità. Somma gli spostamenti imprevisti degli elementi durante la visita: un banner che compare in alto e spinge giù il testo, un'immagine senza dimensioni che si allarga al caricamento, un carattere che cambia e riallinea le righe.

Contano davvero per il posizionamento su Google?

Contano, ma non più dei contenuti. Google li considera parte dei segnali sull'esperienza della pagina e dice chiaramente che la pertinenza viene prima: una pagina lenta ma molto utile può stare sopra una pagina veloce e vuota. A parità di qualità dei contenuti, però, la pagina più veloce parte avvantaggiata.

Il motivo più forte per occuparsene, comunque, non è Google: sono le persone. Un sito lento da telefono perde visitatori prima ancora che abbiano letto una riga, e un e-commerce che risponde a scatti perde ordini.

Dove vedo i Core Web Vitals del mio sito?

Ci sono due tipi di dati, ed è importante non confonderli:

• i dati sul campo, raccolti dai browser degli utenti reali che visitano il sito. Sono quelli che usa Google. Li trovi nel rapporto Core Web Vitals di Search Console e in PageSpeed Insights, se il sito ha abbastanza visite;
• i dati di laboratorio, ottenuti simulando una visita con uno strumento come Lighthouse. Sono utili per trovare le cause dei problemi, ma non coincidono con l'esperienza reale.

Capita spesso che un sito abbia un punteggio di laboratorio mediocre e dati sul campo buoni, o il contrario. Per decidere cosa correggere guardo prima i dati sul campo, poi uso il laboratorio per capire perché.

Perché il mio sito è lento?

Nei siti aziendali che analizzo le cause sono quasi sempre le stesse:

1. Immagini troppo pesanti. Foto caricate così come escono dalla macchina fotografica, da diversi megabyte, mostrate in un riquadro di pochi centimetri.
2. Temi e costruttori di pagine sovraccarichi. Temi pensati per fare tutto caricano script e stili per funzioni che il sito non usa.
3. Troppi script di terze parti. Chat, mappe, video incorporati, pixel pubblicitari, widget di recensioni: ognuno aggiunge peso e lavoro al browser.
4. Hosting lento. Un server che impiega un secondo solo per rispondere rende molto difficile un buon LCP.
5. Caratteri tipografici scaricati da servizi esterni, in molte varianti.
6. Nessuna cache, per cui ogni visita rigenera la pagina da zero.

Come si migliora LCP?

• Ottimizzare l'immagine principale: formati moderni come WebP o AVIF, dimensioni adatte allo schermo, versioni diverse per telefono e computer.
• Non caricare in modo differito l'immagine principale: il caricamento differito è utile per le immagini più in basso, ma rallenta quella che deve comparire subito. Anzi, conviene segnalarla al browser come prioritaria.
• Ridurre il tempo di risposta del server con un hosting adeguato, la cache delle pagine e, quando serve, una rete di distribuzione dei contenuti.
• Eliminare gli script e gli stili che bloccano la visualizzazione, caricando subito solo quello che serve per la parte visibile.

Come si migliora INP?

INP peggiora quando il browser è occupato a eseguire codice e non riesce a rispondere all'utente. Le correzioni principali:

• meno JavaScript: togliere librerie e funzioni inutilizzate, valutare se ogni widget esterno serve davvero;
• caricare gli script di terze parti dopo, o solo quando servono (la chat quando l'utente la apre, la mappa quando ci si arriva);
• spezzare i lavori lunghi in parti più piccole, così il browser ha il tempo di rispondere tra un pezzo e l'altro;
• semplificare la pagina: menu, filtri e caroselli troppo complessi pesano a ogni interazione.

Come si migliora CLS?

È spesso il più facile da sistemare:

• indicare sempre larghezza e altezza di immagini e video, così il browser riserva lo spazio giusto;
• riservare lo spazio per banner, avvisi e annunci che compaiono dopo il caricamento, oppure farli comparire sopra il contenuto senza spostarlo;
• gestire bene il caricamento dei caratteri, per evitare che il testo cambi dimensione all'arrivo del font definitivo;
• non inserire contenuti sopra quello che l'utente sta già leggendo.

Che ruolo ha l'hosting?

Più di quanto si pensi, soprattutto per LCP. Prima ancora di scaricare immagini e script, il browser aspetta che il server risponda con la pagina. Se quella prima risposta arriva dopo un secondo, il traguardo dei 2,5 secondi diventa difficile da raggiungere qualunque cosa si faccia dopo.

Le cose che controllo quando valuto un hosting dal punto di vista della velocità:

• tempo di risposta del server, misurato da più punti e in orari diversi, non solo nel momento migliore;
• cache delle pagine, così le pagine che cambiano di rado non vengono rigenerate a ogni visita;
• versioni aggiornate del software del server e del linguaggio su cui gira il sito, che spesso portano miglioramenti di prestazioni;
• posizione dei server vicina ai visitatori, o una rete di distribuzione dei contenuti che serve i file statici da punti vicini;
• risorse dedicate sufficienti nei momenti di traffico più alto, come i giorni di saldi per un e-commerce.

Un hosting economico e sovraffollato può annullare tutto il lavoro fatto sulle pagine.

Un sito veloce si costruisce o si aggiusta?

Entrambe le cose sono possibili, ma costruirlo veloce costa molto meno. Quando realizzo un sito parto da pagine leggere, immagini preparate automaticamente in più formati e dimensioni, script ridotti al minimo e servizi esterni caricati solo quando servono. Su un sito esistente, invece, si lavora per priorità: prima le correzioni con più effetto e meno rischi (immagini, cache, script inutili), poi gli interventi più profondi.

A volte la conclusione onesta è che il sito è costruito su un tema o un costruttore di pagine che non si può alleggerire oltre un certo punto, e che un rifacimento del sito su basi più semplici è la strada più efficace.

Ogni quanto vanno ricontrollati?

I dati sul campo si aggiornano di continuo, e un sito veloce può diventare lento senza che nessuno se ne accorga: basta una nuova estensione, un banner pubblicitario, un video in home page, un aggiornamento del tema. Per questo il controllo dei Core Web Vitals fa parte della manutenzione e dell'hosting che svolgo: un'occhiata periodica a Search Console e una verifica dopo ogni modifica importante.

Ne parliamo?

Se il tuo sito è lento, soprattutto da telefono, scrivimi dalla pagina contatti. Analizzo i dati sul campo e di laboratorio, ti dico quali sono le cause principali e quanto si può migliorare con interventi mirati di SEO tecnica. La velocità è uno dei tasselli per farsi trovare: il quadro completo è nella guida su come farsi trovare su Google.

Fonti

• web.dev, Metriche Web Vitals
• Google Search Central, Core Web Vitals e risultati della Ricerca Google

Crediti delle immagini

• Copertina: foto di William Warby su Unsplash