Cosa sono i Core Web Vitals? Annunciati nel 2020, diventati operativi nel 2021, oggi rappresentano i fattori che determinano la qualità di un sito nell’esperienza utente. E per piacere a Google, ci sono alcune azioni da fare (o da non fare) sul sito
Ma se per uno sviluppatore è semplice capire come muoversi per ottimizzare le pagine secondo questi parametri, per chi non è del mestiere risulta molto difficile conformarsi agli standard di Google.
Ecco perché vogliamo dedicare uno spazio proprio a questo argomento, sperando di togliere qualche sassolino dalla scarpa di chi non sa cosa siano questi Web Core Vitals, o cosa modificare nel sito per piacere a Google.
Cosa sono i Core Web Vitals o Segnali Essenziali?
I Core Web Vitals, o Segnali Essenziali, sono 3 metriche, o parametri, che Google prende in esame per valutare la qualità dell’esperienza di navigazione nelle pagine di un sito web.
Velocità di caricamento, interazione con gli elementi in pagina, stabilità del layout, ecc., sono i fattori che determinano la qualità di un sito. E queste metriche sono anche fattori di ranking, ovvero esercitano un peso sul posizionamento SEO nelle ricerche organiche.
Ecco perché chi ha un sito web e, a maggior ragione, un eCommerce, punta tutto sulla messa a punto del sito, per soddisfare l’esperienza di navigazione ed essere conforme agli standard dettati dall’algoritmo, il Google Page Experience Update, quello che analizza l’esperienza reale dell’utente sulla pagina.
È vero che si fa un gran parlare dei contenuti come l’elemento distintivo che determina il successo di un sito, ma i Core Web Vitals sono fondamentali a prescindere dal contenuto.
Se l’esperienza è negativa, il sito non acquista, o perde, il posizionamento. Se un sito perde posizionamento, perde anche i visitatori e potenziali clienti. Questo è il problema.
Stare al passo con Google non è semplice? Non sei uno sviluppatore? Non sai dove mettere le mani, ma sei responsabile di un sito web che vorresti fosse in linea con i Core Web Vitals?
Lasciaci dare un’occhiata al tuo sito o eCommerce. Dopo averlo analizzato, condividiamo con te un report sui dettagli di ogni intervento necessario a validare le tue pagine. Esistono degli strumenti di analisi, certo, ma ti segnalano solo cosa sistemare, non come farlo.
Perché i Core Web Vitals sono importanti per la SEO?
Sembrano numeri folli ma fotografano la cruda realtà odierna: 1 visitatore su 2 abbandona un sito web che impiega più di 6 secondi a caricarsi. Altrettanti pensano che un sito sia scadente se non assicura una navigazione fluida, senza intoppi dovuti a immagini che si sovrappongono ai testi o ai pulsanti che ballano e che devi riuscire a cliccare come fosse un tiro al bersaglio.
E siamo più che certi che succede anche a te, che quando navighi e clicchi un sito, se questo non si apre prima di ora, piglia e abbandoni tornando in SERP (pagina dei risultati dei motori di ricerca) e cercando altro. E questo Google lo vede, se ne accorge e col tempo capisce pure che se le persone cliccano e se ne vanno subito, vuol dire che il tuo sito non soddisfa qualche requisito. E la conseguenza è la perdita di posizionamento.
Il fatto è che siamo connessi dalla mattina alla sera con i dispositivi più comodi da usare in ogni momento. Da smartphone e da tablet. Quindi, ci aspettiamo che proprio con questi aggeggi sia tutto rapido, semplice e intuitivo.
E Google è d’accordo, la pensa esattamente come noi. Per questo motivo si impegna a sfornare algoritmi che premiano o penalizzano i siti in base alle loro performance, in base a quanto riescono a dare le risposte che le persone stanno cercando online.
Perciò quando ti parlano di SEO, lasciando fuori questi elementi, prendi con le pinze quello che ti propongono. I contenuti contano, ma conta anche il contesto in cui vengono forniti. Per essere in prima pagina su Google, dobbiamo esaudire diversi requisiti.
Entriamo nel dettaglio.
I Core Web Vitals in pratica
I Core Web Vitals, in pratica, identificano i problemi dell’esperienza utente generando metriche per le tre aree principali dell’esperienza utente, tra cui:
- Prestazioni di caricamento della pagina
- Facilità di interazione
- Stabilità visiva di una pagina dal punto di vista dell’utente.
Ognuna di queste metriche dà dettagli sui diversi elementi che hanno un impatto sul modo in cui gli utenti interagiscono con il sito web.
I 3 pilastri Core Web Vitals
- Largest Contentful Paint (LCP) si riferisce al tempo di caricamento degli elementi principali di una pagina.
- First Input Delay (FID) si riferisce al tempo che intercorre tra la prima interazione di un utente con una pagina web (come il clic su un link o un pulsante) e la risposta del browser a tale azione.
- Cumulative Layout Shift (CLS) si riferisce allo spostamento degli elementi nel layout di una pagina una volta caricata.
1. Largest Contentful Paint (LCP), la velocità di caricamento
Il Largest Contentful Paint valuta la velocità di caricamento, ovvero il tempo di rendering degli elementi più grandi (largest) della schermata visibile all’utente. In sostanza, misura l’intervallo di tempo che intercorre tra l’inizio del caricamento di una pagina e la restituzione grafica di immagini o blocchi di testo più grandi nello schermo dell’utente.
Quali elementi analizza la metrica LCP
La metrica LCP misura il tempo di caricamento in secondi di questi elementi:
- Immagini <img>
- Immagini di sfondo
- Video <video>
- Blocchi contenenti testi
Il parametro corretto dovrebbe rientrare in un range di velocità massima pari a 2,5 secondi dall’inizio del caricamento della pagina.
Torniamo a dire che la velocità di caricamento di una pagina web rappresenta un fattore critico per diversi motivi:
- assicura un’esperienza utente positiva
- una pagina che si carica rapidamente ha maggiori probabilità di posizionarsi meglio su Google
- i tempi di caricamento rapidi hanno dimostrato di avere un impatto sul coinvolgimento e sui tassi di conversione rispetto a una pagina con tempi di caricamento lenti.
Come ottimizzare LCP
Solitamente è questo il parametro che danneggia la reputazione della pagina, declassandola. Ecco perché è il primo da ottimizzare, eliminando gli script di terze parti non necessari o impostando il Lazy Load, o “caricamento pigro”, ovvero il caricamento asincrono di immagini e video più pesanti solo quando servono.
2. Cumulative Layout Shift (CLS), la stabilità degli elementi in pagina
Un sito web ottimizzato e centrato sull’utente deve garantire anche la stabilità del layout visivo durante il suo caricamento, ovvero la stabilità di link e pulsanti all’interno di una pagina. Entrare in un sito con gli elementi instabili, che si spostano continuamente, è un’esperienza frustrante che crea anche diffidenza col rischio di abbassare le percentuali dei clic.
Il Cumulative Layout Shift è una metrica che identifica proprio quei link e pulsanti che si spostano dopo il caricamento di una pagina web, e riflette il livello di difficoltà che gli utenti incontrano quando cercano di interagire con gli elementi del sito una volta visualizzata la pagina.
Quali elementi analizza il CLS
CLS aiuta a capire se i contenuti come testo, pulsanti e banner vengono spostati mentre l’utente sta visitando e interagendo con la pagina. È importante ottimizzare questo parametro perché lo spostamento degli elementi durante la navigazione può confondere i visitatori.
Tra le cause dell’instabilità visiva di una pagina dal punto di vista dell’utente, le immagini a video di dimensioni sconosciute o non configurate in modo corretto; oggetti “embeddati” e iframe senza dimensioni; contenuti dinamici…
Per avere un buon CLS il sito web deve avere un punteggio minore di 0,1
Il Cumulative Layout Shift è una metrica che identifica proprio quei link e pulsanti che si spostano dopo il caricamento di una pagina web, e riflette il livello di difficoltà che gli utenti incontrano quando cercano di interagire con gli elementi del sito una volta visualizzata la pagina.
Come ottimizzare il CLS
Per ottimizzare la pagina è necessario assegnare un posto ben definito a ogni elemento, video, foto, GIF, infografiche, annunci pubblicitari. Questo significa intraprendere alcune azioni, tra le quali:
- aggiungere / specificare le dimensioni alle immagini, video e annunci
- precaricare i caratteri / font che possono essere diversi e occupare spazi diversi
- ottimizzare i contenuti dinamici (modulo di newsletter, avvisi GPDR, richieste di installazioni ecc).
Nel primo caso, bisogna specificare le dimensioni delle immagini, dei video e degli annunci pubblicati, e renderle tutte omogenee. Le dimensioni sono indicazioni che i browser registrano per prevedere lo spazio da dare ai contenuti.
Un CMS può anche definire in modo automatico le dimensioni delle immagini. Se invece lo si fa manualmente, si dovranno impostare le proprietà CSS min-height e min-width all’interno del <div> che contiene l’oggetto.
3. First Input Delay (FID), la velocità di risposta dopo la prima interazione
Quando navighiamo online ci aspettiamo di interagire con pagine veloci e facili da usare. A questo proposito, la metrica FID – First Input Delay misura il tempo che impiega un elemento della pagina a rispondere all’input dell’utente. In sostanza, analizza il ritardo nel ricevere una risposta dopo una prima interazione con i contenuti in pagina.
Il “male epocale”, concedimi questa iperbole, è quello di avere troppo lato tecnologia e di sfruttarne tutto il potenziale nei siti web più moderni. E se da un lato questo è un grande vantaggio, perché ciò che è dinamico arricchisce le pagine a favore dei visitatori del sito, dall’altro queste stesse tecnologie sono la causa del ritardo nei tempi di risposta da parte del browser.
Quali elementi misura il FID?
Questo parametro misura la reattività di una pagina quando viene caricata registrando solo eventi come clic sui pulsanti. L’ottimizzazione di questo parametro dovrebbe puntare a raggiungere un valore inferiore a 100 millisecondi.
Come ottimizzare il First Input Delay
Per migliorare l’usabilità del sito, e consentire agli utenti di interagire con la pagina in modo più fluido, possiamo intervenire facendo una serie di azioni, come ridurre al minimo il codice JavaScript e cancellare la cache, per velocizzare il caricamento della pagina.
Come controllare le metriche dei Core Web Vitals
Per conoscere le metriche e avere un quadro sulle condizioni del sito, si possono interrogare alcuni strumenti, tra questi:
- Google Search Console
- PageSpeed Insight di Google
- Lighthouse
- Screaming Frog
- Web Vitals (estensione di Chrome)
I Core Web Vitals e la SEO
Non è una rondine a fare primavera, ma è assodato che le scarse prestazioni dei Core Web Vitals restino un fattore di ranking che incidono direttamente sul posizionamento SEO. Oltre ad avere un impatto negativo sull’esperienza utente.
Oltre ai segnali essenziali, l’ottimizzazione passa per altre accortezze o best practice SEO:
- architettura e tassonomia delle pagine del sito (menu, breadcrumbs, categorie, tag)
- ottimizzazione della struttura degli URL
- SSL e HTTPS: connessione criptata sicura
- ottima navigazione sui dispositivi mobili
- interazione real time con strumenti adeguati.
L’obiettivo di Google è quello di aiutare i visitatori a trovare i siti più rilevanti e di qualità. Lo farà col tempo, ma le sue SERP rispecchieranno sempre più queste esigenze.
Facci sapere se sei in difficoltà con i Core Web Vitals, possiamo aiutarti a capire cosa occorre modificare e come farlo, oppure possiamo farlo al posto tuo.
