Puppeteer — это инструмент для управления браузером Chrome через DevTools протокол. Он предоставляет разработчикам возможность автоматизировать браузерные операции и тестировать веб-приложения с использованием JavaScript. Одной из важнейших сфер, где Puppeteer может быть полезен, является тестирование производительности веб-страниц. Это включает в себя измерение времени отклика, скорости загрузки страниц и производительности взаимодействия с элементами интерфейса.
Для эффективного тестирования производительности веб-страниц важно понимать, какие метрики следует отслеживать. В браузерном тестировании производительности наиболее важными являются следующие показатели:
Puppeteer позволяет собирать и анализировать данные о производительности
страницы с помощью API, которые интегрируются с Chrome DevTools
Protocol. Для этого используется метод page.metrics(),
который предоставляет ключевые данные о производительности веб-страницы.
Пример кода для сбора производственных метрик:
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();
})();
Метод page.metrics() возвращает объект, содержащий такие
метрики, как:
Эти данные могут быть полезны для оценки общей загруженности страницы и времени, затраченного на рендеринг.
Для более детального анализа производительности веб-страниц можно
использовать Web Vitals — набор метрик, которые
помогают оценить качество пользовательского опыта на веб-странице.
Puppeteer позволяет собирать эти данные с помощью API
page.evaluate(), вызывая соответствующие скрипты для сбора
показателей FCP, LCP, и CLS.
Пример сбора метрик Web Vitals:
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://example.com');
const vitals = await page.evaluate(() => {
return new Promise(resolve => {
const metrics = {};
// Отслеживание FCP
const fcpObserver = new PerformanceObserver((entryList) => {
const entries = entryList.getEntries();
metrics.FCP = entries[0].startTime;
fcpObserver.disconnect();
});
fcpObserver.observe({ type: 'paint', buffered: true });
// Отслеживание LCP
const lcpObserver = new PerformanceObserver((entryList) => {
const entries = entryList.getEntries();
metrics.LCP = entries[0].startTime;
lcpObserver.disconnect();
});
lcpObserver.observe({ type: 'largest-contentful-paint', buffered: true });
// Отслеживание CLS
const clsObserver = new PerformanceObserver((entryList) => {
const entries = entryList.getEntries();
metrics.CLS = entries[0].value;
clsObserver.disconnect();
});
clsObserver.observe({ type: 'layout-shift', buffered: true });
setTimeout(() => resolve(metrics), 5000);
});
});
console.log(vitals);
await browser.close();
})();
В этом примере используется PerformanceObserver для
отслеживания значений FCP, LCP и CLS в реальном времени. Собранные
данные позволяют точно измерить производительность страницы с точки
зрения пользовательского восприятия.
Одним из важнейших аспектов тестирования производительности является оценка времени отклика на пользовательские действия. Puppeteer предоставляет различные способы взаимодействия с элементами страницы, что позволяет измерять время, необходимое для выполнения определённых операций, таких как клики или ввод текста.
Пример измерения времени реакции на клик:
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://example.com');
const startTime = Date.now();
await page.click('button');
const endTime = Date.now();
console.log(`Время отклика: ${endTime - startTime} миллисекунд`);
await browser.close();
})();В этом примере замеряется время, которое прошло с момента клика по кнопке до завершения действия. Этот показатель можно использовать для тестирования производительности при взаимодействии с различными элементами страницы, такими как кнопки, формы и другие интерактивные компоненты.
Для динамически изменяющихся страниц, где контент подгружается асинхронно, важно также отслеживать скорость рендеринга этих динамических компонентов. Puppeteer предоставляет инструменты для отслеживания состояний элементов, а также для того, чтобы убедиться, что страница правильно отображается после завершения загрузки динамического контента.
Пример тестирования времени рендеринга динамического элемента:
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://example.com');
const startTime = Date.now();
await page.waitForSelector('#dynamic-element', { visible: true });
const endTime = Date.now();
console.log(`Время рендеринга динамического элемента: ${endTime - startTime} миллисекунд`);
await browser.close();
})();
В этом примере Puppeteer ожидает, когда элемент с id
dynamic-element станет видимым на странице. Замер времени
помогает понять, насколько быстро динамический контент отображается для
пользователя.
Lighthouse — это инструмент с открытым исходным кодом для анализа качества веб-страниц, включая производительность. Puppeteer может быть использован для интеграции с Lighthouse, что позволяет автоматизировать процесс сбора производственных метрик и оценку производительности.
Пример использования Lighthouse с Puppeteer:
const puppeteer = require('puppeteer');
const lighthouse = require('lighthouse');
const { URL } = require('url');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
const url = 'https://example.com';
await page.goto(url);
const result = await lighthouse(url, {
port: new URL(browser.wsEndpoint()).port,
});
console.log(result.lhr.categories.performance.score);
await browser.close();
})();Этот код запускает Lighthouse, подключается к текущему экземпляру браузера Puppeteer и получает производственные метрики, такие как FCP, LCP и другие показатели. Он позволяет оценить общую производительность страницы с точки зрения Lighthouse и интегрировать это в процесс тестирования.
Тестирование производительности не завершено без анализа результатов и предложений по оптимизации. Puppeteer позволяет не только собирать данные о производительности, но и интегрировать их с процессами оптимизации, например, с автоматическим исправлением загрузки изображений или оптимизацией асинхронных запросов.
В результате тестирования может быть предложено использование таких методов, как:
Понимание этих метрик позволяет не только выявлять узкие места производительности, но и разрабатывать стратегии для улучшения пользовательского опыта.