I dati vitali del web: Cosa sono e come ottimizzarli

Annunciati da Google nel maggio 2020, i Core Web Vitals sono metriche specifiche che valutano la qualità dell'esperienza utente su un sito web.

Questi segnali web, considerati essenziali, sono diventati estremamente importanti per la SEO dopo che Google ha dichiarato ufficialmente che, a partire dal 2021, sarebbero diventati fattori di ranking.

Nonostante sia passato un po' di tempo da allora, molti siti web sono carenti in termini di prestazioni.

In questo articolo vedremo insieme cosa sono i Core Web Vitals di Google, come influenzano la SEO e perché vale la pena migliorare le prestazioni del vostro sito.

Cosa sono i Core Web Vitals?

ICore Web Vitals sono un insieme di metriche che valutano l'esperienza dell'utente su un sito web in termini di prestazioni, stabilità e reattività.

Sono definite essenziali e sono diventate importanti non solo per la UX ma anche per la SEO.

E, sebbene esistano altri segnali di esperienza utente, questi sono considerati i parametri essenziali che un sito di qualità deve rispettare.

Nello specifico, sono:

• Dolore del contenuto più grande (LCP)

• Ritardo del primo ingresso (FID)

• Spostamento cumulativo del layout (CLS)

Analizziamoli uno per uno.

Dolore più grande contenuto (LCP)

Largest Contentful Paint (LCP) è la prima delle metriche Core Web Vitals e misura la velocità di caricamento del contenuto identificato come principale (ovvero il più grande in termini di dimensioni in byte) all'interno della viewport.

Questo parametro viene calcolato a partire dal caricamento della prima pagina e non considera tutti gli elementi, ma si concentra solo su immagini, video o blocchi di testo.

Allo stesso modo, il valore non viene calcolato sull'intera pagina ma solo sulla porzione visibile al caricamento, scartando gli elementi ritagliati o nascosti.

È bene sapere anche che la dimensione delle immagini viene calcolata sul valore inferiore tra quello intrinseco e quello visibile.

Avere un punteggio LCP basso indica che la pagina si carica rapidamente e offre un'esperienza utente positiva.

Il limite massimo considerato positivo da Google è di 2,5 secondi, ciò significa che i contenuti più impattanti del vostro sito dovranno caricarsi entro questo limite.

In caso contrario, più lungo sarà il tempo di caricamento, più alto sarà il punteggio LCP. Ecco perché è fondamentale migliorare la velocità di caricamento delle pagine.

Ritardo del primo ingresso (FID)

Il First Input Delay (FID) è la seconda metrica dei Core Web Vitals e misura la reattività di una pagina web.

Google suggerisce che è importante fare una buona prima impressione. Per farlo, però, non ci si può basare solo sull'aspetto, ma anche sui tempi di reazione.

Da qualche tempo Google calcola il punteggio First Contentful Paint (FCP) per misurare il tempo di caricamento del primo contenuto, considerato significativo, sullo schermo.

Oggi, però, questo valore sembra non essere più sufficiente, ed è per questo che è stato introdotto il FID per misurare quanto tempo impiega un sito web a rispondere all'interazione iniziale dell'utente, come un clic su un pulsante o un link.

Un punteggio FID basso indica che la pagina è reattiva e offre un'esperienza utente fluida.

Altrimenti, come abbiamo visto per la metrica LCP, più tempo ci vuole per rispondere all'interazione, più il valore cresce.

Spostamento cumulativo del layout (CLS)

IlCumulative Layout Shift (CLS) è l'ultima delle metriche Core Web Vitals e misura la stabilità visiva di una pagina web.

In altre parole, valuta quanti elementi della pagina si spostano inaspettatamente durante il caricamento. Questo problema è solitamente dovuto a tempi di rendering della pagina piuttosto lunghi, soprattutto quando vengono caricate risorse esterne e gli spazi necessari non sono stati definiti in precedenza.

Ottenere un punteggio CLS basso significa non solo che la pagina è stabile e può beneficiare di un punteggio di ranking più alto, ma anche che offre un'esperienza utente piacevole e, quindi, avrà maggiori probabilità di conversione.

In realtà, un punteggio elevato può essere sintomo di gravi problemi di usabilità che vanno ben oltre la SEO e, per esperienza personale, vi consiglio di analizzare questa metrica con maggiore attenzione.

I Core Web Vitals sono davvero essenziali?

Risposta breve: sì.

Ma ora so cosa state pensando.

"Se i core web vitals sono così importanti, allora perché ci sono così tanti siti di successo che hanno punteggi molto alti"?

(Ricordate che quando si parla di Web Vitals un punteggio elevato equivale a un valore negativo).

Ebbene, le prestazioni sono solo uno dei tanti fattori di ranking e certamente, per la SEO, nemmeno il più importante.

I contenuti continueranno ad avere una posizione predominante rispetto alla velocità di caricamento ed è anche naturale che sia così.

Detto questo, però, vale la pena ricordare come, statistiche alla mano, migliorare le prestazioni di un sito aumenti proporzionalmente le possibilità che questo sito generi engagement, aumenti la fidelizzazione degli utenti e riduca la frequenza di rimbalzo, tutti fattori che possono contribuire a un migliore posizionamento nei risultati di ricerca e a un aumento delle conversioni.

Ottimizzazione dei dati web di base

Il primo passo, essenziale per migliorare le prestazioni dei core web vitals, è capire da dove iniziare e cosa fare.

È un processo che può anche sembrare lungo e complesso. Tuttavia, con alcuni interventi specifici, è possibile apportare miglioramenti in termini di velocità di caricamento, reattività e stabilità.

Per farlo, potete sfruttare uno dei tanti strumenti disponibili online. Il mio consiglio è di utilizzarne più di uno per confrontare i risultati (in fondo, sono pur sempre strumenti e l'errore di valutazione è sempre dietro l'angolo).

Le opzioni disponibili sono molte, basti pensare ai noti GTMetrix, Pingdom Tools e WebPageTest.org. Sono tutti molto utili e in grado di fornire un punto di vista unico, basato sull'algoritmo di analisi proprietario.

Indipendentemente dalla soluzione scelta, dovrete comunque confrontarvi con l'opinione di Google sul vostro sito, quindi la scansione con PageSpeedInsight diventa essenziale per la vostra attività di ottimizzazione.

Questo strumento è particolarmente utile quando si vuole testare un sito in fase di sviluppo, magari ancora in locale o bloccato dall'accesso esterno.

Infine, potete tenere d'occhio la scheda "Esperienza" di Google Search Console che vi fornirà una panoramica più ampia del vostro sito e non solo di una singola pagina.

Una volta individuato lo strumento di analisi che fa al caso vostro, considerate che ogni sito necessita di un'attività diversa e non è quindi possibile definire a priori come muoversi.

Tuttavia, ci sono alcuni casi che sono comuni a quasi tutti i siti e che quindi, indipendentemente dalla tecnologia utilizzata, devono essere sempre analizzati.

Ecco le aree principali su cui concentrarsi quando si ottimizza per Core Web Vitals:

• Immagini

• CSS e JavaScript

• Caratteri

Immagini

Alcune delle pratiche di ottimizzazione più importanti per le immagini includono:

• Assicurarsi che vengano sempre caricate quando necessario, utilizzando una tecnologia chiamata lazy-loading. In questo modo eviterete che tutte le immagini della vostra pagina vengano caricate senza motivo durante la prima fase di rendering, anche quando non sono ancora visibili nel viewport.

• È essenziale che il vostro sito possa fornire immagini in formati compressi e moderni, per offrire la stessa esperienza agli utenti ma con un tempo di caricamento significativamente più breve. I formati più diffusi sono WebP e Avif, ma è bene ricordare che non tutti i browser supportano entrambe le tecnologie. Pertanto, dovrete assicurarvi che vengano fornite versioni alternative per i browser più vecchi. È sempre possibile consultare caniuse.com in qualsiasi momento per scoprire quali browser (e quali versioni) supportano determinate tecnologie.

• Come per altri elementi HTML, è buona norma rendere espliciti i valori di lunghezza e larghezza delle immagini per evitare il più possibile un aumento del CLS.

CSS e JavaScript

Seguite questi suggerimenti per CSS e JavaScript:

• Assicurarsi di minimizzare il più possibile i file per ridurne le dimensioni.

• Testate la combinazione di file per determinare se i tempi di caricamento vengono accelerati mantenendo la funzionalità.

• Estraete il CSS critico dai fogli di stile e servitelo come priorità. Esistono molti strumenti che possono aiutarvi a identificare la porzione di codice utilizzata da quella utilizzata. In alternativa, si può sfruttare la funzione Coverage presente nell'Inspector di Chrome.

• Rimandare il più possibile l'esecuzione di script non necessari utilizzando i comandi delay o defer o semplicemente spostandoli a piè di pagina.

• Precaricare le risorse critiche utilizzando i comandi preload, prefetch o pre-connect, se necessario.

Font

Anche i caratteri sono un fattore cruciale per migliorare le prestazioni:

• Se volete ottimizzare (e anche essere pienamente conformi al GDPR) dovreste ospitare i vostri font in locale (soprattutto se il vostro sito utilizza i font di Google).

• Preferite i font variabili a quelli statici per avere più funzionalità con meno tempo di caricamento.

• Assicuratevi che i testi siano sempre visibili anche prima del caricamento dei font, utilizzando la funzione CSS di visualizzazione dei font.

Ovviamente ci sono decine di altre micro-ottimizzazioni, ma se vi concentrate su questi punti, avete già superato il 95% del lavoro!

Core Web Vitals: Un aggiornamento in arrivo

Google è costantemente impegnato a migliorare i suoi algoritmi e l'esperienza sul web.

A questo proposito, è stata annunciata un'importante novità.

Vediamo insieme di cosa si tratta.

Ciao ciao FID e benvenuto INP

A partire da marzo 2024, uno dei Core Web Vitals sarà sostituito da un nuovo parametro.

Il First Input Delay sarà infatti sostituito dall'Interaction to Next Paint (INP).

Conclusione

I Core Web Vitals di Google sono diventati fondamentali per la SEO e l'esperienza utente.

Il monitoraggio e l'ottimizzazione delle metriche CLS, LCP e FID vi aiuterà a garantire un buon posizionamento del vostro sito web nei risultati di ricerca e a offrire un'esperienza utente di qualità.

Utilizzate Search Console e altri strumenti di analisi per identificare eventuali problemi e implementare soluzioni che vi aiutino a migliorare le prestazioni del vostro sito web e, in ultima analisi, la vostra posizione nei risultati di ricerca.