Ottimizzare la qualità dell'esperienza utente è fondamentale per il successo a lungo termine di qualsiasi sito web. Che tu sia titolare di un'attività, professionista del marketing o sviluppatore, Web Vitals può aiutarti a quantificare l'esperienza sul tuo sito e a identificare le opportunità per migliorare.
Panoramica
Web Vitals è un'iniziativa di Google per fornire una guida unificata per gli indicatori di qualità essenziali per offrire un'ottima esperienza utente sul web.
Nel corso degli anni Google ha fornito diversi strumenti per misurare il rendimento e generare report a riguardo. Alcuni sviluppatori sono esperti nell'utilizzo di questi strumenti, mentre altri hanno trovato difficile tenere il passo con l'abbondanza di strumenti e metriche.
I proprietari dei siti non devono essere esperti di performance per comprendere la qualità dell'esperienza che offrono ai propri utenti. L'iniziativa Web Vitals mira a semplificare il contesto e ad aiutare i siti a concentrarsi sulle metriche più importanti, 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 verranno presentati 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 per il 2020 è incentrato su tre aspetti dell'esperienza utente: caricamento, interattività e stabilità visiva e include le seguenti metriche (e le rispettive soglie):
- Largest Contentful Paint (LCP): misura le prestazioni di caricamento. Per offrire una buona esperienza utente, il valore LCP dovrebbe avvenire entro 2,5 secondi dal primo avvio della pagina.
- Interaction to Next Paint (INP): misura l'interattività. Per offrire una buona esperienza utente, le pagine devono avere un INP pari o inferiore a 200 millisecondi.
- Cumulative Layout Shift (CLS): misura la stabilità visiva. Per offrire una buona esperienza utente, le pagine devono mantenere un valore CLS pari o inferiore a 0.1..
Per assicurarti di raggiungere il target consigliato per queste metriche per la maggior parte dei tuoi utenti, una buona soglia da misurare è il 75° percentile di caricamenti pagine, segmentato su dispositivi mobili e computer.
Gli strumenti che valutano la conformità di Core Web Vitals devono prendere in considerazione il superamento della pagina se soddisfano i target consigliati al 75° percentile per tutte e tre le metriche di Core Web Vitals.
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:
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, innanzitutto esplorando il problema da risolvere ed eventualmente ripetendo le metriche precedenti che potrebbero non essere state risolte. Ad esempio, Interaction to Next Paint (INP) è stato inizialmente sviluppato come metrica sperimentale per risolvere i problemi di prestazioni di runtime presenti sul web in modo più completo rispetto a First Input Delay (FID).
La fase sperimentale del ciclo di vita di Segnali web essenziali punta inoltre a garantire flessibilità nello sviluppo di una metrica, identificando i bug e persino esplorando le modifiche apportate 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 ha dimostrato la sua efficacia, diventa una metrica in attesa. Ad esempio, nel 2023 l'INP è stata promossa da sperimentale a in attesa con l'intento di ritirare il FID.
In questa fase, le metriche in sospeso 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 un numero sempre maggiore di sviluppatori inizia a utilizzare questa 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. Eventuali modifiche a un Segnale web essenziale verranno comunicate in modo chiaro nella documentazione ufficiale della metrica e nel log delle modifiche della metrica. I Segnali web essenziali sono inclusi anche in tutte le valutazioni.
Strumenti per 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 anonimi e reali dell'utente per ogni Segnale web essenziale. Questi dati consentono ai proprietari di siti di valutare rapidamente il proprio rendimento senza dover ricorrere manualmente alle analisi sulle proprie pagine. Inoltre, sono alla base di strumenti come PageSpeed Insights e il report Segnali web essenziali di Search Console.
| LCP | INP | 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 dei siti, 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 degli elementi web essenziali, un piccolo wrapper dalle API web sottostanti, pronto per la produzione, che misura ogni metrica in modo che corrisponda esattamente a come vengono riportate da tutti gli strumenti Google elencati in precedenza.
Con la libreria dei vitali web, la misurazione di ogni metrica può essere eseguita richiamando una singola funzione (consulta la documentazione per informazioni dettagliate sull'utilizzo e sull'API):
import {onCLS, onINP, 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);
onINP(sendToAnalytics);
onLCP(sendToAnalytics);
Dopo aver configurato il tuo sito per l'utilizzo della libreria di vita 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 ti consentono di misurare i Segnali web essenziali nel 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 utilizzando altri strumenti di analisi, consulta le best practice per la misurazione di 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 dei vitali web 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 | INP | 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 più diffusi servizi di analisi o i tuoi strumenti di analisi interni, consulta le best practice per la misurazione dei Segnali web sul campo.
Strumenti dei lab per misurare i Segnali web essenziali
Sebbene tutti i Segnali web essenziali siano, innanzitutto, metriche sul campo, molti sono anche misurabili in lab.
La misurazione in laboratorio è il modo migliore per testare le prestazioni delle funzionalità durante lo sviluppo, prima che vengano rilasciate agli utenti. È anche il modo migliore per individuare le regressioni del rendimento prima che si verifichino.
Per misurare i Segnali web essenziali in un ambiente controllato puoi utilizzare i seguenti strumenti:
| LCP | INP | CLS | |
|---|---|---|---|
| Chrome DevTools | (utilizza TBT) | ||
| Lighthouse | (utilizza TBT) |
Sebbene la misurazione di laboratorio sia una parte essenziale dell'offerta di esperienze ottimali, la misurazione in laboratorio non sostituisce la misurazione sul campo.
Le prestazioni di un sito possono variare sostanzialmente in base alle funzionalità del dispositivo dell'utente, alle condizioni della rete, ai processi in esecuzione sul dispositivo e alla modalità di interazione con la pagina. Infatti, il punteggio di ciascuna metrica di Segnali web essenziali può influire sull'interazione dell'utente. Solo la misurazione del campo può offrire un quadro completo con precisione.
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
Mentre i Segnali web essenziali sono le metriche fondamentali per comprendere e offrire un'esperienza utente eccellente, ci sono altre metriche di supporto.
Queste altre metriche possono fungere da proxy, o da metriche supplementari per i tre Segnali web essenziali, per contribuire ad acquisire una parte più ampia dell'esperienza o aiutare a diagnosticare un problema specifico.
Ad esempio, le metriche Time to First Byte (TTFB) e First Contentful Paint (FCP) sono entrambi aspetti vitali dell'esperienza di caricamento ed sono entrambi utili per diagnosticare i problemi relativi all'LCP (rispettivamente tempi di risposta del server lenti o risorse che bloccano il rendering).
Allo stesso modo, una metrica come Tempo di blocco totale (TBT) è una metrica di lab essenziale per rilevare e diagnosticare potenziali problemi di interattività che possono influire sull'INP. Tuttavia, non fa parte del set di Segnali web essenziali perché non sono misurabili sul campo né riflettono un risultato centrato sull'utente.
Modifiche ai Segnali web
I Segnali web e Core Web Vitals 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 future.
I Segnali web essenziali sono pertinenti per tutte le pagine web e sono disponibili in vari strumenti Google pertinenti. Le modifiche a queste metriche avranno un impatto di ampia portata; di conseguenza, gli sviluppatori devono aspettarsi che le definizioni e le soglie dei Segnali web essenziali siano stabili e gli aggiornamenti abbiano un preavviso e una cadenza annuale prevedibile.
Gli altri Segnali web sono spesso specifici per contesto o strumento e potrebbero essere più sperimentali rispetto a Core Web Vitals. Di conseguenza, le relative definizioni e soglie potrebbero cambiare con maggiore frequenza.
Per tutti i Segnali web, le modifiche saranno chiaramente documentate in questo CHANGELOG pubblico.