Эта страница переведена с помощью Cloud Translation API.

Измерение основных веб-показателей с помощью API PageSpeed Insights и API отчетов Chrome UX (CrUX)

1. Прежде чем начать

В этой лабораторной работе вы узнаете, как измерять основные веб-показатели веб-страницы с помощью API PageSpeed Insights и API CrUX.

Оба API возвращают идентичные данные Core Web Vitals, но каждый API предлагает свои преимущества. Помимо данных CrUX, собранных с мест, API PageSpeed Insights также предоставляет данные Lighthouse — автоматизированного инструмента Google с открытым исходным кодом, который проводит аудит веб-страниц и рекомендует способы их улучшения. API CrUX не предоставляет данные Lighthouse, поэтому он работает быстрее.

Google рекомендует измерять показатели Core Web Vitals на мобильных устройствах и компьютерах. Они включают в себя следующие три показателя, которые применяются ко всем веб-страницам и дают вам важнейшую информацию об опыте пользователя:

Отрисовка самого большого контента (LCP). Измеряет производительность загрузки и должна происходить в течение 2,5 секунд после начала загрузки страницы.
Задержка первого ввода (FID). Измеряет интерактивность и должна происходить в течение 100 миллисекунд.
Накопленное смещение макета (CLS). Измеряет визуальную стабильность и должно быть в пределах 0,1.

Предпосылки

Статья Web Vitals
Базовые знания командной строки
Статья «Определение пороговых значений основных показателей Web Vitals»

Чему вы научитесь

Измеряйте основные веб-показатели веб-страницы с помощью API PageSpeed Insights.
Измеряйте основные веб-показатели веб-страницы с помощью API CrUX.

Что вам понадобится

Аккаунт Google
Доступ к командной строке
Текстовый редактор по вашему выбору
Веб-браузер по вашему выбору
URL-адрес по вашему выбору (в этой лабораторной работе используется https://developers.google.com .)

2. Измеряйте основные веб-показатели с помощью API PageSpeed Insights

Если вам нужны данные о производительности для настольной версии URL-адреса, запросите данные из API PageSpeed Insights и сохраните их в файле response.txt :

curl -o response.txt "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=YOUR_URL&strategy=desktop"

Замените заполнитель YOUR_URL на свой URL-адрес.

Обратите внимание, что в конце строки API параметр запроса strategy имеет значение desktop , что указывает на запрос данных рабочего стола.

Если вам нужны данные о производительности мобильной версии URL-адреса, запросите данные из API PageSpeed Insights и сохраните их в файле response.txt :

curl -o response.txt "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=YOUR_URL&strategy=mobile"

Замените заполнитель YOUR_URL на свой URL-адрес.

Обратите внимание, что в конце строки API параметр запроса strategy имеет mobile значение, которое указывает на запрос мобильных данных.

В текстовом редакторе откройте файл response.txt и найдите свойство loadingExperience :

ответ.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"
      },
  },

Свойство loadingExperience сообщает эту информацию для каждого из основных веб-показателей на основе URL-адреса и типа устройства, указанных в запросе API:

Свойство percentile указывает 75-й процентиль для каждой метрики.
Свойство distributions указывает процент просмотров страниц, которые были оценены как хорошие , требующие улучшения или плохие по каждой метрике.
Свойство category классифицирует производительность каждой метрики как медленную, среднюю или быструю.

Если свойство loadingExperience пустое, у URL недостаточно данных о производительности. Эта проблема обычно возникает при тестировании веб-страниц с низкой посещаемостью.

Найдите свойство originLoadingExperience :

ответ.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"
      },
  },

Свойство originLoadingExperience предоставляет агрегированные данные по всему источнику, а не только по URL-адресу. Оно предоставляет ту же информацию по каждому из основных веб-показателей, что и в предыдущем шаге.

3. Измеряйте основные интернет-показатели с помощью API CrUX

Получить ключ API

В Google Cloud Console найдите Chrome UX , а затем в раскрывающемся меню выберите Chrome UX Report API .
На странице API отчетов Chrome UX нажмите Включить , а затем дождитесь, пока кнопка Включить не изменится на кнопку Управление , и выберите Управление .
В навигационном меню нажмите Учетные данные , затем выберите Создать учетные данные > Ключ API и скопируйте ключ API.

Сделать запрос

Из командной строки запросите данные о производительности вашего URL-адреса из API CrUX и сохраните их в файле 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"}'

Замените заполнитель YOUR_API_KEY на свой ключ API, а затем замените заполнитель YOUR_URL на свой URL-адрес.

Внимание: эта команда применима к macOS, Linux и Git BASH для Windows. Если на вашем компьютере установлена другая операционная система или командная строка, вам может потребоваться немного изменить команду. Например, если вы используете командную оболочку в Windows, необходимо использовать двойные кавычки вокруг параметров вместо одинарных. В этом случае перед существующими двойными кавычками нужно добавить косую черту, чтобы экранировать внутренние кавычки.

В текстовом редакторе откройте файл response.txt :

ответ.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"
        }
      },
    }
  },
}

Ответ API CrUX предоставляет следующую информацию для каждого из основных веб-показателей:

Свойство histogram указывает процент пользователей, у которых скорость загрузки по заданной метрике была медленной, средней или быстрой.
Свойство percentiles указывает 75-й процентиль наблюдения для заданной метрики.

Если вы видите сообщение об ошибке «Данные не найдены», это означает, что для указанного URL недостаточно данных о производительности. Эта проблема обычно возникает при тестировании веб-страниц с низкой посещаемостью.

4. Поздравления

Поздравляем! Вы измерили основные веб-показатели веб-страницы с помощью API PageSpeed Insights и API CrUX.

1. Прежде чем начать

Предпосылки

Чему вы научитесь

Что вам понадобится

2. Измеряйте основные веб-показатели с помощью API PageSpeed Insights

ответ.txt

ответ.txt

3. Измеряйте основные интернет-показатели с помощью API CrUX

Получить ключ API

Сделать запрос

ответ.txt

4. Поздравления

Узнать больше