Core Web Vitals, cosa sono e come aiutano a ottimizzare il tuo sito web

Nicola Onida
3 Novembre 2021
Articoli
Core Web Vitals cosa sono e come migliorarli Lapenna del Web

In questo articolo capiamo insieme cosa sono i Core Web Vitals, come ti permettono di individuare i punti critici del tuo sito web e quali sono le sezioni delle tue pagine online a cui dovresti dedicare maggiore attenzione.

Vedremo quali sono gli elementi che ti permettono di migliorare le tue pagine di conversione affinché vengano apprezzate sia dalle persone che le navigano, sia dal motore di ricerca.

Cosa sono i Core Web Vitals?

I Core Web Vitals sono un insieme di metriche che aiutano a capire come gli utenti interagiscono con una pagina web. Sono stati introdotti da Google nel maggio 2020 e ora sono diventati un fattore di ranking SEO.

Le informazioni contenute al loro interno rappresentano un insieme specifico di metriche che proprietari di siti, sviluppatori web, SEO specialist e digital marketer dovrebbero quantomeno conoscere per ottimizzare la User Experience delle proprie pagine web.

Perché i Core Web Vitals sono così importanti?

Sebbene i Core Web Vitals siano stati creati prevalentemente per i programmatori, questi dati sono preziosi per tutti i professionisti che si trovano a lavorare con una piattaforma web: web designer, UX designer, SEO specialist e digital marketer.

Da quando l’esperienza utente sulle pagine web è diventato un fattore di ranking, chiunque si trovi a migliorare la User Experience di un portale o un e-commerce, deve fare attenzione ai Core Web Vitals.

Questi, infatti, identificano i problemi relativi all’esperienza utente generando tre metriche per tre aree differenti dedicate all’esperienza utente:

  • Performance di caricamento della pagina
  • Facilità di interazione
  • Stabilità visiva di una pagina dal punto di vista dell’utente

Quali dati contengono i Core Web Vitals?

Ciascuna di queste metriche fornisce una prospettiva sui diversi elementi che influiscono sul modo in cui gli utenti interagiscono con un sito web.

I dati dei Core Web Vitals aiutano a circoscrivere e suddividere in specifiche variabili le cause che influiscono sull’esperienza utente della pagina web. Così che sviluppatori e proprietari possano identificare e risolvere i problemi tecnici del loro sito web.

L’analisi dei Core Web Vitals va recepita come strumento di perfezionamento tecnico del sito web. Ma il lavoro del team di sviluppo deve essere condiviso con tutti i referenti e i professionisti dedicati all’ottimizzazione della navigazione utente, dal punto di vista grafico, tecnico e semantico.

È importante ricordare che le metriche dei Core Web Vitals non raccontano l’intera storia dell’esperienza utente su un sito Web. Ogni metrica va relazionata alle altre per ottenere un risultato equilibrato e complessivamente funzionale alla navigazione.

Come misurare i Core Web Vitals

Il rapporto sull’esperienza utente di Google Chrome raccoglie dati anonimi di misurazione su utenti reali per ogni parametro dei Core Web Vitals.

Questi dati consentono di valutare rapidamente le prestazioni di un sito web senza utilizzare strumenti di terze parti o avviare manualmente l’analisi delle pagine. I principali strumenti che Google mette a disposizione per monitorare i Core Web Vitals sono PageSpeed Insights e il report Core Web Vitals di Google Search Console.

Core Web Vitals esempio PageSpeed Insights Lapenna del Web

Una schermata esempio dello strumento di analisi Google PageSpeed Insights per i Core Web Vitals. In questo caso è stata analizzata una pagina esempio con tutti i parametri corretti.

I Core Web Vitals rappresentano ad oggi il migliore report che gli sviluppatori web possono sfruttare per misurare la qualità della User Experience su una pagina online. Tuttavia Google stesso tiene a precisare che i Core Web Vitals non sono perfetti e periodicamente vengono rilasciate nuove implementazioni.

Le principali metriche dei Core Web Vitals

Diamo un’occhiata approfondita alle tre metriche principali incluse in Core Web Vitals per migliorare le prestazioni SEO del tuo sito web!

Core Web Vitals largest containtful paint Lapenna del Web

1. Largest Contentful Paint (LCP)

Il Largest Contentful Paint è la metrica dei Core Web Vitals che misura misura quando l’elemento di contenuto più grande nella schermata diventa visibile.

Il tempo di caricamento della pagina (e il rendering dei blocchi che la compongono) è fondamentale: per avere un’esperienza utente piacevole è necessario che i principali blocchi della pagina siano visibili rapidamente.

Non solo il tempo di caricamento è un fattore critico per un’esperienza utente positiva, ma una pagina che si carica rapidamente ha maggiori probabilità di posizionarsi più in alto nei risultati di ricerca Google.

Inoltre, i tempi di caricamento rapidi hanno dimostrato di influire sul coinvolgimento e sui tassi di conversione rispetto a una pagina con tempi di caricamento lenti.

Cosa misura LCP?

LCP misura il tempo necessario per caricare i vari blocchi di contenuto all’interno della prima schermata visualizzata dall’utente (user viewport).

Questa metrica indica solo la velocità di rendering delle sezioni di contenuto sullo schermo visibile, senza considerare ciò che è contenuto below the fold, ovvero nella schermata direttamente sotto la prima visualizzata.

Quali elementi sono analizzati in LCP?

  • Immagini
  • Immagini di anteprima al video
  • Immagini di sfondo nella pagina
  • Blocchi di testo

Per avere una buona metrica LCP la pagina web dovrebbe ottenere 2,5 secondi dall’inizio del suo caricamento.

Core Web Vitals cumulative layout shift Lapenna del Web

2. Cumulative Layout Shift (CLS)

Questa metrica Core Web Vitals è relativa all’interazione utente con link, collegamenti e pulsanti creati per aumentare le vendite e le conversioni di un sito web.

Il Cumulative Layout Shift identifica i link o i pulsanti che si spostano dopo il caricamento di una pagina Web e riproduce il livello di difficoltà che un utente potrebbe incontrare nel momento in cui prova a interagire con gli elementi di una pagina web.

UX e design sono componenti vitali di una buona esperienza utente. Le persone che navigano una pagina web potrebbero non apprezzare il suo contenuto se continuano a vedere gli elementi spostarsi mentre cercano di leggere.

La metrica CLS aiuta a determinare quali immagini o collegamenti si spostano sulla pagina in modo da migliorare la sua usabilità, incrementando le percentuali di clic e aumentando le vendite online.

Quali elementi sono analizzati in CLS?

CLS misura se gli elementi di una schermata visibile si spostano dalla posizione iniziale tra due fotogrammi renderizzati. In poche parole, serve a capire se contenuti come testo, pulsanti e banner cambiano posizione mentre un utente sta leggendo il contenuto su una determinata pagina.

Gli elementi che cambiano posizione possono confondere gli utenti e ostacolare la loro esperienza su una pagina, quindi è importante assicurarsi che tutti i contenuti rimangano al loro posto dopo che una pagina è stata caricata sul dispositivo dell’utente.

CLS esamina le metriche principali per determinare la stabilità visiva di una pagina dal punto di vista dell’utente considerando diversi fattori:

  • Spostamento layout
  • Frazione di impatto
  • Frazione di distanza

Per un buon punteggio dei Core Web Vitals è bene mantenere un CLS di 0,1 o inferiore.

Core Web Vitals first input delay Lapenna del Web

3. First Input Delay (FID)

Chi naviga sul web vuole interagire con pagine rapide, snelle e facili da scorrere.

Il First Input Delay misura la latenza di input, ovvero il tempo impiegato da un elemento della pagina per rispondere all’input di un utente. FID è il valore che identifica se una pagina genera frustrazione nel corso della navigazione dell’utente.

I moderni siti web utilizzano una serie di tecnologie avanzate e widget dinamici per offrire contenuti attraenti al proprio pubblico. Sebbene questo tipo di componenti possano migliorare la distribuzione dei contenuti, è anche vero che causano tempi di ritardo nel caricamento della pagina. Ciò richiede maggiori tempi di attesa all’utente mentre il browser cerca di caricare i contenuti.

Ridurre il tempo di attesa del caricamento dei contenuti in risposta agli input imposti dai widget dinamici migliora le prestazioni complessive del sito web.

Cosa misura il FID?

Il FID misura la reattività di una pagina durante il caricamento degli input richiamati dai widget dinamici. Il FID registra solo eventi come clic e pressioni dei pulsanti i bottoni di interazione.

Per un buon punteggio dei Core Web Vitals è bene mantenere un FID inferiore ai 100 millisecondi.

Bisogna sottolineare che la metrica FID è difficile da misurare. I dati raccolti sono relativi alle reali interazioni con la pagina web. Ciò significa che il tuo punteggio dipenderà da variabili al di fuori del tuo controllo, come la capacità del dispositivo utilizzato e la velocità di navigazione Internet sperimentata dal tuo pubblico.

Altre metriche che determinano il punteggio dei Core Web Vitals

Come detto, i Core Web Vitals offrono una serie di informazioni da utilizzare per migliorare le performance dei propri siti web in relazione all’esperienza utente. Insieme alle principali metriche appena viste, sviluppatori, SEO specialist e digital marketer possono anche capire come il codice della pagina influisce sul modo in cui gli utenti fruiscono i contenuti del sito.

Queste metriche quantificano i tempi di ritardo o altri fattori tecnici che possono avere un impatto negativo sul modo in cui un pubblico online interagisce con una pagina web. Ecco come puoi approfondire l’esperienza che i visitatori hanno sul tuo sito web.

Core Web Vitals first containtful paint Lapenna del Web

1. First Contentful Paint

Il First Contentful Paint (FCP) misura il tempo impiegato dal browser dell’utente per eseguire il rendering degli elementi DOM (immagini, elementi <canvas> non-white e SVG). La metrica FCP identifica le risorse che bloccano il rendering e viene misurata in secondi, con un intervallo di punteggi FCP:

  • 0–2 secondi: verde (veloce)
  • 2-4 secondi: arancione (moderato)
  • 4+ secondi: rosso (lento)

2. Speed Index

Sempre più siti web offrono esperienze online avanzate e lo Speed ​​Index dei Core Web Vitals (SI) mostra il tempo medio impiegato dal contenuto del tuo sito per essere visualizzato da un utente.

Questa metrica identifica i JavaScript in eccesso su una pagina e viene misurata in millisecondi, con un intervallo di punteggi SI di:

  • 0 – 4,3 secondi: verde (veloce)
  • 4,4 – 5,8 secondi: arancione (moderato)
  • 5,8+ secondi: rosso (lento)

3. Time to Interactive

Il Time to Interactive (TTI) è la quantità di tempo necessaria affinché il contenuto di una pagina diventi funzionale e ​​completamente interattivo. Il Time to Interactive ti aiuta a identificare le pagine con JavaScript non necessario e viene misurato in secondi, con una gamma di punteggi TTI così composta:

  • 0 – 3,8 secondi: verde (veloce)
  • 3,9 – 7,3 secondi: arancione (moderato)
  • 7,3+ secondi: rosso (lento)

4. Total Blocking Time

Il Total Blocking Time (TBT) ti permette di valutare per quanto tempo una pagina web risponde a un input specifico dell’utente. Questa metrica identifica le pagine con JavaScript non necessario e viene misurata in millisecondi con un intervallo di punteggi TBT:

  • 0 – 300 millisecondi: verde (veloce)
  • 300 – 600 millisecondi: arancione (moderato)
  • 600+ millisecondi: rosso (lento)

5. Page Performance Scores

Il Page Performance Score è la metrica che calcola tutti i valori principali dell’esperienza utente in Core Web Vitals.

Questo punteggio utilizza un sistema di valore aggregato per tutte le visite su dispositivi mobile e desktop. È necessaria una media ponderata per fornire un singolo punteggio per comprendere le pagine che necessitano di un esame più approfondito rapidamente.

Sebbene queste metriche siano estremamente semplificate, chi monitora i Core Web Vitals può fare riferimento ai punteggi in ciascuna categoria in base al punteggio specifico di 90 (buono), 50-90 (necessita di miglioramenti) e inferiore a 50 (scarso).

Sei pronto a scansionare i Core Web Vitals del tuo sito web?

Ora sai di avere al tuo fianco uno strumento eccezionale per capire come sta performando il tuo sito web e quali parti puoi migliorare.

Ogni piccola correzione ai parametri dei Web Core Vitals possono avere un enorme impatto sulle tue pagine web in termini di traffico e conversione dell’utente. È per questo che lo studio della struttura delle pagine e la scrittura del codice, deve essere un lavoro di sinergie tra il team di sviluppo e quello dedicato alla User Experience dell’utente.

Non ti resta che analizzare, modificare e testare la tua ottimizzazione!

Nicola Onida
Appassionato di comunicazione e marketing digitale. Aiuto aziende e professionisti a raggiungere la visibilità online. Mi trovi su www.facilewebmarketing.com