Posizionamento SEO: la guida definitiva ai Core Web Vitals

Come abbiamo già visto parlando di Posizionamento SEO e Page Experience, nei primi giorni di maggio 2020 Google ha annunciato nel suo blog ufficiale l’introduzione di una serie di metriche che valutano la user experience di un sito web e ritenute essenziali come fattori di ranking del sito stesso.

Il progetto, denominato “Core Web Vitals 2020“, prevede che tali parametri vengano integrati alla SEO attraverso un set di specifici indicatori di UX, andando ben oltre la velocità ed esplorando la capacità di presentarsi all’utente in modo chiaro e di rispondere efficacemente alle richieste. Da molti anni Google ha dichiarato i suoi intenti: dare all’utente esattamente le risposte che cerca, con la massima precisione possibile e al contempo cercando di assicurare un’esperienza positiva sui siti web da lui posizionati tra i primi risultati. La navigazione per l’utente deve essere semplice, efficace, veloce e intuitiva. Sempre.

Cosa sono i Core Web Vitals e come impattano sulla SEO?

Tutti gli elementi del Core Web Vitals sono stati ricavati dopo diversi anni di osservazione del comportamento online di siti web e utenti, per questo sono stati scelti come fondamentali fattori di ranking, al pari di protocollo https e ottimizzazione per dispositivi mobile.

Ma di cosa stiamo parlando esattamente? Scopriamo insieme quali sono i punti essenziali dell’ottimizzazione.

I Web Vitals sono parametri standard per misurare la qualità dell’esperienza di navigazione di un utente su un sito web e sono linee guida per la creazione di siti web che rispettino le principali regole della User Experience. Tra questi ce ne sono alcuni chiamati “Core” che sono ritenuti fondamentali da Google e consistono in metriche e indicatori legati alla velocità, al tempo di risposta e alla stabilità del layout di un sito web nel momento in cui essa viene utilizzata.

Questi sono i tre fattori principali:

• LCP: Largest Contentful Paint – Velocità di caricamento (loading)
• FID: First Input Delay – Interattività della pagina (interctivity)
• CLS: Cumlative Layout Shift – Stabilità visiva del caricamento (visual stability)

LCP: ottimizzare il Largest Contentful Paint per migliorare la UX

Il Large Contentful Paint misura le prestazioni di caricamento del principale blocco di una pagina e secondo web.dev, sito di Google dedicato ai webmaster, è:

“incentrata sull’utente ed esprime la velocità di caricamento percepita di un sito. Un LCP veloce rassicura le persone sulla rilevanza della pagina, perché indica il momento in cui il suo contenuto principale viene caricato”.

L’algoritmo terrà conto del contenuto che occupa più spazio. L’oggetto più grande visibile nella finestra all’apertura della pagina è considerato come il contenuto principale e penalizza contenuti invasivi come titoli molto grandi, immagini di apertura enormi, video, banner pubblicitari e pop-up.

Gli elementi che vengono considerati come LCP in una pagina sono:

• blocchi di testo
• video;
• immagini
• immagini di sfondo caricate tramite CSS
• tag di intestazione
• liste
• tabelle

L’obiettivo è raggiungere un LCP sufficiente sulla maggior parte delle tue pagine (in genere almeno il 75% delle visualizzazioni). Google ritiene buono un LCP quando resta inferiore ai 2,5 secondi dall’inizio del caricamento della pagina, da migliorare quando si assesta tra i 2,5 e i 4 secondi e pessimo se supera i 4 secondi.

La differenza fondamentale sta quindi nel percepito dell’utente, che giudica un sito come più o meno veloce in funzione del momento in cui viene caricato il contenuto che ritiene importante. Un’ulteriore spinta a mettersi nei panni dell’utente e a migliorare la User Experience per i webmaster.

Quali sono gli effetti del Largest Contenful Paint (LCP) sulla SEO e come intervenire?

L’ottimizzazione per i motori di ricerca è ad un punto di svolta (anche se i segnali c’erano da parecchio). Uno studio di Screaming Frog ha rilevato che i siti che ottengono, ad oggi, i migliori risultati per l’LCP sono anche i meglio posizionati in SERP, perché si tratta di siti che sono già allineati con un’ottima esperienza utente.

È anche vero che i risultati della ricerca hanno rilevato in generale un’ottimizzazione scarsa per questo parametro. Il tuo sito web aziendale quindi potrebbe aver bisogno di un lavoro di ottimizzazione del Large Contentful Paint. Come scoprire se hai bisogno di un intervento SEO?

WpSEO agisce attraverso un primo step di approfondita analisi e un successivo intervento operativo. Nel caso dell’LCP utilizziamo i tool Google e altri tool di analisi che ci permettono di comprendere qual è il livello della tua ottimizzazione. Sarà poi più facile implementare le tecniche giuste, spesso solo buone pratiche SEO, per velocizzare il sito e migliorare la UX:

• ottimizzando le immagini
• utilizzando il CSS critico
• adottando tecniche di preload
• proponendo un Servere Push http/2

FID: migliorare il First Input Delay per una prima buona impressione

Il First Input Delay (FID), o ritardo prima interazione, misura il tempo trascorso tra la prima interazione di un utente con una pagina (clic su un link, tap di un pulsante, uso di un controllo personalizzato basato su JavaScript) e il momento in cui il browser risponde effettivamente all’interazione. È fondamentale per misurare l’esperienza utente quando cerca di interagire con pagine che non rispondono.

Per fornire una buona esperienza utente, i siti dovrebbero sforzarsi di avere un ritardo prima interazione inferiore a 100 millisecondi sul 75% delle pagine caricate.

Attenzione: questa metrica è importante perché non misura il tempo di elaborazione o di aggiornamento, ma il ritardo. Si tratta di fatto di una metrica sulla sola prima interazione con gli elementi interattivi della pagina.

Come leggiamo sul blog di SEMRush: “Il tempo che intercorre tra il momento in cui il contenuto viene dipinto sulla pagina e il momento in cui tutte le funzionalità diventano reattive all’interazione umana spesso varia in base alle dimensioni e alla complessità del codice JavaScript che deve essere scaricato, analizzato ed eseguito sul thread principale e sulla velocità del dispositivo o la sua mancanza (ad esempio, sui dispositivi mobili di fascia bassa), ci spiegano gli sviluppatori di Mozilla. Ridurre il tempo di inizializzazione del sito ed eliminare le attività lunghe può aiutare a eliminare i primi ritardi di input.(…) In generale, il ritardo di input (ovvero la latenza di input) si verifica ‘perché il thread principale del browser è impegnato in qualcos’altro, quindi non può (ancora) rispondere all’utente’. Un motivo comune per cui ciò potrebbe accadere è che il browser è impegnato nell’analisi ed esecuzione di un file JavaScript di grandi dimensioni caricato dalla tua app; mentre lo fa, non può eseguire alcun listener di eventi perché il JavaScript che sta caricando potrebbe dirgli di fare qualcos’altro”.

Se LCP fornisce un primo impatto visivo all’utente, FDI fornisce il primo impatto di usabilità. Come si dice c’è una sola occasione per fare una prima buona impressione. Sul web questo concetto è basilare: ci sono migliaia di stimoli e offerte, la prima buona impressione fa la differenza tra il rimbalzo e l’utente fidelizzato.

Come migliorare il First Input Delay

Quando il FID è troppo elevato urge un intervento da parte di un Consulente SEO, che permetta di ridurre il tempo di ritardo della prima interazione. Come?

• Riducendo il tempo di analisi, compilazione ed esecuzione di JavaScript
• Riducendo l’impatto del codice di terze parti
• Riducendo al minimo il lavoro sul thread principale, ad esempio ottimizzando la pagina per l’interazione, o ridurre le azioni più complesse in più azioni semplici e rapide
• Minimizzando il numero di richieste e la riduzione delle dimensioni di trasferimento

CLS: il ruolo del Cumulative Layout Shift sul tuo posizionamento

Il Cumulative Layout Shift (CLS), o variazione cumulativa del layout, è la metrica che misura la stabilità visiva del layout, ovvero quel fastidioso e snervante spostamento degli elementi di una pagina web mentre è in fase di caricamento. Spesso questo accade quando hai aperto una pagina e alcuni elementi, molto spesso banner, spostano altri elementi della pagina (probabilmente quelli che ti interessano) sotto, sopra o addirittura fuori dalla sezione che stai visualizzando, senza che tu abbia interagito con essi, compromettendo definitivamente la user experience. Ancora peggio questa esperienza è decisamente più fastidiosa da mobile e come sai bene il mobile first è un dogma nella SEO.

Ciò che accade in questi casi è che l’utente cerchi di cliccare sull’elemento che gli interessa, ma finisca per aprire un annuncio o un pop up, perché ciò che gli interessava ha semplicemente cambiato posto all’improvviso. Lo stesso vale per un articolo di blog: il tuo utente può anche essere interessato a ciò che hai scritto, e forse è pure propenso a compiere altre azioni nel tuo sito web, ma il testo continua a cambiare posizione e lui perde il riferimento visivo nel testo, deve continuare a scrollare e alla fine, probabilmente, se ne andrà senza concludere. Una buona percentuale dei rimbalzi fuori dal sito web, lo diciamo senza paura di sbagliare, può essere causata proprio da questo.

A differenza di LCP e FDI, l’unità di misura del CLS è lo spazio e Google ha creato un punteggio specifico per identificare il livello di layout. Per fornire una buona esperienza utente, i siti dovrebbero cercare di avere un punteggio CLS inferiore a 0,1 sul 75% dei caricamenti di pagina.

Come ottimizzare il CLS (Cumulative Layout Shift) e non irritare i tuoi utenti

Secondo gli ingegneri Google sono 5 i motivi principali di un cattivo punteggio del CLS:

• Immagini o video che hanno dimensioni non impostate correttamente
• Annunci, embeds e iframe senza dimensioni
• Contenuto iniettato (parti di codice che non appartengono originariamente alla pagina)
• Web font che rallentano il caricamento e causano FOIT (assenza di testo fino al completo caricamento del font) o FOUT (caricamento di un font alternativo fino al caricamento del web font con successivo spostamento del layout)
• Azioni in attesa di una risposta di rete prima di aggiornare DOM

Dopo una prima fondamentale verifica del punteggio CLS è possibile intervenire tempestivamente attenendosi alle best practice di Google:

• Includere sempre gli attributi di dimensione sulle immagini e sugli elementi video, oppure riservare lo spazio richiesto con qualcosa come le caselle CSS
• Non inserire mai contenuti al di sopra di quelli esistenti, tranne in risposta a un’interazione dell’utente. Ciò garantisce che siano previsti eventuali cambiamenti di layout
• Privilegiare la trasformazione delle animazioni in animazioni di proprietà che attivano le modifiche al layout. Animare le transizioni fornirà contesto e continuità da uno stato all’altro

I Core Web Vitals fanno felici gli utenti, quindi anche te

L’obiettivo dei Core Web Vitals, come abbiamo visto, è quello di fare in modo che i siti web siano facili e veloci da navigare, soprattutto da mobile. E questo Google lo chiedeva da un po’. Se vuoi che il tuo sito si posizioni ci sono una serie di ottimizzazioni da implementare che non possono essere ignorate.

Perché Google vuole utenti felici. E utenti felici fanno aziende che fatturano di più. Sottovalutare questi parametri non solo fa diminuire le conversioni del tuo sito, ma può farlo restare al palo mentre altri siti più performanti scalano la SERP. Se invece vuoi restare (o arrivare) alle prime posizioni e (soprattutto) avere più conversioni, parti da un’analisi approfondita.

Contattaci per una Consulenza SEO per ottimizzare ancora di più il tuo sito web aziendale.