Pomiar podstawowych wskaźników internetowych za pomocą interfejsów PSI API i CrUX

Pomiar podstawowych wskaźników internetowych za pomocą interfejsów PSI API i CrUX

Informacje o tym ćwiczeniu (w Codelabs)

subjectOstatnia aktualizacja: maj 9, 2022
account_circleAutorzy: Rick Viscomi

1. Zanim zaczniesz

Z tego modułu ćwiczeń dowiesz się, jak mierzyć podstawowe wskaźniki internetowe na stronach za pomocą interfejsów PageSpeed Insights (PSI) i interfejsu Chrome UX Report (CrUX).

Oba interfejsy API zwracają te same Podstawowe wskaźniki internetowe, ale każdy z nich ma inne zalety. Oprócz danych z raportu CrUX z tego pola PSI API udostępnia też dane z Lighthouse – zautomatyzowanego narzędzia open source Google, które sprawdza strony internetowe i zaleca ich usprawnienie. Interfejs CrUX API nie udostępnia danych Lighthouse, dlatego działa szybciej.

Google zaleca pomiar podstawowych wskaźników internetowych na urządzeniach mobilnych i komputerach. Podstawowe wskaźniki internetowe obejmują 3 rodzaje danych, które mają zastosowanie do wszystkich stron internetowych i dostarczają istotnych informacji o wygodzie użytkowników:

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

Wymagania wstępne

Co chcesz zrobić

  • Pomiar podstawowych wskaźników internetowych dotyczących strony internetowej za pomocą interfejsu API PSI.
  • Mierzenie podstawowych wskaźników internetowych za pomocą interfejsu CrUX API.

Czego potrzebujesz

  • Konto Google
  • Dostęp do wiersza poleceń
  • dowolnego edytora tekstu.
  • Wybrana przeglądarka
  • Wybrany przez Ciebie adres URL (w tym ćwiczeniu z programu korzystasz ze strony https://developers.google.com).

2. Pomiar podstawowych wskaźników internetowych za pomocą interfejsu PSI API

  1. Jeśli potrzebujesz danych o wydajności komputerowej wersji adresu URL, uruchom to polecenie curl, aby pobrać dane z interfejsu PageSpeed Insights API i zapisać je w pliku response.txt:
curl -o response.txt "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=YOUR_URL&strategy=desktop"

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

  1. Jeśli potrzebujesz danych o wydajności mobilnej wersji adresu URL, ustaw parametr strategy w polu mobile na końcu ciągu API w poleceniu podanym w poprzednim kroku:
curl -o response.txt "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=YOUR_URL&strategy=mobile"

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

  1. W edytorze tekstu otwórz plik response.txt i znajdź właściwość loadingExperience:

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

Właściwość loadingExperience podaje te informacje dla wszystkich podstawowych wskaźników internetowych na podstawie adresu URL i typu urządzenia wskazanego w żądaniu interfejsu API:

  • Właściwość percentile wskazuje 75 centyl w przypadku każdego rodzaju danych.
  • Właściwość distributions wskazuje odsetek wyświetleń strony, które miały stan dobry, wymagają ulepszenia lub słabej jakości dla każdego rodzaju danych.
  • Właściwość category klasyfikuje skuteczność każdego rodzaju danych jako powolna, średnia lub szybka.

Jeśli zawartość właściwości loadingExperience jest pusta, oznacza to, że adres URL nie dysponuje wystarczającą ilością danych o skuteczności. Dzieje się tak zazwyczaj podczas testowania stron internetowych generujących mały ruch.

  1. Znajdź właściwość 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"
      },
  },

Właściwość originLoadingExperience raportuje zbiorcze doświadczenia dotyczące całego źródła, a nie tylko adresu URL. W przypadku każdego z podstawowych wskaźników internetowych dostępne są takie same informacje jak w poprzednim kroku.

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

Uzyskiwanie klucza interfejsu API

  1. W Google Cloud Console wyszukaj Chrome UX, a następnie wybierz z menu Chrome UX Report API.
  2. Na stronie Chrome UX Report API kliknij Włącz, a następnie zaczekaj, aż przycisk Włącz zmieni się na przycisk Zarządzaj i wybierz Zarządzaj.
  3. W menu nawigacyjnym kliknij Credentials (Dane logowania), a następnie wybierz Create Credentials > API key (Utwórz dane logowania – klucz interfejsu API) i skopiuj klucz interfejsu API.

Poproś o dostęp

  1. W wierszu poleceń poproś o dane o wydajności adresu URL z interfejsu CrUX API 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 obiekt zastępczy YOUR_API_KEY swoim kluczem interfejsu API, a obiekt YOUR_URL wstaw swoim adresem URL.

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

plik odpowiedzi.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 dotyczące każdego z podstawowych wskaźników internetowych:

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

Jeśli widzisz komunikat o błędzie informujący, że nie znaleziono danych, oznacza to, że dla danego adresu URL nie ma wystarczającej ilości danych o wydajności. Dzieje się tak zazwyczaj podczas testowania stron internetowych generujących mały ruch.

4. Gratulacje

Gratulacje! Podstawowe wskaźniki internetowe zostały zmierzone za pomocą interfejsu PSI API i CrUX.

Więcej informacji

bug_report Zgłoś pomyłkę