Data di pubblicazione: 4 maggio 2020
L'ottimizzazione per garantire un'esperienza utente di qualità è fondamentale per il successo duraturo di qualsiasi sito sul web. Se sei il proprietario di un'attività, un professionista del marketing o uno sviluppatore, le metriche Web Vitals possono aiutarti a quantificare l'esperienza di utilizzo del tuo sito e a individuare opportunità di miglioramento.
Panoramica
Web Vitals è un'iniziativa di Google pensata per offrire indicazioni unificate relative a indicatori di qualità fondamentali per garantire un'eccellente esperienza utente sul web.
Nel corso degli anni, Google ha fornito una serie di strumenti per misurare e segnalare il rendimento. 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 dovrebbero essere esperti di rendimento per comprendere la qualità dell'esperienza che offrono ai propri utenti. L'iniziativa Web Vitals mira a semplificare il panorama e ad aiutare i siti a concentrarsi sulle metriche più importanti, ovvero i Core Web Vitals.
Core Web Vitals
I Core Web Vitals sono il sottoinsieme di Web Vitals che si applicano a tutte le pagine web, dovrebbero essere misurati da tutti i proprietari di siti e saranno visualizzati in tutti gli strumenti di Google. Ognuno dei Core Web Vitals rappresenta un aspetto distinto dell'esperienza utente, è misurabile sul campo e riflette l'esperienza reale di un risultato critico incentrato sull'utente.
Le metriche che compongono i Segnali web essenziali evolveranno nel tempo. L'insieme attuale si concentra su tre aspetti dell'esperienza utente, cioè caricamento, interattività e stabilità visiva, e include le seguenti metriche (e le rispettive soglie):
- Largest Contentful Paint (LCP): consente di misurare le prestazioni di caricamento. Per garantire una buona esperienza utente, l'LCP dovrebbe verificarsi entro 2,5 secondi dall'inizio del caricamento della pagina.
- Interaction to Next Paint (INP): consente di misurare l'interattività. Per offrire una buona esperienza utente, le pagine dovrebbero avere un valore INP pari o inferiore a 200 millisecondi.
- Cumulative Layout Shift (CLS): consente di misurare la stabilità visiva. Per offrire una buona esperienza utente, le pagine dovrebbero mantenere un valore di CLS pari o inferiore a 0,1.
Per assicurarvi di raggiungere l'obiettivo consigliato per queste metriche rispetto alla maggior parte degli utenti, una buona soglia da misurare è il 75° percentile dei caricamenti delle pagine, segmentato tra dispositivi mobili e computer fissi.
Gli strumenti che valutano la conformità ai Core Web Vitals dovrebbero considerare una pagina superata se soddisfa i target consigliati al 75° percentile per tutte e tre le metriche dei Core Web Vitals.
Ciclo di vita
Le metriche dei Core Web Vitals seguono un ciclo di vita composto da tre fasi: sperimentale, in attesa e stabile.
Ogni fase è progettata per indicare agli sviluppatori come devono considerare ogni metrica:
- Le metriche sperimentali sono potenziali Core Web Vitals che potrebbero essere ancora soggette a modifiche significative a seconda dei test e del feedback della community.
- Le metriche in attesa sono futuri Core Web Vitals che hanno superato la fase di test e feedback e hanno una tempistica ben definita per diventare stabili.
- Le metriche stabili sono l'insieme attuale di Core Web Vitals che Chrome considera essenziali per un'esperienza utente ottimale.
I Core Web Vitals 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 e, possibilmente, iterando su ciò che le metriche precedenti potrebbero non aver risolto. Ad esempio, Interaction to Next Paint (INP) è stata sviluppata inizialmente come metrica sperimentale per risolvere in modo più completo i problemi di prestazioni di runtime presenti sul web rispetto a First Input Delay (FID).
La fase sperimentale del ciclo di vita dei Core Web Vitals ha anche lo scopo di offrire flessibilità nello sviluppo di una metrica identificando bug e persino esplorando modifiche alla sua 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 INP è passata dallo stato sperimentale a quello in attesa con l'intenzione di ritirare FID.
Le metriche in attesa rimangono in questa fase per un minimo di sei mesi per dare all'ecosistema il tempo di adattarsi. Il feedback della community rimane un aspetto importante di questa fase, man mano che sempre più sviluppatori iniziano a utilizzare la metrica.
Stabile
Quando una metrica candidata per i Segnali web essenziali viene finalizzata, diventa una metrica stabile. È in questo momento che la metrica può diventare un Segnale web essenziale.
Le metriche stabili sono supportate attivamente e possono essere soggette a correzioni di bug e modifiche della definizione. Le metriche stabili di Core Web Vitals non cambieranno più di una volta all'anno. Qualsiasi modifica a un Segnale web essenziale verrà comunicata chiaramente nella documentazione ufficiale della metrica, nonché nel relativo log delle modifiche. I Core Web Vitals sono inclusi anche in tutte le valutazioni.
Strumenti per misurare e segnalare i Core Web Vitals
Google ritiene che i Core Web Vitals siano fondamentali per tutte le esperienze web. Di conseguenza, si impegna a visualizzare queste metriche in tutti i suoi strumenti più diffusi. Le sezioni seguenti descrivono in dettaglio quali strumenti supportano i Segnali web essenziali.
Strumenti sul campo per misurare i Core Web Vitals
Il Report sull'esperienza utente di Chrome raccoglie dati di misurazione anonimi e reali degli utenti per ogni Segnale web essenziale. Questi dati consentono ai proprietari dei siti di valutare rapidamente il rendimento senza dover instrumentare manualmente l'analisi sulle proprie pagine e alimentano strumenti come Chrome DevTools, PageSpeed Insights e il report Core Web Vitals di Search Console.
| LCP | INP | CLS | |
| Report sull'esperienza utente di Chrome | |||
| Chrome DevTools | |||
| PageSpeed Insights | |||
| Search Console (report Core Web Vitals) |
I dati forniti dal Report sull'esperienza utente di Chrome offrono un modo rapido per valutare il rendimento 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 configurare il proprio monitoraggio degli utenti reali.
Misurare i Core Web Vitals in JavaScript
Ciascuno dei Core Web Vitals può essere misurato in JavaScript utilizzando le API web standard.
Il modo più semplice per misurare tutti i Core Web Vitals è utilizzare la libreria JavaScript web-vitals, un wrapper piccolo e pronto per la produzione intorno alle API web sottostanti che misura ogni metrica in modo da corrispondere con precisione a come vengono segnalate da tutti gli strumenti di Google elencati in precedenza.
Con la libreria web-vitals, la misurazione di ogni metrica può essere eseguita chiamando una singola funzione. Per i dettagli completi su utilizzo e API, consulta la documentazione.
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 utilizzare la libreria web-vitals per misurare e inviare i dati dei Core Web Vitals a un endpoint di analisi, il passaggio successivo consiste nell'aggregare e segnalare questi dati per verificare se le tue pagine soddisfano le soglie consigliate per almeno il 75% delle visite alle pagine.
Sebbene alcuni fornitori di dati e analisi abbiano un supporto integrato per le metriche Core Web Vitals, anche quelli che non lo hanno dovrebbero includere funzionalità di metriche personalizzate di base che ti consentono di misurare le Core Web Vitals nel loro strumento.
Gli sviluppatori che preferiscono misurare queste metriche direttamente utilizzando le API web sottostanti possono invece utilizzare queste guide alle metriche per i dettagli di implementazione:
Per ulteriori indicazioni sulla misurazione di queste metriche utilizzando i servizi di analisi più diffusi o i tuoi strumenti di analisi interni, consulta l'articolo Best practice per la misurazione dei Web Vitals sul campo.
Strumenti di laboratorio per misurare i Core Web Vitals
Sebbene tutti i Core Web Vitals siano, prima di tutto, metriche sul campo, molti di essi sono misurabili anche in laboratorio.
La misurazione in laboratorio è il modo migliore per testare il rendimento delle funzionalità durante lo sviluppo, prima che vengano rilasciate agli utenti. È anche il modo migliore per rilevare le regressioni del rendimento prima che si verifichino.
I seguenti strumenti possono essere utilizzati per misurare i Core Web Vitals in un ambiente di laboratorio:
| LCP | INP | CLS | |
|---|---|---|---|
| Chrome DevTools | |||
| Lighthouse | (utilizzare invece TBT) |
Sebbene la misurazione in laboratorio sia una parte essenziale per offrire esperienze ottimali, non sostituisce la misurazione sul campo.
Il rendimento di un sito può variare notevolmente in base alle funzionalità del dispositivo di un utente, alle condizioni di rete, ad altri processi in esecuzione sul dispositivo e al modo in cui interagisce con la pagina. Infatti, il punteggio di ciascuna delle metriche dei Core Web Vitals può essere influenzato dall'interazione dell'utente. Solo la misurazione sul campo può acquisire con precisione il quadro completo.
Consigli per migliorare i punteggi
Le seguenti guide offrono consigli specifici su come ottimizzare le pagine per ciascuno dei Core Web Vitals:
Esistono molti modi per migliorare i Core Web Vitals e ogni approccio presenta livelli variabili di impatto, pertinenza e facilità d'uso per ogni situazione. Per un breve elenco dei consigli principali del team di Chrome, consulta l'articolo I modi più efficaci per migliorare i Core Web Vitals.
Altri Web Vitals
Sebbene i Core Web Vitals siano le metriche fondamentali per comprendere e offrire un'esperienza utente ottimale, esistono altre metriche di supporto.
Queste altre metriche possono fungere da proxy o da metriche supplementari per i tre Core Web Vitals, per acquisire una parte più ampia dell'esperienza o per aiutare a diagnosticare un problema specifico.
Ad esempio, le metriche Time to First Byte (TTFB) e First Contentful Paint (FCP) sono aspetti fondamentali dell'esperienza di caricamento ed entrambe sono utili per diagnosticare i problemi con LCP (rispettivamente tempi di risposta del server lenti o risorse che bloccano il rendering).
Allo stesso modo, una metrica come Total Blocking Time (TBT) è una metrica di laboratorio fondamentale per rilevare e diagnosticare potenziali problemi di interattività che possono influire su INP. Tuttavia, non fa parte dei Core Web Vitals perché non è misurabile sul campo né riflette un risultato incentrato sull'utente.
Modifiche a Web Vitals
Web Vitals e Core Web Vitals rappresentano i migliori indicatori disponibili per gli sviluppatori per misurare la qualità dell'esperienza sul web, ma questi indicatori non sono perfetti e sono previsti miglioramenti o aggiunte future.
I Core Web Vitals sono pertinenti a tutte le pagine web e sono presenti negli strumenti di Google pertinenti. Le modifiche a queste metriche avranno un impatto di vasta portata; pertanto, gli sviluppatori dovrebbero aspettarsi che le definizioni e le soglie dei Core Web Vitals siano stabili e che gli aggiornamenti abbiano un preavviso e una cadenza annuale prevedibile.
Gli altri Web Vitals sono spesso specifici per il contesto o lo strumento e potrebbero essere più sperimentali dei Core Web Vitals. Di conseguenza, le loro definizioni e soglie potrebbero cambiare con maggiore frequenza.
Per tutti i Web Vitals, le modifiche verranno documentate chiaramente in questo CHANGELOG pubblico.