Flussi utente di Lighthouse

Prova una nuova API Lighthouse per misurare le prestazioni e le best practice durante un flusso utente.

Brendan Kenny
Brendan Kenny

Lighthouse è uno strumento fantastico per testare le prestazioni e le best practice durante il caricamento iniziale della pagina. Tuttavia, è stato tradizionalmente difficile utilizzare Lighthouse per analizzare altri aspetti del ciclo di vita di una pagina, ad esempio:

  • La pagina viene caricata con una cache attiva
  • Pagine con un service worker attivato
  • Tenere conto delle potenziali interazioni degli utenti

Ciò significa che Lighthouse può perdere informazioni fondamentali. I Segnali web essenziali si basano su tutti i caricamenti di pagine, non solo su quelli con una cache vuota. Inoltre, metriche come la variazione layout cumulativa (CLS) sono misurabili per l'intero periodo di apertura di una pagina.

Lighthouse ha una nuova API di flusso utente che consente di eseguire test di laboratorio in qualsiasi momento all'interno della durata di una pagina. Puppeteer viene utilizzato per creare script di caricamenti pagine e attivare interazioni sintetiche degli utenti. Lighthouse può essere richiamato in più modi per acquisire informazioni chiave durante queste interazioni. Ciò significa che il rendimento può essere misurato durante il caricamento della pagina e durante le interazioni con la pagina. I controlli di accessibilità possono essere eseguiti in CI, non solo nella visualizzazione iniziale, ma anche nel flusso di pagamento per assicurarti che non si verifichi alcuna regressione.

Quasi tutti gli script Puppeteer scritti per garantire un flusso utente funzionante ora possono avere Lighthouse inserito in qualsiasi punto per misurare il rendimento e le best practice. Questo tutorial illustra le nuove modalità di Lighthouse che possono misurare parti diverse dei flussi utente: navigazioni, istantanee e intervalli di tempo.

Configurazione

Le API di flusso utente sono ancora in versione beta, ma sono già disponibili in Lighthouse. Per provare le demo riportate di seguito, devi disporre della versione 14 o successiva di Node. Crea una directory vuota ed esegui:

# 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

La nuova modalità "navigazione" di Lighthouse dà un nome al comportamento (finora) standard di Lighthouse: analizzare il caricamento a freddo di una pagina. Questa è la modalità da utilizzare per monitorare il rendimento del caricamento della pagina, ma i flussi utente offrono anche la possibilità di ottenere nuovi approfondimenti.

Per creare uno script che acquisisca il caricamento di una pagina da Lighthouse:

  1. Usa puppeteer per aprire il browser.
  2. Avvia una procedura Lighthouse.
  3. Vai all'URL di destinazione.
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();

Questo è il flusso più semplice. Una volta aperto, il report mostra una visualizzazione di riepilogo con un solo passaggio. Se fai clic su questo passaggio, viene visualizzato un report Lighthouse tradizionale per la navigazione in questione.

Un report sul flusso di Lighthouse che mostra una singola navigazione
Visualizza il report in tempo reale

Come è tipico di Lighthouse, questa pagina viene caricata dopo aver cancellato eventuali cache o spazio di archiviazione locale, ma gli utenti reali che visitano un sito avranno una combinazione di visite con cache fredde e tiepide e può esserci un'ampia differenza di prestazioni tra un caricamento a freddo come questo e un utente che torna alla pagina con una cache ancora tiepida.

Acquisizione di un carico a caldo

Puoi anche aggiungere una seconda navigazione a questo script, disattivando questa volta l'eliminazione della cache e dello spazio di archiviazione eseguita da Lighthouse per impostazione predefinita nelle navigazioni. Questo esempio successivo carica un articolo su web.dev stesso per vedere quanto può trarre vantaggio dalla memorizzazione nella 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();

Il report sul flusso risultante ha il seguente aspetto:

Un report sul flusso di Lighthouse che mostra due navigazioni, una a freddo e una a caldo, con un punteggio di rendimento più elevato
Visualizza il report in tempo reale

La combinazione di carichi a freddo e a caldo offre un quadro più completo dell'esperienza degli utenti reali. Se hai un sito in cui gli utenti caricano molte pagine nella stessa visita, potresti avere un quadro più realistico dell'esperienza che stanno vivendo sul campo.

Snapshot

Gli snapshot sono una nuova modalità che esegue i controlli Lighthouse in un singolo momento. A differenza di una normale esecuzione di Lighthouse, la pagina non viene ricaricata. In questo modo puoi configurare una pagina e testarla nel suo stato esatto: ad esempio con un menu a discesa aperto o un modulo parzialmente compilato.

Per questo esempio, supponi di voler verificare che una nuova UI per le impostazioni avanzate di Squoosh superi i controlli automatici di Lighthouse. Queste impostazioni sono visibili solo se un'immagine è stata caricata e il menu delle opzioni è espanso per mostrare le impostazioni avanzate.

Il menu delle impostazioni avanzate di Squoosh
Il menu delle impostazioni avanzate di Squoosh

Per questa procedura è possibile creare uno script con Puppeteer e puoi acquisire un'istantanea di Lighthouse in ogni passaggio:

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

Il report risultante mostra che i risultati sono generalmente buoni, ma potrebbero essere necessari alcuni criteri di accessibilità che devono essere controllati manualmente:

Un report sul flusso di Lighthouse che mostra un insieme di istantanee acquisite
Visualizza il report in tempo reale

Periodi di tempo

Una delle maggiori differenze tra i risultati sul rendimento sul campo (come quelli di CrUX) e in laboratorio (come quelli di Lighthouse) è la mancanza di input degli utenti. È qui che può essere utile un intervallo di tempo, ovvero l'ultima modalità di flusso utente.

Un periodo di tempo esegue i controlli di Lighthouse per un determinato periodo di tempo, che può includere o meno una navigazione. Questo è un ottimo modo per catturare ciò che accade con una pagina durante le interazioni. Ad esempio, per impostazione predefinita Lighthouse misura il CLS durante il caricamento della pagina, ma sul campo viene misurato dalla navigazione iniziale fino alla chiusura della pagina. Se le interazioni degli utenti attivano il CLS, Lighthouse in precedenza non era in grado di rilevare e contribuire a correggere il problema.

Per dimostrarlo, ecco un sito di test che simula l'inserimento di annunci in un articolo durante lo scorrimento senza che sia stato riservato spazio per loro. In una lunga serie di schede, a volte viene aggiunto un quadrato rosso quando la relativa area entra nell'area visibile. Poiché non è stato riservato spazio per questi quadratini rossi, le schede sottostanti vengono spostate, causando cambiamenti nel layout.

Una navigazione Lighthouse standard avrà un CLS pari a 0. Tuttavia, una volta eseguito lo scorrimento, la pagina presenterà variazioni del layout problematiche e il valore CLS aumenterà.

Prova il sito demo

Lo script seguente produrrà un report sul flusso di utenti con entrambe le azioni per mostrare la differenza.

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

Viene generato un report che confronta una navigazione regolare con un intervallo di tempo che contiene sia una navigazione che lo scorrimento successivo:

Un report sul flusso di Lighthouse che mostra un insieme di istantanee acquisite
Visualizza il report in tempo reale

Se esaminiamo ogni passaggio, il passaggio di navigazione mostra un CLS pari a 0. Ottimo sito.

Il report Lighthouse che riguarda solo la navigazione nelle pagine con tutte le metriche verdi

Tuttavia, il passaggio "Naviga e scorri" racconta una storia diversa. Attualmente solo il tempo di blocco totale e il Cumulative Layout Shift sono disponibili per intervalli di tempo, ma i contenuti caricati con il caricamento lento in questa pagina includono chiaramente la metrica CLS per il sito.

Il report Lighthouse che illustra la navigazione nelle pagine e lo scorrimento con un errore CLS

In precedenza, Lighthouse non sarebbe stato in grado di identificare questo comportamento CLS problematico, anche se quasi certamente si manifestava nell'esperienza di utenti reali. I test delle prestazioni sulle interazioni basate su script migliorano notevolmente la fedeltà del laboratorio.

In cerca di feedback

Le nuove API di flusso utente in Lighthouse possono fare molte cose nuove, ma potrebbe comunque essere complicato misurare il tipo di scenari che gli utenti incontrano.

Per qualsiasi domanda, contattaci nei forum di discussione di Lighthouse e segnala eventuali bug o suggerimenti nello strumento Issue Tracker.