L'ottimizzazione per la qualità dell'esperienza utente è la chiave per il successo a lungo termine di qualsiasi sito sul 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 opportunità di miglioramento.
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 una serie di strumenti per misurare e generare report sul rendimento. Alcuni sviluppatori sono esperti nell'utilizzo di questi strumenti, mentre altri hanno trovato un'abbondanza di strumenti e metriche difficili da tenere al passo.
I proprietari di siti non devono essere esperti di prestazioni per comprendere la qualità dell'esperienza che offrono ai propri utenti. L'iniziativa Web Vitals ha lo scopo di semplificare il panorama e di aiutare i siti a concentrarsi sulle metriche più importanti, ovvero i Segnali web essenziali.
Segnali web essenziali
I Segnali web essenziali sono il sottoinsieme di Segnali web che si applicano a tutte le pagine web, devono essere misurati da tutti i proprietari del sito e vengono visualizzati in tutti gli strumenti di 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 costituiscono 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):
- LCP (Largest Contentful Paint): misura le prestazioni di caricamento. Per offrire una buona esperienza utente, la metrica LCP dovrebbe 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): consente di misurare la stabilità visiva. Per offrire una buona esperienza utente, le pagine devono mantenere un CLS pari o inferiore a 0.1..
Per ognuna delle metriche riportate sopra, per assicurarti di raggiungere il target consigliato per la maggior parte dei tuoi utenti, una buona soglia da misurare è il 75° percentile dei caricamenti pagina, segmentati tra dispositivi mobili e computer.
Gli strumenti che valutano la conformità dei Segnali web essenziali dovrebbero prendere in considerazione il passaggio di pagina se soddisfa i target consigliati al 75° percentile per tutte le tre metriche precedenti.
Lifecycle
Le metriche relative al percorso Segnali web essenziali attraversano un ciclo di vita costituito da tre fasi: sperimentale, in attesa e stabile.
La tabella seguente indica dove si trovano attualmente tutti i Segnali web essenziali nel loro ciclo di vita:
Ogni fase è progettata per segnalare agli sviluppatori il modo in cui devono considerare ogni metrica:
- Le metriche sperimentali sono Segnali web essenziali potenziali che potrebbero ancora subire modifiche significative, a seconda dei test e del feedback della community.
- Le metriche in sospeso sono Segnali web essenziali futuri che hanno superato la fase di test e feedback e hanno tempistiche ben definite per rimanere stabili.
- Le metriche stabili sono l'insieme attuale di Segnali web essenziali che Chrome considera essenziali per esperienze utente ottimali.
Sperimentale
Quando una metrica viene sviluppata inizialmente ed entra nell'ecosistema, viene considerata una metrica sperimentale.
Lo scopo della fase sperimentale è valutare l'efficacia di una metrica, innanzitutto esplorando il problema da risolvere e possibilmente rielaborando 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 è pensata anche per garantire flessibilità nello sviluppo di una metrica identificando i bug e persino esplorando le modifiche alla definizione iniziale. È anche la fase in cui è più importante il feedback della community.
In attesa
Quando il team di Chrome stabilisce che una metrica sperimentale ha ricevuto feedback sufficienti e ne ha dimostrato l'efficacia, diventa una metrica in attesa. Le metriche in sospeso vengono mantenute in questa fase per almeno sei mesi per dare all'ecosistema il tempo per adattarsi. L'unico ostacolo che rimane a una metrica per avanzare oltre la fase di attesa è attendere il periodo di transizione. Il feedback della community rimane un aspetto importante di questa fase, in quanto sempre più sviluppatori iniziano a utilizzare la metrica.
Stabile
Quando viene finalizzata una metrica candidata Segnali web essenziali, diventa una metrica stabile; per le metriche presenti nel percorso Segnali web essenziali, la metrica diventa Segnale web essenziale.
Le metriche stabili sono attivamente supportate e potrebbero 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 CHANGELOG della metrica. Anche i Segnali web essenziali sono inclusi in tutte le valutazioni.
Strumenti per misurare i Segnali web essenziali e generare report in merito
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 degli utenti reali anonimi per ogni Segnale web essenziale. Questi dati consentono ai proprietari di siti di valutare rapidamente le proprie prestazioni senza che debbano implementare manualmente le analisi sulle loro pagine e alimentano 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 Segnali web essenziali) | ✔ | ✔ | ✔ |
I dati forniti dal Report sull'esperienza utente di Chrome consentono di valutare rapidamente le prestazioni dei siti, ma non forniscono la telemetria dettagliata per visualizzazione di pagina spesso necessaria per diagnosticare, monitorare e reagire rapidamente alle regressioni con precisione. Di conseguenza, consigliamo vivamente ai siti di configurare il monitoraggio degli utenti reali.
Misurare i Segnali web essenziali in JavaScript
Ognuno dei Segnali web essenziali può essere misurato in JavaScript utilizzando API web standard.
Il modo più semplice per misurare tutti i Segnali web essenziali è utilizzare la libreria JavaScript dei vitali web, un piccolo wrapper pronto per la produzione attorno alle API web sottostanti che misura ogni metrica in modo da corrispondere con precisione a come viene segnalata da tutti gli strumenti Google elencati sopra.
Con la libreria web-vitals, la misurazione di 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 di 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 raggiungono le soglie consigliate per almeno il 75% delle visite alle pagine.
Sebbene alcuni provider di analisi offrano il 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 linee guida sulla misurazione dei Segnali web essenziali utilizzando 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 Segnali web. Questa estensione utilizza la libreria dei web-vital 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 | |
|---|---|---|---|
| vitali per il Web | ✔ | ✔ | ✔ |
| Estensione Web Vitals | ✔ | ✔ | ✔ |
In alternativa, gli sviluppatori che preferiscono misurare queste metriche direttamente tramite le API web sottostanti possono fare riferimento a queste guide alle metriche per i dettagli dell'implementazione:
Strumenti di laboratorio 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, prima che vengano rilasciate agli utenti. È 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 controllato:
| LCP | FID | CLS | |
|---|---|---|---|
| Chrome DevTools | ✔ | ✘ (utilizza TBT) | ✔ |
| Faro | ✔ | ✘ (utilizza TBT) | ✔ |
Sebbene la misurazione di laboratorio sia una parte essenziale per offrire esperienze ottimali, non è un'alternativa alla misurazione sul campo.
Le prestazioni di un sito possono variare notevolmente in base alle funzionalità del dispositivo dell'utente, alle condizioni della rete, a quali altri processi potrebbero essere in esecuzione sul dispositivo e alla modalità di interazione con la pagina. Di fatto, il punteggio di ciascuna metrica di Segnali web essenziali può essere influenzato dall'interazione dell'utente. Solo la misurazione sul campo può acquisire un quadro completo con precisione.
Consigli per migliorare i punteggi
Dopo aver misurato i Segnali web essenziali e identificato le aree di miglioramento, il passaggio successivo è l'ottimizzazione. 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 ottimale, esistono anche altre metriche vitali.
Questi altri Segnali web spesso fungono da proxy o metriche supplementari per i Segnali web essenziali, per acquisire una parte più ampia dell'esperienza o per diagnosticare un problema specifico.
Ad esempio, le metriche Time to First Byte (TTFB) e First Contentful Paint (FCP) sono entrambi aspetti fondamentali dell'esperienza di caricamento e sono entrambe utili per diagnosticare i problemi relativi all'LCP (rispettivamente tempi di risposta del server lenti o risorse di blocco del rendering).
Analogamente, metriche come Tempo di blocco totale (TBT) e Tempo di interazione (TTI) sono metriche di laboratorio fondamentali per individuare e diagnosticare potenziali problemi di interattività che avranno un impatto sul FID. Tuttavia, non fanno parte del set di Segnali web essenziali perché non sono misurabili sul campo, né riflettono un risultato incentrata sull'utente.
Evoluzione dei Segnali web
I Segnali web e Segnali web essenziali rappresentano i migliori indicatori disponibili oggi agli 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 vengono mostrati negli strumenti Google pertinenti. Le modifiche a queste metriche avranno un impatto ad ampia copertura; pertanto, gli sviluppatori devono aspettarsi che le definizioni e le soglie dei Segnali web essenziali siano stabili, mentre gli aggiornamenti devono avere preavviso e una cadenza annuale prevedibile.
Gli altri Segnali web sono spesso specifici per contesto o strumento e potrebbero 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 saranno chiaramente documentate in questo CHANGELOG pubblico.