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

1. Hinweis

In diesem Codelab erfährst du, wie du die Core Web Vitals einer Webseite mit der web-vitals-JavaScript-Bibliothek messen kannst.

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

Core Web Vitals umfasst die folgenden drei Messwerte, die für alle Webseiten gelten und wichtige Einblicke in die Nutzererfahrung bieten:

  • Largest Contentful Paint (LCP) Hiermit wird die Ladeleistung gemessen.Die Aktualisierung sollte innerhalb von 2,5 Sekunden nach dem Ladebeginn erfolgen.
  • First Input Delay (FID): Misst Interaktivität und sollte innerhalb von 100 Millisekunden erfolgen.
  • Cumulative Layout Shift (CLS) Messen Sie die visuelle Stabilität und sollten innerhalb von 0,1 liegen.

Vorbereitung

Aufgabe

  • Füge die Webseite web-vitals zu einer Webseite hinzu.
  • Die Web Vitals-Informationen in den Google Chrome-Entwicklertools analysieren.
  • Optional: Sie können die Core Web Vitals der Webseite an Google Analytics senden.

Voraussetzungen

  • Ein Texteditor deiner Wahl, wie z. B. Sublime Text oder Visual Studio Code
  • Einen Chromium-basierten Webbrowser, z. B. 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 zu einer Webseite hinzufügen

  1. Erstelle im Texteditor eine web-vitals-test.html-Datei und gib dann den folgenden HTML-Code 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>

Durch diesen Code wird die Webseite erstellt, die Sie für dieses Codelab verwenden.

  1. Geben Sie im HTML-Code-Element <body> nach dem zweiten Element <p> dieses Modulskript ein und speichern Sie die Datei:

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>

In diesem Modulskript wird die web-vitals-Bibliothek aus einem Content Delivery Network geladen. Die Datei sieht jetzt so aus:

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>

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

3. Web Vitals-Informationen in den Google Chrome-Entwicklertools analysieren

  1. Öffnen Sie die gespeicherte Datei in Ihrem Webbrowser.
  2. Klicken Sie mit der rechten Maustaste auf die Webseite und dann im Dialogfeld auf Prüfen.
  3. Klicken Sie im Bereich Google Chrome-Entwicklertools auf den Tab Console und wählen Sie Konsoleneinstellungen 6a9a7d8992edcd2c aus und klicken Sie auf Protokoll beibehalten. Mit dieser Einstellung wird sichergestellt, dass die Protokolle beim Aktualisieren der Webseite beibehalten werden.

74044d63a2f32916

  1. Klicken Sie auf den Tab Netzwerk, dann auf den Erweiterungspfeil c5262a3662ee288c.png im Drosselungsmenü und wählen Sie Langsames 3G aus. Mit dieser Einstellung wird eine langsame Netzwerkverbindung simuliert.

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

  1. Gehen Sie zurück zum Tab Konsole und klicken Sie auf eine beliebige Stelle der Webseite. Die LCP- und FID-Messwerte werden auf dem Tab Konsole ausgedruckt.

Tab „Konsole“, nachdem die LCP- und FID-Messwerte gedruckt wurden

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

Tab „Konsole“ nach dem CLS-Messwert

  1. Gehen Sie wieder zum Tab Netzwerk, klicken Sie auf den Pfeil zum Maximieren c5262a3662ee288c.png des Drop-down-Menüs und wählen Sie Schnelles 3G aus. Mit dieser Einstellung wird eine schnelle Netzwerkverbindung simuliert.
  2. Wechseln Sie zurück zum Tab Console (Konsole) und klicken Sie auf eine beliebige Stelle der Webseite.Die LCP- und FID-Messwerte werden noch einmal auf dem Tab Console ausgegeben, wurden aber von vornherein verbessert.

Tab „Konsole“, nachdem die LCP- und FID-Messwerte wieder ausgedruckt werden

  1. Aktualisiere die Webseite. Der CLS-Messwert wird noch einmal auf dem Tab Konsole ausgegeben, aber gegenüber dem vorherigen wurde es verbessert.

Tab „Konsole“: Der CLS-Messwert wird noch einmal ausgegeben.

4. Optional: Melden Sie die Webseite in Core Analytics an Google Analytics

  • Geben Sie in der Datei web-vitals-test.html nach der Importanweisung des Moduls die folgende sendToGoogleAnalytics()-Funktion 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,
  });
}

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

Dieser Code sendet die Core Web Vitals an Google Analytics, wo Sie sie im Bericht „Wichtigste Ereignisse“ abrufen können:

Der Bericht „Wichtigste Ereignisse“ in Google Analytics

Die Datei sieht jetzt so aus:

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

Glückwunsch! Du weißt jetzt, wie du mit der web-vitals-Bibliothek die Core Web Vitals einer Webseite messen und melden kannst.

Weitere Informationen