Errori comuni di Google Core Web Vital e come correggerli

Google continua a creare scompiglio tra i progettisti e gli addetti al marketing che stanno ancora imparando a gestire questo aggiornamento, ma in realtà esistono modi facili da attuare per affrontare i problemi più urgenti.

Definito da Google come un’analisi di «come si comportano le vostre pagine, sulla base di dati di utilizzo reali (a volte chiamati dati sul campo)», un rapporto Core Web Vitals (CWV) misura la velocità di caricamento delle pagine, la stabilità visiva e la reattività delle pagine per un periodo di 28 giorni, con risultati basati sulle visite effettive al sito. Questa valutazione dell’esperienza dell’utente è fondamentale, in parte perché influisce sulle classifiche di ricerca. Nel maggio del 2021 è stato introdotto un aggiornamento dei parametri ed è giusto dire che c’è stata una notevole confusione sia sulla revisione stessa che sulle metriche ad essa associate, con conseguenti sviste che si ripercuotono sulle prestazioni dei siti web. Gli errori sono probabilmente dovuti al fatto che le aziende, dopo l’annuncio, sono state bombardate di informazioni sull’argomento CWV e che i professionisti UX, i digital marketer e gli esperti SEO, dopo aver trascorso anni a perfezionare il loro mestiere e ad apprendere esattamente ciò che serve per fornire un’esperienza utente piacevole (e per ottenere un posizionamento di ricerca elevato), si stanno affannando per adattarsi.

Le tre metriche che Google utilizza per valutare l’esperienza di un utente sono Cumulative Layout Shift (CLS), Largest Contentful Paint (LCP) e First Input Delay (FID). CLS si riferisce alla frequenza con cui gli utenti sperimentano spostamenti inattesi nel layout del sito (ad esempio, la posizione di un pulsante o di un link si sposta quando l’utente tenta di cliccarci sopra). La metrica che misura il tempo di visualizzazione dell’immagine o del blocco di testo più grande all’interno della viewport è denominata LCP. La metrica finale delle prestazioni, FID, misura il tempo che gli utenti trascorrono in attesa che il browser risponda ai loro input o interazioni.

La correzione dei seguenti errori comuni contribuirà a migliorare i punteggi:

Errore 1: mancata ottimizzazione dei contenuti above the fold

La prima impressione è importante. Quanto più velocemente i contenuti grafici sono visibili ai visitatori del sito, tanto più il sito sarà coinvolgente. Tuttavia, è necessario assicurarsi che i contenuti sopra la piega siano prioritari per essere caricati per primi (questo è più facile a dirsi che a farsi in HTML!) e che siano, idealmente, minimalisti. Esempi di contenuti erroneamente posizionati sopra la piega (con un impatto negativo su CLS e FID) sono gli embed come Google Maps, i feed dei social media, l’audio di servizi di streaming come SoundCloud o Mixtape, i video personalizzati o i widget che estraggono dati da YouTube e Vimeo, le gallerie fotografiche e gli slider di immagini.

Per evitare che i visitatori subiscano cambiamenti imprevisti nel layout e un ritardo nella reattività, aggiungete tutti i widget di terze parti e i contenuti ricchi sotto la piega. Nel caso di widget personalizzati, è opportuno studiare tecniche ottimali di recupero dei dati e di rendering, come il caricamento asincrono e il recupero dei dati dal thread principale del sito (dove il browser elabora gli eventi e i colori dell’utente).

Errore 2: utilizzare più di due font personalizzati

È comune per i web designer utilizzare font da servizi come Google Fonts, Typekit e altre fonti. Se non si fa attenzione a implementarli, è facile che aggiungano ulteriore peso alla pagina e ne rallentino la velocità di caricamento. I font personalizzati possono anche causare lo sfarfallio dei caratteri web sulle pagine in fase di caricamento, creando una cattiva esperienza per l’utente e aumentando il CLS, un’importante metrica che misura la stabilità totale dei contenuti di una pagina.

Per rimediare a questo errore, i proprietari di siti web possono sacrificare lo stile attenendosi a non più di due famiglie di caratteri personalizzati e in dimensioni limitate.

Errore 3: visualizzazione di più immagini sopra la piega

Le immagini e i video di sfondo sono in genere le risorse più grandi che i browser scaricano su un sito, quindi quando vengono visualizzate più immagini o video di grandi dimensioni, si può verificare un ritardo nell’LCP e un aumento del CLS perché il browser deve scaricare questi elementi prima di poterli renderizzare. Per i professionisti del web che progettano pagine per clienti in settori verticali che pongono l’accento su foto e registrazioni fotografiche, la soluzione più efficace sarebbe quella di posizionare una singola immagine sopra la piega, assicurandosi che l’immagine sia stata compressa. Inoltre, i video e gli slider con un massimo di tre immagini o meno devono essere spostati più in basso nella pagina per migliorare ulteriormente il punteggio CWV del sito.

Errore 4: mancata ottimizzazione delle immagini

Un caso frequente nei siti ricchi di immagini è quello in cui le fotografie vengono caricate sul sito e visualizzate così come sono. Questo errore interrompe il tempo di caricamento, inducendo l’utente ad attendere la visualizzazione delle immagini e magari ad abbandonare completamente la pagina, entrambi fattori che hanno un impatto negativo sul punteggio CWV. La correzione di questo errore è comunque relativamente semplice. Prima di essere caricate su un sito web, le immagini devono essere compresse e ridimensionate. La compressione delle immagini consiste nel farle passare attraverso un algoritmo specializzato per ridurre la dimensione totale del file, mentre il ridimensionamento consiste nell’assicurarsi che le dimensioni soddisfino i requisiti di grandezza del template e della viewport. Mantenere il ridimensionamento e la compressione in primo piano prima, durante e dopo la creazione del sito web garantirà che il sito funzioni senza problemi e continui a soddisfare le specifiche di posizionamento di Google.

Errore 5: usare troppe soluzioni di analisi

Oggi sul web è molto facile aggiungere decine di tecnologie di tracciamento come Google Analytics, Tag Manager, script AdRoll e altri strumenti. Sebbene siano utili per informare il processo decisionale basato sui dati, l’esecuzione di queste implementazioni può causare il caricamento di un sito a passo di lumaca e rovinare l’esperienza complessiva dell’utente. Quindi, valutate quali tecnologie di tracciamento sono necessarie. Detto questo, anche i siti web che richiedono un numero considerevole di strumenti di analisi hanno buone possibilità di aumentare il loro punteggio CWV, a patto che i loro progettisti utilizzino una guida ben documentata per assicurarsi che il codice di tracciamento venga caricato correttamente e non danneggi la velocità del sito.

È arrivato il momento di ripensare il vostro CMS?

La sfida di correggere tutti gli errori di cui sopra è che il CWV di Google richiede ai progettisti e alle aziende di ripensare i siti attuali e il modo in cui dovrebbero essere progettati. Poiché l’azienda continua a rilasciare nuovi aggiornamenti, le aziende e i professionisti del web dovranno probabilmente rivalutare il loro sistema di gestione dei contenuti (CMS) o il loro partner di piattaforma se vogliono migliorare il loro punteggio CWV e mantenere (o migliorare) il loro posizionamento su Google.