Prova una nuova API Lighthouse per misurare le prestazioni e le best practice durante un flusso di utenti.
![[Nome di persona]](https://web.developers.google.cn/images/authors/bckenny.jpg?hl=it)
Lighthouse è uno strumento fantastico per testare le prestazioni e le best practice durante il caricamento iniziale della pagina. Tuttavia, in genere è difficile utilizzare Lighthouse per analizzare altri aspetti della vita di una pagina, ad esempio:
- La pagina viene caricata con una cache a caldo
- Pagine con un service worker attivato
- Tenere conto delle potenziali interazioni degli utenti
Ciò significa che Lighthouse può perdere informazioni vitali. I Segnali web essenziali si basano su tutti i caricamenti delle pagine, non solo su quelli la cui cache è vuota. Inoltre, metriche come Cumulative Layout Shift (CLS) possono essere misurate per tutto il tempo di apertura di una pagina.
Lighthouse ha una nuova API di flusso utente che consente di eseguire test di laboratorio in qualsiasi momento della durata di una pagina. Puppeteer viene utilizzato per creare script dei caricamenti delle pagine e attivare le interazioni sintetiche degli utenti e Lighthouse può essere richiamato 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 all'interno del flusso di pagamento per garantire che nulla regredisce.
Ora puoi inserire Lighthouse in qualsiasi momento per misurare le prestazioni e le best practice in quasi tutti gli script Puppeteer scritto per garantire un flusso utente funzionante. 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 per i flussi utente sono ancora in anteprima, ma oggi sono disponibili in Lighthouse. Per provare le demo di seguito, è necessario Node 14 o versioni successive. Crea una directory vuota e al suo interno 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à di "navigazione" di Lighthouse sta in effetti dando un nome al comportamento standard (fino a ora) di Lighthouse, ovvero l'analisi del caricamento a freddo di una pagina. Questa è la modalità da utilizzare per monitorare le prestazioni di caricamento delle pagine, ma i flussi utente offrono anche la possibilità di ottenere nuove informazioni.
Per eseguire lo script di Lighthouse per l'acquisizione di un caricamento pagina:
- Utilizza puppeteer per aprire il browser.
- Avvia un flusso utente di 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. Quando viene aperto, il report mostra una visualizzazione di riepilogo con il singolo passaggio. Se fai clic su quel passaggio, verrà visualizzato un report Lighthouse tradizionale per quella navigazione.
Come di consueto in Lighthouse, questa pagina viene caricata prima di aver svuotato la cache o per lo spazio di archiviazione locale, ma gli utenti reali che visitano un sito avranno un mix di visite con cache calde e fredde e può esserci una grande differenza in termini 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 lo svuotamento della cache e lo spazio di archiviazione che Lighthouse esegue per impostazione predefinita nelle navigazioni. L'esempio successivo carica un articolo sullo stesso sito web.dev per vedere quanto trae 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 un aspetto simile al seguente:
La combinazione di carichi caldi e freddi 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, potresti ottenere una visione più realistica della loro esperienza 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, puoi impostare 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 alcune nuove UI per le impostazioni avanzate di Squoosh superino 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.
Questo processo può essere basato su script con Puppeteer e puoi effettivamente creare un'istantanea Lighthouse per 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 potrebbe essere necessario verificare manualmente alcuni criteri di accessibilità:
Intervalli di tempo
Una delle maggiori differenze tra i risultati in termini di prestazioni sul campo (ad esempio in CrUX) e in lab (ad esempio in Lighthouse) è la mancanza di input da parte degli utenti. È qui che può rivelarsi utile un intervallo di tempo, l'ultima modalità di flusso di utenti.
Un intervallo di tempo esegue controlli di Lighthouse per un determinato periodo di tempo, che potrebbe o meno includere una navigazione. Questo è un ottimo modo per tenere traccia di ciò che accade 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 sono l'attivatore di CLS, si tratta di un problema che in precedenza non sarebbe stato in grado di rilevare e risolvere.
Per dimostrarlo, ecco un sito di test che simula gli annunci che vengono 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 relativo slot entra nell'area visibile. Poiché lo spazio non è stato riservato a questi quadrati rossi, le schede sottostanti sono scomposte, causando variazioni del layout.
Il valore CLS di una normale navigazione in Lighthouse sarà pari a 0. Tuttavia, una volta eseguita lo scorrimento, la pagina presenterà variazioni di 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 standard con un intervallo di tempo che contiene sia una navigazione sia uno scorrimento successivo:
Esaminando ogni passaggio, il passaggio di sola navigazione mostra un CLS pari a 0. Ottimo sito!
Tuttavia, il passaggio "Navigare e scorrere" racconta una storia diversa. Al momento sono disponibili solo Tempo di blocco totale e Variazione del layout cumulativo per intervalli di tempo, ma i contenuti caricati con il metodo lazy in questa pagina consentono chiaramente di valutare il CLS del sito.
In precedenza, Lighthouse non sarebbe stato in grado di identificare questo comportamento problematico del CLS, anche se quasi certamente si sarebbe verificato nell'esperienza degli utenti reali. I test delle prestazioni rispetto alle interazioni basate su script migliorano significativamente la fedeltà del lab.
Richiesta di feedback
Le nuove API per i flussi utente in Lighthouse possono fare molte cose nuove, ma misurare il tipo di scenari in cui gli utenti si trovano di fronte potrebbe comunque essere complicato.
In caso di domande, non esitare a contattarci nei forum di discussione di Lighthouse e a segnalare eventuali bug o suggerimenti in Issue Tracker.