Home
Blog

Core Web Vitals: cosa sono, come impattano la navigazione e (soprattutto) come migliorarli.

Scritto da:

Davide Serafini / CoFondatore & Solutions Architect

03 Novembre 2021 / Ottimizzazione motori di ricerca

Dimenticate la SEO fatta di parole chiave insistentemente ripetute in pagina: quella è una SEO appartenente al passato (ormai quasi remoto!).

Oggi Google per posizionare un contenuto presta attenzione a fattori ben più raffinati ed elaborati tra cui l’esperienza di navigazione dell’utente su un sito web. Tra i fattori rilevanti per una user experience premiata da Google troviamo anche la sicurezza, la velocità di caricamento degli elementi in pagina, la facilità di navigazione e la soddisfazione degli utenti.

Ma come fa Google a misurare la soddisfazione degli utenti? Lo fa attraverso tre nuove metriche che valutano la qualità dell’esperienza di navigazione in pagina, introdotte nel maggio 2020 e poi aggiornate un anno dopo: i Core Web Vitals.

Perché i Core Web Vitals si chiamano così?

Google ha reso noto diversi fattori che concorrono al ranking di un sito web e dunque al suo posizionamento. Tra questi fattori troviamo:

  • l’ottimizzazione per dispositivi mobili (mobile friendly);
  • la sicurezza (tramite l’attivazione del protocollo di sicurezza HTTPS);
  • la strutturazione adeguata degli annunci pubblicitari con gli interstitial (pagine pubblicitarie realizzate con JavaScript).

 

A questi si aggiungono poi altri tre fattori di primaria importanza che costituiscono, appunto, i Core Web Vitals ovvero:

  • la velocità di caricamento (Loading);
  • il tempo di risposta di una pagina all’input di un utente ovvero il suo grado di interattività (Interactivity);
  • la stabilità visiva del layout durante il caricamento della pagina (Visual Stability).

Per questi aspetti sono state dunque rese disponibili da Google tre specifiche metriche che ci aiutano a comprendere quanto la navigazione di un sito web sia di qualità per gli utenti.

Quali sono i Core Web Vitals e cosa misurano?

Vediamoli dunque:

  • il Largest Contentful Paint (LCP) misura il tempo di caricamento percepito del sito web, prendendo come punto di riferimento il contenuto di dimensione maggiore al suo interno. Si basa sulla velocità di caricamento (Loading);
  • il First Input Delay (FID) quantifica l’esperienza che prova l’utente quando interagisce per la prima volta con la pagina. Questa metrica calcola il tempo di risposta del browser dal momento in cui viene effettuata la prima interazione sulla pagina e si basa sull’Interattività della stessa (Interactivity);
  • il Cumulative Layout Shift (CLS) misura la stabilità visiva dei contenuti durante l’adattamento del layout (Visual Stability).

LCP (Largest Contentful Paint)

Entriamo ora nel dettaglio del LCP: come già detto, Google premia i siti web con il caricamento più veloce, andando a calcolare il tempo di loading del contenuto più grande (largest) presente all’interno della viewport, cioè della porzione di pagina web che è visibile all’utente senza aver bisogno di fare lo scroll. LCP è una misura decisamente più precisa del FCP (First Contentful Paint), che misura invece quanto impiega il primo contenuto mostrato a schermo ad essere caricato.

Un LCP, per essere valutato positivamente, deve avere un valore inferiore a 2.5 secondi.

Largest Contentful Paint

FID (First Input Delay)

Il FID quantifica l’esperienza che prova l’utente quando interagisce per la prima volta con la pagina web, misurando il tempo impiegato perché essa diventi interattiva.

È il tempo trascorso tra la prima interazione con una pagina del sito (ad esempio il clic su un collegamento o un pulsante) e il momento in cui il browser risponde effettivamente all’azione, e misura l’interattività in base al tempo impiegato da quest’ultimo per rispondere agli input dell’utente. Ci sono anche azioni continue – come lo scorrimento e lo zoom – che non vengono considerate dal calcolo del FID.

Per una buona esperienza gli utenti dovrebbero essere in grado di interagire con la pagina entro 100 millisecondi.

First Input Delay CWV

CLS (Cumulative Layout Shift)

Il CLS misura la stabilità visiva analizzando lo spostamento imprevisto degli elementi della pagina web. Al contrario degli altri due Core Web Vitals la sua unità di misura di riferimento non è il tempo, ma lo spazio: Google ha infatti creato un punteggio specifico per identificare il livello delle variazioni di layout nel corso della visita alla pagina, che potrebbero compromettere la User Experience.

Un CLS ideale dovrebbe avere un punteggio inferiore allo 0.1, per essere sicuri che l’esperienza degli utenti con il caricamento del layout della pagina sia positiva.

Cumulative Layout Shift CWV

Migliorare le performance dei siti web seguendo questi parametri può portare dei benefici tangibili, creando maggiore visibilità e fidelizzazione degli utenti.

Non è diverso dal guardare un film, oppure una serie tv: una brutta regia o una fotografia imperfetta possono rovinare anche la storia migliore. Per questo, oltre ai contenuti del sito, è importante dare altrettanta importanza all’esperienza dell’utente finale, il vero fruitore del nostro prodotto.

Come si controllano i Core Web Vitals?

Per i siti di proprietà, il modo più preciso e affidabile per verificare il valore dei Core Web Vitals è accedendo alla sezione Page Experience della Google Search Console.

Page experience Google Search Console
CWV Page experience Google Search Console

Altri tool che consentono di controllare i Core Web Vitals sono:

Infine, è possibile anche installare nel browser l’estensione Web Vitals che, con un semplice click, ci dà i valori dei Core Web Vitals del sito che stiamo visitando.

È dunque possibile controllare i CWV dei siti dei concorrenti e dei siti ai cui ci si vuole ispirare? Ebbene sì, non solo è possibile ma è anche molto semplice utilizzando l’estensione per Chrome o Lighthouse.

Come migliorare i Core Web Vitals?

Ora che abbiamo visto cosa sono e come si verifica lo stato di salute dei nostri Core Web Vitals, vediamo la cosa più importante: come si fa a migliorarli. Dato che le 3 metriche misurano aspetti diversi dell’esperienza utente, ogni metrica ha anche le sue strategie da adottare.

Come ridurre il Largest Contentful Paint.

LCP è una metrica legata strettamente alla velocità di caricamento, quindi il modo migliore per ottimizzarla è agire sulle risorse (font, immagini, video etc) da caricare in modo da prioritizzarle.

Alcune tecniche sono:

  • implementare il preload di font e immagini above the fold (ovvero quelle visibili nella schermo prima di effettuare lo scroll) così che siano caricate in anticipo;
  • inserire le immagini SVG direttamente in pagina, così da risparmiare le richieste per scaricarle;
  • usare una “immagine poster” per i video, ovvero un’immagine solitamente di piccole dimensione che viene caricata al posto del video e agisce come placeholder mentre viene caricato il video vero e proprio;
  • implementare il CSS critico, ovvero inserire all’interno della pagina il CSS necessario a dare lo stile del contenuto above the fold.

Come ridurre il First Input Delay.

Per migliorare il FID bisogna andare ad agire sulle attività che tengono il browser “impegnato” durante il caricamento della pagina. Una su tutte, si va a ridurre la quantità di codice JavaScript che deve essere eseguito durante il caricamento della pagina. Questo include sia il codice necessario a mostrare la pagina, sia tutti i codice solitamente di terze parti usati per analytics e tracking.

Come ridurre il Cumulative Layout Shift.

Per ridurre, e nella migliore delle ipotesi azzerare, il CLS bisogna eliminare i salti di contenuto che avvengono senza intervento dell’utente. La modifica che più impatta questa metrica, ed è la prima da implementare, è assicurarsi che ogni elemento che viene caricato in pagina abbia già un suo spazio predefinito che andrà ad occupare. Questo vuol dire che immagini, video, e anche le ads abbiano i loro box predefiniti così da non far spostare il contenuto man mano che si caricano.

Quali effetti hanno i Core Web Vitals ottimizzati?

L’ottimizzazione dei Core Web Vitals genera effetti tangibili al sito web, benefici di cui tutti gli utenti si possono accorgere “a occhio nudo”, come ad esempio:

  • il contenuto si carica molto più velocemente ed è immediatamente visibile all’utente quando cambia pagina;
  • mentre leggiamo un contenuto non perdiamo più il segno perché le immagini o le pubblicità che si caricano a poco a poco fanno saltare la posizione del testo lungo la pagina.

Oltre a questi benefici, ne otteniamo naturalmente di più orientati al business:

  • più visite di pagina e dunque maggiore traffico generale nel nostro sito;
  • sessioni di navigazione più lunghe (perché non interrotte da fastidiosi malfunzionamenti);
  • meno rimbalzo (bounce) ovvero meno utenti che escono dal nostro sito senza navigarlo;
  • maggiore soddisfazione da parte degli utenti e dunque più potenzialità di conversione.

 

Corri a controllare lo stato dei tuoi Core Web Vitals e, se non ti soddisfano, contattaci!

Iscriviti alla nostra
Newsletter

Consigli per migliorare la tua presenza digitale, notizie dal mondo del web e casi studio che puoi "rubare" per la tua azienda: non perderne neanche uno, iscriviti!