So aktivieren Sie das Benchmark-HUD von Chrome, um Leistungskennzahlen zu verfolgen - Moyens I/O

So aktivieren Sie das Benchmark-HUD von Chrome, um Leistungskennzahlen zu verfolgen

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

Benchmark-HUD von Chrome aktivieren

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

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

Googles experimentelles Benchmark-HUD befindet sich derzeit hinter einem Feature-Flag 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 in Chrome für Mac, Windows, Linux, Chrome OS und Android zu aktivieren.

1. Öffnen Google Chrome Canary und besuchen Sie chrome://flags. Im Suchfeld auf dieser Seite, Suche nach „Leistungskennzahlen 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

2. Nachdem Sie das Flag aktiviert haben, starten Sie den Browser neu. Du wirst jetzt Beachten Sie das neue Benchmark-HUD von Chrome in der oberen rechten Ecke des Browsers. Leider unterstützt das HUD derzeit kein Drag-and-Drop für die Neupositionierung, sodass Sie es an derselben Stelle anzeigen müssen.

Aktivieren Sie das Benchmark-HUD von Chrome mit der Chrome-Erweiterung

Wenn Sie mit Chrome Canary nicht auf dem neuesten Stand leben möchten, können Sie die von Google veröffentlichte Chrome-Erweiterung installieren, um stattdessen ein ähnliches HUD zu erhalten. So machen Sie es:

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

2. Nach der Installation der Erweiterung sehen Sie dieselben Metriken, die mit dem Feature-Flag angeboten werden. Sie können beides je nach Bequemlichkeit und Präferenz verwenden. Da es jetzt keine Möglichkeit gibt, die Feature-Flag-Version schnell zu deaktivieren, würde ich die Verwendung der Chrome-Erweiterung empfehlen.

Verwandt :  So exportieren Sie 3D-Modelle von Blender und Forger nach Procreate

Funktionen von Chromes Benchmark HUD

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

  • Größte Contentful Paint (LCP)
  • Erste Eingangsverzögerung (FID)
  • Kumulative Layoutverschiebung (CLS)
  • Durchschnittlicher Dropped Frame (ADF)

Größte Contentful Paint (LCP)

Largest Contentful Paint (LCP) misst die Zeit zum Rendern des größten Bild- oder Textblocks im sichtbaren Teil der Webseite. Google empfiehlt Websites zu LCP innerhalb der ersten 2,5 Sekunden haben für ein optimales Benutzererlebnis. LCP zwischen 2,5 und 4 Sekunden wird als durchschnittlich angesehen und eine darüber hinausgehende Dauer gilt als schlecht und kann zu einer schlechten UX führen.

Um LCP innerhalb von 2,5 Sekunden zu halten, fordert das Unternehmen die Entwickler auf, Messen Sie das 75. Perzentil der Seitenaufrufe in mobilen und Desktop-Versionen. Vereinfacht gesagt müssen Sie lediglich sicherstellen, dass mindestens 75 Prozent der Seitenaufrufe den geforderten guten Schwellenwert von in diesem Fall 2,5 Sekunden erreichen.

Erste Eingangsverzögerung (FID)

Während es bei LCP 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, zu dem die Seite mit der Verarbeitung beginnt, um auf die Aktion zu reagieren. Es ist erwähnenswert, dass FID beinhaltet nicht die Gesamtbearbeitungszeit.

Im Idealfall a Der FID-Wert der Website sollte weniger als 100 Millisekunden betragen. Der Bereich zwischen 100 Millisekunden bis 300 Millisekunden muss verbessert werden. Wenn die Zeit 300 Millisekunden überschreitet, wird davon ausgegangen, dass die Webseite einen schlechten FID hat. Um einen guten FID-Wert zu erhalten, können Sie den oben beschriebenen Ansatz für das Laden von 75.

Kumulative Layoutverschiebung (CLS)

Cumulative Layout Shift (CLS) verfolgt all die lästigen 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.

Layoutverschiebungen treten laut Google vor allem dann auf, wenn Ressourcen der Seite asynchron geladen werden oder wenn DOM-Elemente dynamisch zu einer Webseite hinzugefügt werden. Ein guter CLS-Score 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 Dropped Frame (ADF)

Average Dropped Frame (ADF), wie der Name schon sagt, zeigt den Prozentsatz der ausgelassenen Frames an, wenn der Benutzer mit der Webseite interagiert. Niedrigere ADF-Prozentsätze führen zu einer besseren Leistung, während hohe ausgelassene Frames Verzögerungen und andere Leistungsprobleme verursachen 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 Website-Leistung zu verfolgen

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

Verwandt :  So beheben Sie den macOS-Fehler „Wiederherstellungsserver konnte nicht kontaktiert werden“

Moyens Staff
Moyens I/O-Personal. motivierte Sie und gab Ratschläge zu Technologie, persönlicher Entwicklung, Lebensstil und Strategien, die Ihnen helfen werden.