Probieren Sie eine neue Lighthouse API aus, um die Leistung und Best Practices während des gesamten Nutzerflusses zu messen.
Lighthouse ist ein hervorragendes Tool, um die Leistung und Best Practices beim ersten Seitenaufbau zu testen. Es war jedoch bisher schwierig, mit Lighthouse zu analysieren, wie andere Aspekte des Lebens auf einer Seite aussehen. Hier einige Beispiele:
- Seite wird mit einem Warm-Cache geladen
- Seiten mit einem aktivierten Service Worker
- Potenzielle Interaktionen von Nutzenden berücksichtigen
Das bedeutet, dass in Lighthouse unter Umständen wichtige Informationen fehlen. Die Core Web Vitals basieren auf allen Seitenladevorgängen, nicht nur auf denen mit leerem Cache. Darüber hinaus sind Messwerte wie Cumulative Layout Shift (CLS) für die gesamte Zeit messbar, während eine Seite geöffnet ist.
Lighthouse hat eine neue User Flow API, mit der im Labor jederzeit während der Lebensdauer einer Seite getestet werden kann. Puppeteer wird verwendet, um Skripte für den Seitenaufbau zu erstellen und synthetische Nutzerinteraktionen auszulösen. Lighthouse kann auf mehrere Arten aufgerufen werden, um wichtige Erkenntnisse während dieser Interaktionen zu erfassen. Das bedeutet, dass die Leistung während des Seitenaufbaus und bei Interaktionen mit der Seite gemessen werden kann. Die Prüfung der Barrierefreiheit kann in CI durchgeführt werden, nicht nur für die erste Ansicht, sondern auch tief in den Bezahlvorgang, um sicherzustellen, dass nichts mehr passiert.
Bei fast jedem Puppeteer-Skript, das für einen funktionierenden User Flow geschrieben wurde, kann Lighthouse jederzeit eingefügt werden, um die Leistung und Best Practices durchgängig zu messen. In dieser Anleitung werden die neuen Lighthouse-Modi beschrieben, mit denen verschiedene Teile des Nutzerflusses gemessen werden können: Navigation, Momentaufnahmen und Zeitspannen.
Einrichtung
Die User Flow APIs befinden sich noch in der Vorabversion, sind aber bereits in Lighthouse verfügbar. Sie benötigen Node Version 14 oder höher, um die Demos unten ausprobieren zu können. Erstellen Sie ein leeres Verzeichnis und führen Sie 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
Die neue Lighthouse-Navigation Modus gibt dem (bisher) Standardverhalten von Lighthouse einen Namen: Analysieren des kalten Ladens einer Seite. Mit diesem Modus lässt sich die Leistung beim Seitenaufbau überwachen. Nutzerflüsse bieten aber auch neue Erkenntnisse.
So führen Sie ein Skript für die Erfassung eines Seitenaufbaus in Lighthouse aus:
- Öffnen Sie den Browser mit Puppeteer.
- Einen User Flow in Lighthouse 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 der Bericht geöffnet wird, enthält er eine Zusammenfassung mit nur einem Schritt. Wenn Sie darauf klicken, wird ein herkömmlicher Lighthouse-Bericht für diese Navigation geöffnet.
<ph type="x-smartling-placeholder">
Wie bei Lighthouse üblich, wird diese Seite zuerst mit gelöschtem Cache oder lokalem Speicher geladen. Bei echten Nutzern, die eine Website besuchen, werden jedoch sowohl kalte als auch warme Caches besucht. Außerdem kann es einen großen Leistungsunterschied zwischen einem solchen kalten Ladevorgang und einem Nutzer geben, der zu der Seite mit einem noch warmen Cache zurückkehrt.
Warmes Laden erfassen
Sie können diesem Skript auch eine zweite Navigation hinzufügen. Damit wird das Leeren des Cache und das Löschen des Speichers deaktiviert, was standardmäßig in Lighthouse verwendet wird. Im nächsten Beispiel wird ein Artikel auf web.dev geladen, um zu sehen, welche Vorteile das Caching bietet:
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 Besucherfluss-Bericht sieht in etwa so aus:
<ph type="x-smartling-placeholder">
Die Kombination aus kaltem und warmem Laden liefert ein umfassenderes Bild davon, was echte Nutzer erleben. Wenn Sie eine Website haben, auf der Nutzer bei einem Besuch viele Seiten laden, erhalten Sie so einen realistischeren Eindruck davon, was sie vor Ort erleben.
Snapshots
Snapshots sind ein neuer Modus, in dem Lighthouse-Prüfungen zu einem einzigen Zeitpunkt ausgeführt werden. Anders als bei einer normalen Lighthouse-Ausführung wird die Seite nicht neu geladen. Dadurch wird die Möglichkeit freigegeben, eine Seite einzurichten und in ihrem genauen Zustand zu testen, beispielsweise mit einem geöffneten Dropdown-Menü oder einem teilweise ausgefüllten Formular.
Angenommen, Sie möchten überprü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, sodass die erweiterten Einstellungen angezeigt werden.
<ph type="x-smartling-placeholder">
Dieser Prozess kann mit Puppeteer skriptgesteuert 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 daraus resultierende Bericht zeigt, dass die Ergebnisse im Allgemeinen gut sind. Möglicherweise müssen jedoch einige Kriterien für die Barrierefreiheit manuell überprüft werden:
<ph type="x-smartling-placeholder">
Zeitspannen
Einer der größten Unterschiede zwischen den Leistungsergebnissen in der Praxis (z. B. von CrUX) und im Labor (z. B. von Lighthouse) ist das Fehlen von Nutzereingaben. Dabei kann eine Zeitspanne – der letzte User-Flow-Modus – hilfreich sein.
Für eine Zeitspanne werden Lighthouse-Prüfungen über einen bestimmten Zeitraum durchgeführt, die eine Navigation enthalten können oder nicht. So lässt sich hervorragend erfassen, was bei Interaktionen auf einer Seite vor sich geht. Standardmäßig misst Lighthouse den CLS-Wert beim Seitenaufbau, aber in diesem Feld wird der CLS von der ersten Navigation bis zum Schließen der Seite gemessen. Wenn CLS durch Nutzerinteraktionen ausgelöst wird, war das bisher von Lighthouse nicht möglich.
Zur Veranschaulichung findest du hier eine Testwebsite, auf der Werbung simuliert wird, die beim Scrollen in einen Artikel eingeschleust wird, ohne dass dafür Platz reserviert wurde. In einer langen Reihe von Karten wird gelegentlich ein rotes Quadrat hinzugefügt, sobald die Anzeigenfläche im Darstellungsbereich erscheint. Da für diese roten Quadrate kein Platz reserviert war, werden die Karten darunter verschoben, was zu Layoutverschiebungen führt.
Eine normale Lighthouse-Navigation hat einen CLS von 0. Beim Scrollen treten jedoch problematische Layout Shifts auf und der CLS-Wert steigt.
<ph type="x-smartling-placeholder">Mit dem folgenden Skript wird ein Nutzerfluss-Bericht 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.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();
Dadurch wird ein Bericht erstellt, der eine reguläre Navigation mit einer Zeitspanne vergleicht, die sowohl eine Navigation als auch das nachfolgende Scrollen enthält:
<ph type="x-smartling-placeholder">
Für jeden Schritt wird im reinen Navigationsschritt ein CLS von 0 angezeigt. Tolle Website!
Die Schaltfläche "Navigation und Scrollen" eine andere Geschichte erzählen. Derzeit sind nur die Zeiträume „Total Blocking Time“ und „Cumulative Layout Shift“ für Zeiträume verfügbar. Der Lazy-Loading-Inhalt auf dieser Seite gibt aber eindeutig Aufschluss über die CLS-Werte für die Website.
Früher war Lighthouse nicht in der Lage, dieses problematische CLS-Verhalten zu identifizieren, obwohl es mit ziemlicher Sicherheit bei echten Nutzern zum Ausdruck kommt. Durch Leistungstests über scriptbasierte Interaktionen wird die Genauigkeit im Labor erheblich verbessert.
Bitte um Feedback
Die neuen User Flow-APIs in Lighthouse bieten viele neue Möglichkeiten. Die Analyse der Szenarien, mit denen Nutzer konfrontiert sind, kann jedoch kompliziert sein.
Bei Fragen kannst du dich in den Diskussionsforen für Lighthouse an uns wenden. Fehler und Vorschläge kannst du in der Problemverfolgung einreichen.