I web Vitals sono parametri standard per misurare la qualità dell’esperienza di navigazione di un utente su un sito web. Sono tre e consistono in metriche ed indicatori legati alla velocità, al tempo di risposta ed alla stabilità del layout di un sito web.  

Rappresentano il tentativo di Mountain View di andare oltre il concetto di tempo necessario per caricare un documento web.

Sì, è confermato: il sito deve essere veloce. Ma non basta. Per restituire all’utente un buon risultato, vale a dire un contenuto di qualità secondo una definizione più completa possibile, bisogna lavorare su aspetti differenti che comprendono anche il layout, l’interazione con gli elementi della pagina web, il modo in cui questi cambiano e si spostano con o senza l’autorizzazione di chi naviga.

Quali sono i Core Vitals?

Questi tre fattori sono:

1. LCP: Largest Contentful Paint – Velocità di caricamento (loading)

‍

Nel dettaglio è compreso tra:

• elementi di tipo immagini <img>

• elementi di tipo immagini <image> dentro a elementi di tipo <svg>
• elementi di tipo video <video>
• elementi di immagini in background caricati attraverso la mitica funzione url() che si usano dentro i CSS
• Un elemento di blocco (Block-level) che contiene testo o altri elementi

Questa metrica presume che l’oggetto più grande visibile nella finestra sia il contenuto principale e penalizza contenuti invasivi come titoli molto grandi, immagini di apertura enormi, video, banner pubblicitari e pop-up. Per fornire una buona esperienza utente i siti dovrebbero caricare il contenuto "above the fold" entro i primi 2,5 secondi e sono considerati lenti già sopra i 4 secondi. Da notare che non viene considerato il tempo di download ma la quantità di spazio che l’oggetto utilizza nella finestra dell’utente. Se gli elementi sono renderizzati sia sopra che sotto il limite della pagina, solo la parte visibile è considerata rilevante.

2. FID: First Input Delay – Interattività della pagina (interactivity)

‍

‍

Ecco alcuni esempi di interazioni :

• Click su un link
• Touch da mobile su un bottone
• Qualsiasi listener JavaScript

Il First Input Delay misura l'interattività in base al tempo che il browser impiega a rispondere agli input dell’utente. Altre interazioni, come lo scorrimento e lo zoom, sono azioni continue e non sono considerate.

Ad oggi i principali problemi di interattività su un sito web si verificano durante il caricamento della pagina perché il codice viene suddiviso in più caricamenti oppure viene caricato troppo JavaScript in anticipo. Per una buona esperienza, gli utenti dovrebbero essere in grado di interagire con la pagina entro cento millisecondi.

3. CLS: Cumulative Layout Shift – Stabilità visive del caricamento (visual stability)

‍

Il Cumulative Layout Shift misura lo spostamento degli elementi visibili e i cambiamenti di layout che arrivano all’improvviso e si verificano durante l’intera durata della visita della pagina causando uno shift dopo il caricamento dell’area del sito dovuto al ridimensionamento, con un effetto piuttosto fastidioso. Il CLS è dato dal prodotto tra la componente di impatto e la componente distanza. La componente d’impatto misura lo spazio normale occupato da un elemento nella finestra e quello che occupa dopo il suo spostamento. L'unione dell'area visibile dell'elemento prima e dopo lo spostamento decreta la percentuale della vista totale quindi la sua componente di impatto.

La componente di distanza è la distanza maggiore che un elemento instabile ha coperto nel riquadro durante lo spostamento (in orizzontale o in verticale) diviso per la dimensione più grande della finestra (larghezza o altezza, a seconda di quale sia maggiore) e si misura sempre in percentuale.

Il CLS è dunque il prodotto di queste due componenti e per una buona UX dovrebbe essere inferiore a 0,1.

Cosa fare per ottimizzare i Core Web Vitals?

Google consiglia di correggere tutte le metriche etichettate come scarse (in questo caso quelle in rosso con scritto poor) e alcune delle correzioni di pagina più comuni dovrebbero includere:

• Ridurre le dimensioni della pagina a meno di 500 KB
• Limitare il numero di risorse della pagina a 50
• Valutare l’introduzione di AMP

I Core Web Vitals sono elementi particolarmente importanti e devono essere ottimizzati. Spesso sono legati al miglioramento delle immagini che devono essere leggere e gestite con dimensioni adeguate, in altri casi bisogna intervenire profondamente sul layout e attraverso modifiche lato codice.

Ora che sai cosa sono i Web Vitals non ti resta che tracciarli. La cosa più entusiasmante è che Google ha creato per la gioia di tutti una nuovissima libreria JavaScript dedicata ai Web Vitals e delle API per permette di misurare ogni Core Web Vitals e raccogliere dati degli utenti reali.

In sostanza, potrai tracciare gli utenti del tuo sito in completa autonomia, sfruttando queste API. Come? Con Google Tag Manager ovviamente!

‍