Pomiar podstawowych wskaźników internetowych za pomocą interfejsu PageSpeed Insights API i interfejsu Chrome UX (CrUX) Report API

1. Zanim zaczniesz

Z tego kursu dowiesz się, jak mierzyć podstawowe wskaźniki internetowe strony za pomocą interfejsów PageSpeed Insights API i CrUX API.

Oba interfejsy API zwracają identyczne dane dotyczące podstawowych wskaźników internetowych, ale każdy z nich ma inne zalety. Oprócz danych z pól pochodzących z raportu na temat użytkowania Chrome interfejs PageSpeed Insights API udostępnia też dane z Lighthouse, czyli automatycznego narzędzia Google typu open source, które przeprowadza audyty stron internetowych i rekomenduje sposoby ich ulepszenia. Interfejs CrUX API nie udostępnia danych Lighthouse, więc działa szybciej.

Google zaleca pomiar podstawowych wskaźników internetowych na urządzeniach mobilnych i komputerach. Podstawowe wskaźniki internetowe obejmują te 3 rodzaje danych, które mają zastosowanie do wszystkich stron internetowych i zapewniają kluczowe informacje o wrażeniach użytkowników:

  • Największe wyrenderowanie treści (LCP). Mierzy wydajność wczytywania i powinien wystąpić w ciągu 2,5 sekundy od rozpoczęcia wczytywania strony.
  • Opóźnienie przy pierwszym działaniu (FID). Mierzy interaktywność i powinna wystąpić w ciągu 100 milisekund.
  • Skumulowane przesunięcie układu (CLS). Mierzy stabilność wizualną i powinna mieścić się w zakresie 0,1.

Wymagania wstępne

Czego się nauczysz

  • Mierzenie podstawowych wskaźników internetowych strony za pomocą interfejsu PageSpeed Insights API.
  • Mierz podstawowe wskaźniki internetowe strony za pomocą interfejsu CrUX API.

Czego potrzebujesz

  • konto Google;
  • Dostęp do wiersza poleceń
  • wybrany edytor tekstu,
  • wybranej przeglądarki internetowej,
  • wybrany przez Ciebie adres URL (w tych ćwiczeniach z programowania używamy adresu https://developers.google.com);

2. Mierzenie podstawowych wskaźników internetowych za pomocą interfejsu PageSpeed Insights API

  1. Jeśli potrzebujesz danych o skuteczności wersji komputerowej adresu URL, poproś o nie interfejs PageSpeed Insights API i zapisz je w pliku response.txt:
curl -o response.txt "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=YOUR_URL&strategy=desktop"

Zastąp symbol zastępczy YOUR_URL swoim adresem URL.

Na końcu ciągu interfejsu API widać, że parametr zapytania strategy ma wartość desktop, co oznacza żądanie danych z komputera.

  1. Jeśli potrzebujesz danych o skuteczności wersji mobilnej adresu URL, poproś o nie interfejs PageSpeed Insights API i zapisz je w pliku response.txt:
curl -o response.txt "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=YOUR_URL&strategy=mobile"

Zastąp symbol zastępczy YOUR_URL swoim adresem URL.

Na końcu ciągu interfejsu API zobaczysz, że parametr zapytania strategy ma wartość mobile, co oznacza żądanie danych mobilnych.

  1. W edytorze tekstu otwórz plik response.txt, a następnie znajdź właściwość 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"
      },
  },

Usługa loadingExperience raportuje te informacje dla każdego z podstawowych wskaźników internetowych na podstawie adresu URL i typu urządzenia podanych w żądaniu interfejsu API:

  • Właściwość percentile wskazuje 75 centyl dla każdego rodzaju danych.
  • Właściwość distributions wskazuje odsetek wyświetleń strony, w przypadku których jakość każdego z rodzajów danych była dobra, wymagała poprawy lub była słaba.
  • Właściwość category klasyfikuje skuteczność każdego rodzaju danych jako niską, średnią lub wysoką.

Jeśli zawartość właściwości loadingExperience jest pusta, oznacza to, że adres URL nie ma wystarczającej ilości danych o skuteczności. Ten problem występuje zwykle podczas testowania stron internetowych o niskim natężeniu ruchu.

  1. Znajdź usługę 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"
      },
  },

Usługa originLoadingExperience raportuje zagregowane dane o wrażeniach użytkowników w całej domenie, a nie tylko w adresie URL. Zawiera te same informacje o każdym z podstawowych wskaźników internetowych, które zostały opisane w poprzednim kroku.

3. Mierzenie podstawowych wskaźników internetowych za pomocą interfejsu CrUX API

Uzyskiwanie klucza interfejsu API

  1. W konsoli Google Cloud wyszukaj Chrome UX, a następnie w menu kliknij Chrome UX Report API.
  2. Na stronie Chrome UX Report API kliknij Włącz i poczekaj, aż przycisk Włącz zmieni się w przycisk Zarządzaj. Następnie kliknij Zarządzaj.
  3. W menu nawigacyjnym kliknij Dane logowania, a potem wybierz Utwórz dane logowania > Klucz interfejsu API i skopiuj klucz interfejsu API.

Prześlij prośbę

  1. W wierszu poleceń poproś interfejs CrUX API o dane o skuteczności Twojego adresu URL i zapisz je w pliku response.txt:
curl -o response.txt 'https://chromeuxreport.googleapis.com/v1/records:queryRecord?key=YOUR_API_KEY' 'Content-Type: application/json' --data '{"url":"YOUR_URL"}'

Zastąp symbol zastępczy YOUR_API_KEY kluczem API, a symbol zastępczy YOUR_URL – adresem URL.

  1. W edytorze tekstu otwórz plik response.txt:

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

Odpowiedź interfejsu CrUX API zawiera te informacje o każdym z podstawowych wskaźników internetowych:

  • Właściwość histogram wskazuje odsetek użytkowników, którzy w przypadku danego rodzaju danych mieli wolne, średnie lub szybkie działanie.
  • Właściwość percentiles wskazuje 75 centyl obserwacji dla danego typu danych.

Jeśli zobaczysz komunikat o błędzie z informacją, że nie znaleziono danych, oznacza to, że dla danego adresu URL nie ma wystarczającej ilości danych o skuteczności. Ten problem występuje zwykle podczas testowania stron internetowych o niskim natężeniu ruchu.

4. Gratulacje

Gratulacje! Wskaźniki Core Web Vitals strony internetowej zostały zmierzone za pomocą interfejsów PageSpeed Insights API i CrUX API.

Dowiedz się więcej