Pubblicata il 4 maggio 2020
L'ottimizzazione per migliorare la qualità dell'esperienza utente è fondamentale per il successo a lungo termine di qualsiasi sito sul web. Che tu sia 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 che intende fornire linee guida unificate per gli indicatori di qualità che sono essenziali per offrire un'esperienza utente ottimale 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 riscontrato difficoltà a stare al passo con l'abbondanza di strumenti e metriche.
I proprietari di siti non devono essere esperti di rendimento per comprendere la qualità dell'esperienza offerta ai propri utenti. L'iniziativa Web Vitals mira a semplificare il panorama e aiutare i siti a concentrarsi sulle metriche più importanti, ovvero i Segnali web essenziali.
Segnali web essenziali
Le metriche Core Web Vitals sono il sottoinsieme di Web Vitals che si applica a tutte le pagine web, devono essere misurate da tutti i proprietari dei siti e verranno visualizzate in tutti gli strumenti Google. Ciascuno dei Core Web Vitals rappresenta un aspetto distinto dell'esperienza utente, è misurabile sul campo e riflette l'esperienza reale di un risultato incentrato sull'utente fondamentale.
Le metriche che compongono Core Web Vitals evolveranno nel tempo. L'attuale insieme si concentra 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, la metrica LCP dovrebbe avvenire entro 2,5 secondi dal primo caricamento 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.
- CLS (Cumulative Layout Shift): misura la stabilità visiva. Per offrire una buona esperienza utente, le pagine devono mantenere una CLS pari o inferiore a 0,1.
Per assicurarti di raggiungere il target consigliato per queste metriche per la maggior parte degli utenti, una buona soglia da misurare è il 75° percentile dei caricamenti di pagine, segmentati per dispositivi mobili e computer.
Gli strumenti che valutano la conformità a Core Web Vitals devono considerare una pagina superata se soddisfa gli obiettivi consigliati al 75° percentile per tutte e tre le metriche di Core Web Vitals.
Lifecycle
Le metriche del canale Core Web Vitals attraversano 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 in fase di modifiche significative a seconda dei test e dei feedback della community.
- Le metriche in attesa sono i Core Web Vitals futuri che hanno superato la fase di test e feedback e hanno una tempistica ben definita per diventare stabili.
- Le metriche stabili sono l'attuale insieme di Core Web Vitals che Chrome considera essenziali per offrire esperienze utente ottimali.
I Core Web Vitals si trovano nelle seguenti fasi del ciclo di vita:
Sperimentale
Quando una metrica viene sviluppata inizialmente ed entra nell'ecosistema, è considerata una metrica sperimentale.
Lo scopo della fase sperimentale è valutare l'idoneità di una metrica, innanzitutto esplorando il problema da risolvere ed eventualmente eseguendo l'iterazione su ciò che le metriche precedenti potrebbero non aver risolto. Ad esempio, Interazione con Next Paint (INP) è stata inizialmente sviluppata come metrica sperimentale per risolvere i problemi di prestazioni in fase di runtime presenti sul web in modo più completo rispetto a First Input Delay (FID).
La fase sperimentale del ciclo di vita di Core Web Vitals ha anche lo scopo di offrire flessibilità nello sviluppo di una metrica identificando i bug e persino esplorando le 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 l'INP è stato promosso dallo stato sperimentale a quello in attesa con l'intento di ritirare definitivamente l'ID cliente.
Le metriche in attesa vengono conservate 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, poiché sempre più sviluppatori iniziano a usare la metrica.
Stabile
Quando una metrica candidata Core Web Vital viene finalizzata, diventa una metrica stabile. In questo caso, la metrica può diventare un Core Web Vital.
Le metriche stabili sono supportate attivamente e possono essere soggette a correzioni di bug e modifiche alla definizione. Le metriche stabili di Core Web Vitals non cambieranno più di una volta all'anno. Qualsiasi modifica a un Core Web Vital verrà comunicata chiaramente nella documentazione ufficiale della metrica, nonché nel relativo log delle modifiche. I Segnali web essenziali sono inclusi anche in qualsiasi valutazione.
Strumenti per misurare e generare report dei Core Web Vitals
Google ritiene che i Core Web Vitals siano fondamentali per tutte le esperienze web. Di conseguenza, si impegna a mostrare queste metriche in tutti i suoi strumenti più utilizzati. Le sezioni seguenti descrivono in dettaglio gli strumenti che supportano Core Web Vitals.
Strumenti sul campo per misurare i Core Web Vitals
Il Report sull'esperienza utente di Chrome raccoglie dati anonimizzati di misurazione degli utenti reali per ogni Core Web Vital. Questi dati consentono ai proprietari di siti di valutare rapidamente il rendimento senza dover eseguire manualmente l'analisi sulle loro pagine e sono alla base di 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 API web standard.
Il modo più semplice per misurare tutti i Core Web Vitals è utilizzare la libreria JavaScript web-vitals, un piccolo wrapper pronto per la produzione che racchiude le API web sottostanti e misura ogni metrica in modo da corrispondere con precisione a come vengono registrate da tutti gli strumenti Google elencati in precedenza.
Con la libreria web-vitals, puoi misurare ogni metrica chiamando una singola funzione. Per informazioni dettagliate 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 in modo da utilizzare la libreria web-vitals per misurare e inviare i dati di Core Web Vitals a un endpoint di analisi, il passaggio successivo consiste nell'aggregare i dati e generare report su di essi per verificare se le tue pagine soddisfano le soglie consigliate per almeno il 75% delle visite alla pagina.
Sebbene alcuni fornitori di servizi di analisi supportino le metriche di Core Web Vitals, anche quelli che non lo fanno dovrebbero includere funzionalità di metriche personalizzate di base che consentono di misurare 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 su come misurare queste metriche utilizzando servizi di analisi di uso comune o i tuoi strumenti di analisi interni, consulta le best practice per la misurazione di Web Vitals sul campo.
Strumenti di laboratorio per misurare i Core Web Vitals
Sebbene tutti i Core Web Vitals siano, in primo luogo, metriche sul campo, molti sono misurabili anche nel 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 rilevare le regressioni del rendimento prima che si verifichino.
Per misurare i Core Web Vitals in un ambiente controllato, puoi utilizzare i seguenti strumenti:
| LCP | INP | CLS | |
|---|---|---|---|
| Chrome DevTools | |||
| Lighthouse | (utilizza TBT) |
Sebbene la misurazione in laboratorio sia una parte essenziale per offrire esperienze straordinarie, non sostituisce la misurazione sul campo.
Le prestazioni di un sito possono variare sostanzialmente in base alle funzionalità del dispositivo di un utente, alle condizioni della rete, agli altri processi in esecuzione sul dispositivo e al modo in cui l'utente interagisce con la pagina. Infatti, ogni metrica di Core Web Vitals può avere il proprio punteggio influenzato dall'interazione dell'utente. Solo la misurazione sul campo è in grado di acquisire con precisione il quadro completo.
Consigli per migliorare i punteggi
Le seguenti guide offrono consigli specifici su come ottimizzare le tue pagine per ciascuno dei Core Web Vitals:
Esistono molti modi per migliorare i Core Web Vitals e ogni approccio presenta diversi livelli di impatto, pertinenza e facilità d'uso per ogni situazione. Consulta I modi più efficaci per migliorare Core Web Vitals per ricevere un breve elenco dei migliori consigli del team di Chrome.
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 contribuire a acquisire una parte più ampia dell'esperienza o a 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 a LCP (tempi di risposta del server lenti o risorse che bloccano il rendering, rispettivamente).
Analogamente, una metrica come il Total Blocking Time (TBT) è fondamentale per rilevare e diagnosticare potenziali problemi di interattività che possono influire sull'INP. Tuttavia, non fa parte dell'insieme di Core Web Vitals perché non sono misurabili sul campo né riflettono un risultato incentrato sull'utente.
Modifiche a Web Vitals
Web Vitals e Core Web Vitals rappresentano gli indicatori migliori a disposizione degli sviluppatori per misurare la qualità dell'esperienza sul web, ma non sono perfetti e si prevede che in futuro verranno apportati miglioramenti o aggiunte.
I Core Web Vitals sono pertinenti per tutte le pagine web e sono presenti negli strumenti Google pertinenti. Le modifiche a queste metriche avranno un impatto ad ampio raggio; per questo motivo, gli sviluppatori devono aspettarsi che le definizioni e le soglie dei Core Web Vitals siano stabili e che gli aggiornamenti abbiano preavviso e una cadenza annuale prevedibile.
Gli altri Web Vitals sono spesso specifici per contesto o strumento e potrebbero essere più sperimentali rispetto ai Core Web Vitals. Di conseguenza, le relative definizioni e soglie potrebbero cambiare con maggiore frequenza.
Per tutti i Web Vitals, le modifiche saranno chiaramente documentate in questo CHANGELOG pubblico.