Script di monitoraggio Web Vitals

Cosa sono i Web Vitals?

Web Vitals è una recente iniziativa di Google per fornire linee guida unificate per misurare gli elementi fondamentali della qualità per offrire un'esperienza utente perormante sui siti web.

Negli anni Google ha fornito una serie di strumenti per misurare e monitorare le prestazioni dei siti. Alcuni sviluppatori hanno esperienza nell'uso di questi strumenti, mentre altri hanno avuto difficoltà a tenere il passo con l'abbondanza di strumenti e nuove metriche.

L'iniziativa Web Vitals di Google mira a semplificare il panorama e aiutare gli sviluppatori a concentrarsi sulle metriche che contano di più, i Core Web Vitals.

Con Web Vitals, Google sta specificando una serie di 3 distinte metriche delle prestazioni per creare i propri "Core Web Vitals" che utilizza per valutare se il sito ha o meno una buona esperienza utente.

Google ha sempre sottolineato l'importanza della velocità delle piattaforme web sin dal loro inizio, quindi in questo nessuna sorpresa. Tuttavia, questa è la prima volta che indica in modo esplicito le metriche delle prestazioni utilizzate per guidare i loro algoritmi di ricerca.

Core Web Vitals

I Core Web Vitals si concentrano su tre semplici caratteristiche UX di una pagina:

1. Tempi di caricamento
2. Interattività (es. pagine responsive)
3. Stabilità nel caricamento layout di pagina

La matematica e gli algoritmi alla base di queste metriche può diventare complicata, ma la comprensione di ciò che stanno cercando di ottenere può aiutare a semplificare le cose.

Le metriche Core Web Vitals sono le seguenti:

• Largest Contentful Paint (LCP)
• First Input Delay (FID) / Total Blocking Time (TBT)
• Cumulative Layout Shift (CLS)

Questi Core Web Vitals sono metriche sia di risultato che una combinazione di altre metriche e possono essere utilizzate per fungere da indicatori principali per analizzare e monitorare l'esperienza dell'utente.

Largest Contentful Paint (LCP): misura le prestazioni di carico. Per fornire una buona esperienza utente, LCP dovrebbe verificarsi entro 2,5 secondi dal primo caricamento della pagina.

First Input Delay (FID): misura l'interattività. Per fornire una buona esperienza utente, le pagine devono avere un FID inferiore a 100 millisecondi.

Cumulative Layout Shift (CLS): misura la stabilità visiva. Per fornire una buona esperienza utente, le pagine devono mantenere un CLS inferiore a 0,1.

Altri Web Vitals

Questi altri Web Vital spesso fungono da proxy o metriche supplementari per i Core Web Vitals, per aiutare a catturare una parte più ampia dell'esperienza o per aiutare a diagnosticare un problema specifico.

Time To First Byte (TTFB): questo controllo ha esito negativo quando il browser attende più di 600 ms affinché il server risponda alla richiesta del documento principale. Agli utenti non piace quando le pagine impiegano molto tempo a caricarsi.

First Contentful Paint (FCP): misura il tempo da quando la pagina inizia il caricamento a quando qualsiasi parte del contenuto della pagina viene visualizzata sullo schermo.

Time To Interactive (TTI): misura il tempo da quando la pagina inizia il caricamento a quando le sue sottorisorse principali sono state caricate ed è in grado di rispondere in modo affidabile e rapido all'input dell'utente.

Total Blocking Time (TBT): misura la quantità di tempo totale tra First Contentful Paint (FCP) e Time to Interactive (TTI) in cui il thread principale è stato bloccato per un tempo sufficientemente lungo da impedire la reattività dell'input. Il thread principale è considerato "bloccato" ogni volta che c'è un'attività che viene eseguita per più di 50 millisecondi.

Inviare le metriche Web Vitals a Google Analytics

Google Analytics non supporta i rapporti sulle distribuzioni delle metriche in nessuno dei suoi rapporti integrati; tuttavia, se imposti un valore di dimensione univoco (in questo caso, l'ID metrica) su ogni istanza di metrica che invii a Google Analytics, l'inclusione di tale dimensione in un rapporto personalizzato ti consentirà di creare una distribuzione manualmente.

Gli eventi sono interazioni dell'utente con contenuti che possono essere misurati indipendentemente da una pagina web o dal caricamento dello schermo.

Un hit di evento include un valore per ogni componente e questi valori vengono visualizzati nei rapporti di Analytics: Categoria, Azione, Etichetta (facoltativa, ma consigliata) e Valore (facoltativo).

Con questo generatore di script per il tracciamento Core Veb Vitals, puoi inviare le metriche Web Vitals sul tuo account Google Analitycs.

Informazioni ed esempi

La tabella seguente fornisce una spiegazione dettagliata e un esempio di ciascuno dei parametri dell'evento. Per saperne di più, segui i link nella sezione Riferimenti e risorse a fondo pagina.