I Core Web Vitals sono dei parametri fondamentali che Google ha implementato per definire, dal punto di vista dell’user experience, la qualità di una pagina pubblicata su internet. Google intende andare oltre il concetto di tempo necessario per caricare un documento web.
Insomma, il sito deve essere veloce. Ma non basta. Per restituire all’utente un buon risultato, cioè un contenuto complessivamente di qualità, 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.
l’ottimizzazione di questi elementi sarà parte integrante del posizionamento insieme agli altri fattori di ranking SEO come la velocità, l’HTTPS e altro ancora. Google ha deciso di lasciare un po’ di tempo agli sviluppatori e ai SEO per studiare l’argomento e prendere provvedimenti.
Come suggerisce la pagina dedicata di Google, l’attenzione si deve concentrare su tre aspetti fondamentali quando si prendono in esame i Core Web Vitals da ottimizzare su un sito web. Quali sono le metriche che fanno la differenza nel tuo progetto di web performance?
- LCP
- FID
- CLS
I design complessi sono difficili da ottimizzare. Tante immagini, i video, i caroselli e gli sfondi nell’above the fold sono una sfida difficile da vincere.
Largest Contentful Paint (LCP)
Il primo punto da prendere in esame quando parliamo di Core Web Vitals è il Largest Contentful Paint. Vale a dire il tempo di upload dell’elemento più pesante della schermata visibile all’utente.
L’LCP misura le prestazioni di caricamento iniziale della risorsa. Una buona esperienza utente dovrebbe rientrare nei 2,5 secondi. Sopra i 4 secondi siamo su una pagina che non ha una buona attività di ottimizzazione soprattutto sugli elementi che impegnano gran parte delle risorse come immagini, video, eventuali background. Perché questa metrica viene presa in considerazione?
L’idea di Google è che il caricamento iniziale della pagina web debba essere rapido e privo di attese inutili: la sezione su cui è atterrato l’utente deve subito spiegare cosa fa e come può essere utile all’utente.
Quali sono le cause che rallentano il rendering di una pagina web?
First Input Delay (FID)
Iniziamo ad affrontare frontiere diverse da quelle della classica velocità di caricamento della pagina. Il First Input Delay calcola il ritardo registrato tra l’interazione con un elemento e la relativa risposta. Ad esempio un click su un link: quanto tempo ci vuole per far aprire la finestra del browser?
Sotto i 100 millisecondi, o all’interno di questa misura, l’esperienza utente è considerata buona. Superati i 300 si ha una scarsa ottimizzazione della navigabilità che può portare anche all’abbandono della pagina. O a un mancato acquisto perché questa metrica misura anche azioni.
Come il click su un pulsante. I ritardi dipendono dal fatto che il browser, mentre viene interrogato per effettuare una determinata azione, è impegnato in altre attività. Ad esempio esegue JavaScript sul thread principale. E il software non può rispondere alle interazioni dell’utente in questi casi.
Quali sono i motivi di una insufficiente interattività del sito?
Soprattutto lunghi tempi di esecuzione del Javascript e ciò che si collega a questo elemento. Per avere dati chiari e ottimizzare il First Input Delay puoi usare, direttamente da Chrome, lighthouse, che ti fornisce molti dati utili in proposito.
Cumulative Layout Shift (CLS)
Ultimo step della triade che compone il Core Web Vitals di Google. Si tratta del Cumulative Layout Shift, vale a dire l’eventuale spostamento di elementi della pagina non preventivati e che si manifestano dopo il caricamento dell’area. In pratica, c’è un elemento al centro della pagina (magari un banner pubblicitario o un bottone) che stai per cliccare e all’improvviso si sposta in alto.
Proprio mentre lo stai per cliccare. Risultato? Interagisci con il vuoto o magari con un altro link. Risultato: esperienza negativa, tempo perso, possibile abbandono della pagina web.
Per misurare questo elemento bisogna considerare due elementi e moltiplicare componente impatto per componente distanza. Un risultato inferiore a 0.1 è ottimo, superiore a 0.25 è da migliorare subito.
Quali sono i problemi di una scarsa stabilità visuale del sito?
Come migliorare questo elemento? Le immagini senza dimensioni possono dare problemi, lo stesso vale per iFrame ed elementi inseriti con codice embedded come i video di YouTube. Aggiungere altezza e larghezza è sempre un buon punto di partenza per evitare il Cumulative Layout Shift.
Tool per misurare i Google Web Vitals
Tutto questo non può essere lasciato al caso, per ottimizzare tutti i punti elencati hai bisogno di strumenti adeguati. In questa circostanza i classici tool per misurare la velocità del sito non bastano, hai bisogno di altre utility. Che comunque Google è ben felice di fornire e consigliare.
Pagespeed Insight
Sempre più potente, il Pagespeed Insight di Google è perfetto per studiare ogni dettaglio della pagina web analizzata. Nello specifico, PSI registra le prestazioni di laboratorio e sul campo di una risorsa su dispositivi mobili e desktop. Quindi fornisce un quadro di come gli utenti usano la pubblicazione.
Page speed Insight fornisce anche diversi consigli pratici su come ottimizzare gli elementi del Core Web Vitals. L’unico aspetto negativo: ragiona in termini di singola pagina, non ha una visione d’insieme. Un vantaggio che viene completato dal tool successivo, l’ex Google Webmaster Tool di Google.
Search Console
Tra le mille funzioni di questa utility c’è anche la possibilità di consultare il report Core Web Vitals che consente di avere lo stato dell’intero sito web. La grande soluzione è proprio questa: Search Console analizza tutte le pagine di un dominio e le raccoglie per risultati, dividendo tra desktop e mobile.
Il rapporto della Search Console si basa sulle tre metriche principali del Web Vitals e se un URL non raggiunge la quantità minima di dati viene omesso dalla lista.
Altri strumenti per rilevare i Core Web Vitals
Esistono realtà differenti per ottenere dati utili all’ottimizzazione del sito web? Puoi usare il Chrome UX Report per avere un focus sui dati raccolti sul campo o l’estensione di Chrome per misurare le metriche Web Vitals in tempo reale. Ma qual è la procedura ideale per registrare una buona attività di monitoraggio e ottimizzazione? Questo obiettivo chiama in causa proprio la Search Console.
Serve a mantenere il polso della situazione e individuare eventuali falle importanti, per poi approfondire il singolo indirizzo URL con il Pagespeed Insight e Lighthouse che fornisce ulteriori approfondimenti su SEO, accessibilità e UX.
Relazione con SEO e ranking
Al momento ancora non abbiamo un parametro chiaro e ben definito (lo avremo mai?) per capire come i Core Web Vitals influenzeranno il posizionamento su Google. Ciò che viene assicurato è che:
“We’re combining the signals derived from Core Web Vitals with our existing Search signals for page experience, including mobile-friendliness, safe-browsing, HTTPS-security, and intrusive interstitial guidelines”.
Google sta integrando i segnali Core Web Vitals e da maggio 2021 diventeranno un fattore di ranking insieme a quelli già noti per migliorare l’esperienza della pagina come l’esperienza da mobile, l’HTTPS e tutto ciò che riguarda le pubblicità o i banner interstiziali. Nonostante tutto, Google ci tiene a precisare che il contenuto è ancora il re.
Anche se gli elementi dell’esperienza utente sono decisivi, saranno sempre le informazioni contenute nella pagina a farla da padrone anche se alcuni aspetti dell’usabilità non sono il massimo.
Questo non significa ignorare tutto quello che abbiamo riportato ma valutare sempre l’insieme: i buoni risultati nascono dalla capacità di rispondere nel miglior modo possibile alle esigenze del pubblico. E non spuntando le caselle di una ipotetica checklist. Cosa significa questo esattamente?
La velocità non basta più
Questo è il concetto fondamentale da assimilare oggi, nel momento in cui decidi di ottimizzare un sito web in prima persona o attraverso le competenze di un professionista delle web performance e del lavoro di CRO. Vero, questo è il parametro più importante a uno sguardo superficiale.
Abbiamo bisogno di velocizzare un sito web lento. Le persone non amano aspettare il caricamento delle pagine e, secondo le ricerche di Google, operare su questo fronte si traduce in:
- Maggior numero di processi di acquisto portati a termine.
- Più pagine del sito web sfogliate e maggiori conversioni.
- Diminuzione della frequenza di rimbalzo (bounce rate).
Ma tutto questo non basta. Da tempo si sottolinea l’importanza di un approccio olistico all’user experience che non tenga conto solo della velocità di caricamento della pagina su internet.
Una risorsa deve essere sì rapida, ma anche facile da usare e sfruttare. Con elementi che reagiscono velocemente e non ingannano l’utente facendolo cliccare su elementi errati del layout.
Questa è la vera ottimizzazione dell’esperienza di navigazione e oggi Google, con i Core Web Vitals, ci avvisa che sarà influente per il posizionamento del sito web. Ma ci dà anche le informazioni.
