Новый модульный инструмент, позволяющий автоматически собирать данные о производительности из нескольких источников.
Что такое AutoWebPerf (AWP)?
AutoWebPerf (AWP) — это модульный инструмент, позволяющий автоматически собирать данные о производительности из нескольких источников. В настоящее время существует множество инструментов для измерения производительности веб-сайта в различных областях ( лабораторных и полевых ), таких как Chrome UX Report, PageSpeed Insights или WebPageTest. AWP предлагает интеграцию с различными инструментами аудита с простой настройкой, поэтому вы можете постоянно отслеживать производительность сайта в одном месте.
Выпуск руководства Web Vitals означает, что тщательный и активный мониторинг веб-страниц становится все более важным. Инженеры, создавшие этот инструмент, годами проводили аудит производительности и создали AWP для автоматизации рутинной, повторяющейся и трудоемкой части своей повседневной деятельности. Сегодня AWP достиг уровня зрелости и готов к широкому распространению, чтобы каждый мог воспользоваться преимуществами автоматизации, которую он обеспечивает.
Инструмент доступен в общедоступном репозитории AutoWebPerf на GitHub.
Для чего нужен АВП?
Хотя для мониторинга производительности веб-страниц доступно несколько инструментов и API, большинство из них предоставляют данные, измеренные в определенное время. Чтобы адекватно отслеживать веб-сайт и поддерживать хорошую производительность ключевых страниц, рекомендуется постоянно измерять основные веб-показатели с течением времени и наблюдать за тенденциями.
AWP упрощает эту задачу, предоставляя механизм и готовые интеграции API, которые можно программно настроить для автоматизации повторяющихся запросов к различным API мониторинга производительности.
Например, с помощью AWP вы можете настроить ежедневный тест на своей домашней странице для сбора полевых данных из CrUX API и лабораторных данных из отчета Lighthouse из PageSpeed Insights . Эти данные можно записывать и хранить с течением времени, например, в Google Sheets , а затем визуализировать на панели инструментов Data Studio . AWP автоматизирует сложную часть всего процесса, что делает его отличным решением для отслеживания тенденций в лабораториях и на местах с течением времени. Более подробную информацию см. в разделе «Визуализация результатов аудита в Data Studio» ниже).
Обзор архитектуры
AWP — это модульная библиотека с тремя различными типами модулей:
- двигатель
- соединительные модули
- модули сбора
Движок берет список тестов из коннектора (например, из локального CSV-файла), проводит аудит производительности с помощью выбранных сборщиков (например, PageSpeed Insights) и записывает результаты в выходной коннектор (например, Google Sheets).
AWP поставляется с рядом предварительно реализованных сборщиков и соединителей:
- Предварительно реализованные сборщики:
- Предварительно реализованные разъемы:
- Google Таблицы
- JSON
- CSV-файл
Автоматизация аудита с помощью AWP
AWP автоматизирует аудит производительности с помощью предпочитаемых вами платформ аудита, таких как PageSpeed Insights , WebPageTest или CrUX API . AWP предлагает гибкость выбора, куда загружать список тестов и куда записывать результаты.
Например, вы можете запустить аудит списка тестов, хранящегося в Google Sheet, и записать результаты в файл CSV с помощью следующей команды:
PSI_APIKEY=<YOUR_KEY> SHEETS_APIKEY=<YOUR_KEY> ./awp run sheets:<SheetID> csv:output.csv
Регулярные аудиты
Вы можете проводить повторяющиеся проверки ежедневно, еженедельно или ежемесячно. Например, вы можете запускать ежедневный аудит для списка тестов, определенного в локальном JSON, как показано ниже:
{
"tests": [
{
"label": "web.dev",
"url": "https://web.dev",
"gatherer": "psi"
}
]
}
Приведенная ниже команда считывает список тестов аудита из локального файла JSON, запускает аудит на локальном компьютере, а затем выводит результаты в локальный файл CSV:
PSI_APIKEY=<YOUR_KEY> ./awp run json:tests.json csv:output.csv
Чтобы выполнять аудит каждый день в качестве фоновой службы непрерывно, вместо этого вы можете использовать команду ниже:
PSI_APIKEY=<YOUR_KEY> ./awp continue json:tests.json csv:output.csv
Альтернативно, вы можете настроить crontab в Unix-подобной среде для запуска AWP в качестве ежедневного задания cron:
0 0 * * * PSI_APIKEY=<YOUR_KEY> ./awp run json:tests.json csv:output.csv
Дополнительные способы автоматизации ежедневных аудитов и сбора результатов вы можете найти в репозитории AWP на GitHub .
Визуализация результатов аудита в Data Studio
Наряду с постоянным измерением основных веб-показателей важно иметь возможность оценивать тенденции и обнаруживать потенциальные регрессии с помощью реальных пользовательских показателей (RUM) или данных отчета Chrome UX Report (CrUX), собранных AWP. Обратите внимание, что отчет Chrome UX (CrUX) представляет собой 28-дневное скользящее агрегирование, поэтому рекомендуется также использовать ваши собственные данные RUM вместе с CrUX, чтобы вы могли раньше обнаружить регрессии.
Data Studio — это бесплатный инструмент визуализации, в который можно легко загружать показатели производительности и рисовать тенденции в виде диаграмм. Например, на диаграммах временных рядов ниже показаны основные веб-показатели на основе данных отчета Chrome UX. На одном из графиков показано увеличение совокупного сдвига макета за последние недели, что означает снижение стабильности макета для определенных страниц. В этом сценарии вам следует расставить приоритеты в анализе основных проблем этих страниц.
Чтобы упростить сквозной процесс от сбора данных до визуализации, вы можете запустить AWP со списком URL-адресов для автоматического экспорта результатов в Google Таблицы с помощью следующей команды:
PSI_APIKEY=<YOUR_KEY> SHEETS_APIKEY=<YOUR_KEY> ./awp run sheets:<SheetID> csv:output.csv
После сбора ежедневных показателей в электронной таблице вы можете создать панель управления Data Studio, которая загружает данные непосредственно из электронной таблицы и отображает тенденции в диаграмме временных рядов. Ознакомьтесь с соединителем API Google Spreadsheets API для получения подробных инструкций по настройке AWP с электронными таблицами в качестве источника данных для визуализации в Data Studio.
Что дальше?
AWP предоставляет простой и интегрированный способ свести к минимуму усилия по настройке конвейера непрерывного мониторинга для измерения основных веб-показателей и других показателей производительности. На данный момент AWP охватывает наиболее распространенные варианты использования и в будущем продолжит предоставлять больше функций для решения других вариантов использования.
Подробную информацию можно найти в репозитории AutoWebPerf .