Попробуйте новый Lighthouse API, чтобы измерить производительность и лучшие практики на протяжении всего пути пользователя.
Lighthouse – это отличный инструмент для тестирования производительности и рекомендаций во время начальной загрузки страницы. Однако раньше было сложно использовать Lighthouse для анализа других аспектов жизненного цикла страницы, таких как:
- Загрузка страниц с теплым кешем
- Страницы с активированным Service Worker
- Учет возможных действий пользователей
Это означает, что Lighthouse может упустить важную информацию. Основные интернет-показатели рассчитываются на основе всех загрузок страниц, а не только тех, которые выполняются с пустым кешем. Кроме того, такие показатели, как совокупное смещение макета (CLS), можно измерять в течение всего времени, пока страница открыта.
В Lighthouse появился новый API путей пользователей, который позволяет проводить лабораторное тестирование на любом этапе жизненного цикла страницы. Puppeteer используется для создания скриптов загрузки страниц и запуска синтетических взаимодействий с пользователем, а Lighthouse можно вызывать несколькими способами для сбора ключевых данных во время этих взаимодействий. Это означает, что производительность можно измерять как во время загрузки страницы, так и во время взаимодействия с ней. Проверки специальных возможностей можно выполнять в CI не только на начальном этапе, но и глубоко в процессе оформления заказа, чтобы убедиться, что ничего не регрессирует.
Практически в любой скрипт Puppeteer, написанный для обеспечения рабочего пути пользователя, теперь можно вставить Lighthouse в любой точке, чтобы измерить производительность и лучшие практики на протяжении всего процесса. В этом руководстве мы расскажем о новых режимах Lighthouse, которые позволяют оценивать разные части пути пользователя: навигацию, снимки и временные диапазоны.
Настройка
API путей пользователей пока находятся на этапе предварительной версии, но уже доступны в Lighthouse. Чтобы попробовать демоверсии ниже, вам понадобится Node версии 14 или более поздней. Создайте пустой каталог и выполните в нем следующую команду:
# Default to ES modules.
echo '{"type": "module"}' > package.json
# Init npm project without the wizard.
npm init -y
# Dependencies for these examples.
npm install lighthouse puppeteer open
Навигация
Новый режим навигации Lighthouse – это название стандартного поведения Lighthouse, которое использовалось до сих пор: анализ холодной загрузки страницы. Этот режим используется для отслеживания эффективности загрузки страницы, но пути пользователей также открывают возможность получения новых данных.
Чтобы создать скрипт Lighthouse, который будет фиксировать загрузку страницы, выполните следующие действия:
- Откройте браузер с помощью Puppeteer.
- Запустите путь пользователя Lighthouse.
- Перейдите по целевому URL.
import fs from 'fs';
import open from 'open';
import puppeteer from 'puppeteer';
import {startFlow} from 'lighthouse/lighthouse-core/fraggle-rock/api.js';
async function captureReport() {
const browser = await puppeteer.launch({headless: false});
const page = await browser.newPage();
const flow = await startFlow(page, {name: 'Single Navigation'});
await flow.navigate('https://web.dev/performance-scoring/');
await browser.close();
const report = await flow.generateReport();
fs.writeFileSync('flow.report.html', report);
open('flow.report.html', {wait: false});
}
captureReport();
Это самый простой вариант. В открывшемся отчете будет показана сводка только с одним шагом. Нажав на этот шаг, вы увидите традиционный отчет Lighthouse для этой навигации.
Как обычно в Lighthouse, эта страница загружается с предварительно очищенным кешем или локальным хранилищем, но реальные пользователи, посещающие сайт, будут иметь смесь посещений с холодным и теплым кешем, и может быть большая разница в производительности между такой холодной загрузкой и возвращением пользователя на страницу с все еще теплым кешем.
Запись теплой загрузки
Вы также можете добавить в этот скрипт вторую навигацию, на этот раз отключив очистку кеша и хранилища, которую Lighthouse выполняет по умолчанию при навигации. В следующем примере загружается статья на сайте web.dev, чтобы показать, насколько полезно кеширование:
async function captureReport() {
const browser = await puppeteer.launch({headless: false});
const page = await browser.newPage();
const testUrl = 'https://web.dev/performance-scoring/';
const flow = await startFlow(page, {name: 'Cold and warm navigations'});
await flow.navigate(testUrl, {
stepName: 'Cold navigation'
});
await flow.navigate(testUrl, {
stepName: 'Warm navigation',
configContext: {
settingsOverrides: {disableStorageReset: true},
},
});
await browser.close();
const report = await flow.generateReport();
fs.writeFileSync('flow.report.html', report);
open('flow.report.html', {wait: false});
}
captureReport();
Полученный отчет о путях будет выглядеть примерно так:
Сочетание холодных и теплых загрузок дает более полное представление о том, что испытывают реальные пользователи. Если на вашем сайте пользователи загружают много страниц за одно посещение, это может дать вам более реалистичное представление о том, что они испытывают на практике.
Снимки
Снимки – это новый режим, в котором Lighthouse выполняет аудит в определенный момент времени. В отличие от обычного запуска Lighthouse, страница не перезагружается. Это позволяет настроить страницу и протестировать ее в определенном состоянии, например с открытым раскрывающимся списком или частично заполненной формой.
В этом примере предположим, что вы хотите убедиться, что новый пользовательский интерфейс для расширенных настроек в Squoosh проходит автоматические проверки Lighthouse. Эти настройки видны, только если изображение загружено и меню параметров развернуто, чтобы показать расширенные настройки.
Этот процесс можно автоматизировать с помощью Puppeteer и делать снимки Lighthouse на каждом шаге:
async function captureReport() {
const browser = await puppeteer.launch({headless: false});
const page = await browser.newPage();
const flow = await startFlow(page, {name: 'Squoosh snapshots'});
await page.goto('https://squoosh.app/', {waitUntil: 'networkidle0'});
// Wait for first demo-image button, then open it.
const demoImageSelector = 'ul[class*="demos"] button';
await page.waitForSelector(demoImageSelector);
await flow.snapshot({stepName: 'Page loaded'});
await page.click(demoImageSelector);
// Wait for advanced settings button in UI, then open them.
const advancedSettingsSelector = 'form label[class*="option-reveal"]';
await page.waitForSelector(advancedSettingsSelector);
await flow.snapshot({stepName: 'Demo loaded'});
await page.click(advancedSettingsSelector);
await flow.snapshot({stepName: 'Advanced settings opened'});
browser.close();
const report = await flow.generateReport();
fs.writeFileSync('flow.report.html', report);
open('flow.report.html', {wait: false});
}
captureReport();
В отчете видно, что в целом все хорошо, но некоторые критерии доступности нужно проверить вручную.
Временные диапазоны
Одно из самых больших различий между результатами производительности в полевых условиях (например, из CrUX) и в лаборатории (например, из Lighthouse) – отсутствие пользовательского ввода. В этом случае поможет временной диапазон – последний режим пути пользователя.
Временной диапазон – это период, в течение которого Lighthouse проводит аудит. Он может включать или не включать навигацию. Это отличный способ зафиксировать, что происходит со страницей во время взаимодействий. Например, по умолчанию Lighthouse измеряет CLS во время загрузки страницы, но в полевых условиях CLS измеряется с момента первоначальной навигации до закрытия страницы. Если сдвиг макета происходит в результате действий пользователя, Lighthouse не сможет его обнаружить и помочь исправить.
При обычной навигации Lighthouse показатель CLS будет равен 0. Однако при прокрутке страницы макет будет смещаться, а значение CLS – расти.
Приведенный ниже скрипт создаст отчет о пути пользователя с обоими действиями, чтобы показать разницу.
async function captureReport() {
const browser = await puppeteer.launch({headless: false});
const page = await browser.newPage();
// Get a session handle to be able to send protocol commands to the page.
const session = await page.target().createCDPSession();
const testUrl = 'https://pie-charmed-treatment.example.com/';
const flow = await startFlow(page, {name: 'CLS during navigation and on scroll'});
// Regular Lighthouse navigation.
await flow.navigate(testUrl, {stepName: 'Navigate only'});
// Navigate and scroll timespan.
await flow.startTimespan({stepName: 'Navigate and scroll'});
await page.goto(testUrl, {waitUntil: 'networkidle0'});
// We need the ability to scroll like a user. There's not a direct puppeteer function for this, but we can use the DevTools Protocol and issue a Input.synthesizeScrollGesture event, which has convenient parameters like repetitions and delay to somewhat simulate a more natural scrolling gesture.
// https://chromedevtools.github.io/devtools-protocol/tot/Input/#method-synthesizeScrollGesture
await session.send('Input.synthesizeScrollGesture', {
x: 100,
y: 600,
yDistance: -2500,
speed: 1000,
repeatCount: 2,
repeatDelayMs: 250,
});
await flow.endTimespan();
await browser.close();
const report = await flow.generateReport();
fs.writeFileSync('flow.report.html', report);
open('flow.report.html', {wait: false});
}
captureReport();
Будет создан отчет, в котором обычная навигация сравнивается с временным диапазоном, содержащим как навигацию, так и последующую прокрутку.
Если мы посмотрим на каждый шаг, то увидим, что на шаге, который включает только навигацию, CLS равен 0. Отличный сайт!
Однако на этапе "Навигация и прокрутка" мы видим другую картину. Сейчас во временных диапазонах доступны только показатели Total Blocking Time и Cumulative Layout Shift, но контент с отложенной загрузкой на этой странице явно снижает показатель CLS для сайта.
Раньше Lighthouse не мог выявить такое проблемное поведение CLS, хотя оно почти наверняка проявлялось бы у реальных пользователей. Тестирование производительности на основе взаимодействий, заданных скриптами, значительно повышает точность лабораторных данных.
Ждем ваших отзывов
Новые API путей пользователей в Lighthouse могут многое, но измерять сценарии, с которыми сталкиваются пользователи, по-прежнему может быть сложно.
Если у вас есть вопросы, задайте их на форуме Lighthouse. Сообщить об ошибках и оставить пожелания можно в системе отслеживания ошибок.