So aktivieren Sie das Chrome-Benchmark-HUD zum Verfolgen von Leistungsmetriken

Das Entwicklungsteam von Google Chrome hat kürzlich ein Heads-up-Display (HUD) hinzugefügt, mit dem Entwickler und Nutzer die Leistungsmetriken verschiedener Websites verfolgen können. Das HUD verfolgt Metriken, die Teil der Core Web Vitals-Plattform von Google sind, wie z. B. LCP (Largest Contentful Paint), FID (First Input Delay) und CLS (Cumulative Layout Shift). Heute werden wir uns genauer ansehen, wie Sie dieses HUD in Chrome aktivieren können, was diese Metriken tatsächlich bedeuten und wie sie sich auf Ihre Website auswirken.

Aktivieren Sie das Benchmark-HUD von Chrome

Es gibt zwei Methoden, um die Chrome-Benchmarks als Heads-up-Display anzuzeigen. Sie können das HUD entweder mithilfe des neuen Feature-Flags in Chrome aktivieren oder die offizielle Chrome-Erweiterung verwenden.

Aktivieren Sie das Chrome-Benchmark-HUD mithilfe des Feature-Flags

Googles experimentelles Benchmark-HUD befindet sich derzeit hinter einer Feature-Flagge im neuesten Chrome Canary. In diesem Artikel habe ich Chrome Canary 89.0.4349.3 zur Demonstration verwendet. Sie können diese Schritte ausführen, um das HUD unter Chrome für Mac, Windows, Linux, Chrome OS und Android zu aktivieren.

1. Öffnen Google Chrome Canary und besuchen Sie chrome: // flags. Suchen Sie im Suchfeld auf dieser Seite nach “Leistungsmetriken im HUD anzeigen” und wählen Sie “Aktiviert”. Alternativ können Sie die unten angegebene URL in die Adressleiste Ihres Browsers einfügen.

chrome: // flags / # show-performance -metrics-hud

Leistungsmetriken im HUD-Flag anzeigen

2. Starten Sie den Browser nach dem Aktivieren des Flags neu. Sie werden jetzt das neue Benchmark-HUD von Chrome in der oberen rechten Ecke des Browsers bemerken. Leider unterstützt das HUD derzeit kein Drag & Drop für die Neupositionierung, sodass Sie es an derselben Stelle anzeigen müssen.

Chrome Hud Feature Flag Version

Aktivieren Sie das Chrome-Benchmark-HUD mithilfe der Chrome-Erweiterung

Wenn Sie nicht bereit sind, mit Chrome Canary auf dem neuesten Stand zu leben, können Sie die von Google veröffentlichte Chrome-Erweiterung installieren, um stattdessen ein ähnliches HUD zu erhalten. So geht’s:

1. Öffnen Sie Google Chrome und besuchen Sie Chrome-Webstore. Geben Sie im Suchfeld “Web Vitals” ein und installieren Sie das von addyosmani angebotene. Alternativ können Sie Verwenden Sie diesen Link um die Seite der Erweiterung direkt zu öffnen.

Web Vitals Chrom Erweiterung

2. Nach der Installation der Erweiterung werden dieselben Metriken angezeigt, die mit dem Feature-Flag angeboten werden. Sie können beide nach Ihren Wünschen und Vorlieben verwenden. Da es jetzt keine Möglichkeit gibt, die Feature-Flag-Version schnell zu deaktivieren, würde ich die Verwendung der Chrome-Erweiterung empfehlen.

Web Vitals Chrome Extension nach der Installation

Funktionen des Chrome Benchmark HUD

Das Chrome-Benchmark-HUD bietet derzeit die folgenden Funktionen:

  • Größte inhaltliche Farbe (LCP)
  • Erste Eingangsverzögerung (FID)
  • Kumulative Layoutverschiebung (CLS)
  • Durchschnittlicher fallengelassener Rahmen (ADF)

Größte inhaltliche Farbe (LCP)

Largest Contentful Paint (LCP) misst die Zeit, die zum Rendern des größten Bild- oder Textblocks im sichtbaren Teil der Webseite benötigt wird. Google empfiehlt Websites, LCP innerhalb der ersten 2,5 Sekunden zu verwenden, um eine optimale Nutzererfahrung zu erzielen. LCP zwischen 2,5 Sekunden und 4 Sekunden wird als durchschnittlich angesehen, und eine darüber hinausgehende Dauer gilt als schlecht und kann zu einer schlechten UX führen.
lcp-MetrikenBild: Google

Um LCP innerhalb von 2,5 Sekunden zu halten, fordert das Unternehmen die Entwickler auf, das 75. Perzentil der Seitenladevorgänge für Mobil- und Desktopversionen zu messen. Einfacher ausgedrückt müssen Sie lediglich sicherstellen, dass mindestens 75 Prozent der Seitenaufrufe den erforderlichen guten Schwellenwert erreichen, in diesem Fall 2,5 Sekunden.

Erste Eingangsverzögerung (FID)

Während es bei LCP ausschließlich um die Ladegeschwindigkeit ging, repräsentiert First Input Delay (FID) die Reaktionsfähigkeit einer Webseite. Es misst die Zeit von der Interaktion eines Benutzers mit einer Seite bis zu dem Zeitpunkt, an dem die Seite mit der Verarbeitung beginnt, um auf die Aktion zu reagieren. Es ist erwähnenswert, dass FID nicht die Gesamtverarbeitungszeit enthält.
FID-MetrikenBild: Google

In idealen Szenarien sollte der FID-Wert einer Website weniger als 100 Millisekunden betragen. Der Bereich zwischen 100 Millisekunden und 300 Millisekunden muss verbessert werden. Wenn die Zeit 300 Millisekunden überschreitet, wird davon ausgegangen, dass die Webseite eine schlechte FID aufweist. Sie können den oben beschriebenen Ansatz zum Laden von Seiten im 75. Perzentil verwenden, um eine gute FID-Bewertung zu erhalten.

Kumulative Layoutverschiebung (CLS)

Cumulative Layout Shift (CLS) verfolgt all die nervigen Zeiten, in denen sich der Inhalt einer Website ohne Vorwarnung plötzlich nach oben oder unten verschiebt. Mit anderen Worten, CLS misst die visuelle Stabilität einer Website.

cls Metriken

Laut Google treten Layoutverschiebungen hauptsächlich auf, wenn Ressourcen der Seite asynchron geladen werden oder wenn DOM-Elemente dynamisch zu einer Webseite hinzugefügt werden. Ein guter CLS-Wert liegt unter 0,1. Werte über 0,25 werden als schlecht behandelt. Sie können mehr darüber erfahren, wie CLS-Scores berechnet werden genau hier.

Durchschnittlicher fallengelassener Rahmen (ADF)

ADF (Average Dropped Frame) zeigt, wie der Name schon sagt, den Prozentsatz der verworfenen Frames an, wenn der Benutzer mit der Webseite interagiert. Niedrigere ADF-Prozentsätze führen zu einer besseren Leistung, während Frames mit hohem Ausfall zu Verzögerungen und anderen Leistungsproblemen führen können. Zum jetzigen Zeitpunkt ist ADF nur in der Feature-Flag-Version des HUD verfügbar.

Verwenden Sie das Benchmark-HUD von Chrome, um die Leistung der Website zu verfolgen

In einem Blog-Beitrag im letzten Monat kündigte Google seine Pläne dazu an Betrachten Sie Core Web Vitals – LCP, FID und CLS als Ranking-Signale ab Mai 2021. Wenn Sie Websitebesitzer oder Entwickler sind, ist jetzt ein guter Zeitpunkt, um die Benutzererfahrung Ihrer Website mithilfe des Benchmark-HUD von Chrome zu optimieren, um zu vermeiden, dass das bevorstehende Update negative Auswirkungen hat. Weitere Tipps finden Sie in unserem Artikel mit Tipps und Tricks zu Google Chrome.

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *