Fluxos de usuários do Lighthouse

Teste uma nova API Lighthouse para medir o desempenho e as práticas recomendadas em um fluxo do usuário.

Brendan Kenny

O Lighthouse é uma ferramenta fantástica para testar o desempenho e as práticas recomendadas durante o carregamento inicial da página. No entanto, tradicionalmente tem sido difícil usar o Lighthouse para analisar outros aspectos da vida de uma página, como:

• Carregamentos de página com um cache quente
• Páginas com um service worker ativado
• Considerar possíveis interações do usuário

Isso significa que o Lighthouse pode perder informações importantes. As Core Web Vitals são baseadas em todos os carregamentos de página, não apenas naqueles com um cache vazio. Além disso, métricas como Cumulative Layout Shift (CLS) podem ser medidas durante todo o tempo em que uma página está aberta.

O Lighthouse tem uma nova API de fluxo do usuário que permite testes de laboratório em qualquer ponto do ciclo de vida de uma página. O Puppeteer é usado para criar scripts de carregamentos de página e acionar interações sintéticas do usuário, e o Lighthouse pode ser invocado de várias maneiras para capturar insights importantes durante essas interações. Isso significa que a performance pode ser medida durante o carregamento de página e durante as interações com ela. As verificações de acessibilidade podem ser executadas na CI, não apenas na visualização inicial, mas também no processo de finalização da compra para garantir que nada regrida.

Quase todos os scripts do Puppeteer escritos para garantir um fluxo do usuário funcional agora podem ter o Lighthouse inserido em qualquer ponto para medir o desempenho e as práticas recomendadas. Neste tutorial, vamos mostrar os novos modos do Lighthouse que podem medir diferentes partes dos fluxos do usuário: navegações, snapshots e períodos.

Configuração

As APIs de fluxo do usuário ainda estão em pré-lançamento, mas já estão disponíveis no Lighthouse. Para testar as demonstrações abaixo, você precisa do Node versão 14 ou mais recente. Crie um diretório vazio e execute:

# 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

Sem a linha {"type": "module"}, o npm init -y vai usar o CommonJS como padrão em vez de módulos. O código a seguir ainda pode ser usado, mas você precisará mudar para require() em vez de import para trazer dependências.

Navegações

O novo modo de "navegação" do Lighthouse está, na verdade, um nome ao comportamento padrão do Lighthouse (até agora): analisar o carregamento a frio de uma página. Esse é o modo usado para monitorar o desempenho de carregamento de páginas, mas os fluxos do usuário também abrem a possibilidade de novos insights.

Para criar um script do Lighthouse que capture um carregamento de página:

1. Use o Puppeteer para abrir o navegador.
2. Inicie um fluxo do usuário do Lighthouse.
3. Acesse o 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();

Esse é o fluxo mais simples. Quando aberto, o relatório mostra uma visualização de resumo com apenas uma etapa. Ao clicar nessa etapa, um relatório tradicional do Lighthouse para essa navegação será exibido.

Como é comum no Lighthouse, essa página é carregada com o cache ou o armazenamento local limpo primeiro, mas os usuários reais que visitam um site têm uma mistura de visitas com caches frios e quentes, e pode haver uma grande diferença de desempenho entre um carregamento a frio como esse e um usuário que retorna à página com um cache ainda quente.

Como capturar uma carga quente

Você também pode adicionar uma segunda navegação a esse script, mas desta vez desativando a limpeza de cache e armazenamento que o Lighthouse faz por padrão nas navegações. O próximo exemplo carrega um artigo no próprio web.dev para ver como ele se beneficia do armazenamento em cache:

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();

O relatório de fluxo resultante será parecido com este:

A combinação de carregamentos frios e quentes oferece uma visão mais completa do que os usuários reais estão experimentando. Se você tem um site em que os usuários carregam muitas páginas na mesma visita, isso pode dar uma visão mais realista do que eles estão vivenciando em campo.

Snapshots

Os snapshots são um novo modo que executa auditorias do Lighthouse em um único momento. Ao contrário de uma execução normal do Lighthouse, a página não é recarregada. Isso permite configurar uma página e testá-la no estado exato: com um menu suspenso aberto ou um formulário parcialmente preenchido, por exemplo.

Observação: nem todas as auditorias do Lighthouse podem ser executadas nesse modo. Muitas das métricas de performance são definidas como começando com um carregamento de página e, portanto, não são relevantes em um snapshot, mas as auditorias de acessibilidade e muitas das práticas recomendadas de performance ainda podem gerar verificações importantes.

Neste exemplo, suponha que você queira verificar se uma nova interface para as Configurações avançadas no Squoosh passa nas verificações automatizadas do Lighthouse. Essas configurações só ficam visíveis se uma imagem tiver sido carregada e o menu "opções" estiver expandido para mostrar as configurações avançadas.

Menu de configurações avançadas do Squoosh

Esse processo pode ser programado com o Puppeteer, e você pode tirar um snapshot do Lighthouse em cada etapa:

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();

O relatório resultante mostra que os resultados são geralmente bons, mas pode haver alguns critérios de acessibilidade que precisam ser verificados manualmente:

Períodos

Uma das maiores diferenças entre os resultados de performance em campo (como do CrUX) e no laboratório (como do Lighthouse) é a falta de entrada do usuário. É aí que um período, o último modo de fluxo do usuário, pode ajudar.

Um período executa auditorias do Lighthouse durante um período, que pode ou não incluir uma navegação. Essa é uma ótima maneira de capturar o que está acontecendo com uma página durante as interações. Por exemplo, por padrão, o Lighthouse mede a CLS durante o carregamento de página, mas, no campo, a CLS é medida desde a navegação inicial até o fechamento da página. Se as interações do usuário forem o gatilho da CLS, o Lighthouse não conseguia detectar e ajudar a corrigir isso.

Uma navegação normal do Lighthouse terá um CLS de 0. No entanto, ao rolar a página, as mudanças de layout problemáticas vão aparecer, e o valor da CLS vai aumentar.

O script a seguir vai produzir um relatório de fluxo do usuário com as duas ações para mostrar a diferença.

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();

Isso gera um relatório que compara uma navegação normal a um período que contém uma navegação e uma rolagem em seguida:

Analisando cada etapa, a etapa somente de navegação mostra um CLS de 0. Ótimo site!

No entanto, a etapa "Navegar e rolar" conta uma história diferente. No momento, apenas o Total Blocking Time e a Cumulative Layout Shift estão disponíveis em períodos, mas o conteúdo de carregamento lento nesta página claramente prejudica a CLS do site.

Antes, o Lighthouse não conseguia identificar esse comportamento problemático de CLS, embora ele quase certamente aparecesse na experiência de usuários reais. Os testes de desempenho em interações com script melhoram significativamente a fidelidade do laboratório.

Procurando feedback

As novas APIs de fluxo do usuário no Lighthouse podem fazer muitas coisas novas, mas ainda pode ser complicado medir o tipo de cenário que seus usuários encontram.

Se tiver dúvidas, entre em contato nos fóruns de discussão do Lighthouse e registre bugs ou sugestões no Issue Tracker.