Neu in Lighthouse 8.4

Lighthouse ist ein automatisiertes Tool zur Prüfung von Websites, das Entwicklern Möglichkeiten und Diagnosen zur Verfügung stellt, mit denen sie die Nutzerfreundlichkeit ihrer Websites verbessern können. Der Dienst ist in den Chrome-Entwicklertools, in npm (als Knotenmodul und Befehlszeile) oder als Browsererweiterung (in Chrome und Firefox) verfügbar. Es wird für viele Google-Dienste verwendet, einschließlich web.dev/measure und PageSpeed Insights.

Lighthouse 8.4 ist sofort über die Befehlszeile und in Chrome Canary verfügbar. Sie wird in Chrome 95 als stabile Version verfügbar sein und innerhalb einer Woche in PageSpeed Insights verfügbar sein.

Verwenden Sie die folgenden Befehle, um die Lighthouse Node CLI auszuprobieren:

npm install -g lighthouse
lighthouse https://www.example.com --view

Eine vollständige Liste der Änderungen finden Sie im Änderungsprotokoll 8.4.

Neue Prüfungen

Largest Contentful Paint-Bilder nicht per Lazy Loading laden

Lazy-Loading-Bilder sind eine effektive Möglichkeit, nicht sichtbare Bilder zu verzögern, damit sie nicht das Laden von Inhalten beeinträchtigen, die „above the fold“ (ohne Scrollen sichtbar) sind.

Wenn das LCP-Element einer Seite jedoch ein Bild ist, kann das Lazy Loading erhebliche negative Auswirkungen auf den LCP haben. Der Browser kann das Bild in die Warteschlange stellen und zuerst andere Ressourcen abrufen, anstatt das Bild für den sofortigen Download zu priorisieren. Eine aktuelle Studie zum Lazy Loading in WordPress ergab, dass der LCP bei einigen Websites um bis zu 15% verbessert werden kann, wenn Bilder im ersten Darstellungsbereich nicht Lazy Loading sind.

Lighthouse erkennt jetzt, ob das LCP-Element ein Lazy-Load-Bild war, und empfiehlt, das Attribut loading daraus zu entfernen.

Weitere Informationen finden Sie im ursprünglichen Vorschlag und in der Pull-Anfrage für die Implementierung.

Einen mobilen Darstellungsbereich festlegen, um First Input Delay zu verbessern

Die Prüfung „viewport“ ist schon seit Jahren Teil der Kategorie „Best Practices“, aber 8.4 begrüßt diesen Rat auch in der Kategorie „Leistung“.

Viele mobile Browser unterstützen die Funktion zum Zoomen durch Doppeltippen. Damit können Nutzer Inhalte, die nicht für mobile Bildschirme vorgesehen sind, ohne eindeutiges mobiles <meta name="viewport"> vergrößern. In der Praxis bedeutet das, dass der Browser nach dem Tippen des Nutzers bis zu 300 ms warten muss, um festzustellen, ob ein zweiter Tippen folgt. Während dieser Zeit kann die Seite nicht auf das erste Tippen reagieren. Dies entspricht einem fehlenden FID von mehreren hundert Millisekunden.

In einer kürzlich durchgeführten Studie mit Daten aus dem HTTP-Archiv hatten über die Hälfte der Websites, die in Lighthouse eine Punktzahl von 90 oder höher erhielten, aber bei mindestens einem Core Web Vital einen Fehler aufweisen, keinen mobilen Darstellungsbereich und FID nicht. Daher wird im Abschnitt zur Lighthouse-Leistung jetzt empfohlen, einen Darstellungsbereich wie den folgenden hinzuzufügen, wenn keiner gefunden wird:

<meta name="viewport" content="width=device-width">

Weitere Informationen finden Sie unter Problem mit dem Angebot und Pull-Anfrage zur Implementierung.

Kontakt zum Lighthouse-Team

Informationen zu den neuen Funktionen, Änderungen in Version 8.4 oder andere Informationen zu Lighthouse erhältst du hier:

• Über das Lighthouse-GitHub-Repository können Sie ein Problem melden oder Feedback geben.
• Sie erreichen das Lighthouse-Team auf Twitter (@____lighthouse).