Core Web Vitals: cosa sono e come puoi testarli?

Ultimo aggiornamento il 17 settembre 2020

Chiunque gestisca un sito Web sa quanto sia importante che funzioni nel modo più fluido possibile. I siti ritardati e mal costruiti non riescono a trasmettere un senso di affidabilità e credibilità. L'utente web medio deve sentirsi in questo modo prima di sentirsi abbastanza a suo agio da utilizzare il tuo sito. Per aiutare te e gli sviluppatori web di tutto il mondo a migliorare i loro siti, Google ha recentemente rilasciato Core Web Vitals. Questo è un nuovo programma che fornisce una serie di metriche per aiutare a determinare la qualità e la potenziale esperienza dell'utente su un sito. In questo articolo, analizzeremo le metriche principali, o dati vitali web, e come puoi testarle per determinare come sta il tuo sito.

Quali sono i principali Web Vital?

Quando si determina la qualità del servizio fornito da un sito, ci sono alcune metriche che è necessario rivedere per sviluppare un quadro chiaro. Google lo ha ristretto per lo sviluppatore web medio. Hanno determinato che tre metriche sono i componenti principali con cui un sito può essere valutato. Queste tre metriche sono Largest Contentful Paint (LCP), First Input Delay (FID) e Cumulative Layout Shift (CLS).

Il più grande Contentful Paint è una misura della velocità di caricamento della tua pagina web. Segna il punto in cui è stato misurato il contenuto principale della pagina in questione. Questa è la misura del tempo impiegato per caricare il blocco di testo (o immagine) più grande della tua pagina. In generale, vorresti che la pittura di contenuto più grande sul tuo sito non impiegasse più di 2,5 secondi per caricarsi. Certamente, questo è un punto che vale la pena considerare durante il web design .

Il primo ritardo di input misura il comportamento del tuo sito quando gli utenti interagiscono con la pagina. Ciò comporta cose come la reattività. Ogni volta che un utente fa clic sulla tua pagina, il tempo impiegato dal sito Web per rispondere a quel clic viene misurato dal primo ritardo di input. Di solito, qualsiasi cosa più veloce di 100 ms va bene, ma dopodiché ti consigliamo di apportare alcuni miglioramenti.

Infine, Cumulative Layout Shift misura la stabilità degli elementi visivi sulla tua pagina. È una misura quantificabile della quantità di spostamento imprevisto del layout della pagina. Per ciascuna di queste tre metriche, ti consigliamo di raggiungere il 75° percentile o migliore di tutti i caricamenti di pagina. Questo sarebbe considerato "passante" per quanto riguarda queste metriche.

Come misurare i vitali web principali?

Abbiamo stabilito che queste metriche possono essere importanti quanto una campagna SEO ben eseguita, quindi come vengono misurate? Poiché Google considera i principali elementi vitali del Web la spina dorsale dell'esperienza utente, si è impegnata a fornire strumenti per misurarli. Di seguito sono riportati tre modi in cui è possibile misurare le prestazioni dei dati vitali web principali del proprio sito.

Attraverso il rapporto sull'esperienza utente di Chrome, Google raccoglie esperienze utente reali e anonime per ogni fondamentale importanza del Web. Ciò è utile perché significa che le applicazioni esterne non devono essere configurate in anticipo. In effetti, Google se ne è già occupato in anticipo. Inoltre, strumenti come PageSpeed ​​Insights funzionano sulla stessa piattaforma, il che significa che puoi utilizzarli immediatamente.

Sebbene questo metodo sia abbastanza semplice e richieda poco input da parte tua, l'analisi offerta da questo metodo non è molto dettagliata. Trascura, tra le altre cose, l'inclusione della telemetria per visualizzazione di pagina. Ciò aiuterebbe qualcuno a diagnosticare con precisione eventuali problemi potenziali con una pagina web.

Utilizzo di JavaScript

In alternativa, è possibile utilizzare JavaScript per ottenere un controllo sui principali elementi vitali del Web. Il modo più semplice per iniziare è semplicemente richiamare la voce di JavaScript nella sua libreria per i web-vitals. Ciò fornisce API Web pronte per l'uso che sono accurate. Inoltre, il Chrome Web Store offre un'estensione, chiamata Web Vitals Chrome Extension , che ti consente di segnalare ogni web vitale senza dover scrivere alcun codice.

Infine, è possibile utilizzare strumenti di laboratorio per misurare ciascuno degli elementi vitali principali del Web. Ciò è particolarmente utile per coloro che desiderano farsi un'idea delle prestazioni di un sito prima del suo lancio. Ciò non significa, tuttavia, che le metriche sul campo possano essere ignorate. L'esperienza di un utente è influenzata da un'ampia varietà di fattori. Gli esempi includono condizioni di rete e programmi aggiuntivi che possono essere eseguiti dall'utente. Pertanto, è nel tuo interesse sfruttare i test degli strumenti sul campo una volta che il tuo sito è attivo e funzionante. È un modo semplice per assicurarsi che tutto sia in ordine.

Altre metriche da sapere

Sebbene gli elementi vitali web principali coperti siano i più importanti da considerare, ci sono altre preziose metriche di qualità web da considerare. Dopo tutto, è auspicabile qualsiasi miglioramento delle prestazioni del sito e del godimento di un sito da parte dei tuoi clienti. Queste misure spesso aiutano a mettere a punto una diagnosi di una pagina web. Alcuni di questi includono misure come Time to First Byte, che è importante per l'esperienza di caricamento degli utenti sul tuo sito, e Time to Interactive, che è utile se soffri di un problema con l'interattività sul tuo sito. Entrambi, sebbene importanti, non sono misurabili sul campo e, di conseguenza, non hanno lo stesso status dei principali elementi vitali del web.

Che succede con Lighthouse 6.0?

Se sei interessato a valutare la qualità del tuo sito, uno di questi strumenti che può aiutarti a iniziare se stai cercando una diagnosi rapida è Lighthouse. Questo programma di controllo è automatizzato ed è disponibile in Chrome DevTools come estensione disponibile tramite il Chrome Store o come modulo nodo e CLI.

L'ultima versione di Lighthouse incorpora l'enfasi di Google sui principali elementi vitali del Web come FDI e CLS e fornisce una valutazione delle prestazioni del tuo sito rispetto a tali metriche. Ora, il punteggio delle prestazioni fornito da Lighthouse per quanto riguarda il tuo sito è stato aggiornato per includere questi nuovi modelli, il che significa che il vecchio modello ponderato è stato adattato per assomigliare a questo ora:

Questi nuovi cambiamenti hanno effetti tangibili sulle valutazioni delle prestazioni dei siti. Solo il 20% dei siti ha riscontrato un miglioramento dei punteggi di valutazione, mentre circa il cinquanta percento di tutti i siti ha registrato un calo dei punteggi di cinque punti o superiore con la scala ponderata di recente implementazione.

Strumenti di sviluppo di Chrome

Chrome DevTools, come Lighthouse, ha subito alcune nuove modifiche per servire meglio gli sviluppatori web. La principale tra queste modifiche è la correzione della scheda dei problemi, che nelle precedenti iterazioni presentava problemi frequenti e disordine. Inoltre, il pannello delle prestazioni ora registra il tempo di blocco totale nella parte inferiore della pagina dopo aver registrato le prestazioni di carico. Questo strumento misura per quanto tempo una pagina sembra essere funzionale ma al momento non è effettivamente utilizzabile a causa del blocco del thread principale da parte di JavaScript, impedendo all'input dell'utente di agire sulla pagina. Infine, Chrome UX Dashboard ora suddivide le pagine in base ai contenuti web vitali, consentendo agli utenti di confrontare le prestazioni del proprio sito con quelle della concorrenza, nonché del settore nel suo insieme.

I Core Web Vitals, in breve, sono misure dell'esperienza utente su una pagina web. Man mano che le cose si evolvono, è probabile che cambi in modi sia minori che significativi. Mentre ottimizzi la tua pagina web, cerca di mantenere sani gli elementi vitali web di base e sarai sicuro di mantenere soddisfatti coloro che passano dal tuo sito.