Misurare i Segnali web essenziali di una pagina web con la libreria web-vitals

1. Prima di iniziare

In questo codelab, imparerai a misurare le Core Web Vitals di una pagina web con la libreria JavaScript web-vitals.

Google consiglia di misurare le metriche di Segnali web essenziali e di farle rientrare nel 75° percentile dei caricamenti di pagina segmentati su dispositivi mobili e computer.

I Segnali web essenziali includono queste tre metriche, che si applicano a tutte le pagine web e forniscono informazioni fondamentali sull'esperienza utente:

  • Largest Contentful Paint (LCP). Misura il rendimento di caricamento e deve verificarsi entro 2,5 secondi dall'inizio del caricamento della pagina.
  • Interaction to Next Paint (INP). Misura l'interattività e deve verificarsi entro 200 millisecondi.
  • Cumulative Layout Shift (CLS). Misura la stabilità visiva e deve essere compreso tra 0 e 1.

Prerequisiti

Attività previste

  • Aggiungi la libreria web-vitals a una pagina web.
  • Misura i Segnali web essenziali della pagina web in Strumenti per sviluppatori di Google Chrome.
  • (Facoltativo) Genera report sui Core Web Vitals della pagina web in Google Analytics.

Che cosa ti serve

  • Un editor di testo a tua scelta, ad esempio Sublime Text o Visual Studio Code
  • Un browser web basato su Chromium, come Google Chrome o Microsoft Edge. Per ulteriori informazioni sul motivo per cui è necessario un browser web basato su Chromium, consulta Supporto del browser.

2. Aggiungere la libreria web-vitals a una pagina web

  1. Nell'editor di testo, crea un file web-vitals-test.html e inserisci questo codice HTML nel file:

web-vitals-test.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Web Vitals Test</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <p><img style="max-width: 360px" src="https://placekitten.com/g/3840/2160" alt="Kitten" /></p>
  <p>Text below image</p>
</body>
</html>

Questo codice crea la pagina web che utilizzi per questo codelab.

  1. Nell'elemento <body> del codice HTML dopo il secondo elemento <p>, inserisci questo script del modulo e poi salva il file:

web-vitals-test.html

<script type="module">
  import {onCLS, onINP, onLCP} from 'https://unpkg.com/web-vitals@4?module';

  onCLS(console.log);
  onINP(console.log);
  onLCP(console.log);
</script>

Questo script del modulo carica la libreria web-vitals da una rete CDN. Ora il file ha l'aspetto di questo snippet di codice:

web-vitals-test.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Web Vitals Test</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <p><img style="max-width: 360px" src="https://placekitten.com/g/3840/2160" alt="Kitten" /></p>
  <p>Text below image</p>

<script type="module">
  import {onCLS, onINP, onLCP} from 'https://unpkg.com/web-vitals@4?module';

  onCLS(console.log);
  onINP(console.log);
  onLCP(console.log);
</script>
</body>
</html>

Tutti i browser moderni supportano gli script dei moduli, che sono adatti al codice che utilizza solo nuove API, come quelle necessarie per misurare i Segnali web essenziali. I browser che non supportano i moduli o le API Core Web Vitals non tenteranno di caricare questo script.

3. Misurare i Segnali web essenziali della pagina web in Strumenti per sviluppatori di Google Chrome

  1. Nel browser web, apri il file salvato.
  2. Fai clic con il tasto destro del mouse sulla pagina web e poi fai clic su Ispeziona nella finestra di dialogo.
  3. Nel riquadro Strumenti per sviluppatori di Google Chrome, fai clic sulla scheda Console, quindi seleziona Impostazioni della console 6a9a7d8992edcd2c.png > Conserva log. Questa impostazione garantisce che i log vengano mantenuti quando aggiorni la pagina web.

74044d63a2f32916.png

  1. Fai clic sulla scheda Rete, poi fai clic sulla freccia di espansione c5262a3662ee288c.png del menu a discesa di limitazione e seleziona 3G lenta. Questa impostazione simula una connessione di rete lenta.

La scheda Rete con l&#39;impostazione 3G lenta selezionata nel menu a discesa Limitazione.

  1. Torna alla scheda Console e fai clic in un punto qualsiasi della pagina web. La metrica LCP viene stampata nella scheda Console.

La scheda Console dopo la stampa della metrica LCP.

  1. Aggiorna la pagina web. La metrica CLS viene stampata nella scheda Console.

La scheda Console dopo la stampa della metrica CLS.

  1. Torna alla scheda Rete, fai clic sulla freccia di espansione c5262a3662ee288c.png del menu a discesa di limitazione e seleziona 3G veloce. Questa impostazione simula una connessione di rete veloce.
  2. Torna alla scheda Console e fai clic in un punto qualsiasi della pagina web.La metrica LCP viene stampata di nuovo nella scheda Console, ma è migliorata rispetto a prima.

La scheda Console dopo la stampa della metrica LCP.

  1. Aggiorna la pagina web. La metrica CLS viene nuovamente stampata nella scheda Console, ma è migliorata rispetto a prima.

La scheda Console dopo la stampa della metrica CLS.

4. (Facoltativo) Segnala i Core Web Vitals della pagina web a Google Analytics

  • Nel file web-vitals-test.html, dopo l'istruzione di importazione dello script del modulo, inserisci questa funzione sendToGoogleAnalytics() e salva il file:

web-vitals-test.html

function sendToGoogleAnalytics({name, delta, id}) {
  // Assumes the global `gtag()` function exists, see:
  // https://developers.google.com/analytics/devguides/collection/gtagjs
  gtag('event', name, {
    event_category: 'Web Vitals',
    // Google Analytics metrics must be integers, so the value is rounded.
    // For CLS the value is first multiplied by 1000 for greater precision
    // (note: increase the multiplier for greater precision if needed).
    value: Math.round(name === 'CLS' ? delta * 1000 : delta),
    // The `id` value will be unique to the current page load. When sending
    // multiple values from the same page (e.g. for CLS), Google Analytics can
    // compute a total by grouping on this ID (note: requires `eventLabel` to
    // be a dimension in your report).
    event_label: id,
    // Use a non-interaction event to avoid affecting bounce rate.
    non_interaction: true,
  });
}

onCLS(sendToGoogleAnalytics);
onINP(sendToGoogleAnalytics);
onLCP(sendToGoogleAnalytics);

Questo codice invia i Core Web Vitals a Google Analytics, dove puoi visualizzarli nel report Eventi principali:

Il report Eventi principali in Google Analytics

Ora il file ha l'aspetto di questo snippet di codice:

web-vitals-test.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Web Vitals Test</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <p><img style="max-width: 360px" src="https://placekitten.com/g/3840/2160" alt="Kitten" /></p>
  <p>Text below image</p>

<script type="module">
  import {onCLS, onINP, onLCP} from 'https://unpkg.com/web-vitals@4?module';

  function sendToGoogleAnalytics({name, delta, id}) {
    // Assumes the global `gtag()` function exists, see:
    // https://developers.google.com/analytics/devguides/collection/gtagjs
    gtag('event', name, {
      event_category: 'Web Vitals',
      // Google Analytics metrics must be integers, so the value is rounded.
      // For CLS the value is first multiplied by 1000 for greater precision
      // (note: increase the multiplier for greater precision if needed).
      value: Math.round(name === 'CLS' ? delta * 1000 : delta),
      // The `id` value will be unique to the current page load. When sending
      // multiple values from the same page (e.g. for CLS), Google Analytics can
      // compute a total by grouping on this ID (note: requires `eventLabel` to
      // be a dimension in your report).
      event_label: id,
      // Use a non-interaction event to avoid affecting bounce rate.
      non_interaction: true,
    });
  }

  onCLS(sendToGoogleAnalytics);
  onINP(sendToGoogleAnalytics);
  onLCP(sendToGoogleAnalytics);
</script>
</body>
</html>

5. Complimenti

Complimenti! Hai imparato a misurare e generare report sui Segnali web essenziali di una pagina web con la libreria web-vitals.

Scopri di più