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

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

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

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

Доступ к маяку

Запустите Lighthouse, открыв страницу, которую вы хотите изучить, и нажав Ctrl/Cmd + Shift + I или выбрав Инструменты разработчика в меню Дополнительные инструменты . Перейдите на вкладку Lighthouse и нажмите кнопку «Анализ загрузки страницы ». Результаты отображаются через несколько секунд:

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

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

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

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

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

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

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

Краткое руководство по PageSpeed ​​Insights API

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

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

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

Вы можете изменить строку запроса 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=<campaign>
utm_source=<source>

Услуга бесплатна для нечастых запросов, но вам нужно будет подписаться на ключ Google API, если вы собираетесь запускать много тестов с одного и того же IP-адреса за короткий период. Ключ добавляется к 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-адреса или использовать инструмент для создания URL-адресов Google PageSpeed ​​API, если вам потребуется дополнительная помощь.

Результаты API PageSpeed ​​Insights в формате JSON

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

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

loadingОпыт

Это метрики, рассчитанные для загрузки страницы конечным пользователем. Он включает такую ​​информацию, как Core Web Vitals CUMULATIVE_LAYOUT_SHIFT_SCORE, FIRST_CONTENTFUL_PAINT_MS и FIRST_INPUT_DELAY_MS. Детали и значение «категории» возвращают БЫСТРО, СРЕДНИЙ, МЕДЛЕННЫЙ или НЕТ, если измерение не проводилось. Пример:

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

происхождениеЗагрузкаОпыт

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

маякРезультат

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

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

Затем следует раздел «аудит» со многими разделами, включая неиспользуемый javascript, неиспользуемые правила css, общий вес в байтах, перенаправления, размер dom, самый большой элемент содержимого, время отклика сервера, сеть. -запросы, кумулятивный-сдвиг-макета, первая-значимая-краска, эскизы-скриншотов и полностраничный-скриншот.

Большинство метрик аудита содержат раздел «подробности», который содержит такие факторы, как «общие байты экономии» и «общие метрики экономии», которые оценивают преимущества внедрения улучшения производительности.

Разделы «скриншот» полной страницы и эскизов содержат встроенные данные изображения base64.

Раздел «Метрики» предоставляет сводку всех метрик в массиве «элементов», например

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

За разделом «аудиты» следуют «категории», в которых представлены общие оценки 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» содержит список всех метрик и весов, используемых для расчета каждой оценки.

анализUTCTimestamp

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

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

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

• Средство форматирования и проверки JSON
• Форматировщик JSON
• 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 элемента»

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

Фиды Live API можно читать и обрабатывать во многих системах, включая Microsoft Excel. (Как ни странно, Google Таблицы не поддерживают потоки JSON без дополнительных плагинов или кода макроса. Он поддерживает XML.)

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

Нажмите Подключиться в следующем диалоговом окне и оставьте значение по умолчанию (Анонимный). Вы перейдете к инструменту Query Settings :

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

Нажмите значок «В таблицу» в верхней части контекстного меню.

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

Наконец, нажмите «Закрыть и загрузить» , чтобы отобразить оценку производительности в реальном времени в электронной таблице:

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

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

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

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

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

 // 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, для атрибута точки данных которого задано свойство API PageSpeed, например

<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; }

Варианты дальнейшего развития

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

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

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

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

Краткое содержание

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

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