Performance на мобильных

Puppeteer предоставляет возможность эмулировать мобильные устройства, что критично при тестировании производительности мобильных версий сайтов. Основной инструмент для этого — метод page.emulate(), который принимает объект конфигурации устройства, включающий размеры экрана, коэффициент масштабирования (deviceScaleFactor), user agent и информацию о сенсорных событиях (hasTouch).

Пример настройки эмуляции iPhone 12: 

const puppeteer = require(&
const iPhone12 = puppeteer.devices['iPhone 12'];

(async () => {
    const browser = await puppeteer.launch({ headless: true });
    const page = await browser.newPage();
    await page.emulate(iPhone12);
    await page.goto('https://example.com');
    await browser.close();
})();

Ключевой момент: эмуляция устройства влияет не только на размеры окна, но и на обработку сенсорных событий, viewport и user agent. Без правильной эмуляции метрики производительности мобильной версии сайта могут быть некорректными.

Сбор и анализ производительности

Для оценки производительности важно использовать встроенные возможности Puppeteer для работы с Chrome DevTools Protocol (CDP). Методы page.metrics(), page.evaluate() и события Performance.getMetrics позволяют собирать детальные данные о загрузке страницы и рендеринге.

Пример получения метрик загрузки страницы: 

const metrics = await page.metrics();
console.log(metrics);

Основные метрики производительности для мобильных тестов:

  • JSHeapUsedSize / JSHeapTotalSize — использование памяти.
  • Nodes / LayoutCount — количество DOM-элементов и количество операций layout.
  • RecalcStyleCount — количество пересчетов CSS-стилей.
  • Timestamp — момент времени снятия метрики для синхронизации с событиями страницы.

Для более детального анализа используется команда page.evaluate() с вызовом performance.timing или performance.getEntries(): 

const perfEntries = await page.evaluate(() => {
    return performance.getEntriesByType('navigation');
});
console.log(perfEntries);

Вывод: такие данные помогают выявлять узкие места рендеринга, загрузки ресурсов и взаимодействия с DOM на мобильных устройствах.

Оптимизация времени загрузки

Puppeteer позволяет контролировать загрузку ресурсов через методы page.setRequestInterception(true) и события request/response. Это важно для имитации медленных сетей, типичных для мобильных пользователей.

Пример эмуляции медленного соединения: 

const slow3G = puppeteer.networkConditions['Slow 3G'];
await page.emulateNetworkConditions(slow3G);
await page.goto('https://example.com');

Проверка влияния оптимизаций:

  • Отключение лишних шрифтов и скриптов.
  • Использование lazy-loading для изображений.
  • Минификация JS и CSS.
  • Кэширование статических ресурсов.

Эти методы позволяют измерить реальный прирост производительности в условиях мобильной сети.

Снижение нагрузки на DOM и рендеринг

Проблемы производительности на мобильных устройствах часто связаны с большим количеством DOM-элементов, сложными стилями и анимациями. Puppeteer позволяет измерять нагрузку и проводить тесты изменений через Jav * aScript: 

const layoutCountBefore = await page.evaluate(() => window.performance.getEntriesByType('layout').length);
// выполнить изменения на странице
const layoutCountAfter = await page.evaluate(() => window.performance.getEntriesByType('layout').length);
console.log(`Layouts before: ${layoutCountBefore}, after: ${layoutCountAfter}`);

Рекомендации:

  • Использовать CSS contain для изоляции областей рендеринга.
  • Минимизировать количество повторных пересчетов стилей.
  • Избегать тяжелых анимаций и непрерывных изменений DOM.

Скриншоты и визуальное тестирование

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

await page.screenshot({ path: 'mobile_view.png', fullPage: true });

Совет: при тестировании мобильной версии делать скриншоты с реального viewport устройства, иначе визуальные метрики будут некорректны.

Интеграция с Lighthouse

Для комплексного анализа мобильной производительности Puppeteer можно сочетать с Lighthouse через Node.js API. Это позволяет автоматически получать Speed Index, First Contentful Paint, Time to Interactive и другие ключевые показатели.

Пример интеграции: 

const lighthouse = require('lighthouse');
const {URL} = require('url');

const browser = await puppeteer.launch({ headless: true });
const { port } = new URL(browser.wsEndpoint());
const result = await lighthouse('https://example.com', { port });
console.log(result.lhr.categories.performance.score);
await browser.close();

Использование Lighthouse вместе с Puppeteer дает полный стек анализа: эмуляция устройства, управление сетью, скриншоты и детальные метрики производительности.

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

Puppeteer позволяет создавать скрипты для автоматических нагрузочных тестов на мобильных устройствах:

  1. Эмуляция устройства и сети.
  2. Сбор метрик через performance.getEntries() и CDP.
  3. Визуальное подтверждение через скриншоты.
  4. Сравнение данных между версиями страниц.

Такой подход позволяет регулярно контролировать производительность мобильной версии сайта и интегрировать тесты в CI/CD.

Оглавление