Mit Lighthouse die Leistung beim Laden von Seiten verbessern

Lighthouse ist ein automatisiertes Tool zur Verbesserung der Qualität Ihrer Website. Du gibst ihm eine URL und erhältst eine Liste mit Empfehlungen dazu, wie du die Seitenleistung verbessern, die Barrierefreiheit von Seiten verbessern und Best Practices umsetzen kannst. Sie können ihn über die Chrome-Entwicklertools, als Chrome-Erweiterung oder sogar als Knotenmodul ausführen, was für die kontinuierliche Integration nützlich ist.

In Lighthouse gibt es schon seit einiger Zeit viele Tipps zur Verbesserung des Seitenaufbaus, zum Beispiel zum Aktivieren der Textkomprimierung oder zum Reduzieren von Scripts, die das Rendering blockieren. Das Lighthouse-Team stellt weiterhin neue Audits bereit, um Ihnen noch nützlichere Tipps zur Beschleunigung Ihrer Websites zu geben. Dieser Beitrag ist eine Zusammenfassung nützlicher Leistungsaudits, die Ihnen möglicherweise noch nicht bekannt sind, z. B.:

• Arbeitsaufschlüsselung im Hauptthread
• Schlüsselanfragen vorab laden
• Die JavaScript-Startzeit ist lang
• Seitenweiterleitungen werden vermieden
• Nicht verwendetes JavaScript
• Verwendet ineffiziente Cache-Richtlinie für statische Assets
• Kostspielige Hin- und Rückflüge zu jedem Abflugort vermeiden
• Videoformate für animierte Inhalte verwenden
• Der gesamte Text bleibt während des Webfont-Ladevorgangs sichtbar
• Unbeschränktes CSS und JavaScript
• Nicht verwendete CSS-Regeln

Arbeitsaufschlüsselung des Hauptthreads

Wenn Sie schon einmal den Leistungsbereich in den Entwicklertools verwendet haben, wissen Sie, dass es mühsam sein kann, sich einen Überblick darüber zu verschaffen, wo CPU-Zeit für das Laden einer Seite aufgewendet wurde. Wir freuen uns, Ihnen mitteilen zu können, dass diese Informationen jetzt einfach und bequem über die neue Prüfung Hauptthread-Arbeitsaufschlüsselung verfügbar sind.

Mit dieser neuen Diagnose wird bewertet, wie viele und welche Art von Aktivität während des Seitenaufbaus auftreten. So können Sie Leistungsprobleme in Bezug auf Layout, Skriptauswertung, Parsing und andere Aktivitäten beheben.

Schlüsselanfragen vorab laden

Wenn Browser Ressourcen abrufen, geschieht das, wenn sie im Dokument und in seinen Unterressourcen Verweise darauf finden. Dies kann manchmal nicht optimal sein, da einige kritische Ressourcen erst relativ spät im Seitenaufbau erkannt werden. Glücklicherweise gibt rel=preload Entwicklern die Möglichkeit, kompatiblen Browsern Hinweise darauf zu geben, welche Ressourcen so schnell wie möglich abgerufen werden sollen. Die neue Prüfung Schlüsselanfragen vorab laden informiert Entwickler darüber, welche Ressourcen von einem schnelleren Laden bis rel=preload profitieren könnten.

Es ist sehr wichtig, dass Sie Leistungsänderungen mit und ohne rel=preload testen und vergleichen, da sich dies auf die Ladeleistung auf eine Weise auswirken kann, die Sie möglicherweise nicht erwarten. Das Vorabladen eines großen Bilds kann beispielsweise das erste Rendering verzögern, aber der Nachteil besteht darin, dass das vorab geladene Bild im Layout früher erscheint. Du solltest immer darauf achten, dass dir die Ergebnisse cool sind!

JavaScript-Startzeit ist lang

Wenn zu viel JavaScript geladen wird, reagiert die Seite möglicherweise nicht mehr, während der Browser sie parst, kompiliert und ausführt. Skripts und Werbung von Drittanbietern sind besonders für übermäßige Skriptaktivitäten verantwortlich, die selbst leistungsstarke Geräte zum Erliegen bringen können. Die neue Prüfung JavaScript-Startzeit ist zu hoch gibt Aufschluss darüber, wie viel CPU-Zeit jedes Script auf einer Seite verbraucht, sowie die zugehörige URL:

Bei dieser Prüfung können Sie auch Kennzeichen von Drittanbietern im Netzwerkbereich aktivieren und die Liste filtern, um Skriptressourcen von Drittanbietern zu ermitteln. Mit den Daten aus diesem Audit sind Sie besser gerüstet, um Quellen übermäßiger JavaScript-Aktivität zu finden, die dazu führen, dass Seiten schnell zu langsam werden. Bei spezifischen Skripts für Ihre Anwendung können Sie Techniken wie Code-Aufteilung und Tree Shaking anwenden, um die JavaScript-Menge auf jeder Seite Ihrer Website zu begrenzen.

Vermeidet Seitenweiterleitungen

Manchmal kann der Server, wenn ein Browser eine URL anfordert, mit einem Statuscode der Ebene 300 antworten. Dadurch führt der Browser eine Weiterleitung an eine andere URL durch. Weiterleitungen sind zwar aus Gründen der Suchmaschinenoptimierung erforderlich, erhöhen aber die Latenz von Anfragen. Dies gilt insbesondere, wenn sie zu anderen Ursprüngen weiterleiten, wodurch zusätzliche DNS-Lookups und Verbindungs-/TLS-Verhandlungszeiten entstehen können.

Weiterleitungen sind für die Landingpages Ihrer Website nicht erwünscht. Damit Sie die Latenz verringern und die Ladeleistung verbessern können, bietet Lighthouse jetzt die Prüfung Vermeiden von Seitenweiterleitungen. Damit erfahren Sie, wenn eine Navigation Weiterleitungen auslöst.

Beachten Sie, dass diese Prüfung in der Entwicklertools-Version von Lighthouse schwer auszuführen ist, da sie die aktuelle URL in der Adressleiste der Seite analysiert, was die Auflösung aller Weiterleitungen widerspiegelt. Am ehesten wird dieses Audit in der Node-Befehlszeile angezeigt.

Nicht verwendetes JavaScript

Toter Code kann bei JavaScript-lastigen Anwendungen ein ernsthaftes Problem darstellen. Es verursacht zwar keine Ausführungskosten, da es nie aufgerufen wird, hat jedoch andere unerwünschte Auswirkungen. Dead Code wird weiterhin vom Browser heruntergeladen, geparst und kompiliert. Dies wirkt sich auf die Ladeleistung und die JavaScript-Startzeit aus. Ähnlich wie beim Abdeckungsbereich in den Entwicklertools zeigt die Prüfung Nicht verwendetes JavaScript JavaScript-Code an, der von der aktuellen Seite heruntergeladen wurde. Dieser wird jedoch nie verwendet.

Mit dieser Prüfung können Sie toten Code in Ihren Anwendungen identifizieren und entfernen, um die Ladeleistung zu verbessern und die Nutzung von Systemressourcen zu reduzieren. Profi-Tipp: Sie können auch den Bereich „Codeabdeckung“ in den Chrome-Entwicklertools verwenden, um diese Informationen zu finden.

Verwendet ineffiziente Cache-Richtlinie für statische Assets

Viele Empfehlungen zur Leistung beziehen sich tendenziell darauf, die Geschwindigkeit einer Website für Erstnutzer zu erhöhen. Es ist aber auch wichtig, Caching zu verwenden, um die Ladeleistung für wiederkehrende Nutzer zu verbessern. Das Audit Verwendung ineffizienter Cache-Richtlinie für statische Assets prüft Caching-Header für Netzwerkressourcen und benachrichtigt Sie, wenn Cache-Richtlinien für statische Ressourcen nicht den Standards entsprechen.

:

Mithilfe dieser Prüfung können Sie Probleme mit Ihrer aktuellen Cache-Richtlinie leicht finden und beheben. Dadurch wird die Leistung für wiederkehrende Nutzer deutlich verbessert und sie werden die zusätzliche Geschwindigkeit zu schätzen wissen.

Mehr kostenintensive Hin- und Rückflüge zu beliebigen Abflugorten vermeiden

Wenn Browser Ressourcen von einem Server abrufen, kann es sehr lange dauern, einen DNS-Lookup auszuführen und eine Verbindung zu einem Server herzustellen. Mit rel=preconnect können Entwickler diese Latenz maskieren, indem sie vor dem Browser Verbindungen zu anderen Servern herstellen. Mit der Prüfung Kostenintensive mehrfache Hin- und Rückfahrten zu beliebigen Ursprüngen vermeiden können Sie herausfinden, wie Sie rel=preconnect nutzen können.

Wenn die Latenz für ursprungsübergreifende Assets reduziert wird, bemerken Nutzer, dass die Dinge etwas schneller vorankommen. Mit dieser neuen Lighthouse-Prüfung entdecken Sie neue Möglichkeiten, dies mit rel=preconnect zu erreichen.

Videoformate für animierte Inhalte verwenden

Animierte GIFs sind riesig und verbrauchen oft mindestens mehrere hundert Kilobyte, wenn nicht mehrere Megabyte an Daten. Wenn es dir um die Ladeleistung geht, kannst du diese GIFs in Videos konvertieren. Erfreulicherweise kannst du dir die Prüfung Videoformate für animierte Inhalte verwenden ansehen.

Wenn Ihre Website GIFs mit über 100 KB enthält, werden diese bei dieser Prüfung automatisch markiert und Sie erhalten Hinweise dazu, wie Sie sie in Videos konvertieren und einbetten können. Websites wie Imgur konnten die Ladeleistung durch die Konvertierung von GIFs in Videos erheblich verbessern. Wenn du für deine Website einen Hostingtarif mit kostenpflichtiger Bandbreite hast, dürfte bereits die mögliche Kosteneinsparung ausreichen, um dich zu überzeugen.

Beim Laden von Web-Schriftarten bleibt der gesamte Text sichtbar

Wenn wir Webschriftarten für Seiten laden, rendern Browser oft unsichtbaren Text, bis die Schriftart geladen ist. Dieses Phänomen, das als Flash of Invisible Text (FOIT) bezeichnet wird, mag Ihnen aus Sicht des Designs vorzuziehen sein, ist aber tatsächlich ein Problem. Text, der für das Rendering blockiert ist, kann erst gelesen werden, wenn er gerendert wird und sichtbar wird. Bei Verbindungen mit hoher Latenz und/oder hoher Bandbreite bedeutet dies, dass ein zentraler Aspekt der Nutzererfahrung fehlt. Es kann auch zu einem Leistungsproblem mit der Wahrnehmung kommen, da die Seite nicht so schnell wie möglich aussagekräftige Inhalte rendert. Glücklicherweise hilft Ihnen die Prüfung Alle Text bleibt während des Ladens von Webschriftarten sichtbar dabei, Möglichkeiten zur Behebung dieses Problems auf Ihrer Website zu finden.

Wenn Lighthouse in Ihrer Anwendung Webschriftarten findet, die das Rendering von Text verzögern, gibt es verschiedene Abhilfemaßnahmen. Sie können das Textrendering mit der CSS-Eigenschaft font-display und/oder der Font Loading API steuern. Wenn Sie noch tiefer in das Thema einsteigen möchten, lesen Sie den Leitfaden A Comprehensive Guide to Font Loading Strategies von Zach Leatherman.

Nicht reduziertes CSS und JavaScript

Die Reduzierung wurde empfohlen, weil die Webleistung eine große Rolle spielt – und das aus gutem Grund. Sie reduziert die Größe textbasierter Ressourcen erheblich, was sich wiederum positiv auf die Ladeleistung auswirkt. Diese Optimierung kann jedoch leicht übersehen werden, insbesondere wenn Build-Prozesse sie nicht übernehmen. Bei den Audits Minify CSS und Minify JavaScript wird eine Liste der nicht reduzierten Ressourcen auf der aktuellen Seite zusammengestellt. Von dort aus können Sie Maßnahmen ergreifen, indem Sie diese Dateien manuell reduzieren oder Ihr Build-System erweitern, um dies für Sie zu erledigen.

Nicht verwendete CSS-Regeln

Wenn eine Website etwas zu lang wird, ist es unvermeidlich, dass sich überflüssige Inhalte, die bei der Refaktorierung übrig bleiben, ansammeln. Eine solche Quelle von überflüssigen Inhalten sind nicht verwendete CSS-Regeln, die zwar nicht mehr für das Funktionieren der Website erforderlich sind, aber dennoch Bandbreite verbrauchen. Der Einfachheit halber zeigt die Prüfung Nicht verwendete CSS-Regeln, welche CSS-Ressourcen auf der Seite nicht verwendetes CSS enthalten.

Wenn Lighthouse nicht verwendete CSS auf der Seite findet, gibt es Möglichkeiten, sie zu entfernen. Ein solches Dienstprogramm ist beispielsweise UnCSS. Es muss jedoch mit Vorsicht eingesetzt werden. Eine eher manuelle Methode umfasst die Verwendung des Bereichs „Codeabdeckung“ in den Entwicklertools. Denken Sie jedoch daran, dass nicht verwendetes CSS auf einer Seite möglicherweise auf einer anderen Seite erforderlich ist. Ein anderer Ansatz kann darin bestehen, Ihren CSS-Code in vorlagenspezifische Dateien aufzuteilen, die nur bei Bedarf geladen werden. Wie auch immer Sie sich entscheiden, Lighthouse wird Sie immer darüber informieren, wenn Ihr CSS-überflüssiges Material zu viel wird.

Probiere Lighthouse aus!

Wenn Sie sich auf die neuen Prüfungen freuen, aktualisieren Sie Lighthouse und probieren Sie sie aus.

• Die Lighthouse-Chrome-Erweiterung sollte automatisch aktualisiert werden. Sie können sie aber auch manuell über chrome://extensions aktualisieren.
• In den Entwicklertools können Sie Lighthouse im Bereich „Prüfungen“ ausführen. Chrome wird etwa alle sechs Wochen auf eine neue Version aktualisiert. Daher sind einige neuere Prüfungen möglicherweise nicht verfügbar. Wenn Sie die neuesten verfügbaren Prüfungen verwenden möchten, können Sie den aktuellen Chrome-Code ausführen. Laden Sie dazu Chrome Canary herunter.
• Für Knotennutzer: Führen Sie npm update lighthouse oder npm update lighthouse -g aus, wenn Sie Lighthouse global installiert haben.

Vielen Dank an Kayce Basques, Patrick Hulce, Addy Osmani und Vinamrata Singal für ihr wertvolles Feedback, durch das die Qualität dieses Artikels erheblich verbessert wurde.