1. Прежде чем начать
В этой лабораторной работе вы узнаете, как измерить основные веб-жизненные показатели веб-страницы с помощью API PageSpeed Insights (PSI) и API Chrome UX Report (CrUX).
Оба API возвращают идентичные данные Core Web Vitals, но каждый API предлагает свои преимущества. В дополнение к полевым данным CrUX API PSI также предоставляет данные от Lighthouse — автоматизированного инструмента Google с открытым исходным кодом, который проверяет веб-страницы и дает рекомендации по их улучшению. API CrUX не предоставляет данные Lighthouse, поэтому выполняется быстрее.
Google рекомендует измерять Core Web Vitals на мобильных и настольных устройствах. Core Web Vitals включает эти три показателя, которые применяются ко всем веб-страницам и дают вам критическое представление о пользовательском опыте:
- Самая большая содержательная краска (LCP). Измеряет производительность загрузки и должно происходить в течение 2,5 секунд после начала загрузки страницы.
- Задержка первого ввода (FID). Измеряет интерактивность и должно происходить в течение 100 миллисекунд.
- Совокупный сдвиг макета (CLS). Измеряет визуальную стабильность и должен быть в пределах 0,1.
Предпосылки
- Статья о Web Vitals .
- Статья Определение пороговых значений метрик Core Web Vitals .
- Базовые знания о том, как использовать командную строку.
Что ты будешь делать
- Измеряйте Core Web Vitals веб-страницы с помощью PSI API.
- Измеряйте Core Web Vitals веб-страницы с помощью CrUX API.
Что вам понадобится
- Аккаунт Google
- Доступ к командной строке
- Текстовый редактор на ваш выбор
- Веб-браузер на ваш выбор
- URL-адрес по вашему выбору (в этой лаборатории кода используется https://developers.google.com .)
2. Измеряйте Core Web Vitals с помощью PSI API
- Если вам нужны данные о производительности для настольной версии URL-адреса, запустите эту команду
curl, чтобы запросить данные из API PageSpeed Insights и сохранить их в файлеresponse.txt:
curl -o response.txt "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=YOUR_URL&strategy=desktop"
Замените заполнитель YOUR_URL своим URL-адресом.
- Если вам нужны данные о производительности для мобильной версии URL-адреса, задайте для параметра запроса
strategyзначение дляmobileв конце строки API в команде, представленной на предыдущем шаге:
curl -o response.txt "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=YOUR_URL&strategy=mobile"
Замените заполнитель YOUR_URL своим URL-адресом.
- В текстовом редакторе откройте файл
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 сообщает эту информацию для каждого из Core Web Vitals на основе 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-адреса. Он предоставляет ту же информацию для каждого из Core Web Vitals, что и в предыдущем шаге.
3. Измеряйте Core Web Vitals с помощью CrUX API
Получить API-ключ
- В Google Cloud Console найдите
Chrome UX, а затем выберите Chrome UX Report API в раскрывающемся меню. - На странице Chrome UX Report API нажмите « Включить », а затем подождите, пока кнопка « Включить » не изменится на кнопку « Управление », и выберите « Управление» .
- В меню навигации нажмите « Учетные данные », затем выберите « Создать учетные данные» > «Ключ API» и скопируйте ключ API.
Сделать запрос
- Из командной строки запросите данные о производительности для вашего URL-адреса из CrUX API и сохраните их в файле
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-адресом.
- В текстовом редакторе откройте файл
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"
}
},
}
},
}
Ответ CrUX API предоставляет следующую информацию для каждого из основных веб-показателей:
- Свойство
histogramуказывает процент пользователей, которые работали медленно, в среднем или быстро для данной метрики. - Свойство
percentilesуказывает наблюдение 75-го процентиля для данной метрики.
Если вы видите сообщение об ошибке, в котором говорится, что данные не найдены, для данного URL-адреса недостаточно данных о производительности. Эта проблема обычно возникает при тестировании веб-страниц с низким трафиком.
4. Поздравления
Поздравляем! Вы измерили Core Web Vitals веб-страницы с помощью PSI API и CrUX API.