Web Vitals è un’iniziativa di Google per fornire uno standard di qualità e per offrire la migliore esperienza di navigazione.
Le metriche che compongono Core Web Vitals si evolveranno nel tempo e rappresentano ad oggi i valori web più importanti he si applicano alla misurazione delle pagine.
Google ha fornito una serie di strumenti nel corso degli anni per misurare e generare rapporti sulle prestazioni delle pagine web ma con l’iniziativa Web Vitals lo scopo è semplificare la lettura dei dati e aiutare i siti a concentrarsi sulle metriche che contano di più, i Core Web Vitals.
Principali metriche dei CWV
L’attuale set si concentra su tre aspetti dell’esperienza utente: caricamento, interattività e stabilità visiva e include le seguenti metriche (e le rispettive soglie):
Nel dettaglio ecco come vengono misurate le soglie di queste tre metriche:
- Largest Contentful Paint (LCP): calcola le prestazioni di caricamento e per fornire una buona esperienza utente il LCP dovrebbe essere inferiore a 2,5 secondi dall’inizio del rendering della pagina
- First Input Delay (FID): analizza l’interattività ed il suo valore dovrebbe avere un indice inferiore ai 100 millisecondi
- Cumulative Layout Shift (CLS): misura la stabilità visiva aspettandosi che le pagine abbiano un CLS inferiore a 0,1
Per ciascuna delle metriche, al fine di assicurarsi di raggiungere l’obiettivo consigliato per la maggior parte dei casi, una buona soglia da misurare è il 75° percentile di caricamenti di pagina, segmentato su dispositivi mobili e desktop.
Come misurare le pagine
Ci sono diversi metodi per effettuare rapidamente dei report sulle performance di un sito e passano tutti da alcuni tool gratuiti.
Con gli strumenti di Google
| LCP | FID | CLS | |
|---|---|---|---|
| PageSpeed Insights | ✓ | ✓ | ✓ |
| Search Console (Core Web Vitals report) | ✓ | ✓ | ✗ |
| Chrome User Experience Report | ✓ | ✓ | ✓ |
Search Console e Chrome User Experience Report basano le loro misurazioni su dati raccolti dalla Chrome User Experience, un set di dati pubblici e metriche sull’esperienza utente ricavati da statistiche di navigazione reale.
Ad ogni modo questi valori sono un campione perché comprendono solo quelli di utenti che hanno dato il consenso ad alcune condizioni come l’abilitazione dei report sulle statistiche di utilizzo e la sincronizzazione della cronologia.
Installando un’estensione di Google Chrome
È possibile anche generare rapporti sui Web Vitals con l’estensione Web Vitals per Chrome navigando direttamente la pagina interessata.
Questa estensione utilizza la libreria web-vitals per misurare ciascuna di queste metriche e fornirle in tempo reale.
È sicuramente un ottimo modo per farsi un’idea di quanto una pagina sia o meno ottimizzata ma per avere delle indicazioni più valide è necessario è abilitare un sistema di tracciamento specifico (ad esempio su Google Analytics) per analizzare i dati del proprio sito in modo più accurato.
Alternativa automatizzata
Per avere un’idea più generale delle performance c’è anche lo strumento di misurazione sviluppato da digitale.co.
Il vantaggio di questo tool è che permette di ottenere in modo completamente automatico un elenco dei punteggi di ogni singola pagina del sito effettuando un crawling o inserendo gli URL interessati.
In questo modo si può avere velocemente un’idea delle aree che richiedono interventi esaminando i dati o approfondendo tramite i report di PageSpeed Insights i valori di riferimento dei Core Web Vitals.
Web Vitals nel dettaglio
Sebbene in queste misurazioni ci sono anche altri fattori che sono presi in considerazione per valutare la velocità complessiva, esistono tre metriche rappresentative su cui porre maggiore attenzione.
Largest Contentful Paint (LCP)
La metrica LCP indica il tempo di rendering dell’elemento più grande visibile all’interno dell’area visualizzata (la viewport) quando si naviga il sito e misura la performance del caricamento.
Elementi considerati
Come specificato nella Largest Contentful Paint API, i tipi di elementi presi in oggetto per la valutazione del Largest Contentful Paint sono:
- elementi di tipo immagine
img - elementi di tipo immagine
imagedentro ad tagsvg - elementi di tipo video
video - immagini in background caricate attraverso la funzione
url()che si usa dentro i CSS - elementi di blocco (block-level) che contengono testo o altri elementi
La dimensione dell’elemento registrata è in genere quella visibile all’utente all’interno della finestra (viewport): se l’elemento si estende al di fuori della visualizzazione, o se uno qualsiasi degli elementi è tagliato, quelle parti non vengono conteggiate per la dimensione dell’elemento.
Per le immagini che sono state ridimensionate, la dimensione che viene segnalata è la quella visibile o la dimensione intrinseca, a seconda di quale sia la più piccola.
Ad esempio, le immagini ridotte ad una dimensione molto più piccola della loro dimensione intrinseca riporteranno la misura in cui sono visualizzate, mentre le immagini allungate o espanse a una dimensione maggiore riporteranno solo le loro dimensioni intrinseche.
Rappresentazione del Largest Contentful Paint
Nel primo esempio, il logo di Instagram viene caricato relativamente presto e rimane l’elemento più grande visibile anche se vengono mostrati progressivamente altri contenuti.
Osservando la pagina dei risultati di ricerca di Google, l’elemento più grande è un paragrafo di testo che viene visualizzato prima che qualsiasi immagine o logo termini il caricamento.
Poiché tutte le singole immagini sono più piccole di questo paragrafo, rimane l’elemento più grande durante tutto il processo di caricamento.
Cause e come ottimizzare il LCP
Le cause più comuni di un LCP scadente sono quelle strettamente legate ai tempi di caricamento della pagina e del sito:
- tempi di risposta del server lenti
- JavaScript e CSS che bloccano il rendering
- risorse o file multimediali pesanti
- codice o database non ottimizzati
Occorre quindi analizzare tutti gli aspetti tecnici che compongono la struttura generale partendo dal servizio di hosting che si è scelto (e valutando eventualmente un servizio professionale) e verificando se tutte le operazioni standard di compressione, minificazione o caching sono state eseguite.
Per chi usa CMS come WordPress può essere tutto più semplice dato che ci sono molti plugin adibiti ad una riduzione del peso delle pagine facilmente gestibile e configurabili.
First Input Delay (FID)
È il tempo trascorso tra la prima interazione di un utente con una pagina del sito (come un semplice click su un link testuale o il tap su un pulsante) e il momento in cui il browser risponde effettivamente a quell’interazione misurando la qualità dell’interattività in base al tempo che il client impiega a rispondere agli input.
Azioni come lo scorrimento verticale o lo zoom (dette continue) non sono considerate, viene considerato il primo input delay poiché rappresenta il segnale iniziale che risulta fondamentale per valutare in modo generale la qualità e dell’affidabilità di navigazione.
Rappresentazione del First Input Delay
Il ritardo di input (ovvero la latenza) si verifica perché il thread principale del browser è impegnato in qualcos’altro, quindi non può rispondere all’utente immediatamente.
Un motivo comune per cui ciò potrebbe accadere è che il browser è impegnato ad analizzare ed eseguire script di grandi dimensioni e mentre lo fa, non può interpretare altri listener di eventi perché il JavaScript che sta caricando potrebbe dirgli di fare qualcos’altro.
La simulazione qui sotto rappresenta una pagina che sta effettuando alcune richieste di rete per le risorse (ad esempio file CSS e JavaScript) e, al termine del download di tali risorse, esse vengono elaborate sul thread principale.
In genere, si verificano lunghi ritardi nel primo input tra First Contentful Paint (FCP) e Time to Interactive (TTI) perché la pagina ha reso disponibile parte del suo contenuto ma non è ancora pronta.
Dato che l’input si verifica mentre il browser sta eseguendo un task, deve aspettare il completamento dell’attività prima di poter rispondere ed il tempo atteso è il valore FID per questo utente in questa pagina.
Cause e come ottimizzare il FID
La causa principale di un FID scadente è l’esecuzione di JavaScript non ottimizzato: il modo in cui il JavaScript analizza, compila ed esegue azioni sulla pagina web influenza drasticamente il risultato.
Molti siti includono tag e librerie di terze parti (come i plugin) che possono mantenere la rete occupata (lo scambio dati) e rendere il thread principale inefficiente influendo sulla latenza di interazione.
In alcuni casi, questi script sono caricati a discapito di quelli di prima parte in termini di priorità mentre è bene tentare di dare la priorità al caricamento di ciò che si ritiene che possa offrire il massimo valore agli utenti e che è più legato alla visualizzazione del contenuto.
Cumulative Layout Shift (CLS)
È una metrica molto importante e incentrata sull’utente che misura la stabilità visiva in quanto mira a quantificare la frequenza con cui gli utenti riscontrano cambiamenti di layout imprevisti: un CLS basso aiuta a garantire che l’esperienza sia piacevole.
Rappresentazione del Cumulative Layout Shift
Per calcolare il punteggio di spostamento del layout, il browser esamina le dimensioni della viewport e il movimento degli elementi “instabili” nella finestra tra due fotogrammi renderizzati: il valore attribuito è il prodotto di due misure di quel movimento, l’impact fraction e la distance fraction.
layout shift score = impact fraction * distance fractionLa impact fraction misura l’impatto degli elementi instabili sull’area di visualizzazione tra due fotogrammi mentre la distance fractionè la distanza massima che qualsiasi elemento instabile ha spostato nel frame (orizzontalmente o verticalmente) divisa per la dimensione più grande del viewport (larghezza o altezza, a seconda di quale sia maggiore).
Un cambio improvviso della pagina per via dell’introduzione di un elemento o un ritardo di caricamento può creare l’instabilità del layout influendo negativamente sull’usabilità e la navigazione.
Il movimento imprevisto del contenuto di solito si verifica perché le risorse vengono caricate in modo asincrono o gli elementi DOM vengono aggiunti dinamicamente alla pagina sopra il contenuto esistente.
Il “colpevole” potrebbe essere un’immagine o un video con dimensioni sconosciute, un font che viene visualizzato più grande o più piccolo del suo fallback o un annuncio o un widget di terze parti che si ridimensiona.
Cause e come il CLS
I motivi per cui il CLS può non ottenere un valore soddisfacente o estremamente basso sono principalmente:
- immagini senza dimensioni (attributo HTML)
- annunci, embed e iframe senza dimensioni
- elementi iniettati dinamicamente (ad esempio via JavaScript)
- caricamento di font Web che causano FOIT / FOUT
- richieste in attesa di una risposta di rete prima di aggiornare DOM
Questa metrica fonda il suo principio su alcuni approcci alla progettazione dei siti che purtroppo sono difficilmente applicati dagli sviluppatori.
Una pagina web dovrebbe essere pensata, realizzata e costruita per poter funzionare correttamente ed essere pienamente fruibile senza fogli stile o librerie JavaScript: questi sono assolutamente indispensabili per migliorare l’esperienza di utilizzo di un sito ma non dovrebbero essere adibiti alla generazione di elementi necessari o di contenuto statico.
Qualsiasi porzione di codice che andrà a manipolare, in modo più o meno incisivo il layout, concorrerà a peggiorare il punteggio del CLS: questo richiede, ad esempio su WordPress, un uso consapevole dei plugin che possono stravolgere completamente le pagine proprio nella fase di caricamento.
Influenza sul page ranking
Google sta combinando i segnali derivati da Core Web Vitals con quelli di ricerca esistenti per l’esperienza della pagina tra cui l’ottimizzazione per i dispositivi mobili, la navigazione sicura, la sicurezza HTTPS e il non-intrusive interstitials per fornire un quadro completo dell’esperienza della pagina.
Sebbene tutte le componenti dell’esperienza di uso di una pagina siano considerate, si darà sempre la priorità alle pagine con le migliori informazioni complessive, anche se alcuni aspetti di usabilità sono migliorabili.
Una buona esperienza sulla pagina non sostituisce la presenza di contenuti interessanti e pertinenti: nei casi in cui saranno presenti siti con contenuti simili, le metriche di caricamento e interazione diventeranno molto più importanti per la visibilità nella ricerca.
