Nei primi giorni di maggio 2020 Google, da tempo impegnato a rendere più semplice ed efficace l’usabilità dei sito web con l’obiettivo di facilitare l’esperienza di navigazione degli utenti e fornire risposte velocemente e in modo chiaro, ha annunciato nel suo blog ufficiale l’introduzione di una serie di metriche che valutano la user experience di un sito web e ritenute essenziali per una buona esperienza utente e un web più piacevole.
Questi fattori sono la base del progetto “Core Web Vitals 2020” e saranno integrate alla SEO attraverso un set di specifici indicatori di UX che diventeranno ufficialmente un fattore di ranking nel 2021, influendo sul posizionamento del sito web su Google.
I Core Web Vitals sono i parametri ritenuti fondamentali da Google per valutare la qualità dell’esperienza di navigazione di un utente su una pagina web: si riferiscono a velocità di caricamento, tempo di risposta e stabilità del layout.
Se la tua pagina web non viene caricata in circa tre secondi, il 53% degli utenti mobile abbandona il sito. A chi si occupa di Seo e sviluppo siti web: non preoccupatevi, in realtà non c’è niente di nuovo.
Come vengono calcolati i Core Web Vitals
I parametri Core Web Vitals vengono calcolati a partire dall’esperienza su Google Chrome degli utenti che hanno dato il consenso alla sincronizzazione della cronologia e all’abilitazione dei report sulle statistiche di utilizzo. I dati (campione) vengono raccolti e processati dalla Chrome User Experience, da qui vengono poi condivisi con gli altri strumenti di analisi.
Uno dei principali strumenti per analizzare i Core Web Vitals è Google Search Console: nella scheda che è stata aggiunta recentemente vengono analizzate tutte le pagine indicizzate del sito web.
È possibile analizzare le singole pagine (anche di altri siti) con i seguenti strumenti:
- PageSpeed Insights
- Lighthouse
- Search Console
- Chrome UX Report
- Chrome DevTools
- Web Vitals Extension (estensione Google Chrome)
Quali sono i tre Core Web Vitals
I Core Web Vitals servono per stabilire se le pagine web sono veloci, quali elementi rallentano il caricamento e come possiamo migliorare. I tre elementi, come già accennato, sono la velocità di caricamento, il tempo di risposta e la stabilità del layout.
PageSpeed Insights aggiunge anche la prima visualizzazione con contenuti che non è un Core Web Vital, ma può aiutare a migliorare l’usabilità del sito web.
LCP: velocità di caricamento
LCP (Largest Contentful Paint) indica il tempo di rendering dell’elemento più grande (Largest) visibile nella schermata iniziale quando si carica il sito e misura la performance del caricamento. Di solito è un’immagine, un video, un’animazione o un blocco di testo. Questo valore indica la velocità di caricamento dell’elemento principale della pagina.
Nel dettaglio può essere 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
Ciò che conta è quello che appare nella viewport di apertura del sito – più esattamente la quantità di spazio che l’oggetto utilizza nella finestra dell’utente – mentre tutto quello che è “below the fold” non viene considerato. Questa metrica presume che l’oggetto più grande visibile sia il contenuto principale e penalizza contenuti invasivi come titoli molto grandi, immagini di apertura enormi, video, banner pubblicitari e pop-up.
Se gli elementi sono renderizzati sia sopra che sotto il limite della pagina, solo la parte visibile è considerata rilevante. Lo stesso vale per gli elementi in scala: un’icona di 800×800 pixel se ridotta a 50×50 pixel conta solo per 50. Al contrario, se ingrandita, è rilevante solo la dimensione dell’immagine originale.
Pertanto, come regola generale, è importante non inserire “above the fold” video o immagini superiori a 250 pixel di larghezza. Immagini di 300 pixel o banner pubblicitari di 336×280 o 300×250 comportano una penalizzazione importante.
Il valore ottimale, per fornire una buona esperienza utente, per caricare il contenuto “above the fold” dovrebbe essere inferiore a 2,5 secondi (considerati lenti già sopra i 4 secondi).
FID: tempo di risposta
FID (First input delay) indica il tempo trascorso tra la prima interazione di un utente su un elemento interattivo del sito web (ad esempio il clic su un collegamento, un pulsante o qualsiasi listener JavaScript) e la risposta da parte del browser.
Misura l’interattività in base al tempo che il browser impiega a rispondere agli input dell’utente. Non vengono considerati lo scroll e lo zoom della pagina, ma può essere penalizzato da troppo JavaScript caricato in anticipo.
Google considera solo il primo input delay perché sarà il segnale iniziale che avrà l’utente sulle capacità di risposta del sito e risulterà fondamentale per modellare l’impressione generale della qualità e dell’affidabilità di navigazione.
Il valore ottimale, per una buona esperienza, per interagire con la pagina dovrebbe essere inferiore a 100 millisecondi.
CLS: stabilità del layout
CLS (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 risultato è dato dal prodotto tra la componente di impatto (spazio occupato dall’elemento prima e dopo lo spostamento) e la componente di distanza (il valore percentuale della distanza massima percorsa dall’elemento divisa per la dimensione della finestra).
Il Cumulative Layout Shift Il calcolo del CLS è piuttosto complicato e si esprime come il prodotto di due valori, la componente d’impatto e la componente di distanza utilizzando questa formula:
punteggio layout shift = componente impatto * 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 valore ottimale, per una buona UX, dovrebbe essere inferiore a 0,1.
Come e perché migliorare i Core Web Vitals
Google ha annunciato che dal 2021 i Core Web Vitals saranno considerati a tutti gli effetti elementi che contribuiranno al posizionamento, ma il valore qualitativo dei contenuti sarà sempre l’aspetto più importante.
Lato SEO, dobbiamo quindi cercare di aumentare questi parametri con degli interventi tecnici. Possiamo ridurre il peso di Css, JavaScript, immagini ed elementi multimediali, ma anche utilizzare il caricamento asincrono. Ci sono dei plugin di WordPress che riescono ad ottimizzare le prestazioni del sito web. Possiamo ancha adottare il formato AMP che riduce i tempi di caricamento delle pagine web da mobile.
Lato usabilità, i Core Web Vitals ci danno importanti indicazioni per migliorare la qualità di navigazione dei nostri utenti ed evitare gli abbandoni causati da un sito troppo lento.
Google consiglia di correggere tutte le metriche etichettate come “scarse”. Alcune delle correzioni 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
Page Experience
Gli sviluppatori di Google hanno elencato i criteri presi in esame per la valutazione di un sito e le metriche utilizzate dall’algoritmo per capire come un utente percepisce l’usabilità di una pagina web.
Alcuni fattori di posizionamento indispensabili che Google richiede sono:
- ottimizzare per i dispositivi mobili
- minimizzare al massimo il caricamento delle pagine
- garantire la sicurezza con HTTPS
- strutturare adeguatamente gli annunci pubblicitari con gli interstitial (pagine pubblicitarie realizzate con JavaScript o Flash)
Conclusioni
Google ha creato una nuova libreria JavaScript dedicata ai Core Web Vitals e API che permettono di misurare ogni parametro e raccogliere dati degli utenti reali. In questo modo è possibile sfruttare le API per tracciare autonomamente il comportamento degli utenti sfruttando Google Tag Manager per trasferire le metriche su Google Analytics ed esportarle su Google Data Studio.
L’introduzione dei Core Web Vitals ci ricorda, ancora una volta, che l’obiettivo principale rimane quello di creare siti facili e veloci da navigare, specie per gli utenti mobile. Sottovalutando questi si aspetti si rischia di diminuire le conversioni del sito ma soprattutto di confinarlo alle posizioni più basse della SERP.
