Web Vitals scoring calculator

Cosa sono i Web Vitals?

Perché hanno un valore così importante?

I Web Vitals ono una recente iniziativa di Google di fornire linee guida unificate per misurare gli elementi essenziali della qualità e offrire un'esperienza utente eccezionale sui siti web.

Google ha fornito una serie di strumenti nel corso degli anni per misurare e monitorare le prestazioni di un sito. Alcuni sviluppatori hanno esperienza nell'uso di questi strumenti, mentre altri hanno avuto difficoltà a tenere il passo con l'abbondanza di strumenti e nuove metriche.

L'iniziativa Web Vitals di Google mira a semplificare il panorama e aiutare gli sviluppatori web a concentrarsi sulle metriche che contano di più, i Core Web Vitals.

Con Web Vitals, Google sta specificando una serie di tre distinte metriche delle prestazioni per creare i propri Core Web Vitals che utilizzano per valutare se il tuo sito Web restituisce una buona esperienza utente. Google sta specificando alcune metriche degli indicatori principali nella specifica Web Vitals che non sono classificate come "core".

Google ha sempre promosso l'importanza della velocità del sito web. Tuttavia, questa è la prima volta che identificano in modo esplicito le specifiche metriche delle prestazioni utilizzate per guidare le loro classifiche di ricerca.

Web Vitals Principali

Cosa devo sapere sui Core Web Vitals?

I Core Web Vitals si concentrano su tre semplici caratteristiche UX di una pagina:

1. Tempi di caricamento
2. Interattività (cioè reattività della pagina)
3. Stabilità visiva della pagina

La matematica alla base delle metriche può diventare complicata, ma la comprensione di ciò che stanno cercando di ottenere può aiutare a semplificare le cose.

Le metriche di Core Web Vitals sono le seguenti:

• Largest Contentful Paint (LCP) (Tempo di caricamento dei contenuti)
• First Input Delay (FID) / Total Blocking Time (TBT) (Tempo di blocco totale)
• Cumulative Layout Shift (CLS) (Spostamento cumulativo del layout, ovvero il misuratore della stabilità visiva)

Questi Core Web Vitals sono metriche che possono fungere da indicatori principali per prevedere l'esperienza dell'utente in caso di cambiamento.

Largest Contentful Paint (LCP): misura le prestazioni di caricamento. Per fornire una buona esperienza utente, LCP dovrebbe verificarsi entro 2,5 secondi dal primo caricamento della pagina.

First Input Delay (FID): misura l'interattività. Per fornire una buona esperienza utente, le pagine devono avere un FID inferiore a 100 millisecondi.

Cumulative Layout Shift (CLS): misura la stabilità visiva. Per fornire una buona esperienza utente, le pagine devono mantenere un CLS inferiore a 0,1.

Altri Web Vitals

Cosa devo sapere sui Web Vitals?

Questi altri Web Vitals spesso fungono da proxy o metriche supplementari per i Core Web Vitals, per aiutare a catturare una parte più ampia dell'esperienza o per aiutare a diagnosticare un problema specifico.

Time To First Byte (TTFB): questo controllo ha esito negativo quando il browser attende più di 600 ms affinché il server risponda alla richiesta del documento principale. Agli utenti non piace quando le pagine impiegano molto tempo a caricarsi.

First Contentful Paint (FCP): misura il tempo da quando la pagina inizia a caricarsi a quando qualsiasi parte del contenuto della pagina viene visualizzata sullo schermo.

Time To Interactive (TTI): misura il tempo da quando la pagina inizia a caricarsi a quando le sue risorse principali sono state caricate e la pagina è in grado di rispondere in modo affidabile e rapido all'input dell'utente.

Total Blocking Time (TBT): misura la quantità di tempo totale tra First Contentful Paint (FCP) e Time to Interactive (TTI) in cui il thread principale è stato bloccato abbastanza a lungo da impedire la reattività dell'input. Il thread principale è considerato bloccato ogni volta che c'è un'attività che viene eseguita per più di 50 millisecondi.

First Meaningful Paint (FMP): deprecato - misura quando il contenuto principale di una pagina è visibile all'utente. Il punteggio grezzo per FMP è il tempo in secondi tra l'utente che avvia il caricamento della pagina e la pagina che esegue il rendering del contenuto above-the-fold principale.

Speed Index (SI): misura la velocità con cui il contenuto viene visualizzato visivamente durante il caricamento della pagina. Lighthouse acquisisce prima un video del caricamento della pagina nel browser e calcola la progressione visiva tra i fotogrammi

First CPU Idle (FCI): deprecato - misura quanto tempo impiega una pagina per diventare interattiva. Una pagina è considerata interattiva quando la maggior parte degli elementi dell'interfaccia utente sullo schermo sono interattivi e la pagina risponde, in media, alla maggior parte degli input dell'utente in un ragionevole lasso di tempo.