Einführung in Lighthouse
Wie wir im vorherigen Abschnitt gesehen haben, konzentrieren sich die Core Web Vitals auf Aspekte der Benutzererfahrung durch Ladeleistung (Largest Contentful Paint), Interaktivität (First Input Delay) und visuelle Stabilität (Cumulative Layout Shift).
In dieser Lektion werden wir uns darauf konzentrieren, wie man Core Web Vitals mithilfe einer simulierten Umgebung namens Lighthouse misst.
Hinweis: Für diese Lektion werden wir Chrome Dev Tools verwenden. Es gibt jedoch viele Möglichkeiten, Lighthouse auszuführen.
Lighthouse funktioniert, indem es eine Reihe von Audits für eine bereitgestellte URL durchführt. Basierend auf diesen Audits erstellt es einen Bericht darüber, wie gut die Seite abgeschnitten hat. Wenn es Bereiche gibt, die verbessert werden müssen, gibt der Bericht Aufschluss darüber, wie man sie verbessern kann.
Schauen wir uns zwei Beispiele eines Lighthouse-Berichts an, um den Unterschied zwischen einer Seite mit gesunden Core Web Vitals und einer ohne zu sehen.
Optimiertes Beispiel
Um ein Beispiel dafür zu sehen, wie Lighthouse funktioniert, verwenden wir unsere Homepage.
- Öffnen Sie Chrome.
- Navigieren Sie in einem Inkognito-Fenster zu
https://nextjs.org. - Öffnen Sie DevTools und klicken Sie auf den Tab Lighthouse.
- Klicken Sie auf Generate Report.
Dadurch wird ein Bericht erstellt, der weniger als 60 Sekunden dauern sollte.
Hinweis: Es ist wichtig, Berichte in einem Inkognito-Fenster auszuführen, da Drittanbieter-Plugins Ihren Bericht beeinflussen können.
Darüber hinaus können Werbeblocker das Laden von Skripten blockieren, was zu einem unvollständigen Audit führen würde. Erwägen Sie, eine saubere Persona einzurichten, um die Leistung zu messen.
Hier ist ein Beispielbericht:
Nicht optimiertes Beispiel
Für dieses Tutorial haben wir eine Anwendung ohne Optimierungen erstellt.
Projekteinrichtung
Dies ist eine grundlegende, nicht optimierte Anwendung, die Besuchern zwei Dinge ermöglicht: nach einem Land zu suchen, um dessen Bevölkerung abzurufen, und auf einen Button zu klicken, um ein Pop-up-Modal zu lesen. Diese Anwendung soll die Realität der Arbeit an großen Anwendungen nachahmen, bei der die Verwendung von Bibliotheken Dritter nicht vermieden werden kann.
Starter-Code herunterladen
Produktionsbuild ausführen
Um genaue Berichte von Lighthouse zu erhalten, sollte Ihre Anwendung immer mit einem Produktionsbuild getestet werden. Um einen Produktionsbuild auszuführen, wechseln Sie in das Projektverzeichnis:
Erstellen Sie Ihre Anwendung, indem Sie next build ausführen, und starten Sie den Server im Produktionsmodus mit next start.
Lassen Sie uns einen Lighthouse-Bericht mit Chrome DevTools erstellen. Sobald der Bericht abgeschlossen ist, beginnen wir mit der Optimierung der Seite und der Verbesserung der Vitals.
Weiterführende Literatur
- Google Chrome: Lighthouse Scoring Calculator