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, 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 linee guida unificate per gli indicatori di qualità essenziali per offrire un'esperienza utente ottimale sul web.
Nel corso degli anni, Google ha fornito una serie di strumenti per misurare il rendimento e generare report sul rendimento. Alcuni sviluppatori sono esperti nell'utilizzo di questi strumenti, mentre altri ritengono che l'abbondanza di strumenti e metriche sia difficile da tenere al passo.
I proprietari dei siti non devono essere esperti di prestazioni per comprendere la qualità dell'esperienza che offrono agli utenti. L'iniziativa Web Vitals ha lo scopo di semplificare il panorama e aiutare i siti a concentrarsi sulle metriche più importanti, il Core Web Vitals.
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 fondamentale incentrata sull'utente.
Le metriche che compongono i Core Web Vitals si evolveranno nel tempo. L'insieme attuale per il 2020 si concentra su tre aspetti dell'esperienza utente: caricamento, interattività e stabilità visiva e include le seguenti metriche (e le relative soglie):
- LCP (Largest Contentful Paint): misura il rendimento del caricamento. Per offrire una buona esperienza utente, la metrica LCP dovrebbe avvenire entro 2,5 secondi dal primo caricamento della pagina.
- Interazione con Next Paint (INP): misura l'interattività. Per offrire una buona esperienza utente, le pagine devono avere un INP di 200 millisecondi o inferiore.
- Cumulative Layout Shift (CLS): 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 pagina, segmentato per dispositivi mobili e computer.
Gli strumenti che valutano la conformità di Core Web Vitals dovrebbero considerare il superamento della pagina se soddisfa i target consigliati al 75° percentile per tutte e tre le metriche di Core Web Vitals.
Lifecycle
Le metriche sulla traccia Core Web Vitals passano attraverso un ciclo di vita costituito da tre fasi: sperimentale, in attesa e stabile.
Ogni fase è progettata per indicare agli sviluppatori come valutare ogni metrica:
- Le metriche sperimentali sono potenziali Core Web Vitals che potrebbero essere ancora oggetto di modifiche significative in base ai test e al feedback della community.
- Le metriche in attesa sono 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'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, prima esplorando il problema da risolvere ed eventualmente ripetere ciò che le metriche precedenti potrebbero non essere riuscite a risolvere. 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 mediante l'identificazione dei bug e persino l'esplorazione di modifiche alla definizione iniziale. È anche la fase in cui i feedback della community sono più importanti.
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 da sperimentale a in attesa con l'intento di ritirare il FID.
Le metriche in attesa vengono conservate in questa fase per almeno 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 a Core Web Vitals viene finalizzata, diventa una metrica stabile. In questo caso la metrica può diventare Segnale web essenziale.
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 metrica di Core Web Vitals verrà comunicata chiaramente nella documentazione ufficiale della metrica e nel log delle modifiche della metrica. Le eventuali valutazioni includono anche i Core Web Vitals.
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ù diffusi. Le sezioni seguenti descrivono nel 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 di misurazione degli utenti reali e anonimizzati per ogni Segnale web essenziale. Questi dati consentono ai proprietari di siti di valutare rapidamente le proprie prestazioni senza richiedere di instrumentare manualmente le analisi sulle loro pagine e sono alla base di strumenti come PageSpeed Insights e del report Segnali web essenziali di Search Console.
| LCP | INP | 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 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 per gli utenti reali.
Misura 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 piccolo wrapper pronto per la produzione attorno alle API web sottostanti che misura ogni metrica in modo che corrisponda con precisione a come viene riportata da tutti gli strumenti Google elencati in precedenza.
Con la libreria web-vitals, 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 in modo che utilizzi la libreria vitals web 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 i relativi report per verificare se le tue pagine raggiungono le soglie consigliate per almeno il 75% delle visite alle pagine.
Alcuni fornitori di analisi dati dispongono del supporto integrato per le metriche di Core Web Vitals, ma anche quelli che non lo richiedono devono includere funzionalità delle metriche personalizzate di base che consentono di misurare Core Web Vitals nel proprio strumento.
Un esempio è il report Web Vitals, che consente ai proprietari dei siti di misurare i Core Web Vitals tramite Google Analytics. Per indicazioni sulla misurazione di Core Web Vitals utilizzando altri strumenti di analisi, consulta le Best practice per la misurazione di Web Vitals sul campo.
Puoi anche generare report su ognuno dei Core Web Vitals senza scrivere alcun codice utilizzando l'estensione di Chrome Web Vitals. Questa estensione utilizza la libreria web-vitals per misurare ognuna 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 | |
|---|---|---|---|
| vital-web | |||
| Estensione Web Vitals |
Gli sviluppatori che preferiscono misurare direttamente queste metriche utilizzando le API web sottostanti possono 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 le best practice per la misurazione di Web Vitals sul campo.
Strumenti del lab 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.
Le misurazioni di laboratorio sono 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 Core Web Vitals in un ambiente di lab, si possono utilizzare i seguenti strumenti:
| LCP | INP | CLS | |
|---|---|---|---|
| Chrome DevTools | (utilizza invece TBT) | ||
| Faro | (utilizza invece TBT) |
Sebbene la misurazione di laboratorio sia una parte essenziale di un'esperienza ottimale, non può sostituire 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 tuoi punteggi
Le seguenti guide offrono consigli specifici su come ottimizzare le tue pagine per ciascuno dei Core Web Vitals:
Altri Web Vitals
Sebbene i Core Web Vitals siano le metriche fondamentali per comprendere e offrire un'esperienza utente ottimale, ne esistono altre di supporto.
Queste altre metriche possono servire da proxy, o come metriche supplementari per i tre Core Web Vitals, per acquisire una parte più ampia dell'esperienza o contribuire 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 entrambi utili per diagnosticare i problemi con LCP (rispettivamente tempi di risposta del server lenti o risorse di blocco della visualizzazione).
Analogamente, una metrica come Tempo di blocco totale (TBT) è una metrica di lab fondamentale per rilevare e diagnosticare i potenziali problemi di interattività che possono influire sull'INP. Tuttavia, non fa parte del set di Core Web Vitals perché non sono misurabili sul campo né riflettono un risultato incentrato sull'utente.
Modifiche a Web Vitals
Le metriche Web Vitals e Core Web Vitals rappresentano i migliori indicatori a disposizione degli sviluppatori per misurare la qualità dell'esperienza sul web, ma non sono perfetti e sono previsti miglioramenti o aggiunte futuri.
I Core Web Vitals sono pertinenti per tutte le pagine web e vengono presentati negli strumenti Google pertinenti. Le modifiche a queste metriche avranno un impatto ad ampio raggio; Di conseguenza, gli sviluppatori devono aspettarsi che le definizioni e le soglie dei Core Web Vitals siano stabili, mentre gli aggiornamenti devono avere 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 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.