Core Web Vitals mit der PageSpeed Insights API und der Chrome UX (CrUX) Report API messen

1. Hinweis

In diesem Codelab erfahren Sie, wie Sie die Core Web Vitals einer Webseite mit der PageSpeed Insights API und der CrUX API messen.

Beide APIs geben identische Core Web Vitals-Daten zurück, bieten aber jeweils unterschiedliche Vorteile. Zusätzlich zu den CrUX-Daten aus der Praxis liefert die PageSpeed Insights API auch Daten von Lighthouse. Das ist ein automatisiertes Open-Source-Tool von Google, mit dem Webseiten geprüft und Empfehlungen zur Verbesserung gegeben werden. Die CrUX API enthält keine Lighthouse-Daten und wird daher schneller ausgeführt.

Google empfiehlt, Core Web Vitals auf Mobilgeräten und Computern zu messen. 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.
  • First Input Delay (FID) Sie messen die Interaktivität und sollten innerhalb von 100 Millisekunden erfolgen.
  • Cumulative Layout Shift (CLS) Misst die visuelle Stabilität und sollte innerhalb von 0,1 liegen.

Vorbereitung

Lerninhalte

  • Mit der PageSpeed Insights API können Sie die Core Web Vitals einer Webseite messen.
  • Mit der CrUX API können Sie die Core Web Vitals einer Webseite messen.

Voraussetzungen

  • Ein Google-Konto
  • Zugriff auf eine Befehlszeile
  • Ein Texteditor Ihrer Wahl
  • Ein Webbrowser Ihrer Wahl
  • Eine URL Ihrer Wahl. In diesem Codelab wird https://developers.google.com verwendet.

2. Core Web Vitals mit der PageSpeed Insights API messen

  1. Wenn Sie die Leistungsdaten für die Desktopversion einer URL benötigen, fordern Sie die Daten über die PageSpeed Insights API an und speichern Sie sie in einer response.txt-Datei:
curl -o response.txt "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=YOUR_URL&strategy=desktop"

Ersetzen Sie den Platzhalter YOUR_URL durch Ihre URL.

Am Ende des API-Strings sehen Sie, dass der Abfrageparameter strategy auf den Wert desktop festgelegt ist. Damit wird die Anfrage für Desktopdaten angegeben.

  1. Wenn Sie die Leistungsdaten für die mobile Version einer URL benötigen, fordern Sie die Daten über die PageSpeed Insights API an und speichern Sie sie in einer response.txt-Datei:
curl -o response.txt "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=YOUR_URL&strategy=mobile"

Ersetzen Sie den Platzhalter YOUR_URL durch Ihre URL.

Am Ende des API-Strings sehen Sie, dass der Abfrageparameter strategy auf den Wert mobile festgelegt ist. Damit wird die Anfrage für mobile Daten angegeben.

  1. Öffnen Sie die Datei response.txt in Ihrem Texteditor und suchen Sie die Eigenschaft loadingExperience:

response.txt

   "loadingExperience": {
    "id": "https://developers.google.com/",
    "metrics": {
      "LARGEST_CONTENTFUL_PAINT_MS": {
        "percentile": 1714,
        "distributions": [
          {
            "min": 0,
            "max": 1000,
            "proportion": 0.49701860391159164
          },
          {
            "min": 1000,
            "max": 3000,
            "proportion": 0.40071951025600261
          },
          {
            "min": 3000,
            "proportion": 0.10226188583240581
          }
        ],
        "category": "AVERAGE"
      },
  },

Mit der Property loadingExperience werden diese Informationen für jeden der Core Web Vitals-Messwerte basierend auf der in der API-Anfrage angegebenen URL und dem Gerätetyp gemeldet:

  • Das Attribut percentile gibt das 75. Perzentil für jeden Messwert an.
  • Die distributions-Property gibt den Prozentsatz der Seitenaufrufe an, bei denen die Nutzererfahrung für die einzelnen Messwerte gut, optimierungsbedürftig oder schlecht war.
  • Mit der Eigenschaft category wird die Leistung der einzelnen Messwerte als langsam, durchschnittlich oder schnell klassifiziert.

Wenn die Inhalte der Property loadingExperience leer sind, sind für die URL nicht genügend Leistungsdaten verfügbar. Dieses Problem tritt normalerweise auf, wenn Sie Webseiten mit wenig Traffic testen.

  1. Suchen Sie das Attribut originLoadingExperience:

response.txt

  "originLoadingExperience": {
    "id": "https://developers.google.com",
    "metrics": {
      "LARGEST_CONTENTFUL_PAINT_MS": {
        "percentile": 1649,
        "distributions": [
          {
            "min": 0,
            "max": 1000,
            "proportion": 0.488838781075378
          },
          {
            "min": 1000,
            "max": 3000,
            "proportion": 0.42709617576692827
          },
          {
            "min": 3000,
            "proportion": 0.084065043157693739
          }
        ],
        "category": "AVERAGE"
      },
  },

Für die Property originLoadingExperience werden die zusammengefassten Erfahrungen für den gesamten Ursprung und nicht nur für die URL gemeldet. Er enthält dieselben Informationen für die einzelnen Core Web Vitals wie im vorherigen Schritt beschrieben.

3. Core Web Vitals mit der CrUX API messen

API-Schlüssel anfordern

  1. Suchen Sie in der Google Cloud Console nach Chrome UX und wählen Sie dann im Drop-down-Menü die Chrome UX Report API aus.
  2. Klicken Sie auf der Seite Chrome UX Report API auf Aktivieren und warten Sie, bis die Schaltfläche Aktivieren in Verwalten geändert wird. Klicken Sie dann auf Verwalten.
  3. Klicken Sie im Navigationsmenü auf Anmeldedaten und wählen Sie dann Anmeldedaten erstellen > API-Schlüssel aus. Kopieren Sie den API-Schlüssel.

Anfrage stellen

  1. Fordern Sie über die Befehlszeile Leistungsdaten für Ihre URL von der CrUX API an und speichern Sie sie in einer response.txt-Datei:
curl -o response.txt 'https://chromeuxreport.googleapis.com/v1/records:queryRecord?key=YOUR_API_KEY' 'Content-Type: application/json' --data '{"url":"YOUR_URL"}'

Ersetzen Sie den Platzhalter YOUR_API_KEY durch Ihren API-Schlüssel und den Platzhalter YOUR_URL durch Ihre URL.

  1. Öffnen Sie die Datei response.txt in Ihrem Texteditor:

response.txt

{
  "record": {
    "key": {
      "url": "https://developers.google.com/"
    },
    "metrics": {
      "cumulative_layout_shift": {
        "histogram": [
          {
            "start": "0.00",
            "end": "0.10",
            "density": 0.47784335300590036
          },
          {
            "start": "0.10",
            "end": "0.25",
            "density": 0.32379713914174157
          },
          {
            "start": "0.25",
            "density": 0.19835950785235579
          }
        ],
        "percentiles": {
          "p75": "0.23"
        }
      },
    }
  },
}

Die CrUX API-Antwort enthält diese Informationen für jeden der Core Web Vitals:

  • Die Eigenschaft histogram gibt den Prozentsatz der Nutzer an, die für einen bestimmten Messwert eine langsame, durchschnittliche oder schnelle Nutzererfahrung hatten.
  • Die Eigenschaft percentiles gibt die Beobachtung des 75. Perzentils für einen bestimmten Messwert an.

Wenn Sie eine Fehlermeldung sehen, dass die Daten nicht gefunden wurden, sind nicht genügend Leistungsdaten für die angegebene URL verfügbar. Dieses Problem tritt normalerweise auf, wenn Sie Webseiten mit wenig Traffic testen.

4. Glückwunsch

Glückwunsch! Sie haben die Core Web Vitals einer Webseite mit der PageSpeed Insights API und der CrUX API gemessen.

Weitere Informationen