Web Vitals è un'iniziativa di Google per fornire una guida unificata per gli indicatori di qualità delle pagine web essenziali per offrire un'ottima esperienza utente sul web. Il suo obiettivo è semplificare l'ampia gamma di strumenti disponibili per la misurazione delle prestazioni e aiutare i proprietari di siti a concentrarsi sulle metriche più importanti, ovvero i Segnali web essenziali.
Segnali web essenziali
I Segnali web essenziali sono un sottoinsieme di Segnali web che si applicano a tutte le pagine web, devono essere misurati da tutti i proprietari del sito e vengono mostrati in tutti gli strumenti Google. Ciascuno dei Segnali web essenziali rappresenta un aspetto distinto dell'esperienza utente, è misurabile sul campo e riflette l'esperienza reale di un risultato critico incentrata sull'utente.
Le metriche che compongono i Segnali web essenziali si evolveranno nel tempo. L'insieme attuale si concentra su tre aspetti dell'esperienza utente: caricamento, interattività e stabilità visiva. Comprende le seguenti metriche:
- Largest Contentful Paint (LCP): misura le prestazioni di caricamento. Per offrire una buona esperienza utente, la metrica LCP deve avvenire entro 2,5 secondi dal primo caricamento della pagina.
- First Input Delay (FID): misura l'interattività. Per offrire una buona esperienza utente, le pagine devono avere un FID pari o inferiore a 100 millisecondi.
- Cumulative Layout Shift (CLS): misura la stabilità visiva. Per offrire una buona esperienza utente, deve mantenere un CLS pari o inferiore a 0.1..
Per ciascuna di queste metriche, per assicurarti di raggiungere il target consigliato per la maggior parte degli utenti, una buona soglia da misurare è il 75° percentile dei caricamenti pagina, segmentati su dispositivi mobili e computer.
Gli strumenti che valutano la conformità di Core Web Vitals devono considerare una pagina conforme se soddisfa i target consigliati al 75° percentile per ciascuna di queste tre metriche.
Lifecycle
Le metriche relative al percorso Segnali web essenziali attraversano un ciclo di vita che prevede tre fasi: sperimentale, in attesa e stabile.
Ogni fase è progettata per indicare agli sviluppatori come devono considerare ogni metrica:
- Le metriche sperimentali sono Segnali web essenziali potenziali che potrebbero essere ancora sottoposti a cambiamenti significativi, a seconda dei test e del feedback della community.
- Le metriche in attesa sono le metriche Segnali web essenziali che hanno superato la fase di test e feedback e che hanno una tempistica ben definita per la stabilità.
- Le metriche stabili sono l'insieme attuale di Segnali web essenziali che Chrome considera essenziali per un'ottima esperienza utente.
I Segnali web essenziali si trovano nelle seguenti fasi del ciclo di vita:
- LCP: stabile
- FID: stabile
- CLS: stabile
- Interaction to Next Paint (INP): in attesa
Per ulteriori informazioni sullo sviluppo di INP, consulta la pagina Adottare un'interazione con Next Paint.
Sperimentale
Quando una metrica viene sviluppata inizialmente ed entra nell'ecosistema, viene considerata una metrica sperimentale.
Lo scopo della fase sperimentale è valutare l'idoneità di una metrica, esaminando innanzitutto il problema da risolvere e possibilmente ripetendo le metriche precedenti che potrebbero non essere state risolte. Ad esempio, INP è stato inizialmente sviluppato come metrica sperimentale per risolvere i problemi relativi alle prestazioni del runtime del web in modo più completo rispetto a First Input Delay (FID).
Inoltre, la fase sperimentale del ciclo di vita di Segnali web essenziali è pensata per garantire flessibilità nello sviluppo di una metrica mediante l'identificazione di bug e persino l'esplorazione di modifiche alla definizione iniziale. È anche la fase in cui il feedback della community è più importante.
In attesa
Quando il team di Chrome stabilisce che una metrica sperimentale ha ricevuto feedback sufficienti e ne ha comprovata l'efficacia, diventa una metrica in attesa. In questa fase, le metriche in attesa vengono mantenute per almeno sei mesi per dare all'ecosistema il tempo di adattarsi. Il feedback della community rimane un aspetto importante di questa fase, in quanto sempre più sviluppatori iniziano a usare la metrica.
Stabile
Quando una metrica candidata ai Segnali web essenziali viene finalizzata, diventa una metrica stabile. Questo è il momento in cui la metrica può diventare un Segnale web essenziale.
Le metriche stabili sono attivamente supportate e possono essere soggette a correzioni di bug e modifiche alle definizioni. Le metriche di Segnali web essenziali stabili non cambieranno più di una volta all'anno. Qualsiasi modifica a un Segnale web essenziale verrà comunicata chiaramente nella documentazione ufficiale della metrica e nel log delle modifiche della metrica. Anche i Core Web Vitals sono inclusi in tutte le valutazioni.
Punto chiave: le metriche stabili non sono necessariamente permanenti. Una metrica stabile può essere ritirata e sostituita con un'altra metrica che risolve l'area problematica in modo più efficace.
Misurare e generare report sui Segnali web essenziali
Google ritiene che i Segnali web essenziali siano fondamentali per tutte le esperienze web. Di conseguenza, si impegna a rendere visibili queste metriche in tutti i suoi strumenti più utilizzati. Le seguenti sezioni descrivono in dettaglio quali strumenti supportano i Segnali web essenziali.
Strumenti sul campo per misurare i Segnali web essenziali
Il Report sull'esperienza utente di Chrome raccoglie dati di misurazione dell'utente reali e anonimizzati per ogni Segnale web essenziale. Questi dati consentono ai proprietari di siti di valutare rapidamente le proprie prestazioni senza richiedere la configurazione manuale delle analisi delle loro pagine e sono alla base di strumenti come PageSpeed Insights e il report Segnali web essenziali di Search Console.
| LCP | FID | CLS | |
| Report sull'esperienza utente di Chrome | |||
| PageSpeed Insights | |||
| Search Console (report Core Web Vitals) |
I dati forniti dal Report sull'esperienza utente di Chrome offrono un modo rapido per valutare le prestazioni del sito, ma non forniscono la telemetria dettagliata per visualizzazione di pagina spesso necessaria per diagnosticare, monitorare e reagire rapidamente alle regressioni. Di conseguenza, consigliamo vivamente ai siti di impostare il proprio monitoraggio degli utenti reali.
Misura i Segnali web essenziali in JavaScript
Ognuno dei Segnali web essenziali può essere misurato in JavaScript utilizzando le API web standard.
Il modo più semplice per misurare tutti i Segnali web essenziali è utilizzare la libreria JavaScript di web-vitals, un piccolo wrapper API pronto per la produzione che misura ogni metrica in modo che corrisponda esattamente a come vengono riportate dagli strumenti Google.
Con la libreria web-vitals,
misurare ogni metrica è semplice quanto chiamare una singola funzione (consulta la
documentazione per i dettagli completi sull'utilizzo e sull'API):
import {onCLS, onFID, onLCP} from 'web-vitals';
function sendToAnalytics(metric) {
const body = JSON.stringify(metric);
// Use `navigator.sendBeacon()` if available, falling back to `fetch()`.
(navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
fetch('/analytics', {body, method: 'POST', keepalive: true});
}
onCLS(sendToAnalytics);
onFID(sendToAnalytics);
onLCP(sendToAnalytics);
Dopo aver configurato il tuo sito per l'utilizzo della libreria dei vitali web per misurare e inviare i dati di Segnali web essenziali a un endpoint di analisi, il passaggio successivo consiste nell'aggregare e generare report su tali dati per verificare se le tue pagine soddisfano le soglie consigliate per almeno il 75% delle visite alle pagine.
Sebbene alcuni provider di analisi offrano supporto integrato per le metriche di Segnali web essenziali, anche quelli che non devono includere funzionalità di base delle metriche personalizzate che consentono di misurare i Segnali web essenziali all'interno del loro strumento.
Un esempio è il report Web Vitals, che consente ai proprietari di siti di misurare i propri Segnali web essenziali utilizzando Google Analytics. Per indicazioni sulla misurazione dei Segnali web essenziali con altri strumenti di analisi, consulta le best practice per la misurazione dei Segnali web sul campo.
Puoi anche generare report su ciascuno dei Segnali web essenziali senza scrivere alcun codice utilizzando l'estensione di Chrome Web Vitals. Questa estensione
utilizza la libreria web-vitals per
misurare ciascuna di queste metriche e mostrarle agli utenti mentre navigano sul web.
Questa estensione può essere utile per comprendere il rendimento dei tuoi siti, di quelli della concorrenza e del web in generale.
| LCP | FID | CLS | |
|---|---|---|---|
| vita-web | |||
| Estensione Web Vitals |
Gli sviluppatori che preferiscono misurare queste metriche direttamente utilizzando le API web sottostanti, possono utilizzare queste guide alle metriche per i dettagli dell'implementazione:
Per ulteriori indicazioni sulla misurazione di queste metriche utilizzando i servizi di analisi più diffusi o i tuoi strumenti di analisi interni, consulta Best practice per la misurazione di Segnali web sul campo.
Strumenti dei lab per misurare i Segnali web essenziali
Sebbene tutti i Segnali web essenziali siano, prima di tutto, metriche sul campo, molti di questi sono misurabili anche in laboratorio.
La misurazione in laboratorio è il modo migliore per testare le prestazioni delle funzionalità durante lo sviluppo. È anche il modo migliore per rilevare le regressioni delle prestazioni prima che si verifichino.
I seguenti strumenti possono essere utilizzati per misurare i Segnali web essenziali in un ambiente di lab:
| LCP | FID | CLS | |
|---|---|---|---|
| Chrome DevTools | (utilizza TBT) | ||
| Lighthouse | (utilizza TBT) |
Strumenti come Lighthouse che caricano le pagine in un ambiente simulato senza un utente non possono misurare il FID perché non hanno un input utente. Tuttavia, la metrica Tempo di blocco totale (TBT) è misurabile in laboratorio ed è un eccellente proxy per FID. Le ottimizzazioni delle prestazioni che migliorano TBT nel lab dovrebbero migliorare il FID nel campo. Per ulteriori indicazioni, consulta i consigli per migliorare i punteggi.
Sebbene la misurazione in laboratorio sia una parte essenziale per offrire esperienze ottima, non sostituisce la misurazione sul campo. Le prestazioni di un sito possono variare drasticamente in base alle funzionalità del dispositivo dell'utente, alle condizioni della rete, agli altri processi in esecuzione sul dispositivo e al modo in cui l'utente interagisce con la pagina. Infatti, il punteggio di ciascuna metrica di Segnali web essenziali può essere influenzato dall'interazione dell'utente. Solo la misurazione del campo consente di acquisire con precisione il quadro completo.
Consigli per migliorare i tuoi punteggi
Le seguenti guide offrono consigli specifici su come ottimizzare le tue pagine per ciascuno dei Segnali web essenziali:
Altri Segnali web
Sebbene i Segnali web essenziali siano le metriche fondamentali per comprendere e offrire un'esperienza utente eccellente, esistono anche altre metriche fondamentali.
Questi altri Segnali web spesso fungono da proxy o metriche supplementari per i Segnali web essenziali, per contribuire ad acquisire una parte più ampia dell'esperienza o aiutare a diagnosticare un problema specifico.
Ad esempio, Time to First Byte (TTFB) e First Contentful Paint (FCP) sono entrambi aspetti vitali dell'esperienza di caricamento ed entrambi sono utili per diagnosticare i problemi relativi all'LCP (rispettivamente tempi di risposta del server o risorse di blocco del rendering lenti).
Allo stesso modo, una metrica come Tempo di blocco totale (TBT) è una metrica di laboratorio fondamentale per rilevare e diagnosticare potenziali problemi di interattività che possono influire su FID e INP. Tuttavia, non fa parte del set di Segnali web essenziali perché non è misurabile sul campo e non riflette un risultato incentrata sull'utente.
Modifiche ai Segnali web
I Segnali web e i Segnali web essenziali rappresentano i migliori indicatori disponibili al giorno d'oggi per gli sviluppatori per misurare la qualità dell'esperienza sul web, ma questi indicatori non sono perfetti e dovrebbero essere previsti miglioramenti o aggiunte futuri.
I Segnali web essenziali sono pertinenti per tutte le pagine web e sono disponibili in tutti gli strumenti Google pertinenti. Poiché le modifiche a queste metriche hanno un impatto di ampia portata, gli sviluppatori devono aspettarsi che le definizioni e le soglie dei Segnali web essenziali siano stabili, nonché un preavviso e una pianificazione prevedibile per gli aggiornamenti.
Gli altri Segnali web sono spesso specifici per contesto o strumento e possono essere più sperimentali rispetto ai Segnali web essenziali. Di conseguenza, le loro definizioni e soglie potrebbero cambiare con maggiore frequenza.
Per tutti i Segnali web, le modifiche sono documentate in questo log delle modifiche pubblico.