Flujos de usuarios de Lighthouse

Prueba una nueva API de Lighthouse para medir el rendimiento y las prácticas recomendadas durante un flujo de usuarios.

Brendan Kenny

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 usar Lighthouse para analizar otros aspectos de la vida de una página, como:

• La página se carga con una caché tibia
• Páginas con un Service Worker activado
• Consideración de las posibles interacciones de los usuarios

Esto significa que Lighthouse puede perder información vital. Las Métricas web esenciales se basan en todas las cargas de páginas, no solo en 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 está abierta.

Lighthouse tiene una nueva API de flujo de usuarios que permite realizar pruebas de laboratorio en cualquier momento del ciclo de vida de una página. Puppeteer se usa para crear secuencias de comandos de cargas de páginas y activar interacciones sintéticas con los usuarios. Lighthouse se puede invocar de varias maneras para captar estadísticas clave durante esas interacciones. Esto significa que el rendimiento se puede medir durante la carga de la página y durante las interacciones con esta. Las verificaciones de accesibilidad se pueden ejecutar en CI, no solo en la vista inicial, sino también en los detalles del flujo de confirmación de la compra para garantizar que no haya una regresión.

Casi cualquier secuencia de comandos de Puppeteer escrita para garantizar un flujo de usuarios funcional ahora puede tener Lighthouse insertado 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 de usuarios: navegaciones, instantáneas y períodos.

Configuración

Las APIs del flujo de usuarios aún se encuentran en versión preliminar, pero ya están disponibles en Lighthouse. Para probar las demostraciones que se muestran a continuación, necesitarás la versión 14 de Node o una posterior. Crea un directorio vacío y ejecuta en él:

# 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

"Navegación" sobre el nuevo Lighthouse en realidad le da un nombre al comportamiento estándar (hasta ahora) de Lighthouse: analizar la carga en frío de una página. Es el modo que se utiliza para supervisar el rendimiento de carga de la página, pero los flujos de usuarios también abren la posibilidad de nuevas estadísticas.

Para crear una secuencia de comandos con Lighthouse que capture la carga de una página, haz lo siguiente:

1. Usa el modo titiritero para abrir el navegador.
2. Inicia un flujo de usuarios de Lighthouse.
3. 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 simple. Cuando se abre, el informe muestra una vista de resumen con un solo paso. Si haces clic en ese paso, se revelará un informe de Lighthouse tradicional para esa navegación.

Como es habitual con Lighthouse, esta página se carga con cualquier caché o almacenamiento local borrado primero, pero los usuarios reales que visiten un sitio tendrán una combinación 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é aún templada.

Captura una carga tibia

También puedes agregar una segunda navegación a esta secuencia de comandos. Esta vez, inhabilitarás 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 los beneficios 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 verá parecido al siguiente:

La combinación de cargas frías y templadas 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 puede brindarte una visión más realista de lo que están experimentando en el campo.

Instantáneas

Las instantáneas son un modo nuevo que ejecuta auditorías de Lighthouse en un momento específico. A diferencia de una ejecución normal de Lighthouse, la página no se vuelve a cargar. Esto permite configurar una página y probarla en su estado exacto, por ejemplo, con un menú desplegable abierto o un formulario completado parcialmente.

Para este ejemplo, supongamos que quieres comprobar que alguna IU nueva para la configuración avanzada dentro de Squoosh apruebe las verificaciones automatizadas de Lighthouse. Esta configuración solo es visible si se cargó una imagen y se expande el menú de opciones para mostrar la configuración avanzada.

Este proceso se puede escribir con Puppeteer y 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 deban revisarse de forma manual:

Períodos

Una de las mayores diferencias entre los resultados de rendimiento en el campo (como CrUX) y en el laboratorio (como Lighthouse) es la falta de entradas del usuario. Aquí es donde un período, el modo de último 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 fueran el desencadenante de CLS, esto es algo que Lighthouse antes no podría detectar ni ayudar a corregir.

Para demostrarlo, este es un sitio de prueba que simula anuncios que se insertan en un artículo durante el desplazamiento sin que se haya reservado espacio para ellos. En una serie larga de tarjetas, ocasionalmente se agrega un cuadrado rojo cuando su ranura ingresa al viewport. Como no se reservó espacio para estos cuadrados rojos, las tarjetas debajo de ellos se desplazan fuera de la vista, lo que provoca cambios de diseño.

Una navegación normal de Lighthouse tendrá un CLS de 0. Sin embargo, una vez que te desplaces, la página tendrá cambios de diseño problemáticos y aumentará el valor de CLS.

La siguiente secuencia de comandos producirá 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 un desplazamiento posterior:

Si profundizamos en cada paso, el paso de solo navegación muestra un CLS de 0. ¡Excelente sitio!

Sin embargo, en la página "Navegar y desplazarse" cuenta una historia diferente. Actualmente, solo están disponibles en períodos, el tiempo de bloqueo total y el Cambio de diseño acumulado, pero el contenido de carga diferida de esta página es claro que reduce el CLS del sitio.

Anteriormente, Lighthouse no podía identificar este comportamiento problemático de CLS, aunque seguramente se mostraría en la experiencia de usuarios reales. Realizar pruebas de rendimiento en interacciones con secuencias de comandos mejora la fidelidad del lab de forma significativa.

Recibir comentarios

Las nuevas APIs de flujo de usuarios en Lighthouse pueden realizar muchas tareas nuevas, pero puede resultar complicado medir el tipo de situaciones que encuentran tus usuarios.

Si tienes preguntas, comunícate en los foros de discusión de Lighthouse y informa cualquier error o sugerencia en la Herramienta de seguimiento de errores.