Home Blogs Lighthouse 6,0 Score Audit: Eine Checkliste zur Vorbereitung Ihrer Website
Applications

Lighthouse 6,0 Score Audit: Eine Checkliste zur Vorbereitung Ihrer Website

About The Author

Outline

Google Lighthouse ist für viele Websites zum de facto-Tool geworden, um ihre Leistung mit einer einzigen Punktzahl zu messen: Dem Lighthouse Performance Score. Eine neue Version, Lighthouse 6,0, ist jetzt auf npm in Chrome Canary, PageSpeed Insights und GSC Console verfügbar. Bis Mitte Juli wird Lighthouse 6,0 für Chrome-Benutzer in Chrome 84 vollständig eingeführt. Jetzt ist es an der Zeit, sicherzustellen, dass Ihr Standort für die neue Version bereit ist, und zwar mit einem Lighthouse 6,0-Punktaudit.

Lighthouse 6,0 verfügt über neue und abgeschriebene Kennzahlen sowie eine neue Gewichtungsformel zur Berechnung von Leistungswerten. Diese neue Version und die Ankündigung, dass Core Web Metrics in Googles Ranking-Algorithmus im Google Page Experience Update aufgenommen werden, sind deutliche Anzeichen dafür, dass der Suchriese die wahrgenommene Geschwindigkeit betont – die Geschwindigkeit, mit der ein Benutzer eine Seite als geladen wahrnimmt. Je schneller Benutzer Ihre Website laden, desto höher ist Ihr Rang und desto mehr Conversions erhalten Sie.

Die sechs Lighthouse-Kennzahlen, die Sie optimieren müssen

Google interessiert sich dafür, wie Nutzer das Internet erleben. Zwei Websites werden möglicherweise genau zur gleichen Zeit geladen, aber je nachdem, wie der Inhalt auf der Seite angezeigt wird, scheint eine Website schneller geladen zu werden. Während beide Seiten gleichzeitig geladen wurden, wird Google letztere bevorzugen – die Website mit einer schnelleren Performance.

Die Ergebnisse von Lighthouse 6,0 basieren auf einem gewichteten Durchschnitt von sechs benutzerzentrierten Geschwindigkeitskennzahlen. First Contentful Paint (FCP), Speed Index (SI) und Largest Contentful Paint (LCP) messen die wahrgenommene Ladegeschwindigkeit und halten ein Gesamtgewicht von 55 % im Lighthouse-Score einer Website in Version 6. Weitere 40 % der Punktzahl basieren auf Kennzahlen zur Messung der Reaktionsfähigkeit, ein weiterer Aspekt, der die Wahrnehmung der Geschwindigkeit durch den Nutzer beeinflusst. Dazu gehören die Total Blocking Time (TBT) und Time to Interactive (TTI). Die letzten 5 % der Punktzahl basieren auf einer Metrik, die die visuelle Stabilität misst, die Cumulative Layout Shift (CLS) genannt wird.

First Significant Paint (FMP) und First CPU Idle (FCI) aus dem Lighthouse 5,7 Score wurden durch bessere Kennzahlen ersetzt, um die Geschwindigkeit aus einer benutzerorientierten Perspektive zu messen. Dies sind die größten Contentful Paint (LCP) und Total Blocking Time (TBT) in Lighthouse 6,0.

Leuchtturm 5,7 Gewicht Leuchtturm 6,0 Gewicht
Erste Contentful Paint (FCP) 20% Erste Contentful Paint (FCP) 15%
Geschwindigkeitsindex (SI) 27% Geschwindigkeitsindex (SI) 15%
Erste aussagekräftige Farbe (Kineto-CTG) 7% Größte Contentful Paint (LCP) 25%
Erster CPU-Leerlauf (FCI) 13% Gesamtblockierungszeit (TBT) 25%
Zeit bis interaktiv (TTI) 33% Zeit bis interaktiv (TTI) 15%
- - Kumulative Layoutverschiebung (CLS) 5%

Im Folgenden finden Sie die sechs-Geschwindigkeiten-Kennzahlen, auf die Sie sich konzentrieren sollten, während Sie Ihre Website in Vorbereitung auf Lighthouse 6,0 prüfen. Die Metriken sind in der Reihenfolge angeordnet, in der sie beim Laden der Seite gemessen werden.

Am Ende dieses artikels finden Sie eine vereinfachte Checkliste mit den Geschwindigkeiten, die Sie erreichen sollten, und Optimierungstechniken pro Metrik.

Erste Contentful Paint

FCP markiert den ersten Punkt, an dem ein Benutzer Seiteninhalte auf dem Bildschirm sehen kann. Dieser Inhalt umfasst Text, Bilder, Grafiken oder SVG-Dateien. FCP hatte ein Gewicht von 20 % in Lighthouse 5,7, hielt aber nur 15 % über Ihrer Lighthouse 6,0 Punktzahl.

Im obigen Filmstreifen wird die FCP für das Laden der ersten Seite nach 0,6 Sekunden gemessen. Dies ist der Zeitpunkt, an dem Inhalte zum ersten Mal auf der Homepage für TheTieBar.com angezeigt werden, aber Sie werden feststellen, dass nicht alle Inhalte sichtbar sind. Dies ist eine wichtige Unterscheidung zwischen der ersten und der größten contentful Farbe. LCP wird nach 0,9 Sekunden gemessen, wenn der Inhalt über der Falz angezeigt wird.

Stellen Sie während der Prüfung Ihrer Lighthouse 6,0-Punktzahl sicher, dass Ihre Seiten durchschnittlich FCPs von 2 Sekunden oder wenigerhaben, da dies der Schwellenwert für das 75. Perzentil ist und von Google als schnell betrachtet wird. FCPS zwischen 2 und 4 Sekunden werden als mäßige Geschwindigkeiten betrachtet, FCPs über 4 Sekunden fallen unter das 50. Perzentil und werden als langsam eingestuft.

Wenn FCPs zu langsam geladen werden, kann dies auf einen oder mehrere der folgenden Ursachen zurückzuführen sein:

  1. Zu viele blockierende Ressourcen
  2. Große CSS-Dateien
  3. Fehlende sichere Verbindungen zu Drittanbietern
  4. Lange Serverantwortzeiten
  5. Mehrere Seitenumleitungen
  6. Nicht zwischengespeicherte statische Ressourcen
  7. Übermäßige DOM-Größe

Um Ihre FCP zu optimieren, sollten Sie Folgendes beachten:

  1. Fügen Sie kritische Ressourcen ein, verschieben Sie nicht kritische Ressourcen, und entfernen Sie ungenutzte Elemente, um die Auswirkungen von Render-blockierenden URLs zu verringern.
  2. Entfernen Sie alle unnötigen Zeichen aus dem CSS, um die Größe der Dateien zu verringern.
  3. Verwenden Sie Preconnect, um frühzeitig Verbindungen zu wichtigen Drittanbietern herzustellen.
  4. Verkürzen Sie die Reaktionszeiten des Servers, indem Sie die Anwendungslogik des Servers optimieren oder Ihre Serverhardware auf mehr Speicher aufrüsten.
  5. Vermeiden Sie mehr als eine einseitige Weiterleitung.
  6. Verwenden Sie HTTP-Caching, um statische Ressourcen zu cachen.
  7. Sie haben insgesamt weniger als 1.500 Knoten, eine Tiefe von weniger als 32 Knoten und einen übergeordneten Knoten mit weniger als 60 untergeordneten Knoten, um die DOM-Größe zu verringern.

Geschwindigkeitsindex

SI misst den visuellen Fortschritt eines Seitenladevorgangs und berechnet eine Gesamtbewertung für die Geschwindigkeit des Inhalts. In Lighthouse 5,7 lag SI bei 27 % über dem Performance Score einer Website. In Lighthouse 6,0 ist dies nur halb reduziert und beeinflusst 15 % der Performance-Punktzahl einer Seite. Google betrachtet dies immer noch als eine wichtige Wahrnehmungsmetrik, da eine Seite mit einer langsamen Bildanzeige als lästig empfunden werden kann.

Lighthouse misst SI, indem ein Filmstreifen einer Seite beim Laden im Browser erfasst und die visuelle Entwicklung Schritt für Bild analysiert wird. Die durchschnittliche Zeit, zu der sichtbare Teile der Seite angezeigt werden, bestimmt die SI. Diese Metrik unterscheidet sich je nach Bildschirmgröße des Geräts.

Wenn Sie Ihre Lighthouse 6,0-Punktprüfung durchlaufen, sollten Sie SIS in 4,3 Sekunden oder weniger anvisieren. Diese Geschwindigkeit liegt im 75. Perzentil und wird von Google als schnell angesehen. Seiten mit SIS zwischen 4,3 und 5,8 Sekunden sind mäßig, und SIS fällt langsamer als 5,8 Sekunden unter das 50. Perzentil und gelten als langsam.

Die langsameren SI-Zeiten sind in der Regel auf folgende Ursachen zurückzuführen:

  1. Die Ladezeiten des Hauptgewindes überschreiten 4 Sekunden
  2. JavaScript-Ausführungszeit überschreitet 3,5 Sekunden
  3. Große Schriftartdateien verursachen einen Blitz von unsichtbarem Text (FOIT).

Um SI-Zeiten zu verkürzen, beachten Sie Folgendes:

  1. Implementieren Sie Code-Splitting, entfernen Sie nicht verwendeten Code und komprimieren Sie Code, um die Belastung des Hauptthreads und die JavaScript-Ausführungszeit zu reduzieren.
  2. Stellen Sie sicher, dass Text während des Ladens von Webfont sichtbar bleibt, um FOIT zu vermeiden.

Größte Contentful Paint

LCP ist eine neue Metrik, die Lighthouse 6,0 hinzugefügt wurde und 25 % der Performance-Score einer Website umfasst. LCP ersetzt First Sinnful Paint (FMP) von Lighthouse 5,7. Obwohl beide Kennzahlen die Zeit messen, in der das größte Inhaltselement angezeigt wird, ist das Kineto-CTG für inkonsistente Ergebnisse berüchtigt und kann nur in bestimmten Webbrowsern standardisiert werden.

LCP misst, wann das größte Inhaltselement vollständig auf dem Bildschirm sichtbar ist. Zu den gemessenen Inhaltselementen gehören Elemente auf Blockebene, Bilder (einschließlich Bilder in SVG-Dateien) und Videos. Dies ist eine äußerst wichtige Kennzahl für E-Commerce-Websites, da sie den Zeitpunkt kennzeichnet, zu dem die meisten Benutzer die Seite als vollständig geladen wahrnehmen und eher einen Kauf tätigen.

Im obigen Beispiel beträgt die LCP 0,9 Sekunden, wenn das Hauptbild vollständig gemalt ist. Diese Metrik erfasst einen bestimmten Moment, in dem ein Benutzer wahrnimmt, dass eine Seite vollständig geladen ist, jedoch der Inhalt möglicherweise noch unterhalb des Falzes geladen wird.

Die leistungsstärksten Websites, wie die auf Layer0 (jetzt Edgio), liefern LCPs in weniger als einer Sekunde. LCPs bis zu 2,5 Sekunden werden als schnell betrachtet und im 75. Perzentil für diese Metrik eingestuft. LCPs zwischen 2,5 Sekunden und 4 Sekunden werden als moderat angesehen und müssen verbessert werden. LCPs über 4 Sekunden fallen unter das 50. Perzentil und werden von Google als langsam betrachtet.

Langsame LCPs stammen in der Regel aus einem oder mehreren der folgenden Ursachen:

  1. Langsame Serverantwortzeiten
  2. Renderblockierung von JavaScript und CSS
  3. Lange Ressourcenladezeiten
  4. Client-seitige Rendering-Probleme

Wenn Sie bei Ihrer Lighthouse 6,0-Punktprüfung langsamer als die gewünschten LCPs finden, sollten Sie Folgendes beachten:

  1. Optimieren Sie die Reaktionszeiten des Servers, indem Sie den Datenverkehr an das nächstgelegene verfügbare CDN weiterleiten, Assets zwischenspeichern, HTML-Seiten zuerst im Cache bereitstellen und Verbindungen von Drittanbietern frühzeitig herstellen.
  2. Reduzieren Sie CSS, indem Sie unnötige CSS entfernen, nicht-kritische CSS verschieben und kritische CSS inline. Reduzieren Sie die JavaScript-Blockierungszeit durch Komprimieren von JavaScript-Dateien.
  3. Optimieren und komprimieren Sie Bild- und Textdateien, und laden Sie wichtige Ressourcen im Voraus, um die Ladezeiten von Ressourcen zu verkürzen.
  4. Optimieren Sie das Client-seitige Rendering durch serverseitiges Rendering und Pre-Rendering.

    Planen Sie eine 1-zu-1-Demo Planen Sie jetzt ein Beratungsgespräch, um zu erfahren, wie Layer0 (jetzt Edgio) Ihnen dabei helfen kann, Seiten innerhalb von weniger als einer Sekunde zu laden. Klicken Sie hier!

Gesamte Sperrzeit

TBT ersetzt FCI von Lighthouse 5,7, das früher 13 % des Gewichts trug. In Lighthouse 6,0 misst TBT die Seitenreaktionsgeschwindigkeit und macht 25 % der Performance-Punktzahl aus. TBT misst den Schweregrad der nicht interaktiven Seite, bevor sie zuverlässig interaktiv wird.

Sie kennen diese schmerzhaften Fälle: Sie warten darauf, dass eine Seite geladen wird, und dann sieht sie fertig aus. Sie tippen auf das Produkt, das Sie sehen möchten, aber es passiert nichts. Tippen Sie erneut auf? Diese Wartezeit ist bekanntermaßen buchstäblich für Stress bei den Verbrauchernverantwortlich . Im Wesentlichen ist TBT die Zeitspanne, in der ein Verbraucher diesen Stress aufgrund der nicht interaktiven Aktivität einer Seite empfindet.

Quelle: web.deV

Diese Kennzahl wird gemessen, indem die Summe der „blockierten“ Zeit (Aufgaben, die länger als 50 ms dauern) zwischen dem ersten angezeigten Inhaltselement (FCP) und dem Zeitpunkt berechnet wird, zu dem ein Benutzer vollständig mit der Seite interagieren kann (TTI). In der Abbildung oben finden beispielsweise fünf Aufgaben im Hauptthread statt, von denen jedoch nur drei 50 ms überschreiten. Die erste um 200 ms, die zweite um 40 ms und die dritte um 105 ms. TBT ist (200 + 40 + 105) 345 ms.

Eine Aufgabe, die länger als 50 ms dauert, ist lang genug, dass ein Benutzer die Seite als träge oder schlimmer noch inaktiv wahrnimmt und sie zum Verlassen veranlasst. Um dies zu vermeiden, sollte ein TBT unter 300 ms schnell als schnell betrachtet werden. TBTs zwischen 300 ms und 600 ms werden als mäßige Geschwindigkeiten angesehen und müssen verbessert werden. TBTs, die langsamer als 600 ms sind, fallen unter das 50. Perzentil und werden als langsam betrachtet.

Lange Aufgaben werden in der Regel durch eine oder mehrere der folgenden Ursachen verursacht:

  1. Code von Drittanbietern, der den Hauptthread 250 ms oder länger blockiert
  2. Die JavaScript-Ausführung dauert mehr als 3,5 Sekunden
  3. Der Hauptthread ist während des Ladevorgangs länger als 4 Sekunden ausgelastet
  4. Eine hohe Anzahl von Netzwerkanforderungen und große Übertragungsgrößen

Um diese Metrik zu verbessern, beachten Sie Folgendes:

  1. Laden Sie JavaScript von Drittanbietern effizient mit den Attributen async oder DEFER auf Skript-Tags, stellen Sie frühe Verbindungen zu wichtigen Ursprüngen von Drittanbietern her und verwenden Sie Lazy-Loading.
  2. Um die Ausführung von JavaScript zu beschleunigen und die Belastung des Hauptthread zu reduzieren, implementieren Sie Code-Splitting, entfernen Sie nicht verwendeten Code und komprimieren Sie Code.
  3. Optimieren Sie CSS und JavaScript, um die Anzahl der Ressourcen und die Übertragungsgröße zu reduzieren.

Zeit für Interaktivität

TTI ist die dritte Metrik, die aus Lighthouse 5,7 übernommen wurde, aber Google hat sein Gewicht von 33 % auf 15 % in Lighthouse 6,0 reduziert. TTI ist eine Begleitmetrik zu TBT, die misst, wie lange eine Seite benötigt, um zuverlässig oder vollständig interaktiv zu werden. Lighthouse betrachtet eine Seite als zuverlässig interaktiv, wenn das erste Inhaltselement angezeigt wird, die anfänglichen Skripte (sofern vorhanden) geladen wurden und es innerhalb von 50 ms auf Benutzereingaben reagieren kann.

Für einen Benutzer können langsame TTIs den Eindruck haben, als sei eine Seite inaktiv oder defekt. Obwohl eine Seite interaktiv aussieht, liegt das nicht daran, dass der Hauptthread blockiert ist (gemessen durch TBT). Wenn Sie Ihre Website für Lighthouse 6,0 prüfen, sollten Sie TTIs in 5,2 Sekunden oder weniger als schnell betrachten. TTIs zwischen 5,2 und 7,3 Sekunden gelten als mäßige Geschwindigkeiten, TTIs, die langsamer als 7,3 Sekunden sind, gelten als langsam und werden die Bereitschaft der Verbraucher beeinflussen, vor Ort zu bleiben.

Wenn Ihre Lighthouse 6,0-Punktprüfung schlechte TTI-Geschwindigkeiten zeigt, kann dies auf einen oder mehrere der folgenden Ursachen zurückzuführen sein:

  1. Große Payload-Größen und lange Parse-Zeit für Skripte
  2. Lange Ressourcenladezeiten
  3. Code von Drittanbietern blockiert den Hauptthread für mindestens 250 ms
  4. Kritische Anforderungsketten
  5. Langsame Haupt-Thread-Geschwindigkeit und JavaScript-Ausführungszeit
  6. Hohe Ressourcenanzahl oder große Transfergrößen

Die TTI-Zeit kann durch Optimierung Ihres JavaScript reduziert werden. Dazu gehören:

  1. Reduzieren und komprimieren Sie JavaScript-Dateien, um die Payload-Größe und die Zeit für die Skriptanalyse zu reduzieren.
  2. Anforderungen vorab laden und/oder Vorverbindung hinzufügen, um die Ladezeiten zu verkürzen.
  3. Laden Sie JavaScript von Drittanbietern effizient, indem Sie die Attribute async oder DEFER auf Skript-Tags verwenden und Lazy-Loading verwenden.
  4. Reduzieren Sie die Auswirkungen kritischer Anforderungsketten auf die Performance, indem Sie die Anzahl kritischer Ressourcen reduzieren und die Reihenfolge optimieren, in der die verbleibenden Ressourcen geladen werden.
  5. Implementieren Sie Code-Splitting, entfernen Sie nicht verwendeten Code und komprimieren Sie Code, um die Belastung des Hauptthreads und die JavaScript-Ausführungszeit zu reduzieren.
  6. Optimieren Sie CSS und JavaScript, um die Anzahl der Ressourcen und die Übertragungsgröße zu reduzieren.

Kumulative Layoutverschiebung

CLS ist die dritte neue Metrik, die in Lighthouse 6,0 eingeführt wurde, und sie ist die einzige, die keine Metrik von Lighthouse 5,7 ersetzt. CLS macht die letzten 5 % Ihrer Lighthouse 6,0-Punktzahl aus und misst die visuelle Stabilität.

Diese Metrik misst, wie oft Benutzer unerwartete Layoutverschiebungen erleben. Sie haben das schon einmal erlebt: Sie sind dabei, ein Produkt anzutippen und plötzlich auf etwas anderes auf der Seite zu tippen, weil sich die Elemente verschoben haben. Diese Erfahrungen können ziemlich nervig sein und für einen Benutzer als lästig angesehen werden.

CLS wird gemessen an der Summe aller einzelnen Punktzahlen für jede unerwartete Layoutverschiebung, die während der gesamten Lebensdauer der Seite auftritt. Ein guter CLS liegt unter 0,1 und liegt im 75. Perzentil für die Leistung. Ein CLS zwischen 0,1 und 0,25 wird als moderat betrachtet, und jeder Messwert über 0,25 fällt unter das 50. Perzentil und wird von Google als langsam betrachtet.

Wenn Sie während Ihrer Lighthouse 6,0-Punktprüfung eine schlechte CLS feststellen, liegt dies wahrscheinlich an einer der folgenden Ursachen:

  1. Ein Bild oder Video, das sich selbst in der Größe ändert
  2. Eine Schriftart, die verspätet geladen wird und größer oder kleiner als beabsichtigt angezeigt wird

Um diese Metrik zu verbessern, beachten Sie Folgendes:

  1. Nehmen Sie die exakten Abmessungen Ihrer Bilder und Videoelemente auf
  2. Vermeiden Sie Popup-Anzeigen oder Banner
  3. Vermeiden Sie, dass die Schriftart FOIT/FOUT verursacht

Leuchtturmwerte zeigen Ihnen, was Google von Ihrer Website hält

Die Lighthouse Performance-Bewertung einer Seite gibt an, wie Google die Seite in Bezug auf die Geschwindigkeit wahrnimmt. Jede Metrik in Lighthouse 6,0 spiegelt den besten Versuch von Google wider, die Geschwindigkeit der Nutzer zu messen. Wenn eine Punktzahl unter die Standards fällt, wird sie als langsam wahrgenommen – nicht nur von den Benutzern, sondern auch vom Suchriesen selbst. das führt zu negativen Auswirkungen auf Umsatz und SEO.

Google ordnet Websites auf der Ergebnisseite der Suchmaschine schneller und höher. Über SEO hinaus hat sich die Geschwindigkeit der Website erheblich auf Conversions und Umsatz ausgewirkt. Amazon hat beispielsweise festgestellt, dass eine Verzögerung von einer Sekunde beim Laden der Seite dem Unternehmen einen Verlust von 1,6 Mrd. US-Dollar pro Jahr Kosten könnte .

Fazit

Diese neueste Version von Lighthouse demonstriert, wie wichtig der Suchriese auf Wahrnehmungsgeschwindigkeitsmetriken ist. Die Bewertungsmetriken in Lighthouse 6,0 versuchen zu messen, wie schnell Besucher Ihre Seite als vollständig geladen wahrnehmen (selbst wenn sie noch Prozesse im Hintergrund ausführt).

Drei Kennzahlen, erster Contentful Paint, Geschwindigkeitsindex und größter Contentful Paint, messen die wahrgenommene Lastgeschwindigkeit und machten 55 % Ihrer Leistungsbewertung aus. Ziele auf FCPs von 2 Sekunden, LCPs von 2,5 und SIS von 4,3 Sekunden oder weniger.

Weitere 40 % einer Performance-Bewertung basieren auf Wahrnehmungskennzahlen, die die Reaktionsfähigkeit einer Seite messen. Dazu gehören die gesamte Sperrzeit und die Zeit bis zur Interaktivität. Bei einer schnellen Prüfung der Lighthouse 6,0-Punktzahl wird ein TBT in weniger als 300 ms und ein TTI in weniger als 5,2 Sekunden angezeigt, oder ein Benutzer sieht Ihre Website als lästig an.

Schließlich springt niemand gerne Text oder Bilder auf den Bildschirm. Die kumulative Layoutverschiebung ist die sechste Kennzahl, die in Ihrem Lighthouse 6,0-Audit berücksichtigt wird. Wenn Sie CLS-Messungen unter 0,1 anstreben, erhalten Sie die vollen 5 % des Gewichtes, das Sie in Ihrer Leistungsbewertung haben.

Um eine einfache Checkliste mit den Geschwindigkeiten zu erhalten, die Sie bei Ihrem Lighthouse 6,0-Punkteaudit erreichen sollten, sowie Optimierungstechniken pro Metrik, füllen Sie bitte das folgende Formular aus.