Core Web Vitals einer Webseite mit der web-vitals-Bibliothek messen

1. Hinweis

In diesem Codelab erfahren Sie, wie Sie die Core Web Vitals einer Webseite mit der web-vitals-JavaScript-Bibliothek messen.

Google empfiehlt, Core Web Vitals zu messen und darauf zu achten, dass sie im 75. Perzentil der Seitenladevorgänge liegen, die nach Mobilgeräten und Computern segmentiert sind.

Core Web Vitals umfassen die folgenden drei Messwerte, die für alle Webseiten gelten und Ihnen wichtige Informationen zur Nutzerfreundlichkeit liefern:

  • Largest Contentful Paint (LCP) Misst die Ladeleistung und sollte innerhalb von 2,5 Sekunden nach Beginn des Seitenaufbaus erfolgen.
  • Interaction to Next Paint (INP) Sie messen die Interaktivität und sollten innerhalb von 200 Millisekunden erfolgen.
  • Cumulative Layout Shift (CLS) Misst die visuelle Stabilität und sollte innerhalb von 0,1 liegen.

Vorbereitung

Aufgabe

  • Fügen Sie die web-vitals-Bibliothek einer Webseite hinzu.
  • Messen Sie die Core Web Vitals der Webseite mit den Google Chrome-Entwicklertools.
  • Optional: Core Web Vitals der Webseite an Google Analytics senden

Voraussetzungen

  • Ein Texteditor Ihrer Wahl, z. B. Sublime Text oder Visual Studio Code
  • Ein Chromium-basierter Webbrowser wie Google Chrome oder Microsoft Edge (Weitere Informationen dazu, warum Sie einen Chromium-basierten Webbrowser benötigen, finden Sie unter Browserunterstützung.)

2. Web-Vitals-Bibliothek auf einer Webseite einfügen

  1. Erstellen Sie in Ihrem Texteditor eine web-vitals-test.html-Datei und geben Sie dann diesen HTML-Code in die Datei ein:

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>

Mit diesem Code wird die Webseite erstellt, die Sie für dieses Codelab verwenden.

  1. Fügen Sie im <body>-Element des HTML-Codes nach dem zweiten <p>-Element dieses Modulskript ein und speichern Sie die Datei:

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>

Mit diesem Modulskript wird die web-vitals-Bibliothek aus einem Content Delivery Network geladen. Ihre Datei sollte jetzt so aussehen:

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>

Alle modernen Browser unterstützen Modulskripts, die sich gut für Code eignen, in dem nur neue APIs verwendet werden, z. B. die APIs, die zum Messen der Core Web Vitals erforderlich sind. Browser, die keine Module oder die Core Web Vitals APIs unterstützen, versuchen nicht, dieses Skript zu laden.

3. Core Web Vitals der Webseite in den Google Chrome-Entwicklertools messen

  1. Öffnen Sie die gespeicherte Datei in Ihrem Webbrowser.
  2. Klicken Sie mit der rechten Maustaste auf die Webseite und dann im Dialogfeld auf Untersuchen.
  3. Klicken Sie im Bereich Google Chrome Developer Tools auf den Tab Konsole und wählen Sie dann Konsoleneinstellungen 6a9a7d8992edcd2c.png Log beibehalten aus. Durch diese Einstellung wird sichergestellt, dass Protokolle erhalten bleiben, wenn Sie die Webseite aktualisieren.

74044d63a2f32916.png

  1. Klicken Sie auf den Tab Netzwerk und dann auf den Aufwärtspfeil c5262a3662ee288c.png des Drop-down-Menüs für die Drosselung. Wählen Sie Langsame 3G-Verbindung aus. Mit dieser Einstellung wird eine langsame Netzwerkverbindung simuliert.

Der Tab „Netzwerk“ mit der Einstellung „Langsam 3G“ im Drop-down-Menü „Drosselung“.

  1. Kehren Sie zum Tab Console zurück und klicken Sie dann auf eine beliebige Stelle auf der Webseite. Der LCP-Messwert wird auf dem Tab Console ausgegeben.

Der Tab „Console“ nach dem Drucken des LCP-Messwerts.

  1. Aktualisiere die Webseite. Der CLS-Messwert wird auf dem Tab Console ausgegeben.

Der Tab „Console“ (Konsole), nachdem der CLS-Messwert ausgegeben wurde.

  1. Kehren Sie zum Tab Netzwerk zurück, klicken Sie auf den Aufklapppfeil c5262a3662ee288c.png des Drop-down-Menüs für die Drosselung und wählen Sie Schnelles 3G aus. Mit dieser Einstellung wird eine schnelle Netzwerkverbindung simuliert.
  2. Kehren Sie zum Tab Console zurück und klicken Sie dann auf eine beliebige Stelle auf der Webseite.Der LCP-Messwert wird noch einmal auf dem Tab Console ausgegeben, ist aber besser als zuvor.

Der Tab „Console“ (Konsole), nachdem der LCP-Messwert noch einmal ausgegeben wurde.

  1. Aktualisiere die Webseite. Der CLS-Messwert wird wieder auf dem Tab Console ausgegeben, hat sich aber im Vergleich zu vorher verbessert.

Der Tab „Console“ (Konsole), nachdem der CLS-Messwert noch einmal ausgegeben wurde.

4. Optional: Core Web Vitals der Webseite an Google Analytics senden

  • Geben Sie in der Datei web-vitals-test.html nach der Importanweisung des Modulskripts die Funktion sendToGoogleAnalytics() ein und speichern Sie die Datei:

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);

Mit diesem Code werden die Core Web Vitals an Google Analytics gesendet, wo Sie sie im Bericht „Wichtigste Ereignisse“ aufrufen können:

Bericht „Top-Ereignisse“ in Google Analytics

Ihre Datei sollte jetzt so aussehen:

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. Glückwunsch

Glückwunsch! Sie haben gelernt, wie Sie die Core Web Vitals einer Webseite mit der web-vitals-Bibliothek messen und Berichte dazu erstellen.

Weitere Informationen