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

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

Метрики производительности

Для оценки производительности страницы важно собирать ключевые метрики, которые отражают её скорость загрузки и взаимодействие с пользователем. Puppeteer позволяет взаимодействовать с Chrome DevTools Protocol, что дает доступ к подробной информации о производительности. Основные метрики, которые можно отслеживать с помощью Puppeteer, включают:

  • Navigation Timing API – предоставляет данные о времени, затраченном на различные этапы загрузки страницы.
  • Resource Timing API – позволяет получать информацию о времени загрузки различных ресурсов, таких как изображения, скрипты и стили.
  • Performance API – даёт доступ к более глубокой информации о производительности, включая данные о времени рендеринга и кадрировании страницы.

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

Puppeteer предоставляет функционал для получения метрик производительности через page.metrics(). Этот метод возвращает объект с различными метками, такими как:

  • Documents — количество DOM-элементов на странице.
  • Frames — количество фреймов на странице.
  • JS Heap — использование памяти JavaScript.

Для начала анализа производительности необходимо запустить Puppeteer, получить доступ к нужной странице и извлечь эти метрики.

Пример: 

const puppeteer = require(&

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

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

  // Получаем метрики производительности
  const metrics = await page.metrics();
  console.log(metrics);

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

Этот код собирает базовые метрики, которые могут быть полезны при анализе работы страницы. Однако для более глубокого анализа требуется использование Chrome DevTools Protocol.

Использование Performance API

Puppeteer предоставляет возможность интеграции с Chrome DevTools Protocol для сбора более детализированных метрик. Для этого нужно активировать соответствующие события, такие как performance.mark и performance.measure, которые позволяют отслеживать ключевые моменты жизненного цикла страницы, такие как начало и окончание загрузки, рендеринг или отображение элементов на странице.

Пример использования Performance API: 

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({ devtools: true });
  const page = await browser.newPage();

  await page.goto('https://example.com');
  
  // Запуск анализа производительности
  await page.evaluate(() => {
    window.performance.mark('start-load');
  });

  await page.waitForSelector('h1');  // Ожидание первого элемента

  await page.evaluate(() => {
    window.performance.mark('end-load');
    window.performance.measure('page-load', 'start-load', 'end-load');
  });

  // Получаем измерения производительности
  const performanceMetrics = await page.evaluate(() => {
    const measures = window.performance.getEntriesByType('measure');
    return measures.map(m => ({
      name: m.name,
      startTime: m.startTime,
      duration: m.duration
    }));
  });

  console.log(performanceMetrics);

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

В этом примере создается два маркера (start-load и end-load), которые определяют начало и конец загрузки страницы. Затем с помощью метода performance.measure производится измерение времени между этими двумя точками. Результаты анализа метрик выводятся в консоль.

Анализ времени загрузки страницы

Одним из самых важных аспектов в анализе производительности является измерение времени, необходимого для полной загрузки страницы. Puppeteer позволяет отслеживать время загрузки через Navigation Timing API, а также измерять время до первого рендеринга или появления первого контента.

Для измерения времени можно использовать метки, которые предоставляют данные о различных этапах загрузки:

  • DOMContentLoaded — момент, когда весь HTML был загружен и разобран.
  • load — момент, когда все ресурсы (изображения, скрипты, стили) были загружены.
  • first-contentful-paint (FCP) — момент, когда браузер отобразил первый визуальный элемент.

Пример: 

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  // Включаем события для получения метрик
  await page.goto('https://example.com');
  const performanceData = await page.evaluate(() => {
    const timing = window.performance.timing;
    const loadTime = timing.loadEventEnd - timing.navigationStart;
    const domContentLoaded = timing.domContentLoadedEventEnd - timing.navigationStart;
    const fcp = window.performance.getEntriesByName('first-contentful-paint')[0];
    
    return {
      loadTime,
      domContentLoaded,
      fcp: fcp ? fcp.startTime : null,
    };
  });

  console.log(performanceData);

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

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

Отслеживание ресурсов

Важно понимать, какие ресурсы на странице требуют наибольших затрат времени на загрузку. Puppeteer позволяет отслеживать время загрузки всех ресурсов через Resource Timing API. Это может быть полезно для определения, какие изображения, скрипты или стили тормозят загрузку страницы.

Пример: 

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

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

  const resourceTimings = await page.evaluate(() => {
    const resources = window.performance.getEntriesByType('resource');
    return resources.map(resource => ({
      name: resource.name,
      duration: resource.duration,
      transferSize: resource.transferSize
    }));
  });

  console.log(resourceTimings);

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

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

Оптимизация производительности

После получения метрик и их анализа важно приступить к оптимизации. Puppeteer может помочь выявить проблемные места, такие как слишком большие изображения, длительные запросы к серверу или медленно загружающиеся внешние ресурсы. Методы, такие как ленивые загрузки изображений, асинхронная загрузка скриптов и стилизация страницы для быстрого отображения контента, являются одними из ключевых методов оптимизации.

Использование Puppeteer для автоматизации тестов и мониторинга производительности помогает улучшить опыт пользователей и выявить области для улучшений.

Оглавление