Build with Gemini, our largest and most capable AI model. Get an API key.

Questa pagina è stata tradotta dall'API Cloud Translation.

Misurare i Segnali web essenziali di una pagina web con la raccolta dei vitali

1. Prima di iniziare

In questo codelab, imparerai a misurare i Segnali web essenziali di una pagina web con la libreria JavaScript di web-vitals.

Google consiglia di misurare le metriche di Segnali web essenziali in modo che rientrino nel 75° percentile dei caricamenti di pagine segmentati per i dispositivi mobili e desktop.

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

LCP (Largest Contentful Paint). Misura le prestazioni del caricamento e dovrebbe avvenire entro 2,5 secondi dall'inizio del caricamento della pagina.
FID (First Input Delay) Misura l'interattività e dovrebbe avvenire entro 100 millisecondi.
CLS (Cumulative Layout Shift). Misura la stabilità visiva e dovrebbe essere pari a 0,1.

Prerequisiti

Attività previste

Aggiungi la libreria web-vitals a una pagina web.
Misura le metriche di Segnali web essenziali negli Strumenti per sviluppatori di Google Chrome.
(Facoltativo) Segnala i Segnali web essenziali della pagina web a Google Analytics.

Che cosa ti serve

Un editor di testo a tua scelta, ad esempio Testo sublime o Codice di Studio
Un browser web basato su Chromium, ad esempio Google Chrome o Microsoft Edge. Per ulteriori informazioni sui motivi per cui è necessario un browser web basato su Chromium, consulta l'articolo Supporto del browser.

2. Aggiungere la libreria Web-vital a una pagina web

Nell'editor di testo, crea un file web-vitals-test.html, quindi 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.

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

web-vitals-test.html

<script type="module">
  import {getCLS, getFID, getLCP} from 'https://unpkg.com/web-vitals?module';

  getCLS(console.log);
  getFID(console.log);
  getLCP(console.log);
</script>

Questo script del modulo carica la libreria di web-vitals da una rete CDN (Content Delivery Network). A questo punto il file ha questo aspetto:

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 {getCLS, getFID, getLCP} from 'https://unpkg.com/web-vitals?module';

  getCLS(console.log);
  getFID(console.log);
  getLCP(console.log);
</script>
</body>
</html>

Tutti i browser moderni supportano gli script dei moduli, che sono adatti a codici che utilizzano solo nuove API, come quelle necessarie per misurare Segnali web essenziali. I browser che non supportano i moduli o le API Segnali web essenziali non tenteranno di caricare questo script.

3. Misurare le Segnali web essenziali nella pagina web negli Strumenti per sviluppatori di Google Chrome

Nel browser web, apri il file salvato.
Fai clic con il pulsante destro del mouse sulla pagina web e poi fai clic su Ispeziona nella finestra di dialogo.
Nel riquadro Strumenti per sviluppatori di Google Chrome, fai clic sulla scheda Console e seleziona Impostazioni console > Mantieni log. Questa impostazione assicura che i log rimangano disponibili quando aggiorni la pagina web.

Fai clic sulla scheda Rete, quindi sulla freccia di espansione del menu a discesa della limitazione e seleziona 3G lento. Questa impostazione simula una connessione di rete lenta.

La scheda Rete con l'impostazione 3G lenta selezionata nel menu a discesa Limitazione.

Torna alla scheda Console e fai clic su un punto qualsiasi della pagina web. Le metriche LCP e FID vengono stampate nella scheda Console.

La scheda Console dopo la stampa delle metriche LCP e FID.

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

La scheda Console dopo la stampa della metrica CLS.

Torna alla scheda Rete, quindi fai clic sulla freccia di espansione del menu a discesa della limitazione e seleziona 3G veloce. Questa impostazione simula una connessione di rete veloce.
Torna alla scheda Console e fai clic su un punto qualsiasi della pagina web.Le metriche LCP e FID vengono stampate di nuovo nella scheda Console, ma in precedenza sono migliorate.

La scheda Console dopo la stampa delle metriche LCP e FID.

Aggiorna la pagina web. La metrica CLS viene stampata di nuovo nella scheda Console, ma in precedenza è migliorata.

La scheda Console al termine della stampa della metrica CLS.

4. (Facoltativo) Segnala i Segnali web essenziali 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,
  });
}

getCLS(sendToGoogleAnalytics);
getFID(sendToGoogleAnalytics);
getLCP(sendToGoogleAnalytics);

Questo codice invia i Segnali web essenziali a Google Analytics, dove puoi visualizzarli nel rapporto Eventi principali:

Report Principali eventi in Google Analytics

A questo punto il file ha questo aspetto:

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 {getCLS, getFID, getLCP} from 'https://unpkg.com/web-vitals?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,
    });
  }

  getCLS(sendToGoogleAnalytics);
  getFID(sendToGoogleAnalytics);
  getLCP(sendToGoogleAnalytics);
</script>
</body>
</html>

5. Complimenti

Complimenti! Hai imparato a misurare e registrare i Segnali web essenziali di una pagina web con la libreria web-vitals.

Scopri di più

Segnali web