Core Web Vitals: ecco cosa devi sapere per migliorare il tuo sito

| Web Performance

Core Web Vitals: ecco cosa devi sapere per migliorare il tuo sito

I Core Web Vitals sono dei parametri centrali individuati da Google per definire, dal punto di vista dell’user experience, la qualità di una pagina pubblicata su internet. Rappresentano il tentativo di Mountain View di andare oltre il concetto di tempo necessario per caricare un documento web.

Sì, è confermato: il sito deve essere veloce. Ma non basta. Per restituire all’utente un buon risultato, quindi un contenuto di qualità secondo una definizione più completa possibile, 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.

Il lavoro di chi ha puntato tutto sulle performance e le misurazioni digitali di un progetto online non si ferma mai. Ecco cosa devi sapere per approfondire e gestire i Core Web Vitals.

Cosa sono i Core Web Vitals?

Dati necessari per valutare l’usabilità di una pagina web secondo Google. Grazie a una dichiarazione ufficiale di Mountain View, lasciata sul blog dedicato ai webmaster, sappiamo che questi elementi fanno parte della sezione più ampia nota come Web Vitals. E saranno dei fattori di ranking.

Esatto, 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.

Cosa fa, quindi, il professionista attento? E l’imprenditore che desidera ottenere il massimo? Entrambi non aspettano l’ultimo momento per intervenire, modificare, interrogare. Quali sono i punti essenziali da conoscere? Ecco cosa approfondire per avere la situazione in pugno.

Da leggere: come migliorare l’esperienza dell’utente

Quali sono i Core Web Vitals?

Come suggerisce la pagina dedicata di Google, l’attenzione si concentra su tre aspetti fondamentali quando si prende in esame l’idea di approfondire i Core Web Vitals da ottimizzare su un sito web. Quali sono le metriche che fanno la differenza nel tuo progetto di web performance?

La vecchia scuola non sbaglia: less is more. I design complessi sono difficili da ottimizzare. Troppe immagini, video, caroselli e sfondi nell’above the fold rappresentano una sfida difficile da vincere. Ma non impossibile, basta avere il professionista giusto al tuo fianco.

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ù impegnativo della schermata visibile all’utente.

L’LCP misura le prestazioni di caricamento della risorsa nella fase più difficile. 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?

Si presuppone che il primo approccio con la pagina web debba essere rapido e privo di attese inutili: la sezione interrogata dall’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?

LCP - Tempo di risposta del server lento
Tempo di risposta del server lento
LCP - Risorse CSS e JavaScript che bloccano il rendering
Risorse CSS e JavaScript che bloccano il rendering
LCP - Tempi di caricamento delle risorse non ottimizzate
Tempi di caricamento delle risorse non ottimizzate
LCP - Rendering lato client usando JavaScript
Rendering lato client usando JavaScript

Le cause di un Largest Contentful Paint (LCP) poco valido per le tue attività possono essere diverse: un server di scarsa qualità, immagini troppo grandi e non ottimizzate, video inseriti senza la giusta attenzione (ecco una guida per risolvere il problema) e lo stesso vale per HTML, CSS e Javascript.

First Input Delay (FID)

Iniziamo ad affrontare frontiere diverse da quelle della classica velocità di caricamento della pagina. Il First Input Delay rappresenta 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, siamo su una buona esperienza utente. Superati i 300 andiamo verso 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.

Cosa causa un FID scarso? 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 i dati di Lighthouse.

Cumulative Layout Shift (CLS)

Ultimo step della triade che per ora 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.

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 Core 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.

core web vitals pagespeed insights

Ma trovi 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.

core web vitals search console

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 Google

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 con 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.

esperienza pagine risultati ricerca google

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?

Da leggere: come ottimizzare le immagini sul web

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 che 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.

Abbiamo gli strumenti per migliorare ogni dettaglio. Tutto questo a favore delle performance e delle conversioni. Pronti per iniziare questa nuova avventura? Iniziamo a migliorare subito le tue pagine web.

Fonti per approfondire i Web Vitals

Mirko Ciesco

Mirko Ciesco

Web Performer

Sviluppatore web esperto in web performance. Realizza siti web, ottimizza la SEO tecnica e migliora l’usabilità dei siti internet attraverso la web analytics. Collabora con Studio Samo e tiene corsi di web design in Novel Academy a Torino.