Miglioramento Google Web Vitals
30 apr 2020 • Aggiornato il 21 lug 2020
Se ti serve una consulenza per il miglioramento dei risultati in termini di velocitè e, di converso, nella resa SEO del tuo sito, puoi contattarmi qui. In questa pagina troverete la spiegazione grossolana, da parte di Google, della nascita dei Core Web Vitals come criterio elettivo SEO. Ad oggi (2023) il parametro Interaction To Next Paint (INP) ssta per sostituire il FID.
Appare in: Web Vitals – Philip Walton L’
ottimizzazione della qualità dell’esperienza utente è la chiave per il successo a lungo termine di qualsiasi sito sul web. Che tu sia un imprenditore, un marketer o uno sviluppatore, Web Vitals può aiutarti a quantificare l’esperienza del tuo sito e identificare le opportunità di miglioramento.
Panoramica #
Web Vitals è un’iniziativa di Google per fornire una guida unificata per segnali di qualità essenziali per offrire un’ottima esperienza utente sul Web.
Google ha fornito una serie di strumenti nel corso degli anni per misurare e generare rapporti sulle prestazioni. 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 dei guru delle prestazioni per comprendere la qualità dell’esperienza che stanno offrendo ai propri utenti. L’iniziativa Web Vitals mira a semplificare il panorama e aiutare i siti a concentrarsi sulle metriche che contano di più, i Core Web Vitals.
Web Vitals #
principaliWeb Vitals principali sono il sottoinsieme di Web Vitals che si applicano a tutte le pagine web, devono essere misurati da tutti i proprietari di siti e verranno visualizzati in tutti gli strumenti di Google. Ciascuno dei Core Web Vitals rappresenta un aspetto distinto dell’esperienza utente, è misurabile sul campoe riflette l’esperienza del mondo reale di un risultato critico incentrato sull’utente .
Le metriche che compongono Core Web Vitals si evolveranno nel tempo. L’attuale set per il 2020 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 caricamento prestazioni di. Per fornire una buona esperienza utente, LCP dovrebbe avvenire entro 2,5 secondi dall’inizio del caricamento della pagina.
- First Input Delay (FID): misura l’ interattività. Per fornire una buona esperienza utente, le pagine dovrebbero avere un FID inferiore a 100 millisecondi.
- Cumulative Layout Shift (CLS): misura la stabilità visiva. Per fornire una buona esperienza utente, le pagine dovrebbero mantenere un CLS inferiore a 0,1.
Per ciascuna delle metriche di cui sopra, per assicurarti di raggiungere l’obiettivo consigliato per la maggior parte dei tuoi utenti, una buona soglia da misurare è il 75 ° percentile di caricamenti di pagina, segmentato su dispositivi mobili e desktop.
Gli strumenti che valutano la conformità di Core Web Vitals dovrebbero considerare il passaggio di una pagina se soddisfa gli obiettivi consigliati al 75 ° percentile per tutte le tre metriche precedenti.
Per saperne di più sulla ricerca e la metodologia alla base di questi consigli, vedere: Definizione delle soglie di metriche dei parametri vitali web fondamentali
Strumenti per misurare e segnalare i dati vitali web fondamentali #
Google ritiene che i dati vitali web fondamentali siano fondamentali per tutte le esperienze web. Di conseguenza, si impegna a far emergere queste metriche in tutti i suoi strumenti popolari. Le sezioni seguenti descrivono in dettaglio quali strumenti supportano i principali Web Vitals.
Strumenti sul campo per misurare i principaliweb #
Il rapporto sull’esperienza utente di Chrome dati vitaliraccoglie dati di misurazione anonimi e reali degli utenti per ciascun core web vitale. Questi dati consentono ai proprietari dei siti di valutare rapidamente le proprie prestazioni senza richiedere loro di strumentare manualmente le analisi sulle loro pagine e potenziano strumenti come PageSpeed Insightse ilSearch Console report Core Web Vitals di.
| LCP | FID | CLS | |
| Rapporto sull’esperienza utente diChrome | ✔ | ✔ | ✔ |
| PageSpeed Insights | ✔ | ✔ | ✔ |
| Search Console (rapporto Core Web Vitals) | ✔ | ✔ | ✔ |
Per indicazioni su come utilizzare questi strumenti e su quale strumento è adatto al tuo caso d’uso, consulta: Guida introduttiva misurazione deivitali web
datiI dati forniti dal rapporto 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 che è spesso necessaria per diagnosticare, monitorare e reagire rapidamente alle regressioni con precisione. Di conseguenza, consigliamo vivamente ai siti di impostare il proprio monitoraggio degli utenti reali.
Misurare i principali parametri vitali web in JavaScript #
Ciascuno dei principali web vitali può essere misurato in JavaScript utilizzando API web standard.
Il modo più semplice per misurare tutti i Core Web Vitals è utilizzare la web-vitals libreria JavaScript, un piccolo wrapper pronto per la produzione attorno alle API Web sottostanti che misura ogni metrica in un modo che corrisponda accuratamente a come vengono segnalati da tutti i Strumenti di Google elencati sopra.
Con la web-vitals libreria, misurare ogni metrica è semplice come chiamare una singola funzione (vedere la documentazione per l’completo utilizzo e i dell’API dettagli):
import {getCLS, getFID, getLCP} a partire dal “web-vitals”;
funzione sendToAnalytics(metrica) {
const body = JSON.stringificare(metrico);
// Usa `navigator.sendBeacon ()` se disponibile, tornando a `fetch ()`.
(navigator.sendBeacon && navigator.sendBeacon(‘/ analytics’, body)) ||
fetch(‘/ analytics’, {corpo, metodo: “POST”, keepalive: true});
}
getCLS(sendToAnalytics);
getFID(sendToAnalytics);
getLCP(sendToAnalytics);
Puoi anche generare rapporti su ciascuno dei principali Web Vitals senza scrivere alcun codice utilizzando l’ estensione Web Vitals per Chrome. Questa estensione utilizza la web-vitals libreriaper misurare ciascuna di queste metriche e mostrarle agli utenti mentre navigano sul Web.
Questa estensione può essere utile per comprendere le prestazioni dei tuoi siti, dei siti della concorrenza e del Web in generale.
| LCP | FID | CLS | |
| Web-vitals | ✔ | ✔ | ✔ |
| Estensione Web Vitals | ✔ | ✔ | ✔ |
In alternativa, gli sviluppatori che preferiscono misurare queste metriche direttamente tramite le API Web sottostanti possono fare riferimento a queste guide metriche per i dettagli di implementazione:
Per ulteriori indicazioni su come misurare queste metriche utilizzando i servizi di analisi più diffusi (oi propri strumenti di analisi interni), vedere: Best practice per la misurazione dei dati vitali sul campo
Strumenti di laboratorio per misurare i dati vitali fondamentali #
Mentre tutti i dati vitali principali I Web Vitals sono, prima di tutto, metriche sul campo, molte delle quali 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 Core Web Vitals in un ambiente di laboratorio:
| LCP | FID | CLS | |
| Chrome DevTools | ✔ | ✘ (usa TBT invece) | ✔ |
| Lighthouse | ✔ | ✘ (usa TBT invece) | ✔ |
Strumenti come Lighthouse che caricano pagine in un ambiente simulato senza un utente non possono misurare il FID (non c’è input dell’utente). Tuttavia, la metrica del tempo di blocco totale (TBT) è misurabile in laboratorio ed è un eccellente proxy per FID. Le ottimizzazioni delle prestazioni che migliorano il TBT in laboratorio dovrebbero migliorare il FID sul campo (vedere i consigli sulle prestazioni di seguito).
Sebbene la misurazione in laboratorio sia una parte essenziale per fornire grandi esperienze, non sostituisce la misurazione sul campo.
Le prestazioni di un sito possono variare notevolmente in base alle capacità del dispositivo dell’utente, alle condizioni di rete, agli altri processi in esecuzione sul dispositivo e al modo in cui interagiscono con la pagina. In effetti, ciascuna delle metriche di Core Web Vitals può avere il proprio punteggio influenzato dall’interazione dell’utente. Solo la misurazione sul campo può acquisire con precisione l’immagine completa.
Consigli per migliorare i tuoi punteggi #
Dopo aver misurato i principali parametri vitali del web 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 principali Web Vitals:
Altri Web Vitals #
Mentre i Core Web Vitals sono le metriche critiche per la comprensione e la fornitura di un’ottima esperienza utente, ci sono anche altre metriche vitali.
Questi altri Web Vitals spesso servono come metriche proxy o supplementari per Core Web Vitals, per aiutare a catturare 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 entrambi aspetti vitali dell’esperienza di caricamento e sono entrambi utili per diagnosticare problemi con LCP (tempi dilenti risposta del server o risorse di blocco del rendering, rispettivamente) .
Allo stesso modo, metriche come Total Blocking Time (TBT) e Time to Interactive (TTI) sono metriche di laboratorio fondamentali per rilevare e diagnosticare potenziali interattività problemi diche avranno un impatto sul FID. Tuttavia, non fanno parte del set Core Web Vitals perché non sono misurabili sul campo, né riflettono un incentrato sull’utente risultato.
Evolving Web Vitals #
Web Vitals e Core Web Vitals rappresentano i migliori segnali disponibili che gli sviluppatori hanno oggi per misurare la qualità dell’esperienza sul Web, ma questi segnali non sono perfetti e dovrebbero essere previsti miglioramenti o aggiunte futuri.
I principali elementi vitali del web sono rilevanti per tutte le pagine web e sono presenti negli strumenti Google pertinenti. Le modifiche a queste metriche avranno un impatto di vasta portata; in quanto tali, 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 del contesto o dello strumento e possono essere più sperimentali dei Core Web Vitals. In quanto tali, le loro definizioni e soglie possono cambiare con maggiore frequenza.
Per tutti i Web Vitals, le modifiche saranno chiaramente documentate in questopubblico CHANGELOG.
Dati Ultimo aggiornamento: 21 luglio 2020
