Prueba una nueva API de Lighthouse para medir el rendimiento y las prácticas recomendadas en todo el flujo de usuarios.
Lighthouse es una herramienta fantástica para probar el rendimiento y las prácticas recomendadas durante la carga inicial de la página. Sin embargo, tradicionalmente, ha sido difícil utilizar Lighthouse para analizar otros aspectos de la vida de una página, como:
- La página se carga con una caché semicaliente
- Páginas con un Service Worker activado
- Considerar las posibles interacciones del usuario
Esto significa que Lighthouse puede perder información vital. Las Métricas web esenciales se basan en todas las cargas de página, no solo las que tienen una caché vacía. Además, las métricas como el Cambio de diseño acumulado (CLS) se pueden medir durante todo el tiempo que una página permanece abierta.
Lighthouse tiene una nueva API de flujo de usuarios que permite realizar pruebas de laboratorio en cualquier momento de la vida útil de una página. Puppeteer se utiliza para crear secuencias de comandos de cargas de páginas y activar interacciones sintéticas del usuario, y Lighthouse se puede invocar de varias maneras para captar estadísticas clave durante esas interacciones. Eso significa que se puede medir el rendimiento mientras se carga la página y durante las interacciones con ella. Las verificaciones de accesibilidad se pueden ejecutar en CI, no solo en la vista inicial, sino en lo más profundo del flujo de confirmación de la compra, para garantizar que no ocurra nada.
Casi todas las secuencias de comandos de Puppeteer escritas para garantizar un flujo de usuarios operativo ahora pueden tener instalado Lighthouse en cualquier momento para medir el rendimiento y las prácticas recomendadas en todo momento. En este instructivo, se explican los nuevos modos de Lighthouse que pueden medir diferentes partes de los flujos del usuario: navegaciones, instantáneas y períodos.
Configuración
Las API de flujo de usuarios aún se encuentran en versión preliminar, pero actualmente están disponibles en Lighthouse. Para probar las demostraciones que se muestran a continuación, necesitarás Node.js 14 o una versión posterior. Crea un directorio vacío y en él se ejecuta:
# 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
Navegaciones
El nuevo modo de "navegación" de Lighthouse le da un nombre al comportamiento estándar (hasta ahora) de Lighthouse: analizar la carga en frío de una página. Este es el modo que se usa para supervisar el rendimiento de carga de una página, pero los flujos de usuarios también abren la posibilidad de obtener estadísticas nuevas.
Para ejecutar la secuencia de comandos de Lighthouse capturando la carga de una página, haz lo siguiente:
- Usa titiritero para abrir el navegador.
- Inicia un flujo de usuarios de Lighthouse.
- Navega a la URL de destino.
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();
Este es el flujo más sencillo. Cuando se abre, el informe muestra una vista de resumen con un solo paso. Si haces clic en ese paso, se mostrará un informe de Lighthouse tradicional para esa navegación.
Como es habitual con Lighthouse, esta página se carga primero con la caché o el almacenamiento local, pero los usuarios reales que visitan un sitio tendrán una mezcla de visitas con cachés frías y semicalientes, y puede haber una gran diferencia de rendimiento entre una carga en frío como esta y un usuario que regresa a la página con una caché todavía semicaliente.
Captura una carga semicaliente
También puedes agregar una segunda navegación a esta secuencia de comandos, esta vez inhabilitando la eliminación de la caché y el almacenamiento que Lighthouse realiza de forma predeterminada en las navegaciones. En el siguiente ejemplo, se carga un artículo en web.dev para ver cuánto se beneficia del almacenamiento en caché:
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();
El informe de flujo resultante se ve de la siguiente manera:
La combinación de cargas en frío y semicaliente ofrece un panorama más completo de lo que experimentan los usuarios reales. Si tienes un sitio en el que los usuarios cargan muchas páginas en la misma visita, esto podría ofrecerte una visión más realista de lo que experimentan en el campo.
Instantáneas
Las instantáneas son un nuevo modo que ejecuta auditorías de Lighthouse en un solo momento. A diferencia de la ejecución normal de Lighthouse, la página no se vuelve a cargar. De esta manera, podrás configurar una página y probarla en su estado exacto, por ejemplo, con un menú desplegable abierto o con un formulario parcialmente completado.
En este ejemplo, supongamos que deseas comprobar que alguna IU nueva de Configuración avanzada dentro de Squoosh apruebe las verificaciones automatizadas de Lighthouse. Esta configuración solo será visible si se cargó una imagen y el menú de opciones se expande para mostrar la configuración avanzada.
Este proceso funciona con secuencias de comandos en Puppeteer y, de hecho, puedes tomar una instantánea de Lighthouse en cada paso:
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();
El informe resultante muestra que los resultados suelen ser buenos, pero es posible que haya algunos criterios de accesibilidad que se deban consultar manualmente:
Períodos
Una de las mayores diferencias entre los resultados de rendimiento en el campo (como los de CrUX) y los en el lab (como los de Lighthouse) es la falta de entradas del usuario. Aquí es donde un período (el último modo de flujo de usuarios) puede ayudar.
Un período ejecuta auditorías de Lighthouse durante un período que puede incluir o no una navegación. Esta es una excelente manera de capturar lo que sucede con una página durante las interacciones. Por ejemplo, de forma predeterminada, Lighthouse mide el CLS durante la carga de la página, pero en el campo, el CLS se mide desde la navegación inicial hasta que se cierra la página. Si las interacciones del usuario son el desencadenante de CLS, esto es algo que Lighthouse no podría detectar ni ayudar a corregir.
Para demostrarlo, este sitio de prueba simula que los anuncios se insertan en un artículo durante el desplazamiento sin que se haya reservado espacio para ellos. En una serie larga de tarjetas, se agrega un cuadrado rojo ocasional cuando su ranura ingresa al viewport. Como no se reservó espacio para estos cuadrados rojos, las tarjetas debajo de ellos se desplazan fuera de lugar, lo que provoca cambios de diseño.
Una navegación normal de Lighthouse tendrá un CLS de 0. Sin embargo, una vez que te desplazas, la página tendrá cambios de diseño problemáticos y el valor de CLS aumentará.
La siguiente secuencia de comandos generará un informe de flujo de usuarios con ambas acciones para mostrar la diferencia.
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.glitch.me/';
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();
Esto genera un informe que compara una navegación normal con un período que contiene tanto una navegación como el desplazamiento posterior:
Si profundizas en cada paso, el paso solo de navegación muestra un CLS de 0. ¡Excelente sitio!
Sin embargo, el paso "Navegar y desplazar" cuenta una historia diferente. Actualmente, solo el tiempo de bloqueo total y el Cambio de diseño acumulado están disponibles en períodos, pero el contenido de carga diferida de esta página claramente deposita el CLS para el sitio.
Anteriormente, Lighthouse no podía identificar este comportamiento problemático de CLS, aunque es casi seguro que aparezca en la experiencia de usuarios reales. Las pruebas de rendimiento en interacciones con secuencias de comandos mejoran la fidelidad del lab de forma significativa.
Quiero recibir comentarios
Las nuevas API de flujo de usuarios en Lighthouse pueden realizar muchas tareas nuevas, pero puede resultar complicado medir el tipo de situaciones que encuentran los usuarios.
Si tienes preguntas en los foros de discusión de Lighthouse, comunícate con nosotros y envía cualquier error o sugerencia en la Herramienta de seguimiento de errores.