Cosa sono i core web vitals

I Web Vitals sono delle metriche, create da Google, che servono ad identificare in modo unificato se e quanto una pagina web fornisce una corretta esperienza utente.

In poche parole, Google ha trovato il modo per misurare la qualità di una pagina web, che adesso non è più intesa come sola velocità di caricamento.

I Core Web Vitals

I Core Web Vitals sono un subset dei Web Vitals che secondo Google dovrebbero essere misurati e mantenuti ottimali per ogni pagina web.

Attualmente ne sono stati identificati 3, ed ognuno misura un diverso aspetto dell’esperienza utente:

• LCP (Largest Contenful Paint): Velocità di caricamento
• FID (First Input Delay): Interattività
• CLS (Cumulative Layout Shift): Stabilità di layout

Come li misuro?

Sempre grazie a Google, esistono diversi tool per misurare queste 3 metriche.

PageSpeed Insights è un sito web per misurare i core web vitals, insieme ad altre metriche sempre molto importanti, e ti fornisce inoltre dei consigli per migliorarle. Ti basterà inserire l’url della pagina e premere “Analizza”, il resto lo farà lui. Assicurati però di inserire l’url diretto della pagina web, quindi senza redirect che rallenterebbero il caricamento della pagina.

Lighthouse è uno strumento disponibile sia in versione web sia come strumento locale, risulta infatti molto utile per testare dei cambiamenti senza dover per forza fare deploy del sito in un ambiente remoto. È inoltre in grado di misurare l’Accessibilità, il SEO, le Best practices, e le capacità PWA, ed esistono dei plugin per fare altre misurazioni.

Entrambi questi 2 strumenti misurano le metriche simulando un dispositivo di fascia media (Moto G4), con un network lento (Fast 3G), ma PageSpeed mostra anche dei dati anonimi raccolti da vere esperienze utente.

Largest Contenful Paint

Questa metrica misura la velocità di caricamento di una pagina web. Per farlo non prende in considerazione ne la velocià di risposta del server, ne in quanto tempo il tuo sito mostra il primo contenuto (First Contentful Paint). Quello che misura, invece, è quanto tempo occorre alla pagina per mostrare il contenuto più largo.

Per contenuto si intende solo ciò che ha un significato per l’utente, quindi immagini, video, o blocchi di testo.

Per largo si intende invece… decisamente largo. Ma attenzione:

• Se l’elemento supera le dimensioni del viewport, l’eccesso non viene considerato.
• Margini, padding, bordi applicati tramite css, non vengono contati.
• Per le immagini ridimensionate, invece, viene preso in considerazione il minimo tra la larghezza effettiva e quella finale.

Grazie a queste regole, non basta più avere un server veloce, o una pagina che renderizza veloce, ma va effettivamente mostrato del contenuto importante il più velocemente possibile.

Ad esempio se la nostra pagina carica in 0.5 secondi, ma poi mostra uno spinner e ci fa aspettare altri 4 secondi per mostrare la parte interessante, beh questa metrica ci becca, e ci darà uno score bello rosso 🔴

First Input Delay

Questa metrica, invece, misura il tempo che passa dalla prima interazione dell’utente fino all’inizio dell’elaborazione di quell’interazione da parte del browser.

Ad esempio, un utente apre il tuo sito e come prima cosa clicca su un link/pulsante per fare una determina operazione. Per avere un buono score in questa metrica dovresti riuscire a gestire quell’operazione entro 100ms.

Questo non vuol dire che l’operazione deve durare meno di 100ms, ma che l’event handler dovrebbe iniziare a meno di 100ms dal click dell’utente.

Inoltre questa metrica considera solo la prima interazione, non perchè le altre non contano, ma perchè la prima è quella veramente più importante per fare una buona impressione, e anche perchè la prima interazione è sempre quella più complicata da rendere interattiva visto che nel mentre il sito potrebbe essere ancora in caricamento.

Nota bene che la FID non può essere misurata su lighthouse ne su pagespeed, ma servono delle reali interazioni da parte degli utenti. Puoi però usare un’altra metrica, Total Blocking Time o TBT. Quest’ultima è facilmente misurabile sia su un ambiente locale che remoto, tramite Lighthouse, inoltre migliorandola si va, di solito, a migliorare anche la FID.

Cumulative Layout Shift

Ultima ma non meno importante, la metrica che riguarda la stabilità di layout, CLS. Questa, con una formula abbastanza complessa, misura la somma di tutti i singoli spostamenti di layout inaspettati.

Altro esempio: Un utente carica un sito, poi vede un bellissimo pulsante rosso su cui sta per cliccare, all’improvviso una pubblicità carica e fa spostare il pulsante. L’utente quindi finisce per cliccare a vuoto o peggio sulla pubblicità. Sembra familiare?

La CLS è una metrica molto importante, ed a volte anche difficile da ottimizzare, visto che può essere causata da molti fattori. Alcuni di questi sono:

• Immagini senza dimensioni definite, che quindi fanno “spostare” il layout quando finiscono di caricare.
• Font custom, che caricando fanno cambiare il testo.
• Pubblicità/iframe/embed senza dimensioni definite.
• Contenuti caricati dinamicamente, tipo questo post 😊

In generale qualsiasi spostamento improvviso, e che l’utente non può prevedere. Ad esempio se avviene un cambio di layout a seguito di un click, è un comportamento che non da fastidio.

La CLS misura di quanto si sposta il layout relativamente al viewport, se quindi avviene uno spostamento in un area non subito visibile non viene contata nella metrica.

Per misurarla ti basterà usare lighthouse, che ti può dare anche dei consigli su come migliorarla o debuggarla, ad esempio ti dice quali sono gli elementi che hanno contribuito maggiormente agli spostamenti.

Fai Presto!

Google ha annunciato che queste core web vitals influenzeranno il ranking a partire da maggio 2021, e si aggiungeranno agli altri segnali già presenti per la Page Experience. Inoltre Google sta anche lavorando ad un indicatore visivo per le pagine che rispettano tutte le metriche.

Quindi, se hai un sito, ti consiglio di iniziare subito a lavorare per misurare e migliorare le metriche, così da farti trovare pronto a maggio.