Eine Einführung in die programmatische Ausführung von Lighthouse

Veröffentlicht: 2022-03-10

Kurze Zusammenfassung ↬ Die Möglichkeit, die Lighthouse-Analysesuite von Google programmgesteuert auszuführen, bietet viele Vorteile, insbesondere für größere oder komplexere Webanwendungen. Die programmgesteuerte Verwendung von Lighthouse ermöglicht es Ingenieuren, eine Qualitätsüberwachung für Websites einzurichten, die mehr Anpassungen erfordern, als einfache Anwendungen von Lighthouse (wie Lighthouse CI) zulassen. Dieser Artikel enthält eine kurze Einführung in Lighthouse, erläutert die Vorteile der programmgesteuerten Ausführung und führt Sie durch eine grundlegende Konfiguration.

Lighthouse ist Googles Suite von Tools zur Analyse der Website-Qualität. Es ermöglicht Ihnen, die Leistung, Zugänglichkeit, SEO und mehr Ihrer Website zu bewerten. Es ist außerdem hochgradig konfigurierbar, wodurch es flexibel genug ist, um für alle Websites nützlich zu sein, von den einfachsten bis zu den hochkomplexen. Diese Flexibilität umfasst mehrere verschiedene Möglichkeiten zum Ausführen der Tests, sodass Sie die Methode auswählen können, die für Ihre Website oder Anwendung am besten geeignet ist.

Eine der einfachsten Möglichkeiten zum Ausführen von Lighthouse ist das DevTools Lighthouse-Panel von Chrome. Wenn Sie Ihre Website in Chrome und dann die DevTools von Chrome öffnen, sollten Sie eine Registerkarte „Leuchtturm“ sehen. Wenn Sie von dort aus auf „Bericht erstellen“ klicken, sollten Sie einen vollständigen Bericht über die Qualitätsmetriken Ihrer Website erhalten.

Worauf ich mich in diesem Artikel konzentriere, liegt jedoch am anderen Ende des Spektrums. Das programmgesteuerte Ausführen von Lighthouse mit JavaScript ermöglicht es uns, benutzerdefinierte Läufe zu konfigurieren, die Funktionen auszuwählen und auszuwählen, die wir testen möchten, Ergebnisse zu sammeln und zu analysieren und Konfigurationsoptionen festzulegen, die für unsere Websites und Anwendungen einzigartig sind.

Vielleicht arbeiten Sie beispielsweise an einer Website, auf die über mehrere URLs zugegriffen werden kann – jede mit ihren eigenen Daten und ihrem eigenen Stil und vielleicht sogar mit Markup, das Sie analysieren möchten. Oder vielleicht möchten Sie die Daten aus jedem Testlauf sammeln und auf unterschiedliche Weise zusammenstellen oder analysieren. Die Möglichkeit zu wählen, wie Sie eine Lighthouse-Analyse durchführen möchten, basierend darauf, was für Ihre Website oder Anwendung am besten funktioniert, macht es einfacher, die Qualität der Website zu überwachen und festzustellen, wo es Probleme mit Ihrer Website gibt, bevor sie sich häufen oder zu viele Probleme für Sie verursachen Benutzer der Website.

Das programmgesteuerte Ausführen von Lighthouse ist nicht für jede Site die beste Wahl, und ich ermutige Sie, all die verschiedenen Methoden zu erkunden, die das Lighthouse-Team für die Verwendung des Tools entwickelt hat. Wenn Sie sich jedoch für die programmgesteuerte Verwendung von Lighthouse entscheiden, sollten Ihnen die folgenden Informationen und das Tutorial hoffentlich den Einstieg erleichtern.

Lighthouse-Optionen anpassen

Der Vorteil der programmgesteuerten Ausführung von Lighthouse besteht nicht nur in der Möglichkeit, Lighthouse selbst zu konfigurieren, sondern in all den Dingen, die Sie möglicherweise rund um die Lighthouse-Tests tun möchten oder müssen. Lighthouse hat einige großartige Dokumentationen, um Ihnen den Einstieg zu erleichtern. Um das Beste aus der programmgesteuerten Ausführung herauszuholen, müssen Sie sich jedoch hauptsächlich an zwei Stellen vertiefen und mehr über die Funktionsweise von Lighthouse erfahren: Ihre Testläufe konfigurieren und Ihre Testergebnisse melden.

Lighthouse-Testlaufkonfiguration

Das Konfigurieren eines Lighthouse-Testlaufs ist eine dieser Aufgaben, die so einfach oder so komplex sein kann, wie Sie möchten.

Wenn Sie Lighthouse programmgesteuert ausführen, können Sie an drei Stellen benutzerdefinierte Optionen bereitstellen: die zu testende URL, Chrome-Optionen und das Lighthouse-Konfigurationsobjekt. Sie können alle drei Parameter in der Funktion zum Ausführen von Lighthouse aus der Lighthouse-Dokumentation sehen:

 function launchChromeAndRunLighthouse(url, opts, config = null) { return chromeLauncher.launch({chromeFlags: opts.chromeFlags}).then(chrome => { opts.port = chrome.port; return lighthouse(url, opts, config).then(results => { return chrome.kill().then(() => results.lhr) }); }); }

Sie können jeden Code verwenden, den Sie benötigen, um diese Parameter zu erstellen. Angenommen, Sie haben eine Website mit mehreren Seiten oder URLs, die Sie testen möchten. Vielleicht möchten Sie diesen Test in einer CI-Umgebung als Teil Ihrer CI-Aufgaben ausführen und bei jeder Ausführung der Aufgabe alle erforderlichen Seiten überprüfen. Mit diesem Setup können Sie JavaScript verwenden, um Ihre URLs zu erstellen und eine Schleife zu erstellen, die Lighthouse für jede URL ausführt.

Alle Chrome-Optionen, die Sie möglicherweise benötigen, können in einem Objekt angegeben werden, das an chrome-launcher übergeben wird. In dem Beispiel aus der Dokumentation enthält das opts -Objekt ein Array chromeFlags , das Sie an chrome-launcher übergeben können, und einen Port, in dem Sie den von chrome-launcher verwendeten Port speichern und ihn dann an Lighthouse übergeben können.

Schließlich können Sie mit dem Lighthouse-Konfigurationsobjekt beliebige Lighthouse-spezifische Optionen hinzufügen. Das Lighthouse-Paket stellt ein Standardkonfigurationsobjekt bereit, das unverändert verwendet oder erweitert und geändert werden kann. Sie können dieses Objekt für eine Vielzahl von Dingen verwenden, einschließlich der Angabe, welche Lighthouse-Testkategorien Sie testen möchten.

Mehr nach dem Sprung! Lesen Sie unten weiter ↓

Sie können den emulatedFormFactor verwenden, um anzugeben, ob der Test in einem mobilen oder Desktop-Emulator ausgeführt werden soll. Sie können extraHeaders verwenden, um alle Cookies hinzuzufügen, die Sie möglicherweise im Browser verwenden müssen. Beispielsweise könnte ein Test, der nur die Kategorie Barrierefreiheit auf einem Desktop-Emulator ausführt, der die Ergebnisse als HTML ausgibt, ein Konfigurationsobjekt haben, das wie folgt aussieht:

 const lighthouseOptions = { extends: 'lighthouse:default', settings: { onlyCategories: ['accessibility'], emulatedFormFactor:'desktop', output: ['html'], }, }

Dieses Beispiel stellt eine minimale Konfiguration dar. Es gibt noch viel mehr, was Sie tun können. Die Lighthouse-Konfigurationsdokumentation enthält viel mehr Informationen. Sie haben auch eine Reihe von Beispielkonfigurationsobjekten für einige komplexere Implementierungen.

Benutzerdefinierte Ergebnisberichte

Wenn Sie Lighthouse programmgesteuert ausführen, können Sie die Ergebnisse in einer oder mehreren von drei formatierten Optionen zurückgeben lassen und – und das ist meiner Meinung nach das aufregendste Stück – Sie können auf das Rohobjekt Lighthouse Result (LHR) zugreifen.

HTML, JSON, CSV

Lighthouse formatiert die Ergebnisse automatisch auf drei verschiedene Arten: HTML, JSON oder CSV. Dies sind alles vorkonfigurierte Ergebnisse, die auf der grundlegenden Lighthouse-Berichtsvorlage basieren, die Sie sehen, wenn Sie beispielsweise einen Lighthouse-Test in Chrome DevTools ausführen. Im Konfigurationsobjekt lighthouseOptions aus dem vorherigen Abschnitt sehen Sie einen Schlüssel für die output , der ein Array mit einer einzelnen Zeichenfolge enthält: html . Dies gibt an, dass ich nur die Ergebnisse zurückgegeben haben möchte, die als HTML formatiert sind. Wenn ich die Ergebnisse sowohl als HTML als auch als JSON haben wollte, würde dieses Array wie folgt aussehen ['html', 'json'] .

Sobald Lighthouse ausgeführt wurde, gibt es ein Ergebnisobjekt zurück, das zwei Schlüssel enthält: report und lhr . Wir werden im nächsten Abschnitt über den Inhalt des lhr Schlüssels sprechen, aber der report enthält ein Array mit den Ergebnissen, die so formatiert sind, wie Sie es angefordert haben. Wenn wir also beispielsweise ['html', 'json'] angefordert haben, dann results.report[0] unsere Ergebnisse im HTML-Format und results.report[1] unsere Ergebnisse im JSON-Format.

Das LHR-Objekt

Durch das programmgesteuerte Ausführen von Lighthouse erhalten Sie auch Zugriff auf ein viel flexibleres Ergebnisobjekt: das LHR-Objekt. Dieses Objekt enthält die Rohergebnisse und einige Metadaten Ihres Lighthouse-Laufs. Eine vollständigere Dokumentation finden Sie im Lighthouse-Github-Repository.

Sie können diese Ergebnisse auf vielfältige Weise verwenden, einschließlich der Erstellung benutzerdefinierter Berichte und der Erfassung von Daten aus mehreren Läufen zur Analyse.

Beispiel: Ausführen eines Barrierefreiheitstests für Mobilgeräte und Desktops

Nehmen wir an, ich habe eine Website, die verschiedene Komponenten lädt, je nachdem, ob der Benutzer einen kleineren oder einen größeren Bildschirm verwendet, was bedeutet, dass der HTML-Code für jede Version der Website etwas anders sein wird. Ich möchte sicherstellen, dass beide Versionen der Website bei den Lighthouse-Barrierefreiheitstests eine Punktzahl von 95 erreichen und dass kein Code in unseren main übernommen wird, der diesen Standard nicht erfüllt.

Hinweis : Wenn Sie ein funktionierendes Beispiel für den folgenden Code sehen möchten, der die Sparkbox-Homepage analysiert, finden Sie das Repository hier.

Ich kann Lighthouse so konfigurieren, dass die Barrierefreiheitskategorie zweimal ausgeführt wird, wobei für jedes unterschiedliche Konfigurationsobjekte bereitgestellt werden – eines setzt den emulatedFormFactor auf desktop und eines auf mobile . Eine einfache Möglichkeit, dies zu tun, besteht darin, ein Array mit beiden Objekten zu erstellen, wie unten gezeigt.

 const lighthouseOptionsArray = [ { extends: 'lighthouse:default', settings: { onlyCategories: ['accessibility'], emulatedFormFactor:'desktop', output: ['html', 'json'], }, }, { extends: 'lighthouse:default', settings: { onlyCategories: ['accessibility'], emulatedFormFactor:'mobile', output: ['html', 'json'], }, }, ]

Dann kann ich eine Funktion erstellen, die dieses Array durchläuft, und einen Lighthouse-Test für jedes Objekt ausführen, das innerhalb des Arrays gefunden wird.

Eine Sache, die zu beachten ist, ist, dass zwischen jedem Lauf eine Verzögerung eingefügt werden muss, da Chromium sonst verwirrt werden kann und die Läufe fehlerhaft sind. Dazu habe ich eine wait -Funktion hinzugefügt, die ein Promise zurückgibt, wenn das setTimeout Intervall abgelaufen ist.

 function wait(val) { return new Promise(resolve => setTimeout(resolve, val)); } function launchLighthouse(optionSet, opts, results) { return chromeLauncher .launch({ chromeFlags: opts.chromeFlags }) .then(async chrome => { opts.port = chrome.port; try { results = await lighthouse(url, opts, optionSet); } catch (e) { console.error("lighthouse", e); } if (results) reportResults(results, runEnvironment, optionSet, chrome); await wait(500); chrome.kill(); }); } async function runLighthouseAnalysis() { let results; const opts = { chromeFlags: ["--no-sandbox", "--headless"] }; for (const optionSet of lighthouseOptionsArray) { console.log("****** Starting Lighthouse analysis ******"); await launchLighthouse(optionSet, opts, results); } }

In diesem Fall sende ich die Ergebnisse an eine reportResults Funktion. Von dort aus speichere ich die Ergebnisse in lokalen Dateien, drucke die Ergebnisse an die Konsole und sende die Ergebnisse an eine Funktion, die bestimmt, ob die Tests unsere Zugänglichkeitsschwelle erfüllen oder nicht bestehen.

 async function reportResults(results, runEnvironment, optionSet, chrome) { if (results.lhr.runtimeError) { return console.error(results.lhr.runtimeError.message); } await writeLocalFile(results, runEnvironment, optionSet); printResultsToTerminal(results.lhr, optionSet); return passOrFailA11y(results.lhr, optionSet, chrome); }

Für dieses Projekt möchte ich die JSON-Ergebnisse in einem bestimmten Verzeichnis für unsere CI-Testläufe und die HTML-Datei in einem bestimmten Verzeichnis für unsere lokalen Testläufe speichern können. Lighthouse gibt diese verschiedenen Arten von Ergebnissen in einem Array in der Reihenfolge zurück, in der sie angefordert wurden.

In diesem Beispiel fragt unser Array in unserem lighthouseOptions -Objekt also zuerst nach HTML und dann nach JSON. Das report enthält also zuerst die HTML-formatierten Ergebnisse und dann die JSON-formatierten Ergebnisse. Die Funktion writeToLocalFile speichert dann die korrekte Version der Ergebnisse in einer Datei mit einem benutzerdefinierten Namen.

 function createFileName(optionSet, fileType) { const { emulatedFormFactor } = optionSet.settings; const currentTime = new Date().toISOString().slice(0, 16); const fileExtension = fileType === 'json' ? 'json' : 'html'; return `${currentTime}-${emulatedFormFactor}.${fileExtension}`; } function writeLocalFile(results, runEnvironment, optionSet) { if (results.report) { const fileType = runEnvironment === 'ci' ? 'json' : 'html'; const fileName = createFileName(optionSet, fileType); fs.mkdirSync('reports/accessibility/', { recursive: true }, error => { if (error) console.error('error creating directory', error); }); const printResults = fileType === 'json' ? results.report[1] : results.report[0]; return write(printResults, fileType, `reports/accessibility/${fileName}`).catch(error => console.error(error)); } return null; }

Ich möchte auch die Ergebnisse auf dem Terminal ausdrucken, wenn die Testläufe abgeschlossen sind. Dies bietet eine schnelle und einfache Möglichkeit, die Ergebnisse anzuzeigen, ohne eine Datei öffnen zu müssen.

 function printResultsToTerminal(results, optionSet) { const title = results.categories.accessibility.title; const score = results.categories.accessibility.score * 100; console.log('\n********************************\n'); console.log(`Options: ${optionSet.settings.emulatedFormFactor}\n`); console.log(`${title}: ${score}`); console.log('\n********************************'); }

Und schließlich möchte ich in der Lage sein, meine Testläufe nicht zu bestehen, wenn die Barrierefreiheitsbewertungen meinen Schwellenwert von 95 nicht erreichen.

 function passOrFailA11y(results, optionSet, chrome) { const targetA11yScore = 95; const { windowSize } = optionSet; const accessibilityScore = results.categories.accessibility.score * 100; if (accessibilityScore) { if (windowSize === 'desktop') { if (accessibilityScore < targetA11yScore) { console.error(`Target accessibility score: ${targetA11yScore}, current accessibility score ${accessibilityScore}`); chrome.kill(); process.exitCode = 1; } } if (windowSize === 'mobile') { if (accessibilityScore < targetA11yScore) { console.error(`Target accessibility score: ${targetA11yScore}, current accessibility score ${accessibilityScore}`); chrome.kill(); process.exitCode = 1; } } } }

Ich lade Sie alle ein, damit herumzuspielen und all die verschiedenen Möglichkeiten zu erkunden, wie Lighthouse Ihnen helfen kann, die Qualität Ihrer Website zu überwachen.

Schlussbemerkungen

Obwohl ich das obige Beispiel absichtlich relativ einfach gehalten habe, hoffe ich, dass es Ihnen einen guten Überblick darüber gegeben hat, was erreicht werden kann, wenn Lighthouse programmgesteuert ausgeführt wird. Und ich hoffe, es inspiriert Sie dazu, neue Wege zu finden, dieses flexible, leistungsstarke Tool zu nutzen.

Wie Peter Drucker sagte:

„Was man nicht messen kann, kann man nicht verbessern.“

In der Lage zu sein, die Qualität unserer Website nicht nur zu messen, sondern zu überwachen, insbesondere bei komplexen Websites, wird uns dabei helfen, ein besseres Web zu erstellen.

Weiterführende Literatur zu SmashingMag:

A/B-Tests für Mobile-First-Erlebnisse
Wie man ein Designkonzept auf Wirksamkeit testet
Die Bedeutung manueller Barrierefreiheitstests
Maschinelles Lernen für Front-End-Entwickler mit Tensorflow.js
Beginnen Sie mit dem UI-Design mit diesen Tipps, um Ihren Workflow zu beschleunigen