Core Web Vitals: 7 metriche da migliorare per una buona SEO

I Web Vitals sono criteri di valutazione delle performance di una pagina web, ideati da Google per migliorare l’esperienza utente (UX) e l’accessibilità ad un sito web.

Le metriche introdotte nel maggio del 2020, con l’annuncio “Web Vitals”, hanno un ruolo decisivo sul ranking e possono condizionare il posizionamento in SERP.

Ma cosa sono i Core web vitals e come possono essere implementati correttamente?

Scopriamolo insieme.

Cosa sono i Web Vitals

I Web Vitals sono parametri stabiliti da Google per identificare le pagine web che maggiormente lavorano sul lato User Experience (UX).

Con questo si vuole intendere che l’obiettivo principale del motore di ricerca è quello di rispondere ai quesiti degli utenti nalla maniera più rapida ed efficace possibile.

Il browser vuole soddisfare le esigenze degli utenti non solo da un punto di vista del contenuto sul web, che resta tra i pilastri fondanti, ma anche in quanto a velocità, interattività e capacità di catturare l’attenzione.

In particolare, Google considera 3 fattori di primaria importanza, i Core Web Vitals, ai quali è possibile implementare estensioni e miglioramenti secondari.

Leggi anche: Come funziona Chat GPT e come usarlo per scrivere testi

Core Web Vitals

I principali parametri per misurare i Web Vitals riguardano le seguenti 3 metriche:

• Caricamento
• Interattività
• Stabilità visiva

I 3 parametri sono analizzati e misurati secondo delle specifiche metriche che permettono di individuare le prestazioni della pagina web e quindi comprendere in che misura il sito web è implementato per offrire una buona esperienza utente.

I parametri sono i seguenti:

• Largest Contentful Paint (LCP): misura i valori di caricamento di una pagina web e rileva gli eventuali problemi che rallentano le prestazioni di caricamento delle pagine. Google identifica un buon livello di esperienza utente quando il valore di LCP è inferiore a 2.5 secondi da quando la pagina inizia a caricare.
• First Input Delay (FID): misura l’interattività, ossia quanto tempo intercorre dal momento in cui viene cliccato il risultato sul browser alla prima interazione. Il valore di FID dovrebbe essere entro i 100 millisecondi per soddisfare le linee guida di Google.
• Cumulative Layout Shift (CLS): misura la stabilità visiva per migliorare l’esperienza utente da un punto di vista prettamente visuale. L’obiettivo di questa implementazione è quello di evitare sovrapposizioni di elementi o caricamenti asincroni che possano rallentare o complicare la navigazione sul sito. Google considera 0.1 o meno, un buon valore di CLS.

Leggi anche: SEO Semantica: in cosa consiste la semantica promossa da Google

Largest Contentful Paint (LCP)

Questa metrica, incentrata sull’esperienza utente, consente di identificare il tempo di visualizzazione dell’immagine o del testo di blocco più grande della pagina web.

Il report segnala l’intervallo di tempo dal momento in cui inizia il caricamento della pagina fino a quando il blocco appare sulla vista.

Quali elementi sono considerati nel report LCP

Gli elementi della pagina web considerati per il Largest Contentful Paint sono:

• immagini <img>
• immagini <image> inseriti in un elemento <svg>, in genere loghi
• video e in particolare l’immagine di copertina
• Elementi che hanno un’immagine di sfondo con URL

Tuttavia, in futuro è possibile che siano inseriti nuovi elementi per valutare questo parametro.

First Input Delay (FID)

La metrica FID misura l’intervallo di tempo che intercorre dal momento in cui l’utente effettua un’interazione su una pagina, fino a quando il browser è in grado di processare l’evento e fornire una risposta a quell’interazione.

Per fare un esempio, un utente che clicca su un pulsante, su una voce di un menù o esegue un comando sulla pagina, sarà reindirizzato o condotto verso la risposta che cerca.

Se il lasso di tempo tra il click e la risposta è ridotto, l’utente riuscirà a raggiungere la sua meta in breve tempo.

In genere, a ridurre le prestazioni del First Input Delay sono il codice JavaScript (JS) e il Cascading Style Sheets (CSS).

Di fatto, quando il browser non riesce a processare immediatamente una richiesta è probabilmente per ragioni connesse ad altro codice accumulato.

Essendo impegnato nel caricamento di altro mark up, la risposta all’interazione è posticipata per concludere processi in coda.

Cumulative Layout Shift (CLS)

La metrica Cumulative Layout Shift (CLS) misura la stabilità visiva e quindi eventuali “sfarfallamenti” del rendering dei pixels sulla vista aperta dall’utente.

Il CLS è un indice che segnala quanti spostamenti e cambi nel layout avvengono durante il caricamento in risposta ad una data interazione.

Uno spostamento del layout può avvenire ogni qualvolta un elemento visibile cambia di posizione tra una prima visualizzazione e quella successiva.

Un burst of layout shifts, anche noto come una finestra di sessione, è un evento che intercorre quando uno o più spostamenti di layout individuali si ripetono in rapida successione con meno di 1 secondo di differenza e un massimo di 5 secondi per l’intera durata della finestra.

Uno spostamento di layout può verificarsi solo se gli elementi della pagina cambiano la loro posizione iniziale.

Se un nuovo elemento è aggiunto al Document Object Model, DOM, o un elemento cambia di dimensione, questo non viene considerato come spostamento di layout. A meno che il cambiamento non vada a cambiare la posizone di altri elementi visibili dall’inizio.

Leggi anche: Struttura di un sito web: le fondamenta di una buona SEO

Web Vitals aggiuntive

Sebbene i Core Web Vitals siano le metriche più importanti da implementare per il miglioramento e la velocizzazione di un sito web, esistono altri parametri che possono incrementare le performance delle pagine web.

Time To First Byte (TTFB)

Il Time to First Byte (TTFB) è una metrica che misura il tempo che intercorre tra una richiesta per una risorsa e il primo byte di risposta inizia ad arrivare.

La metrica, sempre incentrata sulla User Experience (UX), è una somma delle seguenti fasi di richiesta del browser:

• Tempo di reindirizzamento
• Controllo DNS
• Connessione e negoziazione TLS
• La richiesta, fino al momento in cui il primo byte raggiunge destinazione

Ridurre la latenza nelle impostazioni del tempo di connessione e sul back-end permetterà di ridurre il valore del TTFB.

First Contentful Paint (FCP)

La metrica in questione prende in considerazione il primo elemento visivo o blocco di testo che appare nella finestra dopo aver cliccato sulla pagina web. In genere si tratta di immagini di copertina, loghi, video o testi con background.

In particolare, il First Contentful Paint (FCP) misura il tempo tra quando una pagina inizia a caricare a quando ogni parte del contenuto della pagina è totalmente visualizzato sullo schermo.

Il contenuto si riferisce a:

• Testo
• Immagini
• Sfondi
• Elementi in tag <svg>
• <canvas> di colore diverso dal bianco

Migliorare questa metrica permette di velocizzare l’esperienza utente e superare il primo scoglio che ferma gli utenti dal proseguire nella navigazione: l’attesa.

Total Blocking Time (TBT)

Il Total Blocking Time (TBT) è un parametro di misurazione che verifica il tempo totale tra First Contentful Paint (FCP) e il Time to Interactive (TTI) dove il principale flusso è stato bloccato per abbastanza tempo da impedire la reattività delle risposte.

Il flusso principale si considera “bloccato” quando è in corso un’operazione che impiega più di 50 millisecondi (ms). Si definisce bloccato perché il browser non può interrompere un’operazione che è già in corso.

Pertanto, nel caso in cui un utente esegua un’interazione con la pagina mentre sia in corso un’operazione principale, il browser dovrà aspettare prima che l’operazione più lunga si completi prima di poter rispondere alla nuova richiesta.

Se l’operazione è lunga tanto da superare i 50 ms, è possibile che l’utente noti un ritardo e percepisca la difficoltà di caricamento della pagina web.

Il miglior modo per implementare al meglio la risposta del TBT è attraverso:

• La riduzione dell’impatto di codice di terze parti
• La riduzione del tempo di esecuzione JavaScript
• Il processo minimizzato
• Un conteggio di richieste basso
• Il trasferimento di basse dimensioni

Leggi anche: Titoli SEO: gerarchia e caratteristiche dei Tag Title

Time To Interactive (TTI)

Il Time to Iteractive (TTI) è una metrica che misura il tempo che intercorre da quando una pagina inizia il caricamento a quando le principali sotto risorse sono caricate e sono in grado quindi di rispondere alle risposte dell’utente velocemente.

Per calcolare questa metrica si parte dal LCP per poi approfondire. Migliorare il parametro consente di incrementare le probabilità che un utente resti sul sito e che abbia maggiori interazioni.

Conclusione

I Web Vitals sono parametri tecnici che permettono di analizzare e individuare quelle pagine web ottimizzate per l’esperienza utente. Avere siti web lenti, poco reattivi, con eventuali ritardi di caricamento e spostamenti di layout non piace a Google.

Il motore di ricerca infatti privilegia quelle pagine complete, anche da un punto di vista tecnico, per velocizzare e fornire una risposta chiara, rapida e coincisa all’utente. Per questa ragione, è bene che si implementi in maniera corretta il SEO in tal senso e che ci si affidi a dei professionisti nel settore.

The Smart Fox sono anni che si occupa di ottimizzazione SEO e di velocità dei siti web. Privati e aziende hanno scelto le nostre competenze per portare avanti i loro progetti. Cosa aspetti? Inizia ora ad ottimizzare il tuo sito web.