Core Web Vitals mit der PSI API und der CrUX API messen

1. Hinweis

In diesem Codelab erfahren Sie, wie Sie eine Webseite mit Core Web Vitals mit der PageSpeed Insights (PSI) API und der Chrome UX Report API (CrUX) analysieren können.

Beide APIs geben identische Core Web Vitals-Daten zurück, aber jede API bietet unterschiedliche Vorteile. Neben CrUX-Daten aus der Praxis enthält die PSI API auch Lighthouse. Das ist ein automatisiertes Open-Source-Tool von Google, das Webseiten prüft und Verbesserungsvorschläge macht. Die CrUX API stellt Lighthouse-Daten bereit und wird daher schneller ausgeführt.

Google empfiehlt, die Core Web Vitals auf Mobilgeräten und Computern zu messen. 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

  • Messen Sie mit den PSI APIs die Core Web Vitals einer Webseite.
  • Mit der CrUX API eine Webseite mit Core Web Vitals analysieren

Voraussetzungen

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

2. Core Web Vitals mit der PSI API messen

  1. Wenn Sie die Leistungsdaten für die Desktopversion einer URL benötigen, führen Sie folgenden curl-Befehl aus, um die Daten von der PageSpeed Insights API anzufordern und in einer response.txt-Datei zu speichern:
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.

  1. Wenn du die Leistungsdaten für die mobile Version einer URL benötigst, setze den strategy-Abfrageparameter auf das Ergebnis mobile am Ende des API-Strings im Befehl im vorherigen Schritt:
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.

  1. Öffne im Texteditor die Datei response.txt und suche dann nach der Property loadingExperience:

Antwort.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"
      },
  },

Die Property loadingExperience meldet diese Informationen für jeden Core Web Vitals basierend auf der URL und dem Gerätetyp, die in der API-Anfrage angegeben sind:

  • Die Property percentile gibt das 75. Perzentil für jeden Messwert an.
  • Die Property distributions gibt den Prozentsatz der Seitenaufrufe an, die für jeden Messwert als gut, besser oder schlecht eingestuft wurden.
  • Mit der category-Property wird die Leistung jedes Messwerts als langsam, durchschnittlich oder schnell klassifiziert.

Wenn der Inhalt der loadingExperience-Property leer ist, sind für die URL nicht genügend Leistungsdaten verfügbar. Dieses Problem tritt normalerweise auf, wenn Sie Webseiten mit wenigen Zugriffen testen.

  1. Suche nach der Property originLoadingExperience:

Antwort.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"
      },
  },

Die Property originLoadingExperience erfasst die aggregierten Websitevarianten für den gesamten Ursprung und nicht nur für die URL. Sie enthalten für jeden Core Web Vitals die gleichen Informationen wie im vorherigen Schritt.

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 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, und wählen Sie dann Verwalten aus.
  3. Klicken Sie im Navigationsmenü auf Anmeldedaten, wählen Sie Anmeldedaten erstellen und verwalten aus und kopieren Sie den API-Schlüssel.

Antrag stellen

  1. Über die Befehlszeile können Sie Leistungsdaten für Ihre URL von der CrUX API anfordern und sie in einer response.txt-Datei speichern:
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 dann den Platzhalter YOUR_URL durch Ihre URL.

  1. Öffne im Texteditor die Datei response.txt:

Antwort.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 Antwort der CrUX API enthält folgende Informationen für jeden Core Web Vitals:

  • Die Property histogram gibt den Prozentsatz der Nutzer an, die einen bestimmten Messwert langsam, durchschnittlich oder schnell hatten.
  • Die Property percentiles gibt die 75. Perzentilerkennung für einen bestimmten Messwert an.

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

4. Glückwunsch

Das war's auch schon! Sie haben die Core Web Vitals einer Webseite mit der PSI API und der CrUX API gemessen.

Weitere Informationen