Как использовать API PageSpeed Insights для мониторинга производительности страниц

Существуют инструменты, помогающие отслеживать производительность страниц и оценивать ваши улучшения. Одним из лучших является PageSpeed Insights. Он доступен как веб-приложение и как вкладка Lighthouse в DevTools в Chrome (эти же инструменты доступны в Edge, Opera, Brave и Vivaldi).

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

На WordPress работает более трети всех веб-сайтов, но на производительность влияют неэффективный хостинг, медленные темы и чрезмерная зависимость от плагинов. Большинство проблем можно решить, перейдя на хороший хостинг и используя передовые методы повышения производительности.

Accessing Lighthouse

Запустите Lighthouse, открыв страницу, которую вы хотите исследовать, и нажав Ctrl/Cmd + Shift + I или выбрав Developer Tools из More tools в меню. Переключитесь на вкладку Lighthouse и нажмите кнопку Analyse Page Load. Результаты будут показаны через несколько секунд:

Вы можете углубляться в проценты верхнего уровня, чтобы найти дополнительную информацию и подсказки, которые устраняют известные проблемы. Этот инструмент бесценен, но есть и недостатки:

• Вы должны вручную запускать прогон для каждой тестируемой страницы.
• Нелегко записывать, как факторы улучшались или ухудшались с течением времени.
• Нужно проверять много данных, и легко ошибиться.
• Технические детали предусмотрены для разработчиков. Это может оказаться непосильным для клиентов и менеджеров, которым нужен быстрый обзор прогресса.
• На работу Lighthouse может повлиять скорость локального устройства и сети, что может привести к ложным предположениям.

API PageSpeed Insights предоставляет способ решения этих проблем, чтобы тесты можно было автоматизировать, записывать и сравнивать.

Что такое API PageSpeed Insights?

Google предоставляет бесплатный REST API PageSpeed Insights, который возвращает данные в формате JSON, содержащие все метрики Lighthouse и многое другое. Он позволяет автоматизировать прогоны страниц, хранить полученные данные, просматривать изменения с течением времени и отображать точную информацию, которая вам нужна.

API PageSpeed Insights эмулирует то, как Google видит ваш сайт. Вы можете запускать отчет каждые несколько дней или каждый раз, когда выпускаете обновление производительности.

Результаты полезны, но не всегда отражают реальный пользовательский опыт. API производительности браузера – лучший вариант, если вы хотите отслеживать реальную производительность на всех устройствах и сетях пользователя.

Краткое описание API PageSpeed Insights

Скопируйте следующий адрес в свой веб-браузер и отредактируйте url, чтобы оценить производительность вашей страницы:

https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=https://www.yoursite.com/

Firefox идеально подходит, поскольку он имеет встроенный просмотрщик JSON, хотя в Chrome есть расширения, которые обеспечивают ту же функциональность. Ниже показан общий результат оценки производительности Lighthouse:

Вы можете изменить строку запроса URL API для своих собственных страниц и предпочтений. Единственным обязательным параметром является url, например

url=https://mysite.com/page1

По умолчанию запускается тест рабочего стола, но вы можете явно запросить его с помощью:

strategy=desktop

или переключиться на мобильный с помощью:

strategy=mobile

Запускаются только тесты производительности, если вы не укажете одну или несколько интересующих вас категорий:

category=performance
category=accessibility
category=best-practices
category=seo
category=pwa

Определенный язык может быть задан путем установки локали – например, французский:

locale=fr-FR

и детали кампании Google Analytics могут быть заданы с помощью:

utm_campaign=

utm_source=

Для нечастых запросов эта услуга бесплатна, но если вы собираетесь проводить много тестов с одного IP-адреса в течение короткого периода времени, вам потребуется зарегистрировать ключ Google API. Ключ добавляется к URL с помощью:

key=<api-key>.

Вы можете построить строку запроса URL, указав выбранные вами параметры, разделенные символами амперсанда (&). Следующий URL API тестирует страницу https://mysite.com/ с помощью мобильного устройства для оценки производительности и критериев доступности:

https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=https://mysite.com/&strategy=mobile&category=performance&category=accessibility

Вы можете создавать свои собственные URL-адреса или использовать инструмент Google PageSpeed API URL builder, если вам нужна дополнительная помощь.

Результаты PageSpeed Insights API JSON

Тесты обычно возвращают около 600 Кб данных в формате JSON в зависимости от выбранных категорий, количества активов на странице и сложности скриншотов (вложенных в формате base64).

Количество данных пугает, есть некоторое дублирование, а документация по результатам не всегда понятна. JSON разделен на четыре секции, как описано ниже.

loadingExperience

Это метрики, рассчитанные для опыта загрузки страницы конечным пользователем. Она включает такую информацию, как Core Web Vitals CUMULATIVE_LAYOUT_SHIFT_SCORE, FIRST_CONTENTFUL_PAINT_MS и FIRST_INPUT_DELAY_MS. Детали и значение “category” возвращают FAST, AVERAGE, SLOW или NONE, если измерения не проводились. Пример:

"loadingExperience": {
"metrics": {
"CUMULATIVE_LAYOUT_SHIFT_SCORE": {
"percentile": 0,
"distributions": [
{
"min": 0,
"max": 10,
"proportion": 0.970
},
{
"min": 10,
"max": 25,
"proportion": 0.017
},
{
"min": 25,
"proportion": 0.012
}
],
"category": "FAST"
},

originLoadingExperience

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

lighthouseResult

Это самый большой раздел, содержащий все метрики Lighthouse. В нем содержится информация о тесте:

• requestedUrl – URL, который вы запросили
• finalUrl – фактическая страница, проверенная после всех перенаправлений.
• lighthouseVersion – версия программного обеспечения
• fetchTime – время выполнения теста
• userAgent – строка агента пользователя браузера, использованного для теста
• среда – расширенная информация об агенте пользователя
• configSettings – настройки, переданные API

Далее следует раздел “аудиты”, содержащий множество разделов, включая неиспользуемый javascript, неиспользуемые-css-правила, общий байт-вес, редиректы, dom-size, самый большой контентный элемент, время отклика сервера, сетевые запросы, кумулятивный сдвиг раскладки, первый значимый рисунок, скриншоты-эскизы и скриншоты всей страницы.

Большинство метрик аудита предоставляют раздел “подробности”, который содержит такие факторы, как “overallSavingsBytes” и “overallSavingsMs”, оценивающие выгоду от внедрения улучшения производительности.

Разделы “скриншоты” на всю страницу и миниатюры содержат встроенные данные изображения base64.

Раздел “метрики” содержит сводку всех метрик в массиве “items”, например.

"metrics": {
"id": "metrics",
"title": "Metrics",
"description": "Collects all available metrics.",
"score": null,
"scoreDisplayMode": "informative",
"details": {
"type": "debugdata",
"items": [{
"observedFirstVisualChange": 234,
"observedFirstContentfulPaint": 284,
"interactive": 278,
"observedFirstPaintTs": 1579728174422,
"observedDomContentLoaded": 314,
// ... etc ...
}]
},
"numericValue": 278,
"numericUnit": "millisecond"
},

За разделом “audits” следует раздел “categories”, который предоставляет общие оценки Lighthouse для выбранных категорий, переданных по URL API:

"categories": {
"performance": {
"id": "performance",
"title": "Performance",
"score": 0.97,
"auditRefs": [
//...

Оценка” – это число от 0 до 1, которое обычно отображается в процентах в отчетах Lighthouse. В общем, оценка от:

• от 0,9 до 1,0 – хорошо
• от 0,5 до менее 0,9 указывает на необходимость улучшений
• менее 0,5 – плохо и требует более срочного внимания

В разделе “AuditRefs” приведен список всех показателей и весовые коэффициенты, использованные для расчета каждого балла.

analysisUTCTimestamp

Наконец, сообщается время анализа. Оно должно быть идентично времени, показанному в lighthouseResult.fetchTime.

Полезные метрики результатов JSON

Я рекомендую сохранить и просмотреть результат JSON в текстовом редакторе. Некоторые из них имеют встроенные форматеры JSON или доступны в виде плагинов. В качестве альтернативы можно использовать бесплатные онлайн-инструменты, такие как:

• JSON Formatter & Validator
• JSON Formatter
• jsonformatter.io

Следующие метрики могут оказаться полезными. Не забудьте установить соответствующие параметры категорий в URL при необходимости.

Сводные метрики

Общая оценка от 0 до 1:

Метрики производительности

Они включают в себя оценки Core Web Vitals от 0 до 1:

Другие полезные показатели производительности включают:

Обычно можно получить фактические цифры и единицы измерения, например:

• lighthouseResult.audits.total-byte-weight.numericValue – общий размер страницы, например, 450123.
• lighthouseResult.audits.total-byte-weight.numericUnit – единицы, используемые для общего размера страницы, например, “байт”.

В качестве альтернативы, “displayValue” обычно содержит читаемое сообщение с цифрой и единицей измерения:

• lighthouseResult.audits.server-response-time.displayValue – сообщение о времени ответа, например, “Корневой документ занял 170 мс”.
• lighthouseResult.audits.dom-size.displayValue – сообщение о количестве элементов в DOM, например, “543 элемента”.

Создайте приборную панель производительности без кода

Живые API-каналы можно читать и обрабатывать во многих системах, включая Microsoft Excel. (Несколько странно, что Google Sheets не поддерживает JSON-каналы без дополнительных плагинов или макрокода. Однако он поддерживает XML.)

Чтобы импортировать общий показатель производительности в Excel, запустите новую таблицу, переключитесь на вкладку “Данные” и нажмите “Из Интернета”. Введите URL-адрес API PageSpeed Insights и нажмите OK:

Нажмите Connect в следующем диалоговом окне и сохраните настройки по умолчанию (Anonymous). Вы перейдете к инструменту Настройки запроса:

Нажмите Запись справа от метрики результата маяка. Затем нажмите то же самое на категориях и производительности, чтобы просмотреть иерархию объектов JSON:

Щелкните значок Into Table (В таблицу) вверху из опций меню правой кнопки мыши.

Затем вы можете нажать стрелку фильтра в заголовке таблицы, чтобы удалить все, кроме оценки, прежде чем нажать OK:

Наконец, нажмите Close & Load (Закрыть и загрузить), чтобы отобразить результат работы в электронной таблице:

Аналогичный процесс можно проделать и для других интересующих вас показателей.

Создание приборной панели веб-производительности

Эта демонстрация Codepen представляет собой форму, в которую можно ввести URL-адрес и выбрать настольный или мобильный анализ для получения результатов.

Код создает URL PageSpeed Insights, вызывает API, а затем отображает различные результаты в сводной таблице, которую можно просмотреть быстрее, чем стандартный отчет Lighthouse:

Асинхронная функция startCheck() вызывается, когда форма отправлена. Она отменяет событие submit и скрывает предыдущие результаты:

// make API request
async function startCheck(e) {
e.preventDefault();
show(resultTable, false);
show(status);
show(error, false);

Затем он конструирует apiURL из данных формы и отключает поля:

  const
form = e.target,
fields = form.firstElementChild,
data = new FormData(form),
qs = decodeURIComponent( new URLSearchParams(data).toString() ),
apiURL = form.action + '?' + qs;
fields.disabled = true;

Fetch API используется для вызова URL PageSpeed, получения ответа и разбора строки JSON в пригодный для использования объект JavaScript. Блок try/catch обеспечивает отслеживание неудач:

  try {
// call API and get result
const
response = await fetch(apiURL),
result = await response.json();

Объект результата передается в функцию showResult(). Она извлекает свойства и помещает их в таблицу результатов или в любой другой элемент HTML, у которого атрибут data-point установлен на свойство PageSpeed API, например.

<td data-point="lighthouseResult.categories.performance.score"></td>

Конец блока try:

   // output result
showResult(result);
show(status, false);
show(resultTable);
}

Наконец, блок catch обрабатывает ошибки, и поля формы снова включаются, чтобы можно было запускать дальнейшие тесты:

  catch(err) {
// API error
console.log(err);
show(status, false);
show(error);
}
fields.disabled = false;
}

Варианты дальнейшей разработки

Приведенный выше код примера извлекает результат из API PageSpeed Insights, когда вы его запрашиваете. Отчет является более настраиваемым, чем Lighthouse, но его выполнение остается ручным процессом.

Если вы планируете разработать собственную приборную панель, возможно, будет целесообразно создать небольшое приложение, которое вызывает API PageSpeed Insights и сохраняет полученный JSON в новой записи базы данных с проверенным URL и текущей датой/временем. Большинство баз данных имеют поддержку JSON, хотя MongoDB идеально подходит для этой задачи. Задание cron может вызывать ваше приложение по таймеру – возможно, один раз в день рано утром.

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

Если вы хотите создавать сложные отчеты со значительным количеством данных, предпочтительнее предварительно рассчитывать показатели раз в день в момент появления новых данных PageSpeed. В конце концов, вы же не хотите показать, как улучшается производительность, в отчете, на создание которого уходят минуты!

Итог

Инструмент Lighthouse в Chrome замечателен, но часто оценивать множество страниц – утомительное занятие. API PageSpeed Insights позволяет оценить производительность сайта с помощью программных методов. Преимущества:

• Тесты производительности можно автоматизировать. Вы не сможете забыть запустить тест.
• Результаты собираются на серверах Google, поэтому факторы скорости локального устройства и сети оказывают меньшее влияние.
• Метрики включают информацию, которая обычно недоступна в Lighthouse.
• Важные метрики можно записывать и отслеживать с течением времени, чтобы убедиться, что производительность страницы улучшается с каждым обновлением.
• Информация о производительности, доступности и SEO может отображаться в упрощенных отчетах, чтобы разработчики, менеджеры и клиенты могли получить ее с первого взгляда.

Похожие публикации:

Как использовать Google PageSpeed Insights: Стартовое руководство

Раздельное туннелирование VPN: Как использовать его для обеспечения максимальной безопасности и производительности

Как использовать SUCURI с WordPress для повышения производительности и безопасности?

Можно ли использовать ChatGPT бесплатно? Как максимально использовать бесплатный план

9 стратегий для мониторинга конкурентов

11 лучших инструментов мониторинга СМИ для управления брендом

Советы по наведению порядка на вашем сайте WordPress для повышения производительности

5 лучших инструментов мониторинга SEO для вашего сайта