Kombinieren Sie Google-Tools, um Ihre Website effektiv zu prüfen, zu optimieren und im Blick zu behalten.
Veröffentlicht: 28. Mai 2020
Core Web Vitals sind eine Reihe von Messwerten, mit denen die Nutzerfreundlichkeit anhand von Kriterien wie Ladeleistung, Reaktionsschnelligkeit auf Nutzereingaben und Layoutstabilität bewertet wird.
In diesem Leitfaden wird ein Workflow zur Verbesserung der Core Web Vitals für Ihre Website beschrieben. Wo dieser Workflow beginnt, hängt jedoch davon ab, ob Sie eigene Felddaten erheben. Wo es endet, hängt davon ab, welche Google-Tools Sie für die Diagnose und Behebung von Problemen mit der Nutzerfreundlichkeit als nützlich erachten.
Core Web Vitals lassen sich am besten in der Praxis messen
Core Web Vitals sind speziell darauf ausgelegt, die Nutzerfreundlichkeit Ihrer Website zu messen. Es handelt sich also um nutzerbezogene Messwerte. Lab-basierte Tools wie Lighthouse sind Diagnosetools, mit denen potenzielle Leistungsprobleme und Best Practices aufgezeigt werden. Lab-basierte Tools werden unter bestimmten, vordefinierten Bedingungen ausgeführt und spiegeln möglicherweise nicht die Core Web Vitals-Messungen wider, die Ihre Nutzer in der Praxis sehen.
Lighthouse ist beispielsweise ein laborgestütztes Tool, mit dem Tests mit simulierter Drosselung in einer simulierten Desktop- oder Mobilgeräteumgebung ausgeführt werden. Solche Simulationen von langsameren Netzwerk- und Gerätebedingungen sind zwar hilfreich, um Leistungsprobleme zu diagnostizieren, stellen aber nur einen kleinen Ausschnitt der großen Vielfalt an Netzwerkbedingungen und Gerätefunktionen dar und spiegeln daher möglicherweise nicht wider, was Nutzer auf Ihren Websites erleben.
Lab-basierte Tools wie Lighthouse führen in der Regel auch einen „Kaltstart“ einer Webseite als völlig neuer Besucher durch. Das ist oft der langsamste Ladevorgang. In der Praxis haben Besucher jedoch möglicherweise einige Assets im Cache, wenn sie die Website schon einmal besucht haben oder gerade auf der Website surfen. Neue Besucher und Tools sehen die Website möglicherweise anders, wenn Cookie-Banner oder andere Inhalte angezeigt werden.
Kurz gesagt: Lab-basierte Tools können zwar auf potenzielle Leistungsprobleme hinweisen und Ihnen beim Debuggen und Iterieren helfen, aber sie spiegeln möglicherweise nicht wider, wie viele Ihrer Besucher Ihre Website tatsächlich nutzen. Verwenden Sie Felddaten, um die Leistung in der Praxis zu messen, und laborgestützte Tools wie Lighthouse, um zu analysieren, wie Sie die Leistung verbessern können. Weitere Informationen finden Sie im Abschnitt Wann sollte Lighthouse verwendet werden?.
Google misst Core Web Vitals mithilfe des Berichts zur Nutzererfahrung in Chrome (Chrome User Experience, CrUX). Dies ist ein öffentlicher Datensatz, der von echten Chrome-Nutzern erhoben wird. Sie ist die Grundlage vieler Tools von Google und Drittanbietern, die die Core Web Vitals einer Website erfassen.
CrUX hat jedoch auch seine Grenzen. Sie kann Ihnen oft sagen, wann ein Problem auftritt, hat aber häufig nicht genügend Daten, um Ihnen zu sagen, warum.
Eigene Felddaten erheben, falls möglich
Das beste Dataset zur Verbesserung der Websiteleistung in der Praxis ist das, das Sie erstellen. Dazu müssen Sie zuerst Daten von den Besuchern Ihrer Website erheben. Die Vorgehensweise hängt von der Größe Ihrer Organisation ab und davon, ob Sie für eine Drittanbieterlösung bezahlen oder eine eigene Lösung erstellen möchten.
Bei kostenpflichtigen Lösungen werden mit hoher Wahrscheinlichkeit die Core Web Vitals (und andere Leistungsmesswerte) gemessen. Außerdem werden in der Regel verschiedene Tools zur Verfügung gestellt, mit denen sich die Ergebnisse genauer analysieren lassen. In großen Organisationen mit erheblichen Ressourcen ist dies möglicherweise die bevorzugte Methode.
Vielleicht gehören Sie aber auch nicht zu einer großen Organisation oder haben nicht die Mittel, sich eine Drittanbieterlösung zu leisten. In diesen Fällen können Sie mit der web-vitals-Bibliothek von Google alle Web-Vitals erfassen. Sie sind jedoch dafür verantwortlich, wie diese Daten erfasst, gespeichert und analysiert werden.
Wenn Sie Google Analytics bereits verwenden, aber noch keine eigenen Felddaten erheben, können Sie möglicherweise die web-vitals-Bibliothek verwenden, um im Feld erhobene Web Vitals an Google Analytics zu senden und die GA4-BigQuery-Exporte für die Berichterstellung zu den Daten zu nutzen.
Google-Tools kennenlernen
Unabhängig davon, ob Sie eigene Felddaten erheben, gibt es mehrere Google-Tools, die bei der Analyse von Core Web Vitals hilfreich sein können. Bevor Sie einen Workflow einrichten, kann Ihnen ein allgemeiner Überblick über die einzelnen Tools helfen, zu entscheiden, welche Tools für Sie am besten geeignet sind.
Bericht zur Nutzererfahrung in Chrome (Chrome User Experience, CrUX)
Wie bereits erwähnt, ist CrUX ein öffentlicher Datensatz mit Felddaten, die von einem Segment echter Google Chrome-Nutzer auf Millionen von Websites erhoben werden. Sie enthält Core Web Vitals-Messwerte und andere Messwerte für Websites mit ausreichend Traffic.
CrUX ist als monatliches BigQuery-Dataset auf Ursprungsebene oder als tägliche API auf URL- oder Ursprungsebene verfügbar, sofern für eine URL oder einen Ursprung genügend Stichproben im CrUX-Dataset vorhanden sind. Die CrUX-Daten sind über verschiedene CrUX-Tools sowohl für den programmatischen Zugriff als auch für die Nutzung durch Nutzer verfügbar.
Wann sollte CrUX verwendet werden?
Auch wenn Sie eigene Felddaten erheben, ist CrUX nützlich. CrUX-Daten beziehen sich zwar nur auf eine Teilmenge der Chrome-Nutzer, es ist aber hilfreich, die Felddaten Ihrer Website mit den CrUX-Daten zu vergleichen, um zu sehen, wie sie übereinstimmen. Beide haben Vor- und Nachteile, die zu Unterschieden führen können. Wenn Sie keine Felddaten für Ihre Website erheben, ist CrUX besonders wertvoll, um einen allgemeinen Überblick zu erhalten – vorausgesetzt, Ihre Website ist im Datensatz enthalten.
Sie können CrUX direkt oder über ein anderes Tool (einschließlich der unten genannten) verwenden. Die direkte Verwendung des CrUX-Datasets über BigQuery oder die API ist nützlich, um Daten zu präsentieren, die in anderen Tools nicht angezeigt werden. So sind beispielsweise Daten auf Länderebene in anderen Tools oft nicht verfügbar. Außerdem können Sie die zusätzlichen Messwerte in CrUX aufrufen, die in anderen Tools ebenfalls oft nicht verfügbar sind.
Wann sollte CrUX nicht verwendet werden?
CrUX umfasst nur Chrome-Nutzer und auch dann nur einen Teil der Chrome-Nutzer. Eine vollständige RUM-Lösung kann mehr Nutzerfreundlichkeit in Chrome und anderen Browsern umfassen, sofern sie die Web-Vital-Messwerte unterstützen.
Websites, die nicht genügend Traffic erzielen, sind nicht im CrUX-Datensatz enthalten. In diesem Fall müssen Sie eigene Felddaten erheben, um die Leistung Ihrer Website zu analysieren, da CrUX nicht verfügbar ist. Alternativ können Sie sich auf Labordaten stützen, die jedoch möglicherweise nicht repräsentativ sind, wie oben beschrieben.
Da die von CrUX bereitgestellten Daten ein gleitender Durchschnitt der letzten 28 Tage sind, ist das Tool während der Entwicklung nicht ideal, da es einige Zeit dauert, bis sich Verbesserungen in den CrUX-Daten widerspiegeln.
Da CrUX ein öffentliches Dataset ist, sind die Menge der verfügbaren Informationen und die Art und Weise, wie diese Daten abgefragt werden können, begrenzt. Wenn Sie eigene RUM-Daten erfassen, können Sie mehr Details (z. B. das LCP-Element) abrufen und die Daten besser segmentieren, um Probleme zu identifizieren. Haben angemeldete Nutzer bessere oder schlechtere Core Web Vitals-Werte als abgemeldete Nutzer? Haben Nutzer mit einem langsamen LCP ein bestimmtes LCP-Element? Welche Interaktionen führen zu hohen FID- und INP-Werten?
PageSpeed Insights (PSI)
PSI ist ein Tool, das Felddaten aus CrUX und Lab aus Lighthouse für eine bestimmte Seite meldet. Weitere Informationen finden Sie in den einzelnen Abschnitten.
Wann sollte PSI verwendet werden?
PSI eignet sich hervorragend, um die CrUX-Leistung auf Seiten- oder Ursprungsebene für Mobilgeräte- und Desktopnutzer zu bewerten. Er eignet sich gut für einen ersten Überblick über die Core Web Vitals einer Seite oder Website. Außerdem können Sie Core Web Vitals-Daten für andere Websites wie die von Mitbewerbern aufrufen.
PSI liefert auch Lighthouse-Daten, die nützliche Empfehlungen zur Verbesserung Ihrer Core Web Vitals enthalten, sofern die Messwerte übereinstimmen. Wenn diese nicht übereinstimmen, sind Lighthouse-Empfehlungen möglicherweise weniger relevant.
Da Lighthouse auf dem Server ausgeführt wird, kann es eine konsistentere Baseline bilden als die Ausführung von Lighthouse über die DevTools.
Wann sollte PSI nicht verwendet werden?
PSI ist nur für öffentliche URLs verfügbar. Es kann nicht auf Entwicklungswebsites verwendet werden, die nicht öffentlich zugänglich sind.
CrUX-Daten sind nur verfügbar, wenn Websites bestimmte Anforderungen erfüllen, z. B. Mindestanforderungen an die Popularität. PSI ist weniger nützlich, wenn keine CrUX-Daten für eine Seite oder einen Ursprung verfügbar sind, da in diesen Fällen nur die Lighthouse-Labordaten angezeigt werden können.
Wenn Sie nur CrUX-Daten auf Ursprungsebene und nicht für die getestete URL haben, ist es ebenfalls schwieriger, die Felddaten auf Ursprungsebene mit den Labordiagnosen auf Seitenebene in Beziehung zu setzen. Die Daten auf Ursprungsebene sind weiterhin sehr nützlich, um die Leistung der Website zusammenzufassen. Die Lighthouse-Prüfungen können hilfreich sein, aber in diesem Fall ist besondere Vorsicht geboten.
Wenn Seiteninformationen in CrUX verfügbar sind, sich aber von den Lighthouse-Labordaten unterscheiden, sind die Empfehlungen von Lighthouse möglicherweise nur von begrenztem Wert. Das kann insbesondere bei Problemen mit dem CLS nach dem Laden und bei den Core Web Vitals zur Interaktivität (FID und INP) auftreten, bei denen laborgestützte Audits weniger nützlich sind.
Search Console
In der Search Console werden Suchzugriffe und die Leistung Ihrer Website gemessen, einschließlich der Core Web Vitals. Sie ist nur für Website-Inhaber verfügbar, die bestätigt haben, dass sie Inhaber der Website sind.
Ein großer Vorteil der Search Console ist, dass ähnliche Seiten (z. B. Seiten, die dieselbe Vorlage verwenden) in einer einzigen Gruppenbewertung zusammengefasst werden. Die Search Console enthält auch einen Core Web Vitals-Bericht, der auf Felddaten aus CrUX basiert.
Wann sollte die Search Console verwendet werden?
Die Search Console eignet sich sowohl für Entwickler als auch für Personen in anderen Rollen, um die Such- und Seitenleistung auf eine Weise zu bewerten, die mit anderen Google-Tools nicht möglich ist. Die Darstellung von CrUX-Daten und die Gruppierung von Seiten nach Ähnlichkeit bieten neue Einblicke in die Auswirkungen von Leistungsverbesserungen auf ganze Seitenkategorien.
Wann sollte ich die Search Console nicht verwenden?
Die Search Console ist möglicherweise nicht für Projekte geeignet, in denen verschiedene Drittanbietertools verwendet werden, die Seiten nach Ähnlichkeit gruppieren, oder wenn eine Website nicht im CrUX-Dataset enthalten ist.
Die Seitengruppierung kann auch etwas verwirrend sein, wenn die Beispielseiten in einer Gruppe andere Merkmale aufweisen als der Rest der Gruppe. Das ist beispielsweise der Fall, wenn die Gruppe insgesamt bestimmte Core Web Vitals nicht besteht, die Beispielseiten aber alle die gleichen Core Web Vitals bestehen. Das kann passieren, wenn eine Gruppe Longtail- oder selten besuchte Seiten enthält, die möglicherweise langsamer geladen werden, da sie weniger wahrscheinlich im Cache gespeichert sind. Wenn genügend Seiten mit Longtail-Suchanfragen vorhanden sind, können sie sich auf die Gesamt-Passrate der Gruppe auswirken.
Leuchtturm
Lighthouse ist ein Labortool, das konkrete Möglichkeiten zur Verbesserung der Seitenleistung bietet. Mit Lighthouse-Nutzerflows können Entwickler auch Interaktionsabläufe für Leistungstests nach dem Seitenaufbau skripten.
Lighthouse-CI ist ein ähnliches Tool, mit dem Lighthouse während Projekt-Builds und ‑Bereitstellungen ausgeführt wird, um Regressionstests für die Leistung zu unterstützen. Es wird ein Lighthouse-Bericht zusammen mit Pull-Requests präsentiert und Leistungsmesswerte werden im Zeitverlauf erfasst.
Wann sollte Lighthouse verwendet werden?
Lighthouse eignet sich hervorragend, um während der Entwicklung sowohl in lokalen als auch in Staging-Umgebungen Möglichkeiten zur Leistungssteigerung zu finden. Lighthouse CI ist in den Build- und Bereitstellungsphasen für Staging- und Produktionsumgebungen ähnlich nützlich, da Leistungsregressionstests erforderlich sind, um eine gute Nutzererfahrung zu gewährleisten.
Wann sollte Lighthouse nicht verwendet werden?
Lighthouse (oder Lighthouse CI) ist kein Ersatz für Felddaten. Lighthouse ist in erster Linie ein Diagnosetool, das potenzielle Probleme und Best Practices für einen vordefinierten Seitenaufbau auflistet. Die Empfehlungen stimmen möglicherweise nicht immer mit der Leistung überein, die Ihre Nutzer sehen.
Lighthouse kann zwar verwendet werden, um Produktionswebsites mit Tools wie PageSpeed Insights zu diagnostizieren, sollte aber idealerweise in Entwicklungs- und Continuous Integration-Umgebungen eingesetzt werden, um Leistungsprobleme zu beheben, bevor sie in der Produktion auftreten.
Die von Lighthouse bereitgestellten Audits sind auch über „Statistiken“ im Bereich „Leistung“ der Chrome-Entwicklertools verfügbar. Dort finden Sie eine detailliertere Analyse der Leistung einer Seite.
Bereich „Leistung“ in den Chrome-Entwicklertools
Die Chrome-Entwicklertools sind eine Sammlung von Entwicklungstools im Browser, darunter der Bereich „Leistung“. Das Leistungspanel ist ein Lab-Tool, das aus zwei „Modi“ besteht:
Wenn das Feld „Leistung“ zum ersten Mal geöffnet wird, wird ein Bildschirm mit Live-Messwerten angezeigt, der aktuelle Core Web Vitals-Messwerte enthält. Außerdem können Felddaten aus CrUX importiert werden. Sie ist nützlich, um die Leistung in Echtzeit zu beobachten, während Sie mit der Seite interagieren, um Leistungsprobleme aufzudecken, insbesondere Probleme nach dem Laden, die bei den Messwerten für CLS und INP auftreten können.
Zweitens können Entwickler mit dem Bereich „Leistung“ ein Profil (oder einen Trace) aller Seitenaktivitäten während des Seitenaufbaus oder eines aufgezeichneten Zeitraums erfassen. Hier erhalten Sie detaillierte Informationen zu allen beobachteten Aspekten, z. B. Netzwerk-, Rendering-, Painting- und Scripting-Aktivitäten sowie zu den Core Web Vitals einer Seite. Es enthält auch Informationen, die denen von Lighthouse ähneln.
Wann sollte der Bereich „Leistung“ verwendet werden?
Entwickler sollten den Bereich „Leistung“ verwenden, um detaillierte Informationen zur Leistung einer bestimmten Seite zu erhalten.
Mit der Ansicht für Live-Messwerte können Sie sich schnell einen Überblick über die aktuellen Leistungsmerkmale der Seite verschaffen und potenzielle Probleme erkennen, während Nutzer mit der Seite interagieren.
Die Trace-Ansicht ist besonders nützlich, um Probleme mit der Reaktionsfähigkeit zu beheben, die sich auf INP auswirken. Sobald eine schlecht reagierende Interaktion identifiziert und reproduzierbar ist, kann das Leistungspanel eine Vielzahl von Daten darüber liefern, was im Browser vor sich geht, um das Problem zu verstehen, von der Blockierung des Hauptthreads über JavaScript-Aufrufstacks bis hin zur Rendering-Arbeit.
Wann sollte ich den Bereich „Leistung“ nicht verwenden?
Das Leistungspanel ist ein Entwicklertool, das hauptsächlich Labordaten enthält, aber auch einige Feldkontexte aus CrUX. Sie sind kein Ersatz für Felddaten.
Die Trace-Ansicht enthält viele Debugging-Informationen, ist aber daher für unerfahrene Entwickler oder Nutzer in anderen Rollen möglicherweise schwer zu verstehen. Die Ansicht mit Live-Messwerten, die beim Öffnen des Bereichs angezeigt wird, bietet jedoch eine benutzerfreundlichere Oberfläche für Nutzer, die nicht alle Details benötigen.
Dreistufiger Workflow, um die Core Web Vitals Ihrer Website im Blick zu behalten
Wenn Sie die Nutzerfreundlichkeit verbessern möchten, sollten Sie den Prozess als kontinuierlichen Zyklus betrachten. So können Sie Core Web Vitals und andere Leistungsmesswerte verbessern:
- Website-Integrität bewerten und Probleme identifizieren
- Fehler beheben und optimieren.
- Verwenden Sie Continuous-Integration-Tools, um Regressionen zu erkennen und zu verhindern.
Schritt 1: Website-Zustand bewerten und Verbesserungsmöglichkeiten ermitteln
Am besten beginnen Sie mit Felddaten, um den Zustand Ihrer Website zu bewerten.
- Mit PageSpeed Insights können Sie sich die allgemeinen Core Web Vitals-Messwerte für den Ursprung und spezifische Informationen zu einer einzelnen URL ansehen.
- Die Search Console kann nützlich sein, um Seiten zu identifizieren, die verbessert werden müssen. Die Funktion zur Gruppierung von Seiten funktioniert gut für Ihre Website.
- Wenn Sie RUM-Daten haben, sind diese oft die beste Option, um bestimmte Seiten oder Traffic-Segmente mit Problemen zu identifizieren.
Unabhängig davon, ob Sie selbst erhobene Felddaten oder CrUX-Daten analysieren, ist dieser erste Schritt entscheidend. Wenn Sie keine Felddaten erfassen, reichen CrUX-Daten möglicherweise aus, um Sie zu unterstützen – vorausgesetzt, Ihre Website ist im Datensatz enthalten.
Websiteleistung mit PageSpeed Insights analysieren
In PageSpeed Insights werden die CrUX-Daten für die letzten 28 Tage der Nutzererfahrung im 75. Perzentil angezeigt. Das bedeutet, dass die Nutzerfreundlichkeit als „gut“ gilt, wenn 75% der Nutzererlebnisse den für einen bestimmten Messwert festgelegten Grenzwert erreichen.
Wenn Sie die Leistung einer bestimmten Seite analysieren möchten, verwenden Sie diese Seite. Wenn Sie sich einen Überblick über eine Website verschaffen möchten, bevor Sie mit der Optimierung beginnen, sollten Sie mit der Startseite anfangen, da sie in der Regel eine der beliebtesten Seiten auf vielen Websites ist.
Konzentrieren Sie sich anfangs auf den Abschnitt So sieht die Leistung auf der Nutzerseite aus von PSI. Sie sehen bis zu vier Ansichten der Daten: Mobilgeräte und Computer für die eingegebene URL und den gesamten Ursprung. Vergleichen Sie sie und sehen Sie, worin sie sich unterscheiden. Die Leistung auf Mobilgeräten ist in der Regel geringer als auf Computern, da Mobilgeräte ressourcenbeschränkter sind und unter möglicherweise weniger stabilen Netzwerkbedingungen betrieben werden. Wenn sich die URL- und Ursprungsdaten erheblich unterscheiden, sollten Sie versuchen, die Ursache dafür zu ermitteln. Startseiten sind oft die ersten besuchten Seiten (d. h. eine Landingpage) und können daher langsamer sein, da Nutzer des Ursprungs die volle Last eines nicht vorbereiteten Browser-Cache zu spüren bekommen. Nachfolgende Seiten werden wahrscheinlich schneller geladen, da alle freigegebenen Assets im Cache gespeichert werden. Dadurch werden die aggregierten Daten auf Ursprungsebene reduziert.
PSI zeigt auch alle drei Core Web Vitals-Messwerte (LCP, CLS und INP) sowie die diagnostischen Messwerte TTFB und FCP. Wird einer der Core Web Vitals-Werte nicht erreicht und wenn ja, um wie viel? So können Sie feststellen, wo Sie Ihre Bemühungen konzentrieren sollten.
Beziehungen zwischen diesen Zahlen verstehen – insbesondere für LCP Wenn der LCP-Wert langsam ist, wie in diesem Beispiel, sehen Sie sich TTFB und FCP an, die beide Meilensteine für diesen Messwert sind. In diesem Beispiel haben wir eine TTFB von 1,8 Sekunden. Es wird also sehr schwierig, den empfohlenen Grenzwert von 2,5 Sekunden für einen guten LCP zu erreichen. Das deutet entweder auf ein langsames Backend (Serverprobleme oder fehlendes CDN), langsamere Netzwerke oder Weiterleitungen hin, die die ersten HTML-Bytes verzögern. Weitere Informationen finden Sie im Leitfaden zur Optimierung von TTFB. Die FCP-Zeit ist noch eine Sekunde länger, was wiederum auf langsamere Netzwerke hindeuten kann. In diesem Beispiel liegt der LCP nicht lange nach dem FCP. Das deutet darauf hin, dass die LCP-Ressource gut optimiert ist, sobald die Seite geladen wird. CrUX enthält jetzt auch mehr Diagnoseinformationen in Ressourcentypen und ‑unterteilen, was Ihnen ebenfalls bei der Diagnose von LCP-Problemen helfen kann.
Sehen Sie sich für CLS die CrUX- und Lighthouse-CLS-Werte an, um festzustellen, ob es sich um ein CLS-Problem beim Laden handelt (das von Lighthouse erkannt und behoben wird) oder um ein CLS-Problem nach dem Laden, das von Lighthouse nicht erkannt wird. Weitere Informationen
Sehen Sie sich die INP-Werte an, um die Reaktionsfähigkeit zu beurteilen. Sehen Sie sich die TBT-Prüfungen in Lighthouse an, um festzustellen, ob beim ersten Seitenaufbau viel JavaScript verarbeitet wird. Dies wirkt sich wahrscheinlich auf INP aus. INP lässt sich nicht immer einfach verbessern. Weitere Informationen finden Sie im Leitfaden zur Optimierung von INP.
Schlecht laufende Seiten in der Search Console ermitteln
PSI ist zwar nützlich, wenn Sie eine bestimmte URL oder die gesamte Website testen möchten, mit der Search Console können Sie Ihre Bemühungen jedoch auf bestimmte Seitentypen ausrichten. Das ist besonders nützlich, wenn viele Seiten gemeinsame Themen oder Technologien haben und die Search Console diese erfolgreich identifizieren kann.
Der Core Web Vitals-Bericht in der Search Console bietet einen Überblick über die Leistung Ihrer Website. Sie können aber auch bestimmte Seiten aufrufen, die Aufmerksamkeit erfordern. Mit der Search Console haben Sie außerdem folgende Möglichkeiten:
- Identifizieren Sie einzelne Seitengruppen, die verbessert werden müssen, und solche, die eine gute Nutzerfreundlichkeit bieten.
- Sie erhalten detaillierte Daten zur Leistung nach URL, gruppiert nach Status, Messwert und Gruppen ähnlicher Webseiten (z. B. Produktdetailseiten auf einer E-Commerce-Website).
- Sie erhalten detaillierte Berichte, in denen URLs für Mobilgeräte und Computer in die einzelnen Kategorien für die Qualität der Nutzerfreundlichkeit eingeteilt werden.
Sobald Sie einige bestimmte Seiten haben, die Sie sich ansehen möchten, können Sie PSI wie oben beschrieben verwenden, um weitere Informationen zu den Problemen auf diesen Seiten zu erhalten.
Schritt 2: Fehlerbehebung und Optimierung
In Schritt 1 sollten Sie Seiten identifiziert haben, die Leistungsverbesserungen erfordern, und auch, welche der Core Web Vitals-Messwerte Sie verbessern möchten. Mit den Google-Tools können Sie weitere Informationen abrufen, um die Ursache des Problems zu ermitteln.
- Lighthouse-Prüfungen bieten allgemeine Hinweise zur Seite.
- Verwenden Sie die Ansicht mit Live-Messwerten im Leistungsbereich, um Core Web Vitals in Echtzeit zu analysieren.
- Verwenden Sie das Tracing im Steuerfeld „Leistung“, um Leistungsprobleme zu beheben und Codeänderungen zu testen.
Ausführliche Informationen finden Sie in den folgenden Leitfäden:
Möglichkeiten mit Lighthouse erkennen
PageSpeed Insights führt Lighthouse für Sie aus. Lighthouse kann auch über die Chrome-Entwicklertools ausgeführt werden. Das ist nützlich, um Korrekturen lokal zu validieren. Der Leistungsbereich (siehe unten) ist jedoch ein umfassenderes Tool zum lokalen Identifizieren und Beheben von Leistungsproblemen.
Wichtig ist, dass die Lighthouse-Prüfung die Probleme widerspiegelt, die Sie beheben möchten, z. B. Probleme mit dem langsamsten LCP oder CLS. Standardmäßig bewertet Lighthouse nur die Nutzerfreundlichkeit während des Seitenaufbaus. Da es sich um ein Lab-Tool handelt, wird INP zugunsten von TBT ausgeschlossen.
Wenn die Lighthouse-Messwerte auf ein ähnliches Problem wie das hinweisen, das Sie beheben möchten, können die vielen Informationen in den Prüfungen helfen, Probleme zu identifizieren und Lösungen vorzuschlagen.
Sie können die Audits nach den Core Web Vitals filtern, die Sie interessieren, um sich auf die Behebung von Problemen im Zusammenhang mit einem bestimmten Messwert zu konzentrieren:
Verwenden Sie für INP die TBT-Prüfungen, um Probleme zu identifizieren, die sich potenziell auf diese Messwerte auswirken können. Beachten Sie jedoch, dass Lighthouse ohne Interaktionen nur eingeschränkt Diagnosen durchführen kann.
Echtzeitanalyse mit dem Bildschirm für Live-Messwerte in den Chrome-Entwicklertools
Auf dem Bildschirm „Live-Messwerte“ in den Chrome-Entwicklertools werden im Bereich „Leistung“ die Core Web Vitals in Echtzeit während des Seitenaufbaus und beim Aufrufen einer Seite angezeigt. Daher können sowohl INP als auch Layoutverschiebungen erfasst werden, die nach dem Laden auftreten. Sie können sich auch detailliertere Informationen zu den einzelnen Messwerten ansehen:
Diese Ansicht enthält viele hilfreiche Informationen zur Ermittlung von Leistungsproblemen und kann sogar Feldinformationen aus CrUX abrufen. Noch mehr Informationen erhalten Sie, wenn Sie einen Trace erstellen.
Mit dem Bereich „Leistung“ ins Detail gehen
Im Bereich „Leistung“ der Chrome-Entwicklertools können Sie ein Profil (oder einen Trace) des gesamten Seitenverhaltens während eines aufgezeichneten Zeitraums aufzeichnen.
Leistungsstatistiken sind in der Seitenleiste Statistiken verfügbar. Außerdem werden die Core Web Vitals-Messwerte zusammen mit den Feldwerten angezeigt, sofern verfügbar.
Im Bereich Layoutverschiebungen werden Layoutverschiebungen hervorgehoben. Wenn Sie darauf klicken, erhalten Sie weitere Informationen zu den Elementen, die verschoben wurden, um CLS zu debuggen.
Wichtige Zeitangaben wie LCP werden unten im Trace unter Timings angezeigt. Klicken Sie darauf, um weitere Informationen zu erhalten.
Lange Aufgaben, die zu INP-Problemen führen können, werden im Flammen-Chart auch mit roten Dreiecken hervorgehoben.
Mithilfe dieser Funktionen und der Informationen in anderen Bereichen des Leistungsbereichs können Sie feststellen, ob sich Korrekturen auf die Core Web Vitals einer Seite auswirken.
Core Web Vitals in der Praxis debuggen
Mit Lab-Tools lässt sich nicht immer die Ursache aller Core Web Vitals-Probleme ermitteln, die sich auf Ihre Nutzer auswirken. Das ist einer der Gründe, warum es so wichtig ist, eigene Felddaten zu erheben, da sie Faktoren berücksichtigen, die in Labordaten nicht berücksichtigt werden können.
Weitere Informationen finden Sie unter Leistung im Feld debuggen.
Schritt 3: Änderungen im Blick behalten
Nachdem Sie alle Probleme behoben haben, sollten Sie prüfen, ob die Änderungen die gewünschte Wirkung haben und ob neue Probleme Ihre Core Web Vitals beeinträchtigen. Dazu ist es erforderlich, dass Entwickler im Rahmen ihres Workflows auf Leistungsprobleme achten, um zu verhindern, dass Leistungsprobleme in der Produktionsumgebung auftreten. Außerdem müssen die Felddaten regelmäßig überwacht werden, um sicherzustellen, dass dies der Fall ist.
Leistungsanforderungen in CI-Umgebungen (Continuous Integration) überwachen
Mit Lighthouse-CI können Sie automatisch Lighthouse-Prüfungen für Code-Commits ausführen, um Leistungsbeeinträchtigungen im Code zu verhindern. Damit lassen sich Leistungsmessungen (die Schwankungen unterliegen) oder nur die Leistungsprüfungen als Linting-Tool durchführen, um schlechte Praktiken im Code zu vermeiden.
Website-Diagnosetrends mit Felddaten ansehen
Sie sollten alle Leistungsprobleme erkennen und beheben, bevor sie in die Produktion gelangen. Die Überwachung Ihrer Felddaten mit RUM ist jedoch unerlässlich, um alle Probleme zu finden, die durchrutschen. Es gibt viele kommerzielle RUM-Produkte, die Ihnen dabei helfen können. Mit der web-vitals-JavaScript-Bibliothek lässt sich die Erfassung von Felddaten einer Website automatisieren. Optional können diese Daten für benutzerdefinierte Dashboards und Benachrichtigungssysteme verwendet werden.
Für Websites ohne RUM-Lösung können Sie die verschiedenen CrUX-Tools für eine grundlegende Trendanalyse von Felddaten verwenden.
Fazit
Um schnelle und angenehme Nutzererlebnisse zu gewährleisten, ist eine leistungsstarke Denkweise und die Einführung eines Workflows erforderlich, um Fortschritte zu erzielen. Mit den richtigen Tools und Prozessen für die Überprüfung, Fehlerbehebung und Überwachung können Sie großartige Nutzererlebnisse schaffen und die für gute Core Web Vitals definierten Grenzwerte einhalten.