Performance metrics

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

Настройка измерения производительности

Для начала необходимо включить сбор Performance Metrics через объект page:

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  const context = await browser.newContext();
  const page = await context.newPage();

  await page.goto('https://example.com');
  
  const metrics = await page.evaluate(() => JSON.stringify(window.performance.toJSON()));
  console.log(JSON.parse(metrics));

  await browser.close();
})();

Ключевой момент: window.performance.toJSON() возвращает набор стандартных браузерных метрик, включая время загрузки, обработку ресурсов, DNS lookup и TCP handshake. Эти данные являются базой для анализа производительности страницы.

Основные показатели

  1. Navigation Timing Позволяет измерять ключевые этапы загрузки страницы:

    • navigationStart — момент начала навигации.
    • responseStart — момент получения первого байта ответа.
    • domContentLoadedEventEnd — завершение обработки DOM.
    • loadEventEnd — окончание загрузки всех ресурсов.

  2. Resource Timing Используется для анализа загрузки отдельных ресурсов, таких как скрипты, стили и изображения:

    • fetchStart — начало запроса ресурса.
    • responseEnd — завершение получения ресурса.
    • duration — общее время загрузки ресурса.

  3. Paint Timing Отражает визуальную готовность страницы:

    • first-paint — первый визуальный рендер.
    • first-contentful-paint — отображение основного контента.

  4. Long Tasks и взаимодействие пользователя Позволяет выявлять блокировки основного потока:

    • Использование PerformanceObserver для отслеживания долгих задач (longtask).
    • Замер задержек при кликах, скролле и вводе данных.

Пример измерения First Contentful Paint и загрузки ресурсов

await page.goto('https://example.com');

const metrics = await page.evaluate(() => {
  const [fcp] = performance.getEntriesByName('first-contentful-paint');
  const resources = performance.getEntriesByType('resource');
  
  return {
    fcp: fcp.startTime,
    resourceCount: resources.length,
    resources: resources.map(r => ({
      name: r.name,
      duration: r.duration
    }))
  };
});

console.log(metrics);

Вывод: fcp.startTime показывает, через сколько миллисекунд после начала загрузки появился первый видимый контент. Анализ resources помогает выявить «тяжёлые» файлы, замедляющие страницу.

Сбор метрик через API Chrome DevTools Protocol (CDP)

Playwright поддерживает интеграцию с CDP для более детальной аналитики производительности:

const client = await context.newCDPSession(page);
await client.send('Performance.enable');
const performanceMetrics = await client.send('Performance.getMetrics');

console.log(performanceMetrics.metrics);

Преимущества CDP:

  • Доступ к расширенным показателям CPU, памяти и фреймрейта.
  • Возможность профилирования JavaScript.
  • Точное измерение времени блокировки основного потока.

Использование метрик в тестах

Метрики производительности можно интегрировать прямо в автоматические тесты:

test('Page load time should be under 2 seconds', async ({ page }) => {
  await page.goto('https://example.com');
  const metrics = await page.evaluate(() => performance.timing.loadEventEnd - performance.timing.navigationStart);
  expect(metrics).toBeLessThan(2000);
});

Особенности подхода:

  • Метрика loadEventEnd - navigationStart отражает полный цикл загрузки.
  • Можно создавать свои пороговые значения для SLA страниц.
  • Легко комбинировать с другими проверками UI.

Рекомендации по сбору метрик

  • Собирать данные на нескольких повторных прогонов для уменьшения случайных колебаний.
  • Использовать фильтрацию и агрегацию ресурсов для выявления узких мест.
  • Сохранять метрики в формате JSON для дальнейшего анализа и построения графиков.
  • Использовать PerformanceObserver для мониторинга долгих задач и измерения времени отклика.

Сравнение разных страниц и сценариев

Метрики Playwright позволяют проводить сравнительный анализ:

  • Сравнивать скорость загрузки мобильной и десктопной версии.
  • Анализировать производительность после оптимизации изображений или скриптов.
  • Сравнивать работу с кэшированием и без него.

Интеграция с CI/CD

Метрики можно автоматизировать на уровне CI/CD:

  • Генерация отчётов о производительности при каждом деплое.
  • Установка пороговых значений, при превышении которых билд помечается как «неудачный».
  • Визуализация исторических данных для отслеживания деградации производительности.

Метрики производительности в Playwright предоставляют детальную и гибкую платформу для мониторинга и анализа скорости работы веб-приложений, позволяя выявлять узкие места и гарантировать высокий уровень UX.

Оглавление