Kombinieren Sie Google-Tools, um Ihre Website effektiv zu überprüfen, zu verbessern und zu überwachen.
Die Core Web Vitals umfassen eine Reihe von Messwerten, mit denen die Nutzerfreundlichkeit anhand von Kriterien wie Ladeleistung, Reaktion auf Nutzereingaben und Layoutstabilität bewertet wird.
In diesem Leitfaden wird ein Workflow zur Verbesserung von Core Web Vitals für Ihre Website erläutert. Wo dieser beginnt, hängt jedoch davon ab, ob Sie Ihre eigenen Felddaten erheben. Wo er endet, kann davon abhängen, mit welchen Tools von Google Sie Probleme mit der Nutzererfahrung diagnostizieren und beheben können.
Core Web Vitals lassen sich am besten im Feld messen
Core Web Vitals wurden speziell dafür entwickelt, zu messen, wie Nutzer Ihre Website verwenden. Sie sind nutzerorientierte Messwerte. Laborbasierte Tools wie Lighthouse sind Diagnosetools, mit denen sich potenzielle Leistungsprobleme und Best Practices aufzeigen lassen. Labbasierte Tools werden unter bestimmten, vordefinierten Bedingungen ausgeführt und spiegeln möglicherweise nicht die tatsächlichen Core Web Vitals-Messungen wider, die Ihre Nutzer verwenden.
Zum Beispiel ist Lighthouse ein laborbasiertes Tool, das Tests mit simulierter Drosselung in einer simulierten Desktop- oder mobilen Umgebung ausführt. Solche Simulationen von langsameren Netzwerk- und Gerätebedingungen sind zwar hilfreich, wenn es darum geht, Leistungsprobleme zu diagnostizieren, stellen jedoch nur einen Teil der Vielfalt der Netzwerkbedingungen und Gerätefunktionen dar und spiegeln daher möglicherweise nicht wider, was die Nutzer auf Ihren Websites erwarten.
Lab-basierte Tools wie Lighthouse führen in der Regel auch einen „Kaltladevorgang“ durch. einer Webseite als völlig neuer Besucher. Dies ist häufig die langsamste Auslastung, aber in der Praxis kann es vorkommen, dass Besucher einige Assets im Cache speichern, wenn sie die Website schon einmal besucht oder umgesehen haben. Neue Besucher und neue Tools können die Website mit Cookie-Bannern oder anderen Inhalten auch anders empfinden.
Lab-basierte Tools können zwar Hinweise auf potenzielle Leistungsprobleme geben und Ihnen bei der Fehlerbehebung und Iteration helfen, aber sie spiegeln nicht unbedingt wider, wie viele Ihrer Besucher tatsächlich Ihre Website erleben. Sie können Felddaten verwenden, um die Leistung in der Praxis zu messen, und laborbasierte Tools wie Lighthouse für diagnostische Verbesserungsmöglichkeiten. Weitere Informationen finden Sie im Abschnitt Verwendung von Lighthouse.
Google misst Core Web Vitals mithilfe des Berichts zur Nutzererfahrung in Chrome (Chrome User Experience, CrUX). Dies ist ein öffentliches Dataset, das von echten Chrome-Nutzern erfasst wurde. Sie ist das Rückgrat vieler Google- und Drittanbieter-Tools, die die Core Web Vitals einer Website erfassen.
CrUX hat jedoch auch Grenzen. Sie kann oft erkennen, wann ein Problem vorliegt, aber oft sind nicht genügend Daten vorhanden, um den Grund zu ermitteln.
Wenn möglich eigene Felddaten erheben
Das beste Dataset zur Verbesserung der Websiteleistung vor Ort ist das von Ihnen erstellte Dataset. Zunächst werden Felddaten von den Besuchern Ihrer Website erfasst. Die Vorgehensweise hängt von der Größe Ihrer Organisation ab und davon, ob Sie für eine Drittanbieterlösung bezahlen oder eine eigene erstellen möchten.
Kostenpflichtige Lösungen messen mit hoher Wahrscheinlichkeit Core Web Vitals und andere Leistungsmesswerte und bieten normalerweise eine Vielzahl von Tools, um die daraus resultierenden Daten zu analysieren. In großen Organisationen mit umfangreichen Ressourcen ist diese Methode möglicherweise die bevorzugte Methode.
Möglicherweise sind Sie jedoch nicht Teil eines großen Unternehmens oder auch kein Unternehmen, das die Mittel hat, sich eine Drittanbieterlösung leisten zu können. In diesen Fällen können Sie alle Web Vitals über die web-vitals-Bibliothek von Google erfassen. Sie sind jedoch selbst dafür verantwortlich, wie diese Daten gemeldet, gespeichert und analysiert werden.
Wenn Sie Google Analytics bereits verwenden, aber noch keine eigenen Felddaten erheben, können Sie die web-vitals-Bibliothek verwenden, um die vor Ort erhobenen Web Vitals an Google Analytics zu senden und die BigQuery-Exporte von GA4 zu verwenden, um Berichte zu den Daten zu erstellen.
Informationen zu den Tools von Google
Unabhängig davon, ob Sie eigene Felddaten erheben, gibt es mehrere Google-Tools, die für die Analyse von Core Web Vitals nützlich sein können. Bevor Sie einen Workflow einrichten, kann Ihnen ein allgemeiner Überblick über die einzelnen Tools helfen, zu verstehen, 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 öffentliches Dataset mit Felddaten, die von einem Segment echter Google Chrome-Nutzer auf Millionen von Websites erfasst wurden. 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 ausreichend Stichproben im CrUX-Dataset vorhanden sind. Die BigQuery-Daten können auch im CrUX-Dashboard aufgerufen werden, sodass Websites bisherige Trends ihrer Website abrufen können.
Wann sollte man CrUX verwenden?
Selbst wenn Sie eigene Felddaten erheben, ist CrUX trotzdem nützlich. CrUX steht zwar nur für eine Untergruppe von Chrome-Nutzern, es ist jedoch hilfreich, die Felddaten Ihrer Website zu vergleichen, um festzustellen, wie sie mit den CrUX-Daten ü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 nützlich, um einen allgemeinen Überblick zu bieten – vorausgesetzt, Ihre Website ist im Datensatz enthalten.
Sie können CrUX direkt oder ein anderes Tool (einschließlich der unten aufgeführten) verwenden. Das direkte Verwenden des CrUX-Datasets, entweder über BigQuery oder die API, ist nützlich, um Daten sichtbar zu machen, die in anderen Tools nicht angezeigt werden. So sind beispielsweise Daten auf Länderebene in anderen Tools häufig nicht verfügbar, oder um die zusätzlichen Messwerte in CrUX aufzurufen, die wiederum häufig nicht in anderen Tools angezeigt werden.
Wann sollte CrUX nicht verwendet werden?
CrUX umfasst nur Chrome-Nutzer und selbst dann nur einen Teil der Chrome-Nutzer. Eine vollständige RUM-Lösung kann mehr Funktionen in Chrome und anderen Browsern umfassen, in denen Web Vitals-Messwerte unterstützt werden.
Websites, die nicht genügend Zugriffe erhalten, sind im CrUX-Datensatz nicht vertreten. In diesem Fall müssen Sie Ihre eigenen Felddaten erheben, um zu verstehen, wie Ihre Website vor Ort abschneidet, da CrUX keine Option ist. Alternativ sind Sie auf Lab-Daten angewiesen, die jedoch aufgrund der Einschränkungen nicht repräsentativ sind, wie zuvor beschrieben.
Da es sich bei den von CrUX bereitgestellten Daten um einen gleitenden Durchschnitt der letzten 28 Tage handelt, ist es für die Entwicklung nicht ideal, da es einige Zeit dauern wird, bis Verbesserungen im CrUX-Dataset sichtbar werden.
Als öffentliches Dataset ist CrUX darauf beschränkt, wie viele Informationen es zur Verfügung stellen kann und wie diese Daten abgefragt werden können. Wenn Sie Ihre eigenen RUM-Daten erfassen, können Sie mehr Details erfassen (z. B. das LCP-Element) und die Daten weiter segmentieren, um Probleme zu erkennen. Haben angemeldete Nutzer bessere oder schlechtere Core Web Vitals als nicht angemeldete Nutzer? Haben Nutzer mit einem langsamen LCP ein bestimmtes LCP-Element? Welche Interaktionen verursachen hohe FID- und INP-Werte?
PageSpeed Insights (PSI)
PSI ist ein Tool, das Felddaten aus CrUX und Lab von Lighthouse für eine bestimmte Seite meldet. Weitere Informationen finden Sie in den entsprechenden Abschnitten.
Verwendung von PSI
PSI eignet sich hervorragend für die Bewertung der Nutzererfahrung in Chrome auf Seitenebene oder auf Ursprungsebene für Nutzer von Mobilgeräten und Computern. Sie eignet sich gut, um einen ersten Überblick über Core Web Vitals für eine Seite oder Website zu erhalten. Außerdem können Sie sich Core Web Vitals-Daten für andere Websites, z. B. von Mitbewerbern, ansehen.
PSI stellt außerdem Lighthouse-Daten bereit, die nützliche Empfehlungen zur Verbesserung Ihrer Core Web Vitals geben, sofern die Messwerte übereinstimmen. Stimmen sie nicht überein, sind die Lighthouse-Empfehlungen unter Umständen weniger relevant.
Da Lighthouse über den Server ausgeführt wird, kann es eine konsistentere Basis bilden als die Ausführung von Lighthouse aus den Entwicklertools.
Wann sollte PSI nicht verwendet werden?
PSI ist nur für öffentliche URLs verfügbar. Sie darf nicht auf Entwicklungs-Websites verwendet werden, die nicht öffentlich zugänglich sind.
CrUX-Daten sind nur verfügbar, wenn Websites bestimmte Voraussetzungen erfüllen, einschließlich Schwellenwerten für die Beliebtheit von Websites. PSI ist weniger nützlich, wenn für eine Seite oder einen Ursprung keine CrUX-Daten verfügbar sind, da nur in diesen Fällen die Lighthouse-Lab-Daten angezeigt werden können.
Wenn Sie statt der getesteten URL nur CrUX-Daten auf Ursprungsebene und nicht die jeweilige URL haben, ist es ebenfalls nicht sinnvoll, die Felddaten auf Ursprungsebene mit der Lab-Diagnose auf Seitenebene zu korrelieren. Die Felddaten auf Ursprungsebene sind weiterhin sehr nützliche Informationen für eine Zusammenfassung der Websiteleistung. Die Lighthouse-Prüfungen können hilfreich sein, sollten in diesem Fall jedoch mit besonderer Vorsicht verwendet werden.
Da Daten auf Seitenebene in CrUX verfügbar sind, sich aber von den Daten aus dem Lighthouse-Lab unterscheiden, sind die Empfehlungen von Lighthouse unter Umständen von geringem Wert. Dies kann insbesondere bei CLS-Problemen nach dem Laden und bei der Interaktivität von Core Web Vitals (FID und INP) der Fall sein, wenn Lab-basierte Audits weniger hilfreich sind.
Search Console
In der Search Console werden die Suchzugriffe und die Leistung Ihrer Website gemessen, einschließlich der Core Web Vitals. Sie ist nur für Websiteinhaber verfügbar, die die Inhaberschaft der Website bestätigt haben.
Eine nützliche Funktion der Search Console besteht darin, dass ähnliche Seiten, z. B. Seiten, die dieselbe Vorlage verwenden, in einer einzelnen Gruppenbewertung zusammengefasst werden. Die Search Console enthält außerdem 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, die keine Entwickler sind, um die Leistung von Such- und Seitenfunktionen auf eine Weise zu bewerten, die andere Google-Tools nicht bieten. Die Präsentation von CrUX-Daten und die Gruppierung von Seiten nach Ähnlichkeit bieten neue Erkenntnisse darüber, wie sich Leistungsverbesserungen auf ganze Seitenkategorien auswirken.
Wann die Search Console nicht verwendet werden soll
Die Search Console eignet sich möglicherweise nicht für Projekte, bei denen verschiedene Drittanbietertools verwendet werden, die Seiten nach Ähnlichkeit gruppieren, oder wenn eine Website nicht im CrUX-Dataset enthalten ist.
Die Gruppierung von Seiten kann auch etwas verwirrend sein, wenn die Beispielseiten in einer Gruppe andere Merkmale als der Rest der Gruppe haben, z. B. wenn die Gruppe insgesamt bestimmte Core Web Vitals nicht erreicht, die Beispielseiten aber alle die gleichen Core Web Vitals zu bestehen scheinen. Dies kann passieren, wenn eine Gruppe Longtail-Seiten oder selten besuchte Seiten enthält, die langsamer geladen werden, da sie weniger wahrscheinlich im Cache gespeichert werden. Wenn ausreichend viele Seiten im Longtail-Format vorhanden sind, können sie die Erfolgsquote der Gruppe insgesamt beeinflussen.
Leuchtturm
Lighthouse ist ein Lab-Tool, das spezifische Möglichkeiten zur Verbesserung der Seitenleistung bietet. Mit Lighthouse-Nutzerflüssen können Entwickler außerdem Skripte für Interaktionsabläufe erstellen, um Leistungstests über den Seitenaufbau hinaus auszuführen.
Lighthouse-CI ist ein verwandtes Tool, das Lighthouse während der Projekterstellung und -bereitstellung ausführt, um Sie bei Leistungstests zu unterstützen. Sie stellt zusammen mit Pull-Anfragen einen Lighthouse-Bericht bereit und verfolgt Leistungsmesswerte im Zeitverlauf.
Verwendung von Lighthouse
Lighthouse eignet sich hervorragend zur Leistungsverbesserung während der Entwicklung – sowohl in lokalen als auch in Staging-Umgebungen. Lighthouse CI ist in der Build- und Deployment-Phase in Staging- und Produktionsumgebungen nützlich. Hier sind Leistungsregressionstests erforderlich, um die Nutzerfreundlichkeit aufrechtzuerhalten.
Wann sollte Lighthouse nicht verwendet werden?
Lighthouse (oder Lighthouse CI) ist kein Ersatz für Felddaten. Lighthouse ist in erster Linie ein Diagnosetool, das bei einem vordefinierten Seitenaufbau potenzielle Probleme und Best Practices auflistet. Die angezeigten Empfehlungen entsprechen möglicherweise nicht immer der Leistung der Nutzer.
Mit Lighthouse lassen sich Produktionswebsites mithilfe von Tools wie PageSpeed Insights diagnostizieren. Im Idealfall sollte Lighthouse in Entwicklungs- und Continuous-Integration-Umgebungen eingesetzt werden, um Leistungsprobleme schon vor der Veröffentlichung zu beheben.
Web Vitals-Erweiterung
Die Chrome-Erweiterung für Web Vitals ist ein Diagnosetool, das Core Web Vitals-Messwerte beim Surfen im Web anzeigt. Der Bericht enthält auch CrUX-Daten für die aktuelle Seite, sofern sie im CrUX-Dataset enthalten ist, sowie Informationen zur Fehlerbehebung, mit denen Sie Leistungsprobleme der Core Web Vitals erkennen können.
Wann sollte die Web Vitals-Erweiterung verwendet werden?
Die Web Vitals-Erweiterung kann von jedem beliebigen Nutzer verwendet werden, um den Core Web Vitals-Wert einer Seite an allen Punkten des Lebenszyklus einer Seite zu bewerten. Es ist nützlich als Live- während Sie mit der Seite interagieren, um Leistungsprobleme zu erkennen – insbesondere für Probleme nach dem Laden, die bei den CLS- und INP-Messwerten auftreten können.
Wann die Web Vitals-Erweiterung nicht verwendet werden soll
Die Web Vitals-Erweiterung ist keine ganzheitliche Bewertung der Seitenleistung. Außerdem hängen die Messwerte, die erfasst werden, stark von der Umgebung ab, in der sie ausgeführt werden, und Entwickler haben oft Geräte mit höherer Leistung oder Zugriff auf schnellere Netzwerke.
Der Bereich „Leistung“ in den Chrome-Entwicklertools
Die Chrome-Entwicklertools sind eine Sammlung von Entwicklertools im Browser, darunter das Steuerfeld „Leistung“. Das Steuerfeld „Leistung“ ist ein Lab-Tool, mit dem die gesamte Seitenaktivität beim Seitenaufbau oder während eines aufgezeichneten Zeitraums analysiert wird. Sie bietet detaillierte Einblicke in alle von ihr beobachteten Dimensionen wie Netzwerk-, Rendering-, Painting- und Scripting-Aktivitäten sowie die Core Web Vitals einer Seite.
Wann sollte das Steuerfeld „Leistung“ verwendet werden?
Das Steuerfeld „Leistung“ sollte von Entwicklern während der Entwicklung genutzt werden, um einen detaillierten Einblick in die Seitenleistung zu erhalten. Dies ist besonders nützlich, um Reaktionsprobleme zu beheben, die sich auf FID oder INP auswirken. Sobald eine schlecht reagierende Interaktion erkannt und wiederholbar ist, kann das Steuerfeld „Leistung“ eine Fülle von Daten zum Browserverhalten enthalten, um das Problem besser zu verstehen – von der Blockierung des Hauptthreads über JavaScript-Aufrufstacks bis hin zum Rendering.
Wann soll das Steuerfeld „Leistung“ nicht verwendet werden?
Das Steuerfeld „Leistung“ ist ein Entwicklertool, das nur Lab-Daten zur Verfügung stellt. Sie ist kein Ersatz für Felddaten. Sie enthält viele Debugging-Informationen, kann aber für unerfahrene Entwickler oder Personen, die keine Entwicklerrollen haben, schwer verständlich sein.
Workflow in drei Schritten, damit die Core Web Vitals Ihrer Website gesund bleiben
Wenn Sie an der Verbesserung der User Experience arbeiten, stellen Sie sich den Prozess als einen fortlaufenden Zyklus vor. So könnten Sie Core Web Vitals und andere Leistungsmesswerte verbessern:
- Bewerten Sie den Zustand der Website und identifizieren Sie Schwachstellen.
- Fehler beheben und optimieren
- Überwachen Sie mit Continuous-Integration-Tools, um Regressionen zu erkennen und zu verhindern.
Schritt 1: Zustand der Website bewerten und Verbesserungsmöglichkeiten identifizieren
Am besten beginnen Sie mit Felddaten, um den Zustand der Website zu bewerten.
- Mit PageSpeed Insights können Sie sich allgemeine Messwerte zur Nutzererfahrung mit Core Web Vitals zum Ursprung und bestimmte Informationen zu einzelnen URLs ansehen.
- Mit der Search Console können Sie verbesserungswürdige Seiten ermitteln, bei denen die Funktion zur Seitengruppierung für Ihre Website gut funktioniert.
- Wenn Sie RUM-Daten haben, ist dies oft die beste Option, um bestimmte Seiten oder Traffic-Segmente mit Problemen identifizieren zu können.
Unabhängig davon, ob Sie selbst erhobene Felddaten oder CrUX-Daten analysieren, ist dieser erste Schritt von entscheidender Bedeutung. Wenn Sie keine Felddaten erfassen, können CrUX-Daten als Orientierungshilfe ausreichen – vorausgesetzt, Ihre Website ist im Dataset enthalten.
Mit PageSpeed Insights die Websiteleistung analysieren
In PageSpeed Insights werden die Daten zur Nutzererfahrung in Chrome für die letzten 28 Tage im 75. Perzentil angezeigt. Wenn also 75% der Nutzerfreundlichkeit den Grenzwert für einen bestimmten Messwert erreichen, wird die Nutzerfreundlichkeit als „gut“ eingestuft.
Wenn Sie die Leistung einer bestimmten Seite analysieren möchten, verwenden Sie diese. Um einen Gesamtüberblick über eine Website zu erhalten, wenn Sie mit der Optimierung beginnen, sollten Sie mit der Startseite beginnen, da diese in der Regel eine der beliebtesten Seiten auf vielen Websites ist.
Konzentrieren Sie sich zu Beginn auf den Abschnitt das, was Ihre tatsächlichen Nutzer erleben, in PSI. Es werden bis zu vier Ansichten der Daten für die eingegebene URL und den gesamten Ursprung angezeigt: Mobilgeräte und Computer. Vergleichen Sie diese und sehen Sie, wie sie sich unterscheiden. Mobilgeräte sind in der Regel weniger leistungsfähig als Desktop-Geräte, da sie stärker ressourcenbeschränkte Geräte sind, die unter potenziell weniger stabilen Netzwerkbedingungen arbeiten. Wenn sich die URL- und Ursprungsdaten erheblich unterscheiden, versuchen Sie zu verstehen, warum: Startseiten sind oft die ersten besuchten Seiten (also eine Landingpage) und können daher langsamer sein, als die Nutzer die Hauptlast eines nicht privilegierten Browser-Cache übernehmen. Nachfolgende Seiten werden wahrscheinlich schneller geladen, da freigegebene Assets im Cache gespeichert werden, wodurch die zusammengefassten Daten auf Ursprungsebene verloren gehen.
PSI zeigt außerdem alle drei Core Web Vitals (LCP, CLS und FID) und den ausstehenden INP-Messwert sowie die diagnostischen TTFB- und FCP-Messwerte an. Schlägt einer der Core Web Vitals fehl und um wie viel? Dies zeigt Ihnen, worauf Sie sich konzentrieren sollten.
Machen Sie sich mit den Beziehungen zwischen diesen Zahlen vertraut, insbesondere beim LCP. Wenn LCP wie in diesem Beispiel langsam ist, schauen Sie sich TTFB und FCP an, die beide Meilensteine für diesen Messwert sind. In diesem Beispiel haben wir eine 1,8-sekündige TTFB, was es sehr schwierig macht, den empfohlenen Grenzwert von 2,5 Sekunden für einen guten LCP zu erreichen. Dies deutet auf ein langsames Backend (Serverprobleme oder fehlendes CDN), langsamere Netzwerke oder Weiterleitungen hin, die die ersten HTML-Byte verzögern. Weitere Informationen finden Sie im Optimize TTFB-Leitfaden. FCP nimmt zusätzlich eine weitere Sekunde in Anspruch, was ebenfalls ein Hinweis auf langsamere Netzwerke sein kann. Der LCP ist nicht lange nach FCP. In diesem Beispiel ist die LCP-Ressource gut optimiert, sobald die Seite selbst geladen wird.
Sehen Sie sich für CLS die CrUX CLS- und Lighthouse-CLS-Werte an, um zu sehen, ob es sich um ein Lade-CLS-Problem handelt, das von Lighthouse erkannt und beraten wird, oder um ein CLS-Problem nach dem Laden, das Lighthouse nicht erkennen wird. Weitere Informationen finden Sie im Optimize-CLS-Leitfaden.
Sehen Sie sich die FID- und INP-Werte an, um die Reaktionsfähigkeit zu ermitteln. Sehen Sie sich die TBT-Prüfungen in Lighthouse an, um festzustellen, ob während des anfänglichen Seitenaufbaus viel JavaScript verarbeitet wird, was sich wahrscheinlich auf INP auswirkt. Es kann schwierig sein, den INP-Wert zu verbessern. Weitere Informationen finden Sie im Optimize-INP-Leitfaden.
Seiten mit schlechter Leistung in der Search Console ermitteln
PSI ist nützlich, wenn Sie eine bestimmte URL testen möchten oder die Website als Ganzes. Mit der Search Console können Sie Ihre Aktivitäten jedoch auf bestimmte Seitentypen ausrichten. Dies ist besonders nützlich, wenn viele Seiten gemeinsame Themen oder Technologien haben und die Search Console diese erfolgreich identifizieren kann.
Im Core Web Vitals-Bericht in der Search Console erhalten Sie einen umfassenden Überblick über die Leistung Ihrer Website. Sie können aber auch einzelne Seiten aufschlüsseln, die Ihre Aufmerksamkeit erfordern. Mit der Search Console haben Sie außerdem folgende Möglichkeiten:
- Identifizieren Sie einzelne Seitengruppen, die verbessert werden müssen, sowie diejenigen, die eine gute User Experience bieten.
- Sie können detaillierte Daten zur Leistung nach URL abrufen, gruppiert nach Status, Messwert und Gruppen ähnlicher Webseiten (z. B. Produktdetailseiten auf einer E-Commerce-Website).
- Sie können detaillierte Berichte abrufen, in denen URLs in jede einzelne Qualitätskategorie der Nutzererfahrung für Mobilgeräte und Computer gruppiert werden.
Sobald Sie sich einige bestimmte Seiten ansehen müssen, können Sie PSI wie zuvor erläutert verwenden, um mehr über die Probleme auf diesen Seiten zu erfahren.
Schritt 2: Fehler beheben und optimieren
In Schritt 1 sollten Sie Seiten ermittelt haben, die Leistungsverbesserungen erfordern, und die Core Web Vitals-Messwerte ermitteln, die Sie verbessern möchten. Sie können die Google-Tools verwenden, um weitere Informationen zur Ursache des Problems zu erhalten.
- Führen Sie einen Lighthouse-Audit durch, um Hinweise auf Seitenebene zu erhalten.
- Mit der Web Vitals-Erweiterung können Sie Core Web Vitals in Echtzeit analysieren.
- Verwenden Sie den Leistungsbereich in den Chrome-Entwicklertools, um Leistungsprobleme zu beheben und Codeänderungen zu testen.
Ausführlichere Informationen finden Sie in diesen Leitfäden:
Mit Lighthouse neue Möglichkeiten entdecken
PageSpeed Insights führt Lighthouse für Sie aus. Für die lokale Entwicklung ist es aber auch möglich, Lighthouse über die Chrome-Entwicklertools auszuführen. So können Sie Fehlerkorrekturen lokal validieren.
Es ist wichtig, zu prüfen, ob die Lighthouse-Analyse die Probleme repliziert, die Sie beheben möchten (z. B. eine langsame LCP oder CLS-Probleme). Standardmäßig wird bei Lighthouse nur die Nutzerfreundlichkeit beim Seitenaufbau überprüft. Da es sich um ein Labortool handelt, werden auch FID und INP zugunsten von TBT ausgeschlossen.
Wenn die Lighthouse-Messwerte auf ein ähnliches Problem schließen lassen, können wir Ihnen anhand der Fülle von Informationen in den Prüfungen helfen, Probleme zu erkennen und Lösungen vorzuschlagen.
Sie können die Audits nach den Core Web Vitals filtern, um sich auf die Behebung von Problemen im Zusammenhang mit einem bestimmten Messwert zu konzentrieren:
Nutzen Sie für FID und INP die TBT-Prüfungen, um Probleme zu identifizieren, die diese Messwerte möglicherweise beeinträchtigen können. Beachten Sie jedoch, dass Lighthouse ohne Interaktion nur begrenzt diagnostiziert werden kann.
Mit der Web Vitals-Erweiterung in Echtzeit analysieren
Die Web Vitals-Erweiterung für Chrome zeigt Core Web Vitals in Echtzeit beim Seitenaufbau und beim Surfen auf einer Seite. Daher können FID und INP sowie Layoutverschiebungen nach dem Laden erfasst werden. Die Optionen zur Fehlerbehebung enthalten ausführlichere Informationen zu jedem Messwert:
Stellen Sie sich die Web Vitals-Erweiterung am besten als Tool zur stichprobenartigen Überprüfung von Leistungsproblemen und nicht als umfassendes Debugging-Tool vor – das ist eine Aufgabe für den Bereich „Leistung“ in den Chrome-Entwicklertools.
Mit dem Steuerfeld „Leistung“ aufschlüsseln
Im Bereich „Leistung“ in den Chrome-Entwicklertools wird ein Profil für das gesamte Seitenverhalten während eines aufgezeichneten Zeitraums erstellt.
Wichtige Timings, wie z. B. LCP, werden im Track "Timings" angezeigt. Klicken Sie darauf, um weitere Informationen zu erhalten.
Im Track Layout Shifts werden Layout Shifts hervorgehoben. Wenn Sie darauf klicken, erhalten Sie weitere Details zu den Elementen, die für die Fehlerbehebung von CLS verschoben wurden.
Lange Aufgaben, die zu FID- und INP-Problemen führen können, sind ebenfalls mit roten Dreiecken markiert.
Anhand dieser Funktionen sowie Informationen in anderen Bereichen des Steuerfelds „Leistung“ können Sie feststellen, ob sich Korrekturen auf die Core Web Vitals einer Seite auswirken.
Core Web Vitals im Einsatz beheben
Mit Lab-Tools lässt sich nicht immer die Ursache für alle Core Web Vitals-Probleme ermitteln, die Ihre Nutzer betreffen. Dies ist einer der Gründe, warum es so wichtig ist, eigene Felddaten zu erfassen, da dabei Faktoren berücksichtigt werden, die in Labordaten nicht möglich sind.
Weitere Informationen finden Sie im Abschnitt zur Fehlerbehebung bei der Leistung in diesem Feld.
Schritt 3: Auf Änderungen überwachen
Nachdem Sie alle Probleme behoben haben, sollten Sie dafür sorgen, dass sie die erforderliche Wirkung haben und dass neue Probleme Ihre Core Web Vitals nicht beeinträchtigen. Dies erfordert die Überwachung von Leistungsproblemen im Rahmen des Entwickler-Workflows, um zu verhindern, dass Leistungsprobleme an die Produktion weitergegeben werden, und die Felddaten regelmäßig zu überwachen, um sicherzustellen, dass dies der Fall ist.
Leistungsanforderungen in Umgebungen mit Continuous Integration (CI) im Blick behalten
Mit Lighthouse-CI können Sie automatisch Lighthouse-Prüfungen für Code-Commits ausführen, um Leistungseinbußen bei der Eingabe von Code zu vermeiden. Damit lassen sich die Zeiten der Leistung (die von Schwankungen unterliegen) oder nur die Leistungsprüfungen als Linting-Tool prüfen, um unzulässige Praktiken im Code zu verhindern.
Mit Felddaten Trends für den Status von Websites ansehen
Sie sollten zwar versuchen, alle Leistungsprobleme zu erkennen und zu beheben, bevor sie in die Produktion kommen, aber die Überwachung Ihrer Felddaten mit RUM ist wichtig, um solche zu finden, die nicht schlappmachen. Es gibt viele kommerzielle RUM-Produkte, die Ihnen dabei helfen können. Mit der JavaScript-Bibliothek von web-vitals lässt sich die Erhebung von Felddaten einer Website automatisieren und diese Daten optional für benutzerdefinierte Dashboards und Benachrichtigungssysteme verwenden.
Bei Websites ohne RUM-Lösung können Sie das CrUX-Dashboard für eine grundlegende Trendanalyse von Felddaten verwenden. Für Websites in CrUX wird Folgendes gemeldet:
- Websiteübersicht: Hier werden Core Web Vitals nach Gerätetypen für Computer und Mobilgeräte segmentiert.
- Bisheriger Trend nach Messwerttyp: Verteilung der Messwerte im Zeitverlauf für jeden verfügbaren monatlichen Release von Chrome-Berichtsdaten.
- Demografische Merkmale der Nutzer: Hier sehen Sie die Verteilung der Seitenaufrufe über einen gesamten Ursprung hinweg für Nutzer in jeder demografischen Gruppe, einschließlich Gerätetyp und effektiver Verbindung.
Das CrUX-Dashboard basiert auf dem CrUX-BigQuery-Dataset, das einmal im Monat aktualisiert wird. Sie sollten Ihre Core Web Vitals regelmäßig überprüfen.
Fazit
Eine schnelle und angenehme Nutzererfahrung erfordert eine leistungsorientierte Denkweise und die Einführung eines Workflows, um den Fortschritt sicherzustellen. Mit den richtigen Tools und Prozessen für Audits, Debugging und Monitoring können Sie die Nutzerfreundlichkeit verbessern und die für gute Core Web Vitals definierten Grenzwerte einhalten.