Prova una nuova API Lighthouse per misurare le prestazioni e le best practice durante un flusso utente.
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 potrebbe perdere informazioni vitali. 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 i test di laboratorio in qualsiasi momento del ciclo di vita di una pagina. Puppeteer viene utilizzato per eseguire script di caricamento delle pagine e attivare interazioni utente sintetiche. Lighthouse può essere invocato in diversi 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 alcun arretramento.
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
Navigazioni
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:
- Usa puppeteer per aprire il browser.
- Avvia una procedura Lighthouse.
- 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.
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 una grande 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:
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, supponiamo che tu voglia verificare che la nuova UI per le impostazioni avanzate in Squoosh superi i controlli automatici di Lighthouse. Queste impostazioni sono visibili solo se è stata caricata un'immagine e il menu delle opzioni è espanso per mostrare le impostazioni avanzate.
Questa procedura è scriptabile con Puppeteer e puoi acquisire uno snapshot di Lighthouse a 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 esserci alcuni criteri di accessibilità che devono essere controllati manualmente:
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 intervallo di tempo esegue i controlli Lighthouse in un determinato periodo di tempo, che può includere o meno una navigazione. Questo è un ottimo modo per acquisire informazioni su cosa succede in 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à.
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:
Se esaminiamo ogni passaggio, il passaggio di navigazione mostra un CLS pari a 0. Ottimo sito.
Tuttavia, il passaggio "Naviga e scorri" racconta una storia diversa. Al momento, solo il tempo di blocco totale e lo spostamento cumulativo del layout sono disponibili in intervalli di tempo, ma i contenuti con caricamento differito in questa pagina riducono notevolmente il CLS del sito.
In precedenza, Lighthouse non era in grado di identificare questo comportamento problematico del CLS, anche se si verificava quasi certamente nell'esperienza degli 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 eventuali domande, rivolgiti ai forum di discussione di Lighthouse e segnala eventuali bug o suggerimenti nel tracker dei problemi.