Автоматизация аудита с помощью AutoWebPerf

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

Antoine Bisch

Gilberto Cocchi

Jonathan Chen

Что такое 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 поставляется с рядом предварительно реализованных сборщиков и соединителей:

• Предварительно реализованные сборщики:
  • Крукс API
  • CruX BigQuery
  • API PageSpeed ​​Insights
  • Веб-пажетест API
• Предварительно реализованные разъемы:
  • 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 .