Новый модульный инструмент, позволяющий автоматически собирать данные о производительности из различных источников.
Что такое AutoWebPerf (AWP)?
AutoWebPerf (AWP) — это модульный инструмент, позволяющий автоматически собирать данные о производительности из различных источников. В настоящее время существует множество инструментов для измерения производительности веб-сайтов в различных условиях ( лабораторные и полевые ), таких как Chrome UX Report, PageSpeed Insights или WebPageTest. AWP предлагает интеграцию с различными инструментами аудита с простой настройкой, что позволяет постоянно отслеживать производительность сайта в одном месте.
Выпуск рекомендаций Web Vitals означает, что тщательный и активный мониторинг веб-страниц становится все более важным. Инженеры, создавшие этот инструмент, годами проводили аудиты производительности и разработали AWP для автоматизации ручной, повторяющейся и трудоемкой части своей повседневной работы. Сегодня AWP достиг уровня зрелости и готов к широкому распространению, так что каждый может извлечь выгоду из предоставляемой им автоматизации.
Инструмент доступен в общедоступном репозитории AutoWebPerf на GitHub.
Для чего нужна система AWP?
Хотя существует множество инструментов и API для мониторинга производительности веб-страниц, большинство из них предоставляют данные, измеренные в определенный момент времени. Для адекватного мониторинга веб-сайта и поддержания хорошей производительности ключевых страниц рекомендуется постоянно измерять основные показатели веб-инфраструктуры с течением времени и отслеживать тенденции.
AWP упрощает этот процесс, предоставляя механизм и готовые интеграции API, которые можно программно настроить для автоматизации повторяющихся запросов к различным API мониторинга производительности.
Например, с помощью AWP вы можете настроить ежедневное тестирование на главной странице для сбора полевых данных из API CrUX и лабораторных данных из отчета 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 Sheets, и записать результаты в 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
Наряду с непрерывным измерением основных показателей веб-безопасности (Core Web Vitals), важно уметь оценивать тенденции и выявлять потенциальные регрессии с помощью метрик реальных пользователей (RUM) или данных отчета Chrome UX Report (CrUX), собранных AWP. Обратите внимание, что отчет Chrome UX Report (CrUX) представляет собой агрегированные данные за 28 дней, поэтому рекомендуется использовать собственные данные RUM вместе с CrUX, чтобы быстрее выявлять регрессии.
Data Studio — это бесплатный инструмент визуализации, в который можно легко загружать метрики производительности и строить графики тенденций. Например, приведенные ниже временные ряды показывают основные показатели веб-стабильности (Core Web Vitals) на основе данных отчета Chrome UX Report. Один из графиков показывает увеличение кумулятивного смещения макета (Cumulative Layout Shift) за последние недели, что означает ухудшение стабильности макета для определенных страниц. В этом случае следует уделить приоритетное внимание анализу основных проблем этих страниц.
Чтобы упростить весь процесс от сбора данных до их визуализации, вы можете запустить AWP со списком URL-адресов для автоматического экспорта результатов в Google Таблицы с помощью следующей команды:
PSI_APIKEY=<YOUR_KEY> SHEETS_APIKEY=<YOUR_KEY> ./awp run sheets:<SheetID> csv:output.csv
После сбора ежедневных показателей в электронной таблице вы можете создать панель мониторинга Data Studio, которая загружает данные непосредственно из электронной таблицы и отображает тенденции в виде временного ряда. Подробные инструкции по настройке AWP с использованием электронных таблиц в качестве источника данных для визуализации в Data Studio см. в разделе «Коннектор API Google Spreadsheets».
Что дальше?
AWP предоставляет простой и интегрированный способ минимизировать усилия по настройке конвейера непрерывного мониторинга для измерения основных показателей веб-производительности и других метрик производительности. На данный момент AWP охватывает наиболее распространенные сценарии использования и в будущем будет расширяться за счет добавления новых функций для решения других задач.
Подробнее можно узнать в репозитории AutoWebPerf .