Prova una nuova API Lighthouse per misurare le prestazioni e le best practice durante un flusso utente.
Lighthouse è uno strumento eccezionale per testare le prestazioni e le best practice durante il caricamento iniziale della pagina. Tuttavia, in genere è stato difficile utilizzare Lighthouse per analizzare altri aspetti dell'attività di una pagina, ad esempio:
- La pagina viene caricata con una cache calda
- 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 delle pagine, non solo su quelle con la cache vuota. Inoltre, metriche come Cumulative Layout Shift (CLS) sono misurabili per tutto il tempo in cui una pagina è aperta.
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 le prestazioni possono essere misurate durante il caricamento della pagina e durante le interazioni con la pagina stessa. I controlli dell'accessibilità possono essere eseguiti in CI, non solo nella visualizzazione iniziale, ma all'interno del flusso di pagamento, per assicurarti che nulla regga.
Ora è possibile inserire Lighthouse in qualsiasi momento per misurare le prestazioni e le best practice in qualsiasi testo di Puppeteer scritto per garantire che un flusso utente funzioni. Questo tutorial illustra le nuove modalità di Lighthouse che possono misurare diverse parti dei flussi utente: navigazioni, snapshot e intervalli di tempo.
Configurazione
Le API del flusso utente sono ancora in anteprima, ma sono disponibili oggi in Lighthouse. Per provare le demo riportate di seguito, avrai bisogno di Node 14 o versioni successive. Crea una directory vuota ed esegui al suo interno:
# 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 "navigazione" di Lighthouse assegna un nome al comportamento standard di Lighthouse (fino a ora): analizzare il caricamento a freddo di una pagina. Questa è la modalità che puoi utilizzare per monitorare il rendimento del caricamento delle pagine, ma anche i flussi utente offrono la possibilità di nuove informazioni.
Per eseguire lo script di acquisizione di un caricamento pagina in Lighthouse:
- Usa puppeteer per aprire il browser.
- Avvia un flusso utente 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 quel passaggio, verrà visualizzato un report Lighthouse tradizionale per la navigazione.
Come nel caso di Lighthouse, questa pagina viene caricata con la cache o lo spazio di archiviazione locale cancellato prima, ma gli utenti reali che visitano un sito avranno un mix di visite con cache calde e fredde e potrebbe esserci una grande differenza di prestazioni tra un caricamento a freddo come questo e un utente che torna alla pagina con una cache ancora calda.
Acquisizione di un carico caldo
Puoi anche aggiungere una seconda navigazione a questo script, questa volta disattivando la cancellazione della cache e dello spazio di archiviazione eseguita da Lighthouse per impostazione predefinita nelle navigazioni. L'esempio seguente carica un articolo sullo stesso sito web.dev per vedere i vantaggi della 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 un aspetto simile al seguente:
La combinazione di carichi freddi e caldi offre un quadro più completo di ciò che stanno vivendo gli utenti reali. Se hai un sito in cui gli utenti caricano molte pagine durante la stessa visita, ciò potrebbe consentirti di avere una visione più realistica di ciò che stanno vivendo sul campo.
Snapshot
Gli snapshot sono una nuova modalità che esegue i controlli di Lighthouse in un unico momento. A differenza di una normale esecuzione di Lighthouse, la pagina non viene ricaricata. In questo modo è possibile configurare una pagina e testarla nel suo esatto stato, 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.
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:
Intervalli di tempo
Una delle principali differenze tra i risultati delle prestazioni sul campo (ad es. in CrUX) e in lab (ad es. in Lighthouse) è la mancanza di input dell'utente. È qui che può essere utile un intervallo di tempo, ovvero l'ultima modalità di flusso dell'utente.
Un periodo di tempo esegue i controlli di Lighthouse per un determinato periodo di tempo, che potrebbe 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 la metrica CLS durante il caricamento della pagina, ma sul campo la metrica CLS viene misurata dalla navigazione iniziale fino alla chiusura della pagina. Se le interazioni degli utenti sono l'attivatore di CLS, si tratta di un problema che in precedenza Lighthouse non sarebbe stato in grado di individuare e risolvere.
A tal fine, ecco un sito di test che simula degli annunci inseriti in un articolo durante lo scorrimento senza che sia stato riservato uno spazio. In una lunga serie di schede, occasionalmente viene aggiunto un quadrato rosso quando il suo slot entra nell'area visibile. Poiché lo spazio non era riservato per questi quadrati rossi, le schede al di sotto vengono spostate automaticamente, causando variazioni del layout.
Una navigazione Lighthouse normale avrà un valore CLS pari a 0. Tuttavia, se lo scorri, la pagina presenterà variazioni del layout problematiche e il valore CLS aumenterà.
Lo script seguente genera un report sul flusso utente 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();
In questo modo viene generato un report che mette a confronto una navigazione normale con un intervallo di tempo che contiene sia una navigazione sia uno scorrimento successivo:
Analizzando ogni passaggio, il passaggio di sola navigazione mostra una CLS pari a 0. Ottimo sito!
Tuttavia, il comando "Naviga e scorri" passaggio racconta una storia diversa. Attualmente solo il tempo di blocco totale e l'adattamento cumulativo del layout sono disponibili per intervalli di tempo, ma i contenuti caricati con il caricamento lento in questa pagina includono chiaramente la metrica CLS del sito.
In precedenza, Lighthouse non sarebbe stato in grado di identificare questo comportamento problematico della CLS, anche se quasi certamente si manifestava nell'esperienza di utenti reali. I test delle prestazioni rispetto alle interazioni basate su script migliorano significativamente la fedeltà del lab.
Ricevere feedback
Le nuove API di flusso utente in Lighthouse possono fare molte cose nuove, ma può comunque essere complicato misurare il tipo di scenari che gli utenti incontrano.
Contattaci per qualsiasi domanda nei forum di discussione di Lighthouse e segnala eventuali bug o suggerimenti nello strumento Issue Tracker.