,

Cosa sono i Core Web Vitals ? Conoscerli e capirli

core web vitals immagine introduttiva

Hai mai sentito parlare dei Core Web Vitals? Sono le metriche che Google usa per capire come gli utenti vivono l’esperienza su una pagina web!

Cosa sono i Core Web Vitals?

I Core Web Vitals sono un insieme di metriche standardizzate di Google che aiutano gli sviluppatori a capire vari aspetti dell’esperienza di un utente su una pagina web. Per maggiori dettagli, puoi consultare la pagina ufficiale di Google sui Core Web Vitals. Sebbene i parametri fondamentali per il web siano stati creati per gli sviluppatori, questi strumenti possono essere utilizzati da tutti i gestori di siti web perché analizzano l’esperienza dell’utente nel mondo reale su una pagina.

I Core Web Vitals aiutano a capire come migliorare l’esperienza degli utenti su un sito web. Queste metriche si concentrano su tre aspetti fondamentali dell’esperienza utente:

  • Prestazioni di caricamento della pagina: si riferisce a quanto velocemente una pagina web si carica e diventa visibile per l’utente.
  • Facilità di interazione: misura quanto è semplice per gli utenti interagire con i vari elementi della pagina, come pulsanti e link.
  • Stabilità visiva di una pagina dal punto di vista dell’utente: indica se gli elementi della pagina si spostano mentre si carica, il che può causare confusione per l’utente.

Ogni metrica offre una prospettiva unica su come gli utenti interagiscono e navigano all’interno di un sito web, rivelando elementi cruciali da considerare tra cui:

  • Come gli utenti interagiscono con il sito
  • Come navigano tra le pagine
  • Come percepiscono la velocità di caricamento

Ad esempio, se il caricamento è lento, gli utenti potrebbero abbandonare la pagina prima ancora di vederla!
Sebbene gli sviluppatori debbano considerare l'”esperienza utente” in modo olistico, queste metriche aiutano a scomporre le variabili in parti più piccole. In questo modo, i proprietari dei siti possono identificare e risolvere i problemi tecnici in modo più efficace.

Ricorda: queste metriche non raccontano l’intera storia dell’esperienza utente su un sito web. Tuttavia, quando aggregate, possono fornire agli sviluppatori gli strumenti necessari per affrontare in modo efficiente e metodico i problemi di posizionamento su Google.

 

Indice Argomenti
  •  

Come misurare la velocità del sito

Ad oggi le performance di un sito possono essere misurate usando i seguenti strumenti ufficiali di Google che forniscono analisi dettagliate e suggerimenti pratici per migliorare i Core Web Vitals:

Ma possono essere misurati e migliorati anche in modo sottile attraverso degli strumenti di analisi che forniscono ottimi consigli come:

Quali sono i punteggi che devo avere sui core Web Vitals

Di seguito riportiamo i punteggi consigliati da Google per i Core Web Vitals delle tue pagine, insieme ad alcune best practices per migliorare ciascuna metrica:”

  Buona Da migliorare Scarsa
LCP <=2.5s <=4s >4s
FID <=100ms <=300ms >300ms
INP <=200ms <=500ms >500ms
CLS <=0.1 <=0.25 >0.25

Questi punteggi sono fondamentali per valutare le prestazioni del tuo sito. Infatti, i giudizi dei Core Web Vitals sono divisi in tre gruppi: Scarso, Da migliorare, Buono.

Le etichette Scarso, Da migliorare e Buono vengono applicate a gruppi di URL che hanno caratteristiche simili di caricamento, per ogni tipo di dispositivo specifico(Mobile o Desktop).

Un gruppo di URL senza dati di soglia sia per LCP che per CLS non sarà presente nel rapporto (ad esempio, se l’URL ha solo dati di soglia per LCP ma non per CLS, non verrà mostrato).

Per scoprire come sono calcolate le soglie dei core web vitals, leggi: Come sono calcolate le soglie dei core Web Vitals

Di default, lo stato assegnato a un gruppo di URL, è quello  più lento rilevato e a esso assegnato per ciascun tipo di dispositivo.

Esempi:

  1. Un URL su dispositivo mobile con CLS Scarso ma che riporta LCP Da migliorare è etichettato come Scarso su dispositivo mobile.
  2. Un URL su dispositivo mobile con LCP Da migliorare ma CLS Buono è etichettato come Da migliorare su dispositivo mobile.
  3. Un URL con FID, LCP, INP e CLS Buono su dispositivi mobili e Da migliorare su FID, LCP, INP e CLS su desktop sarà etichettato come Buono su dispositivi mobili e Da migliorare su desktop.

 

Quali sono i Core Web Vitals?

Diamo ora un’occhiata alle tre metriche principali incluse nei Core Web Vitals per migliorare i tuoi siti web oggi!

Largest contentful paint

1. L’elemento più grande di Contenuto (LCP)

Cos’è il Largest Contentful Paint?

Il Largest Contentful Paint (LCP) è la metrica Core Web Vitals che i proprietari di siti possono utilizzare per valutare l’esperienza dell’utente di una pagina in base al tempo di rendering dei blocchi di contenuto più grandi visibili al pubblico, come immagini e testi.

Immagina di cercare un prodotto online e di cliccare su un sito che impiega un’eternità a caricarsi.
Dopo aver atteso per diversi secondi, decidi di tornare indietro e cercare un’alternativa. Questo è esattamente ciò che accade a molti utenti quando le pagine non si caricano rapidamente.

I proprietari di siti web devono garantire che le loro pagine si carichino velocemente per creare un’esperienza utente piacevole. Non solo il tempo di caricamento è un fattore critico per un’esperienza utente positiva, ma è più probabile che una pagina che si carica rapidamente si posizioni più in alto su Google.

Ad esempio, un caso studio condotto sul sito di e-commerce Decaro Calzature ha dimostrato che riducendo il tempo di caricamento da 4 secondi a 2 secondi, le vendite sono aumentate del 20%. Non solo il tempo di caricamento è un fattore critico per un’esperienza utente positiva, ma è più probabile che una pagina che si carica rapidamente si posizioni più in alto su Google.

LCP – Largest Contentful Paint | Tra i Core web Vitals il più importante?

Inoltre, è stato dimostrato che i tempi di caricamento rapidi hanno un impatto sui tassi di coinvolgimento e conversione rispetto a una pagina con tempi di caricamento lenti.

Leggi anche : Come Google calcola i core web vitals

Cosa misura LCP?

LCP misura il tempo impiegato dai diversi blocchi di contenuto per caricare all’interno del viewport dell’utente (schermata da cui naviga). Questa metrica indica solo la velocità con cui le sezioni di contenuto vengono visualizzate sullo schermo visibile e non viene considerato nulla del contenuto below the fold.

  • Immagini
  • Immagini Slider
  • Immagini di sfondo
  • Testo a livello di un blocco

Il proprietario di un sito web dovrebbe puntare a un LCP che si chiuda entro 2,5 secondi dall’inizio del caricamento di una pagina. Per migliorare il LCP, considera di ottimizzare le immagini utilizzando formati moderni come WebP e implementando il lazy loading per le immagini non visibili immediatamente. Immagini di grandi dimensioni o contenuti non ottimizzati possono rallentare il caricamento e influenzare negativamente questa metrica.

Per maggiori informazioni leggi:

LCP come migliorare i tempi del core web vital più importante

 

Cumulative Layout shift

2. Cumulative Layout Shift o Spostamento cumulativo del layout (CLS)

I proprietari di siti devono rendere il più semplice possibile interagire con link e pulsanti di un sito per aumentare le vendite e le conversioni. Lo spostamento cumulativo del layout è una metrica che identifica i collegamenti o i pulsanti che si spostano dopo il caricamento di una pagina Web e riflette il livello di difficoltà che gli utenti incontreranno quando tenteranno d’interagire con gli elementi del tuo sito dopo il rendering di una pagina.

Hai presente quando NON  vuoi comprare qualcosa e hai davanti 2 pulsanti che improvvisamente si spostano proprio mentre ne vorresti cliccare uno, clicchi quello che fa l’opzione opposta?

Cumullative layout shift
Una gif animata che mostra un CTA che si sposta al di fuori dell’intervallo selezionabile mentre altri elementi si caricano in ritardo.

L’esperienza utente e il design sono componenti vitali di una buona esperienza utente e un utente si sentirà frustrato se una pagina Web sposta gli elementi mentre ci sta leggendo.

Il CLS aiuta gli sviluppatori a determinare se le immagini o i collegamenti si spostano sulla pagina in modo che i proprietari dei siti possano migliorare l’usabilità, aumentare le percentuali di clic e migliorare le vendite online.

Cosa misura il CLS?

CLS misura se gli elementi nella finestra visibile si spostano dalla loro posizione iniziale tra due fotogrammi renderizzati. In parole povere, questa metrica aiuta i proprietari di siti a capire se contenuti come testo, pulsanti e banner vengono spostati mentre un utente sta leggendo i contenuti 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 il caricamento di una pagina 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 di layout
  • Frazione di impatto
  • Frazione di distanza

I proprietari dei siti devono mantenere un CLS di 0,1 o inferiore. Per ridurre il CLS, assicurati di riservare spazio per le immagini e gli annunci prima che vengano caricati, utilizzando attributi di larghezza e altezza per le immagini.

Leggi anche: Cumulative Layout Shift

 

First input delay

3.First Input Delay (FID)

I consumatori online vogliono pagine che siano scattanti e facili da scansionare. Il primo ritardo di input misura la latenza di input (il tempo impiegato da un elemento della pagina per rispondere all’input di un utente) per identificare le pagine che potrebbero causare frustrazione al pubblico.

I siti Web moderni utilizzano una serie di tecnologie avanzate e widget di contenuti dinamici per offrire contenuti al proprio pubblico. Sebbene questo tipo di contenuto possa migliorare la consegna del contenuto, questi miglioramenti possono causare tempi di ritardo che richiedono all’utente di attendere che il proprio browser agisca in base al proprio input.

Gli sviluppatori devono ridurre il tempo che gli utenti trascorrono in attesa che un browser risponda al loro input per migliorare il coinvolgimento e l’usabilità nel sito.

Cosa misura il FID?

Il FID misura la reattività di una pagina durante il caricamento di input di elementi da un utente. Ciò significa che FID registra solo eventi come clic e pressioni di tasti.

Come proprietario di un sito web dovresti mirare a fornire una buona esperienza utente con un FID inferiore a 100 millisecondi. Per migliorare il FID, riduci il JavaScript bloccante e utilizza tecniche di caricamento asincrono per gli script non essenziali

Va notato che il FID è difficile da misurare perché questi dati possono solo essere misurati sul campo. Ciò significa che il tuo punteggio dipenderà da variabili al di fuori del tuo controllo, come la capacità del dispositivo degli utenti e la velocità di Internet sperimentata dal tuo pubblico.

Altre metriche di prestazione

Come abbiamo discusso, i Core Web Vitals offrono una serie d’informazioni che gli sviluppatori possono utilizzare per migliorare i loro siti Web per l’esperienza dell’utente. Insieme alle principali metriche sopra elencate, gli sviluppatori possono anche capire in che modo il loro codice influisce sul modo in cui gli utenti consumano i contenuti sul loro sito.

Sebbene non siano parte delle metriche dell’esperienza utente, queste metriche quantificano i tempi di ritardo e altri fattori tecnici che possono influire negativamente sull’interazione degli utenti con una pagina web. Ora, diamo un’occhiata ad alcune altre metriche che puoi utilizzare per comprendere l’esperienza dei visitatori sul tuo sito.

 

inp interaction to next paint

3.1 Interaction to Next Paint (INP)

 

Cos’è Interaction to Next Paint (INP)?

Interaction to Next Paint (INP) è una metrica di campo che misura la reattività della pagina. Una pagina è considerata reattiva se risponde rapidamente agl’ input dell’utente.

INP è particolarmente utile per misurare la reattività di una pagina web poiché non richiede alcun codice JavaScript o CSS, a differenza di altri parametri. Misura invece solo la velocità con cui il browser visualizza gli elementi sullo schermo dopo aver ricevuto le interazioni dell’utente.

‍Il post del blog di Google Webmasters sulla reattività della pagina cita il fatto che INP sia una metrica sperimentale ma è già  disponibile in Google Search Console (GSC) come “Esperienza sulla pagina” nella sezione “Prestazioni del sito”.

Come funziona Interaction to Next Paint (INP).

Come metrica di reattività, INP si concentra sul ritardo dell’interazione dell’utente. Misura quindi la velocità con cui un elemento della pagina web risponderà dopo aver eseguito una determinata azione su di esso. Ecco come funziona:

infografica che spiega inp

  1. Un utente interagisce con una pagina Web, ad esempio facendo clic su un pulsante.
  2. Il browser invia una richiesta al server web per il nuovo contenuto.
  3. Il server web invia il nuovo contenuto al browser.
  4. Il browser esegue il rendering del nuovo contenuto nella pagina.
  5. Il browser misura il tempo necessario per eseguire il rendering del nuovo contenuto e lo segnala come punteggio INP.

Un valore INP basso significa che la pagina è altamente reattiva per le interazioni dell’utente.

Approfondimento su INP

INP: comprendere la nuova metrica Core Web Vitals e come ottimizzarla

Come parte dei Core Web Vitals, soddisfare INP è importante per i seguenti motivi:

  • Esperienza utente migliorata. Un valore INP elevato significa che gli utenti devono attendere molto tempo affinché la pagina Web reagisca alle loro interazioni, il che può essere frustrante.
  • Ottimizzazione per i motori di ricerca (SEO). INP e altri Core Web Vitals fanno parte dei segnali di esperienza sulla pagina di Google, determinando il posizionamento di un sito Web nelle pagine dei risultati. Ciò rende la metrica INP SEO particolarmente importante.
  • Frequenza di rimbalzo inferiore. I tempi di caricamento lenti possono indurre gli utenti ad abbandonare la pagina, danneggiando i profitti della tua azienda.

 

 

First contentful paint

1. First Contentful Paint (FCP)

First Contentful Paint (FCP) misura quanto tempo impiega il browser di un utente per eseguire il rendering di elementi DOM (immagini, elementi <canvas> non bianchi e SVG). Questa metrica identifica le risorse che bloccano il rendering e viene misurata in secondi, con un intervallo di punteggi FCP:

Tabella Soglie per FCP:

<

  Buono Da Migliorare Scarso
  0–2 secondi 2–4 secondi 4+ secondi

 

 

Leggi anche: First Contentful Paint come migliorare

Speed index

2. Speed Index (SI)

I siti Web più agili offrono esperienze online avanzate e Speed ​​Index (SI) ti mostra il tempo medio impiegato dai contenuti del tuo sito per essere visualizzati a un utente. Questa metrica identificherà JavaScript in eccesso su una pagina e viene misurata in millisecondi, con un intervallo di punteggi come:

Tabella soglie Speed Index:

  Buono Da Migliorare Scarso
  0–4,3 secondi 4,4–5,8 secondi 5,8+ secondi

 

 

Time to interactive

3. Time to Interactive (TTI)

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

 

Tabella soglie Time to Interactive:

  Buono Da Migliorare Scarso
  0–3,8 secondi 3,9–7,3 secondi 7,3+ secondi

 

Total blocking time

4. Total Blocking Time

Il Total Blocking time (TBT) aiuta i proprietari di siti a valutare per quanto tempo una pagina Web risponde all’input specifico dell’utente. Questa metrica identificherà le pagine con JavaScript non necessario e viene misurata in millisecondi con un intervallo di punteggi come:

Tabella soglie Total Blocking Time:

  Buono Da Migliorare Scarso
  0–300 ms 300–600 ms 600+ ms

 

 

Page performance score

5. Page Performance Scores

Un punteggio di rendimento della pagina è una singola metrica che considera tutte le metriche importanti dell’esperienza utente nei Core Web Vitals. Questo punteggio utilizza un sistema di punteggio aggregato per tutte le visite da dispositivi mobili e desktop.

Ci vuole la media ponderata per fornire un singolo punteggio per comprendere rapidamente le pagine che necessitano di un esame più approfondito.

Sebbene queste metriche siano semplificate nella metrica Punteggio prestazioni pagina, gli sviluppatori possono 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).

In questo post, hai imparato cosa sono i Web Core Vitals. A volte, può essere opprimente comprendere tutto il gergo tecnico e applicarlo perfettamente.

A proposito se ancora non hai le idee chiare su cosa sia un Hosting leggi la nostra pagina “Cos’è un Hosting“.

Non lasciare che un sito lento danneggi la tua attività! Contattaci Subito per una consulenza personalizzata e scopri come migliorare la velocità del tuo sito e ottenere punteggi eccellenti nei Core Web Vitals!, 

da