Core Web Vitals: 7 Tools & Techniken zur Identifizierung von Leistungsengpässen

Core Web Vitals (CWV) sind derzeit ein heißes Thema. Hier sehen wir uns einige der Tools an, mit denen wir in Vorbereitung auf das bevorstehende Ranking-Update von Google im Mai 2021 Probleme mit der Website-Performance erkennen können.

Benötigen Sie eine Auffrischung von Core Web Vitals? Erfahren Sie in meinem Artikel zu Core Web Vitals Explained, was sie sind und wie Sie sie optimieren können.

Automatisierte Überwachung von CWV-Metriken

Wenn Sie mehrere Websites oder wichtige Seiten haben, die Sie im Laufe der Zeit überwachen möchten, ohne manuell einen Test nach dem anderen ausführen zu müssen, könnte diese Tabelle von Digital Inspiration für Sie sein. Schnappen Sie sich einfach einen Lighthouse PageSpeed ​​API-Schlüssel, stecken Sie einige URLs ein und los gehts!

Die Tabelle hilft uns, potenzielle Leistungsprobleme rund um die wichtigsten CWV-Indikatoren zu identifizieren und wann sie aufgetreten sein könnten, was uns wiederum Hinweise auf die Ursache geben kann. Es kann auch verwendet werden, um zu demonstrieren, wie sich Geschwindigkeitsbewertungen im Laufe der Zeit natürlich ändern können, wenn eine Website wächst oder wenn Änderungen an den zugrunde liegenden Algorithmen für die Seitengeschwindigkeit vorgenommen werden.

Wir verwenden seit einigen Monaten eine modifizierte Version dieser Tabelle, die uns dabei geholfen hat, Möglichkeiten zur Verbesserung der Leistung einer Reihe von Websites zu identifizieren.

PageSpeed-Einblicke

PageSpeed ​​Insights von Google ist mein bevorzugtes Tool für erste Top-Line-Untersuchungen zu Leistungs- und CWV-bezogenen Problemen, sowohl für mobile als auch für Desktop-Geräte. Berichte enthalten 'Felddaten'; wie reale Benutzer die Website zusammen mit Lighthouse 'Lab'-Daten erleben, die einen Seitenladevorgang simulieren, was für wiederholbare und konsistente Tests nützlich ist.

Core Web Vital-Metriken werden mit einfachen, farbcodierten Indikatoren deutlich hervorgehoben. Schlechte Metriken werden rot, gute grün hervorgehoben. Diese Metriken werden kombiniert, um eine Gesamtgeschwindigkeitsbewertung zu ergeben, und Sie benötigen 90% oder mehr für einen grünen "Pass".

Diese Berichte enthalten auch eine Reihe von Empfehlungen und Diagnosen, geordnet nach den Elementen mit der höchsten Auswirkung in Bezug auf die insgesamt einsparbaren Sekunden.

Chrome DevTools-Leistungsmonitor

Für eine detailliertere Analyse von Performance- und CWV-bezogenen Problemen wende ich mich oft an Chromes Performance Monitor in DevTools und einige der wichtigsten CWV-Indikatoren, die ich verwende, sind im Screenshot unten nummeriert.

1. Zunächst sollten Sie sicherstellen, dass Sie den Leistungsmonitor mit der richtigen Auflösung ausführen, da sich LCP- und CLS-Elemente oft bei unterschiedlichen Auflösungen ändern. Ich habe meine auf 350 x 636 Pixel eingestellt, um die mobile Ansicht von PageSpeed ​​Insights zu replizieren.
2. Bevor Sie den Bericht ausführen, möchten Sie möglicherweise auch die Konnektivität und Leistung eines Mobilgeräts simulieren. Ich wähle oft Fast 3g und 4x CPU Slowdown.
3. Wenn Sie die LCP-Metrik auswählen, nachdem ein Bericht erstellt wurde, wird das größte Element identifiziert. Dieser sollte möglichst nah am FCP (First Contentful Paint) liegen. Wenn es eine Lücke gibt, sollten Sie die Bereitstellung des größten Elements identifizieren und optimieren.
4. Lange CPU-Aufgaben werden durch die roten Diagonalen auf den grauen Balken hervorgehoben. Dies wird oft durch schwereres JavaScript verursacht, das durch die gelben Balken dargestellt wird und sich auf Ihre Interaktivitätsmetriken (FID, TBT und TTI) auswirkt. Wenn Sie die Balken unten aufschlüsseln, weisen Sie normalerweise auf die anstößigen JavaScript-Dateien und -Funktionen hin.
5. Layoutverschiebungen werden durch diese roten Balken hervorgehoben und durch deren Auswahl wird normalerweise hervorgehoben, welches Element verschoben wurde. Ein großer Teil davon führt zu höheren CLS-Werten.
6. Die Frame-Ansicht kann eine gute Möglichkeit sein, visuell hervorzuheben, wie Inhalte angezeigt werden und das Layout beim Laden verschoben wird. Bei hohen CLS-Werten ist die Ursache oft anhand der Frames ersichtlich. In diesem Beispiel bewirkt ein großes Cookie-Banner die Layout-Verschiebung als nach unten gedrückter Inhalt.

Web Vitals Chrome-Erweiterungen

Core SERP Vitals

Die SERP Vitals-Erweiterung zeigt einen praktischen Indikator für die LCP-, FID- und CLS-Metriken direkt in den Suchergebnissen an. Es eignet sich hervorragend für die Wettbewerbsanalyse und kann einen schnellen Hinweis darauf geben, wie schnell eine Webseite wahrscheinlich sein wird, bevor Sie sie besuchen.

Die Daten werden durch den Chrome User Experience Report (CrUX) anonym von echten Benutzern zusammengestellt. Es ist jedoch nicht für jede Site verfügbar, da neue Sites oder Sites mit wenig Verkehr nicht genügend Datenpunkte gesammelt haben.

Web Vitals

Die praktische Web Vitals-Erweiterung misst die 3 wichtigsten CWV-Metriken für Desktop-Benutzer in Chrome in Echtzeit und ihre Ampelfarben bieten einen schnellen Indikator beim Durchsuchen einer Website. Da es nicht auf extern gesammelte Benutzerdaten angewiesen ist, kann es für Entwickler, die in einer lokalen Umgebung arbeiten, großartig sein, um Probleme frühzeitig zu erkennen.

Leuchtturm

Die Lighthouse-Erweiterungen bieten einen schnellen Weg zu derselben Berichtsfunktion, die in Chrome DevTools verfügbar ist, und ruft Lab-Daten mithilfe der Lighthouse-API anstelle von Felddaten von realen Benutzern über CrUX ab.

Der Leistungsbericht ist der mobilen Analyse von PageSpeed ​​Insights sehr ähnlich und bietet ähnliche Diagnosen und Empfehlungen. Darüber hinaus werden zusätzliche Berichte für SEO, Barrierefreiheit und Best Practice erstellt.

Treo Site Speed ​​Visualizer

Der Visualiser unter https://treo.sh/sitespeed zeigt CWV-Metriken im Zeitverlauf, filterbar nach Gerät, Konnektivität und geografischer Region. Es wird wöchentlich aktualisiert und verwendet Daten aus dem CrUX-Bericht.

Im folgenden Beispiel für bbc.co.uk können wir sehen, wie die CLS-Kennzahl in den letzten 3 Monaten deutlich gesunken ist, was für alle Kernkennzahlen grüne „Bestanden“-Ergebnisse liefert. Dies ist eine großartige Möglichkeit, die Leistung von CWV-Metriken im Laufe der Zeit zu analysieren oder eine Wettbewerbsanalyse durchzuführen.

Anfragen von Drittanbietern visualisieren

Interaktivitätsmetriken für FID, TTI und TBT können oft schwer zu beheben sein. PageSpeed ​​Insights kann nützlich sein, um einige der schwersten Skripte von Drittanbietern zu identifizieren, aber manchmal kann eine anständige Visualisierung die Auswirkungen dieser Skripte viel einfacher kommunizieren.

Dafür eignet sich das Request-Mapping-Tool https://requestmap.herokuapp.com/ hervorragend. Die generierten Karten enthalten Knoten für jede Drittanbieteranfrage, wobei größere Knoten Skripte mit höherer Wirkung darstellen. Wenn Ihre Interaktivitätsmetriken schlecht sind, werden Sie wahrscheinlich viele Knoten auf dieser Karte sehen.

Hier ist ein Beispiel von einer Site, die satte 26 Sekunden für die Time to Interactive TTI-Metrik hat. Ein kurzer Blick auf die Karte zeigt ein Live-Chat-Widget, dargestellt durch die zahlreichen dunkelblauen Knoten oben, die über die Hälfte der gesamten Anfragen ausmachen.

Das Request-Map-Tool ist auch eine großartige Möglichkeit, um zu bestimmen, woher Skripte oder andere Assets geladen werden. Unten sehen Sie mehrere Knoten, die in diesem Beispiel direkt vom gelben Google Tag Manager-Knoten stammen.

Wasserfälle in WebPageTest

WebPageTest-Berichte bieten viel mehr Details als PageSpeed ​​Insights und können von verschiedenen Geräten und Standorten aus generiert werden.

Ich verwende dieses Tool häufig für die Wasserfallanalyse, die die Ladereihenfolge aller Assets auf einer Seite visualisiert. Dies kann besonders nützlich sein, wenn Sie versuchen, Ihre kritischen „above the fold“-Inhalte zu optimieren. Wenn Sie beispielsweise für LCP optimieren und das größte Element oberhalb der Falte ein Bild oder eine Typografie ist, möchten Sie möglicherweise das Vorladen für die größten Bild- und Schriftdateien implementieren und überprüfen, ob diese vorinstallierten Assets oben im Wasserfall angezeigt werden .

Unsicher, wie sich CWV auf Ihre Website auswirken wird, schreiben Sie uns noch heute eine Nachricht.