Mit der neuen Lighthouse API können Sie die Leistung und Best Practices während eines User-Flows messen.
Lighthouse ist ein fantastisches Tool, um die Leistung und Best Practices beim ersten Seitenaufbau zu testen. Es war jedoch bisher schwierig, mit Lighthouse andere Aspekte des Lebenszyklus einer Seite zu analysieren, z. B.:
- Seitenaufbau mit Warmstart-Cache
- Seiten mit einem aktivierten Service Worker
- Berücksichtigung potenzieller Nutzerinteraktionen
Das bedeutet, dass Lighthouse wichtige Informationen entgehen können. Die Core Web Vitals basieren auf allen Seitenaufrufen, nicht nur auf denen mit leerem Cache. Außerdem können Messwerte wie Cumulative Layout Shift (CLS) für die gesamte Zeit gemessen werden, in der eine Seite geöffnet ist.
Lighthouse bietet eine neue API für den User-Flow, mit der Labortests zu jedem Zeitpunkt im Lebenszyklus einer Seite möglich sind. Puppeteer wird verwendet, um Seitenaufbauten zu skripten und synthetische Nutzerinteraktionen auszulösen. Lighthouse kann auf verschiedene Arten aufgerufen werden, um während dieser Interaktionen wichtige Informationen zu erfassen. Das bedeutet, dass die Leistung sowohl beim Seitenaufbau als auch bei Interaktionen mit der Seite gemessen werden kann. Prüfungen der Barrierefreiheit im Internet können in CI ausgeführt werden, nicht nur in der ersten Ansicht, sondern auch tief im Bezahlvorgang, um sicherzustellen, dass es keine Rückschritte gibt.
In fast jedes Puppeteer-Skript, das für einen funktionierenden User-Flow geschrieben wurde, kann jetzt an einer beliebigen Stelle Lighthouse eingefügt werden, um die Leistung und Best Practices zu messen. In dieser Anleitung werden die neuen Lighthouse-Modi vorgestellt, mit denen verschiedene Teile von User-Flows gemessen werden können: Navigationen, Snapshots und Zeitspannen.
Einrichtung
Die User-Flow-APIs befinden sich noch in der Vorabversion, sind aber bereits in Lighthouse verfügbar. Wenn Sie die folgenden Demos ausprobieren möchten, benötigen Sie Node-Version 14 oder höher. Erstellen Sie ein leeres Verzeichnis und führen Sie darin Folgendes aus:
# 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
Navigation
Der neue Lighthouse-Modus „Navigation“ gibt dem (bisherigen) Standardverhalten von Lighthouse einen Namen: die Analyse des kalten Ladens einer Seite. In diesem Modus können Sie die Leistung beim Seitenaufbau überwachen. User-Flows bieten jedoch auch die Möglichkeit, neue Erkenntnisse zu gewinnen.
So erstellen Sie ein Script für Lighthouse, um einen Seitenaufbau zu erfassen:
- Verwenden Sie Puppeteer, um den Browser zu öffnen.
- Lighthouse-User-Flow starten
- Rufen Sie die Ziel-URL auf.
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();
Dies ist der einfachste Ablauf. Wenn Sie den Bericht öffnen, wird eine Zusammenfassung mit nur einem Schritt angezeigt. Wenn Sie auf diesen Schritt klicken, wird ein herkömmlicher Lighthouse-Bericht für diese Navigation angezeigt.
Wie bei Lighthouse üblich, wird diese Seite geladen, nachdem der Cache oder der lokale Speicher geleert wurde. Bei echten Nutzern, die eine Website besuchen, gibt es jedoch eine Mischung aus Besuchen mit kalten und warmen Caches. Es kann einen großen Leistungsunterschied zwischen einem kalten Laden wie diesem und einem Nutzer geben, der mit einem noch warmen Cache zur Seite zurückkehrt.
Warm Load erfassen
Sie können diesem Script auch eine zweite Navigation hinzufügen und diesmal das Löschen des Cache und des Speichers deaktivieren, das Lighthouse standardmäßig bei Navigationen durchführt. Im nächsten Beispiel wird ein Artikel auf web.dev geladen, um zu sehen, wie sehr er vom Caching profitiert:
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();
Der resultierende Flussbericht sieht in etwa so aus:
Die Kombination aus Kalt- und Warmladevorgängen bietet ein umfassenderes Bild davon, was echte Nutzer erleben. Wenn Sie eine Website haben, auf der Nutzer bei einem Besuch viele Seiten laden, können Sie sich so ein realistischeres Bild davon machen, was sie in der Praxis erleben.
Snapshots
Snapshots sind ein neuer Modus, in dem Lighthouse-Prüfungen zu einem bestimmten Zeitpunkt ausgeführt werden. Im Gegensatz zu einer normalen Lighthouse-Ausführung wird die Seite nicht neu geladen. So können Sie eine Seite einrichten und genau in dem Zustand testen, in dem sie sich befindet, z. B. mit einem geöffneten Drop-down-Menü oder einem teilweise ausgefüllten Formular.
In diesem Beispiel möchten Sie prüfen, ob eine neue Benutzeroberfläche für die erweiterten Einstellungen in Squoosh die automatisierten Lighthouse-Prüfungen besteht. Diese Einstellungen sind nur sichtbar, wenn ein Bild geladen wurde und das Optionsmenü maximiert ist, um die erweiterten Einstellungen anzuzeigen.
Dieser Prozess kann mit Puppeteer gescriptet werden und Sie können bei jedem Schritt einen Lighthouse-Snapshot erstellen:
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();
Der resultierende Bericht zeigt, dass die Ergebnisse im Allgemeinen gut sind, aber es gibt möglicherweise einige Kriterien für die Barrierefreiheit im Internet, die manuell überprüft werden müssen:
Zeitspannen
Einer der größten Unterschiede zwischen den Leistungsergebnissen im Feld (z. B. aus CrUX) und im Labor (z. B. aus Lighthouse) ist das Fehlen von Nutzereingaben. Hier kann eine Zeitspanne – der letzte User-Flow-Modus – helfen.
Bei einer Zeitspanne werden Lighthouse-Prüfungen über einen bestimmten Zeitraum ausgeführt, der eine Navigation enthalten kann oder auch nicht. So lässt sich gut erfassen, was während der Interaktionen auf einer Seite passiert. In Lighthouse wird die CLS beispielsweise standardmäßig während des Seitenaufbaus gemessen. In der Praxis wird die CLS jedoch von der ersten Navigation bis zum Schließen der Seite gemessen. Wenn Nutzerinteraktionen der Auslöser für CLS sind, konnte Lighthouse dies bisher nicht erkennen und beheben.
Eine reguläre Lighthouse-Navigation hat einen CLS von 0. Sobald jedoch gescrollt wird, kommt es zu problematischen Layoutverschiebungen und der CLS-Wert steigt.
Mit dem folgenden Script wird ein Bericht zum Nutzerfluss mit beiden Aktionen erstellt, um den Unterschied zu verdeutlichen.
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();
Dadurch wird ein Bericht erstellt, in dem eine reguläre Navigation mit einer Zeitspanne verglichen wird, die sowohl eine Navigation als auch ein anschließendes Scrollen enthält:
Wenn wir uns die einzelnen Schritte genauer ansehen, sehen wir, dass der Schritt „Nur Navigation“ einen CLS von 0 hat. Tolle Website!
Der Schritt „Navigieren und scrollen“ zeigt jedoch ein anderes Bild. Derzeit sind nur die Messwerte „Total Blocking Time“ und „Cumulative Layout Shift“ in Zeitspannen verfügbar, aber die Inhalte auf dieser Seite, die erst bei Bedarf geladen werden, beeinträchtigen den CLS-Wert der Website erheblich.
Früher konnte Lighthouse dieses problematische CLS-Verhalten nicht erkennen, obwohl es bei echten Nutzern mit ziemlicher Sicherheit aufgetreten wäre. Leistungstests über skriptbasierte Interaktionen verbessern die Lab-Genauigkeit erheblich.
Feedback gesucht
Die neuen User-Flow-APIs in Lighthouse bieten viele neue Möglichkeiten, aber es kann immer noch kompliziert sein, die Art von Szenarien zu messen, mit denen Ihre Nutzer konfrontiert sind.
Wenn Sie Fragen haben, können Sie sich in den Lighthouse-Diskussionsforen an uns wenden. Fehler oder Vorschläge können Sie im Issue Tracker melden.