Core Web Vitals: cosa sono e quali sono?
Sapevi che i siti web con un caricamento lento provocano più frustrazione rispetto a quando si rimanere bloccati nel traffico? È così, più del 40% degli utenti abbandona un sito web che impiega più di 3 secondi per il suo caricamento. Questo dato è ancora più incisivo da mobile, dove gli utenti sono addirittura meno pazienti rispetto a quando navigano da desktop. Tutto questo provoca un aumento dei ‘rage clicks’ ossia furiosi clic ripetuti su un elemento che apparentemente sembra non rispondere all’input che gli viene richiesto. Questi fattori vanno ad incidere pesantemente sulla user experience degli utenti, comunicando a Google che il tuo sito ha delle pessime prestazioni. La conseguenza sarà un abbassamento del posizionamento in ricerca del tuo sito web nella SERP.
Ma come Google può monitorare i parametri delle pagine web? è qui che entrano in gioco i Web Vitals: Delle metriche che forniscono a Google delle indicazioni su come offrire una buona esperienza utente in termini di navigazione web. In particolare, ci concentreremo sui Core Web Vitals, i 3 principali indicatori che misurano i fattori principali che potrebbero influenzare la user experience.
Caricamento in corso — Largest contentful paint (LCP)
Interattività — First Input Delay (FID)
Stabilità visiva – Cumulative layout shift (CLS)
Come elencato, ciascuna di queste metriche misura un aspetto diverso sull’esperienza utente. I Core Web Vitals sono i requisiti che servono a un sito web per soddisfare le aspettative degli utenti.
Ogni metrica Core Web Vitals ha soglie associate, che classificano le prestazioni come “buone“, “da migliorare” o “scarse“.
Vediamo più nel dettaglio questi 3 aspetti:
Largest Contentful Paint (LCP), misura la velocità di caricamento percepita e segna il punto nella sequenza temporale di caricamento della pagina in cui è probabile che il contenuto principale della pagina sia stato caricato;
Misura la velocità di caricamento percepita di una pagina web e lo fa calcolando quanto tempo ci vuole prima che sulla schermata appaia il contenuto che viene considerato principale. Questo contenuto può essere un’immagine ma anche un blocco di testo. LCP viene misurato in secondi e per essere considerato “buono” dovrebbe avere un tempo inferiore a 2,5 secondi. Questo parametro quindi si concentra sostanzialmente sulla velocità di caricamento perché misura dopo quanto tempo a un utente è permesso di interagire con la pagina.
Gli elementi che vengono preso in considerazione dal browser in fase di analisi sono:
- elementi <img>
- elementi <image> all’interno di un <svg>
- elementi immagini ma caricati tramite url()
- elementi di testo
Le problematiche più comuni legate a questi componenti che possono aumentare l’LCP sono:
- File JS e CSS che bloccano il rendering della pagina
- Tempi di risposta molto lenti da parte del server
- Caricamento molto lento di altri tipi di risorse
First Input Delay (FID), questo parametro misura dopo quanto tempo il tuo sito risponde ad una interazione da parte dell’utente. Interazione che può essere:
- Un clic su una voce o un link di collegamento
- La digitazione di qualcosa all’interno di un campo compilabile
- L’apertura di un menù a tendina
Per essere considerato buono, il FID, dovrebbe avere un risultato inferiore a 100 millisecondi.
Una delle cause maggiori che può causare il ritardo di risposta ad un input, è l’elaborazione da parte del browser dei file Javascript. Fattore ancora più incisivo nei dispositivi mobile con prestazioni basse.
Alcuni interventi che possono migliorare questa metrica sono:
- Processo di minificazione dei JS e CSS eliminando parti di codice non essenziali
- Utilizzare la cache del browser
- Rimuovere gli script non critici
Cumulative layout shift (CLS), serve a misura la stabilità visiva del layout di una pagina alla fine del suo caricamento. Esempio, se dopo il caricamento della tua pagina un blocco di testo appare all’improvviso ci sarà uno spostamento degli elementi sottostanti, questo incrementa in negativo il CLS.
Per il calcolo di questa metrica il browser analizza quanto sia grande il tuo viewport e gli spostamenti degli elementi che si trovano solo in questa porzione di pagina. Perché questo parametro sia buono deve avere un tempo inferiore a 0,1.
Per la misurazione di questa metrica vengono considerati due fattori: La frazione di impatto e la frazione di distanza, (ne abbiamo parlato in modo approfondito qui).
Strumenti di misurazione e analisi
Come ampiamente spiegato, i Core Web Vitals non sono solamente metriche che misurano le prestazioni di un sito web ma parametri che servono a calcolare il livello di user experience di questi.
Ma come si possono, in concreto, misurare questi risultati?
Vista la crescente importanza del concetto “mobile first”, i risultati dei Core Web Vitals vengono restituiti in due modalità: Desktop e mobile, questo perché l’esperienza di navigazione da questi due dispositivi sarà completamente diversa.
Esistono diversi tool che possono analizzare le nostre pagine e noi vi elenchiamo i più significativi:
PageSpeed Insights
Lo strumento più utilizzato per la misurazione dei Core Web Vitals. Molto facile da utilizzare, basta inserire l’url della pagina che ci interessa analizzare e ci verranno restituiti risultati divisi in Data lab (cioè dati simulati in laboratorio) e Dati Rum (dati racconti “sul campo” basati su utenti reali). Oltre a questi, vengono restituiti anche altre metriche correlate da consigli sul loro miglioramento, quindi, consigli su come ottimizzare la nostra pagina per renderla più veloce.
WebPageTest
Con questo strumento si possono avere dei report molto dettagliati che consentono di valutare anche aspetti che non vengono presi in considerazione da altri tool di monitoraggio. Questo strumento è stato pensato appositamente per webmaster e SEO specialist per il miglioramento dei tempi di caricamento delle pagine web.
Chrome User Experience Report
Questo tool restituisce risultati basati su come gli utenti percepiscono i siti web, sono quindi dati basati su utenti reali (dati RUM).
A differenza dei tool che restituiscono risultati simulati in laboratorio (data lab), questi risultati rappresentano, la vera esperienza degli utenti sui siti navigati.
Questi dati però possono variare anche a seconda del traffico dati e della tipologia di dispositivi che vengono utilizzati per navigare. Ad esempio, se la maggior parte dei visitatori naviga da dispositivi più moderni o ha accesso ad una rete più veloce, i risultati restituiti dei CWV appariranno migliori anche se al sito web non sono state apportate ottimizzazioni. Stessa cosa può avvenire al contrario, un sito ottimizzato ma con la maggior parte del traffico da dispositivi lenti e meno recenti dal punto di vista delle prestazioni.
Occorre precisare una cosa: i tool elencati utilizzano misurazioni raccolte dalla Chrome User Experience ossia, un set di dati pubblici ricavati da statistiche basate su misurazioni reali. Ma questi dati provengono da utenti che hanno dato il proprio consenso ad alcune condizioni quindi costituiscono solo un campione e non la totalità delle esperienze di navigazione.
Come migliorare la UX e la SEO attraverso questi dati
Il miglioramento delle performance delle pagine seguendo i consigli che questi strumenti restituiscono assieme ai risultati, può portare notevoli benefici al proprio sito web, anche perché le ottimizzazioni che generalmente vengono fatte riguardano miglioramenti lato SEO e User Experience che non possono far altro che incidere positivamente sulla reputazione che Google avrà del nostro sito.
Miglioramenti lato SEO aumentano la visibilità del sito e conseguentemente la posizione nelle classifiche dei motori di ricerca. Stessa cosa lato UX, un sito che offre una piacevole navigazione invoglierà gli utenti a visitarlo nuovamente incentivando la condivisione dei contenuti presenti al suo interno.
Nello specifico gli elementi che Google prende in considerazione nella valutazione della nostra pagina riguardano:
Core Web Vitals, per l’appunto le 3 metriche chiave nella valutazione delle performance.
Mobile friendly, l’usabilità della pagina da dispositivi mobili
HTTPS, se il sito possiede o meno il protocollo di sicurezza HTTPS.
Andando sul pratico quali possono effettivamente essere gli interventi da fare per l’ottimizzazione delle nostre pagine?
Precaricare le risorse:
come abbiamo ampiamente spiegato qui, i contenuti che si trovano nella prima parte di un sito web (above the fold) hanno un peso maggiore rispetto a tutto ciò che si trova sotto, perché saranno un segnale importante per far capire ai nostri utenti non solo di che cosa effettivamente tratta la nostra pagina ma anche la velocità con la quale sta caricando. Per questa ragione è essenziale precaricare per tempo i contenuti che riguardano questa porzione di pagina, ad esempio utilizzando l’attributo “preload” comunicando al browser di iniziare a preparare queste risorse prima delle altre.
<head>
<meta charset="utf-8">
<title>JS and CSS preload example</title>
<link rel="preload" href="style.css" as="style">
<link rel="preload" href="main.js" as="script">
<link rel="stylesheet" href="style.css">
</head>
Questa ottimizzazione incide sull’LCP.
Suddivisione del thread principale:
Un altro dei problemi abbastanza comuni è quando si deve attendere la risposta del browser a seguito di una nostra interazione con la pagina (ad esempio un clic su un bottone) e i tempi di attesa siano eccessivamente lunghi. Come abbiamo spiegato all’inizio, quest’attesa viene registrata dal FID. Solitamente questi blocchi sono causati dal Javascript che blocca quindi il thread principale per un periodo di tempo superiore rispetto quanto concesso dalla metrica per essere considerata buona.
Una soluzione è quella di suddividere il codice in più file di modo che sia più facile per il browser andare a leggerli.
Mobile-first:
Sappiamo quanto sia essenziale che i siti web siano ottimizzati per mobile visto che la navigazione su dispositivi mobili ha oramai superato quella da desktop. L’esperienza utente qui è ancora più incisiva perché avendo a che fare con schermi tendenzialmente piccoli, le interazioni, le risposte e in generale l’esperienza di navigazione saranno più evidenti. Per questa ragione i contenuti dovrebbero seguire determinate logiche per rendere la UX piacevole. Le scritte devono essere leggibili senza bisogno di ingrandire il contenuto. Se dovessero presentarsi spostamenti di layout non previsti durante il caricamento o lo scrolling di una pagina questo andrebbe ad incidere sul CLS. Consigliamo quindi di verificare sempre l’adattamento della pagina in versione mobile monitorando il rapporto di usabilità mobile in Google Search Console (che segnalerà i problemi legati ai contenuti che non si adattano bene a questa tipologia di schermo).
Conclusioni
Prima di concludere è importante sottolineare una cosa da tenere ben a mente durante l’analisi delle nostre pagine: ottenere un buon punteggio delle performance non posizionerà automaticamente il nostro sito ai primi posti nelle classifiche di ricerca, certo, avrà sicuramente un ranking più alto di altre pagine non ottimizzate ma l’usabilità di una pagina è solo uno dei tanti fattori presi in considerazione da Google per la classificazione dei siti, i contenuti sono altrettanto importanti quindi non sacrificare mai un aspetto a favore dell’altro ma cercare sempre di offrire contenuti di qualità molto chiari con una buona velocità di caricamento.
