Kombinieren Sie Google-Tools, um Ihre Website effektiv zu prüfen, zu verbessern und zu überwachen.
Veröffentlicht: 28. Mai 2020
Die Core Web Vitals sind eine Reihe von Messwerten, mit denen die Nutzerfreundlichkeit anhand von Kriterien wie Ladezeit, Reaktionsfähigkeit 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 davon ab, ob Sie eigene Felddaten erheben. Wie weit Sie gehen, hängt davon ab, welche der Google-Tools Sie zur Diagnose und Behebung von Problemen mit der Nutzerfreundlichkeit hilfreich finden.
Core Web Vitals lassen sich am besten im Feld messen
Core Web Vitals sind speziell dafür konzipiert, die Nutzerfreundlichkeit Ihrer Website zu messen. Sie sind nutzerorientierte Messwerte. Lab-basierte Tools wie Lighthouse sind Diagnosetools, mit denen potenzielle Leistungsprobleme und Best Practices hervorgehoben werden. Lab-basierte Tools werden unter bestimmten, vordefinierten Bedingungen ausgeführt und spiegeln möglicherweise nicht die tatsächlichen Core Web Vitals-Messwerte wider, die Ihre Nutzer sehen.
Lighthouse ist beispielsweise ein labbasiertes Tool, mit dem Tests mit simulierter Drosselung in einer simulierten Desktop- oder mobilen Umgebung ausgeführt werden. Solche Simulationen von langsameren Netzwerk- und Gerätebedingungen sind zwar hilfreich, um Leistungsprobleme zu diagnostizieren, sie sind aber nur ein kleiner Ausschnitt der großen Vielfalt an Netzwerkbedingungen und Gerätefunktionen und spiegeln möglicherweise nicht die tatsächlichen Erfahrungen der Nutzer auf Ihren Websites wider.
Lab-basierte Tools wie Lighthouse führen in der Regel auch ein „kaltes Laden“ einer Webseite als völlig neuer Besucher durch. Das ist oft die langsamste Ladezeit. In der Praxis haben Besucher jedoch möglicherweise einige Assets im Cache, wenn sie die Website schon einmal besucht haben oder sich auf der Website umsehen. Für neue Besucher und Tools kann die Website auch anders aussehen, da ihnen Cookie-Banner oder andere Inhalte angezeigt werden.
Kurz gesagt: Lab-basierte Tools können zwar einen Hinweis auf potenzielle Leistungsprobleme geben und Ihnen bei der Fehlerbehebung und Iteration helfen, sie spiegeln jedoch möglicherweise nicht wider, wie viele Ihrer Besucher Ihre Website tatsächlich sehen. Verwenden Sie Felddaten, um die tatsächliche Leistung zu messen, und labbasierte Tools wie Lighthouse, um zu ermitteln, wie Sie sie verbessern können. Weitere Informationen finden Sie im Abschnitt Wann sollte ich Lighthouse verwenden?.
Google misst Core Web Vitals über den Bericht zur Nutzererfahrung in Chrome (Chrome User Experience, CrUX). Dies ist ein öffentlicher Datensatz, der von echten Chrome-Nutzern erhoben wurde. Es ist das Rückgrat vieler Google-Tools und Tools von Drittanbietern, die die Core Web Vitals einer Website erfassen.
CrUX hat jedoch einige Einschränkungen. Sie können damit oft feststellen, wann ein Problem auftritt, aber oft nicht, warum.
Falls möglich, eigene Daten erheben
Der beste Datensatz zur Verbesserung der Websiteleistung im Feld ist der, den Sie erstellen. Dazu müssen Sie zuerst Felddaten von den Besuchern Ihrer Website erheben. Wie Sie vorgehen, hängt von der Größe Ihrer Organisation und davon ab, ob Sie eine Lösung eines Drittanbieters kaufen oder selbst erstellen möchten.
Bei kostenpflichtigen Lösungen werden fast immer Core Web Vitals (und andere Leistungsmesswerte) erfasst. Außerdem bieten sie in der Regel eine Vielzahl von Tools, mit denen Sie die resultierenden Daten analysieren können. In großen Organisationen mit erheblichen Ressourcen ist dies möglicherweise die bevorzugte Methode.
Möglicherweise arbeiten Sie jedoch nicht für ein großes Unternehmen oder eines, das sich eine Lösung von Drittanbietern leisten kann. 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 die web-vitals-Bibliothek verwenden, um in der Praxis erhobene Web Vitals an Google Analytics zu senden, und die BigQuery-Exporte von GA4 für Berichte zu verwenden.
Google-Tools
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 festlegen, können Sie anhand einer allgemeinen Übersicht über die einzelnen Tools besser nachvollziehen, 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 erfasst wurden. Er enthält Core Web Vitals-Messwerte und andere Messwerte für Websites mit ausreichenden Zugriffen.
CrUX ist als monatliches BigQuery-Dataset auf Quellebene oder als tägliche API auf URL- oder Quellebene 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 verfügbar, sowohl für programmatischen Zugriff als auch für visuelle Tools zur Verwendung durch Nutzer.
Wann sollte CrUX verwendet werden?
Auch wenn Sie eigene Daten erheben, ist CrUX nützlich. Auch wenn CrUX nur eine Teilmenge der Chrome-Nutzer darstellt, ist es hilfreich, die Felddaten Ihrer Website zu vergleichen, um zu sehen, wie sie mit den CrUX-Daten übereinstimmen. Beide haben Vor- und Nachteile, was zu Unterschieden führen kann. 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 vertreten.
Sie können CrUX direkt oder mit einem anderen Tool verwenden (einschließlich der unten genannten). Wenn Sie das CrUX-Dataset direkt verwenden, entweder über BigQuery oder die API, können Sie Daten aufrufen, 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 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 die Web Vitals-Messwerte unterstützt werden.
Websites, die nicht genügend Zugriffe erhalten, sind im CrUX-Datensatz nicht enthalten. In diesem Fall müssen Sie eigene Felddaten erheben, um die Leistung Ihrer Website im Feld zu ermitteln, da CrUX keine Option ist. Alternativ können Sie sich auf Lab-Daten verlassen, die jedoch wie bereits erwähnt möglicherweise nicht repräsentativ sind.
Da die von CrUX bereitgestellten Daten einen gleitenden Durchschnitt der letzten 28 Tage darstellen, ist das Tool nicht ideal für die Entwicklung, da es einige Zeit dauert, bis sich Verbesserungen im CrUX-Datensatz widerspiegeln.
Als öffentliches Dataset ist CrUX außerdem in Bezug auf die Menge der verfügbaren Informationen und die Abfrage dieser Daten eingeschränkt. Wenn Sie eigene RUM-Daten erfassen, können Sie mehr Details erfassen (z. B. das LCP-Element) und die Daten weiter segmentieren, um Probleme zu identifizieren. Haben angemeldete Nutzer bessere oder schlechtere Core Web Vitals-Werte als abgemeldete Nutzer? Haben Nutzer mit einer langsamen LCP ein bestimmtes LCP-Element? Welche Interaktionen führen zu hohen FID- und INP-Werten?
PageSpeed Insights (PSI)
PSI ist ein Tool, das für eine bestimmte Seite Felddaten aus CrUX und Lab-Daten aus Lighthouse erfasst. Weitere Informationen finden Sie in den jeweiligen Abschnitten.
Wann sollte PSI verwendet werden?
PSI eignet sich hervorragend zur Bewertung der CrUX-Leistung auf Seiten- oder Ursprungsebene, sowohl für Nutzer von Mobilgeräten als auch für Nutzer von Computern. Er eignet sich gut für einen ersten Überblick über die Core Web Vitals für eine Seite oder Website. Außerdem können Sie sich Core Web Vitals-Daten für andere Websites wie die von Mitbewerbern ansehen.
PSI bietet auch Lighthouse-Daten, die nützliche Empfehlungen zur Verbesserung Ihrer Core Web Vitals liefern, sofern die Messwerte übereinstimmen. Wenn das nicht der Fall ist, sind die Lighthouse-Empfehlungen möglicherweise weniger relevant.
Da Lighthouse vom Server aus ausgeführt wird, kann eine konsistentere Baseline erstellt werden als bei der Ausführung von Lighthouse über 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 Voraussetzungen erfüllen, einschließlich Grenzwerten 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 in diesen Fällen nur die Lighthouse-Lab-Daten angezeigt werden können.
Wenn Sie nur CrUX-Daten auf Ursprungsebene und nicht für die getestete URL haben, ist es auch nicht sinnvoll, die Felddaten auf Ursprungsebene mit den Lab-Diagnosen auf Seitenebene zu korrelieren. Die Felddaten auf Quellebene sind weiterhin sehr nützlich, um eine Zusammenfassung der Leistung der Website zu erhalten. Die Lighthouse-Analysen können hilfreich sein, aber in diesem Fall ist besondere Vorsicht geboten.
Wenn in CrUX Daten auf Seitenebene verfügbar sind, die sich jedoch von den Lighthouse-Lab-Daten unterscheiden, sind die Empfehlungen von Lighthouse möglicherweise nur begrenzt hilfreich. Dies kann insbesondere bei CLS-Problemen nach dem Laden und bei den Core Web Vitals für Interaktivität (FID und INP) auftreten, bei denen labbasierte Prüfungen weniger nützlich 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.
Ein nützliches Feature der Search Console ist, dass ähnliche Seiten (z. B. Seiten mit derselben Vorlage) 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 ich die Search Console verwenden?
Die Search Console eignet sich sowohl für Entwickler als auch für andere Nutzer, um die Such- und Seitenleistung auf eine Weise zu bewerten, die andere Google-Tools nicht bieten. 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, bei denen verschiedene Drittanbietertools verwendet werden, die Seiten nach Ähnlichkeit gruppieren, oder wenn eine Website nicht im CrUX-Datensatz vertreten ist.
Die Seitengruppierung kann auch etwas verwirrend sein, wenn die Beispielseiten in einer Gruppe unterschiedliche Eigenschaften als der Rest der Gruppe haben. Das ist beispielsweise der Fall, wenn die Gruppe insgesamt bestimmte Core Web Vitals nicht erfüllt, die Beispielseiten aber alle dieselben Core Web Vitals zu erfüllen scheinen. Das kann passieren, wenn eine Gruppe viele Longtail-Seiten oder selten besuchte Seiten enthält, die möglicherweise langsamer geladen werden, da sie mit geringerer Wahrscheinlichkeit im Cache gespeichert werden. Wenn es genügend dieser Seiten im Longtail gibt, können sie sich auf die Gesamtdurchfallquote der Gruppe auswirken.
Leuchtturm
Lighthouse ist ein Lab-Tool, das spezielle Möglichkeiten zur Verbesserung der Seitenleistung bietet. Mit Lighthouse-Nutzerflüssen können Entwickler Interaktionsabläufe für Leistungstests auch über den Seitenaufbau hinaus skripten.
Lighthouse-CI ist ein ähnliches Tool, mit dem Lighthouse während des Projektaufbaus und der Bereitstellung ausgeführt wird, um bei Leistungsregressionstests zu helfen. Er enthält einen Lighthouse-Bericht zusammen mit Pull-Requests und erfasst Leistungsmesswerte im Zeitverlauf.
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 der Build- und Bereitstellungsphase ebenso nützlich wie in Staging- und Produktionsumgebungen, in denen 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 aus einem vordefinierten Seitenaufbau auflistet. Die Empfehlungen stimmen möglicherweise nicht immer mit der Leistung überein, die Ihre Nutzer erzielen.
Lighthouse kann zwar mithilfe von Tools wie PageSpeed Insights zur Diagnose von Produktionswebsites verwendet werden, eignet sich aber ideal für Entwicklungs- und kontinuierliche Integrationsumgebungen, um Leistungsprobleme zu beheben, bevor sie in die Produktion gelangen.
Die von Lighthouse bereitgestellten Prüfungen sind auch über „Statistiken“ im Bereich „Leistung“ in Chrome DevTools verfügbar. Dort finden Sie eine detailliertere Analyse der Leistung einer Seite.
Der Bereich „Leistung“ in den Chrome-Entwicklertools
Die Chrome-Entwicklertools sind eine Sammlung von In-Browser-Entwicklungstools, einschließlich des Bereichs „Leistung“. Das Steuerfeld „Leistung“ ist ein Lab-Tool mit zwei „Modi“:
Wenn Sie den Bereich „Leistung“ zum ersten Mal öffnen, sehen Sie auf dem Bildschirm „Live-Messwerte“ aktuelle Core Web Vitals-Messwerte. Dort können Sie auch Felddaten aus CrUX importieren. Sie ist nützlich als „Live“-Ansicht der Leistung, während Sie mit der Seite interagieren, um Leistungsprobleme zu erkennen. Dies gilt insbesondere für Probleme nach dem Laden, die Sie mit den Messwerten CLS und INP sehen können.
Zweitens können Entwickler im Bereich „Leistung“ ein Profil (oder einen Trace) aller Seitenaktivitäten während des Seitenaufbaus oder eines bestimmten Zeitraums erfassen. Diese Ansicht bietet detaillierte Informationen zu allen erfassten Daten in Dimensionen wie Netzwerk-, Rendering-, Mal- und Scripting-Aktivitäten sowie zu den Core Web Vitals einer Seite. Außerdem enthält es Statistiken, die denen von Lighthouse ähneln.
Wann sollte ich das Steuerfeld „Leistung“ verwenden?
Im Bereich „Leistung“ können Entwickler detaillierte Informationen zur Leistung einer bestimmten Seite abrufen.
In der Ansicht mit Livemesswerten können Sie schnell die aktuellen Leistungsmerkmale der Seite nachvollziehen und potenzielle Probleme erkennen, wenn Nutzer mit der Seite interagieren.
Die Trace-Ansicht ist besonders hilfreich, um Probleme mit der Reaktionsfähigkeit zu beheben, die sich auf die INP auswirken. Sobald eine Interaktion mit schlechter Leistung identifiziert und wiederholt werden kann, bietet der Bereich „Leistung“ eine Fülle von Daten dazu, was im Browser passiert, um das Problem zu verstehen. Dazu gehören Blockierungen des Hauptthreads, JavaScript-Aufrufstacks und Rendering-Arbeiten.
Wann sollte der Bereich „Leistung“ nicht verwendet werden?
Der Bereich „Leistung“ ist ein Entwicklertool, das hauptsächlich Lab-Daten enthält, aber auch einige Feldkontexte aus CrUX. Sie sind kein Ersatz für Felddaten.
Die Trace-Ansicht enthält viele Informationen zur Fehlerbehebung. Daher kann sie für Einsteiger oder Nutzer ohne Entwicklerrolle schwer verständlich sein. Die Live-Messwertansicht, mit der der Bereich geöffnet wird, bietet jedoch eine einfachere Benutzeroberfläche für Nutzer, die nicht alle Details benötigen.
Drei-Schritte-Workflow, um die Core Web Vitals Ihrer Website im grünen Bereich zu halten
Wenn Sie die Nutzerfreundlichkeit verbessern möchten, sollten Sie den Prozess am besten als kontinuierlichen Zyklus betrachten. So können Sie die Core Web Vitals und andere Leistungsmesswerte verbessern:
- Bewerten Sie den Zustand der Website und identifizieren Sie Probleme.
- Fehler beheben und optimieren.
- Verwenden Sie Continuous-Integration-Tools, um Regressionen zu erkennen und zu verhindern.
Schritt 1: Website-Zustand prüfen und Verbesserungsmöglichkeiten ermitteln
Am besten beginnen Sie mit Felddaten, um den Zustand der Website zu bewerten.
- In PageSpeed Insights finden Sie allgemeine Core Web Vitals-Messwerte für den Ursprung und spezifische Informationen zu einer einzelnen URL.
- Mit der Search Console können Sie Seiten identifizieren, die verbessert werden müssen. Die Funktion zur Seitengruppierung eignet sich gut für Ihre Website.
- Wenn Sie RUM-Daten haben, ist dies oft die beste Option, um bestimmte Seiten oder Besuchersegmente mit Problemen zu identifizieren.
Ganz gleich, ob Sie selbst erhobene Felddaten oder CrUX-Daten analysieren, dieser erste Schritt ist entscheidend. Wenn Sie keine Felddaten erheben, reichen CrUX-Daten möglicherweise aus, um Ihnen eine Orientierung zu geben. Voraussetzung ist, dass Ihre Website im Datensatz vertreten ist.
Websiteleistung mit PageSpeed Insights analysieren
In PageSpeed Insights werden die CrUX-Daten der letzten 28 Tage für die Nutzererfahrung im 75. Perzentil angezeigt. Wenn also 75% der Nutzererfahrungen den für einen bestimmten Messwert festgelegten Grenzwert erreichen, wird die Nutzerfreundlichkeit als „gut“ eingestuft.
Wenn Sie die Leistung einer bestimmten Seite prüfen möchten, verwenden Sie diese. Wenn Sie mit der Optimierung beginnen, sollten Sie sich einen Überblick über die Website verschaffen. Dazu eignet sich die Startseite, da sie in der Regel eine der meistbesuchten Seiten ist.
Konzentrieren Sie sich zuerst auf den Abschnitt So sieht die Leistung auf der Nutzerseite aus. Sie sehen bis zu vier Datenansichten: „Mobilgerät“ und „Computer“ für die eingegebene URL und die gesamte Quelle. Vergleichen Sie diese und sehen Sie, wie sie sich unterscheiden. Die Leistung von Mobilgeräten ist in der Regel geringer als die von Computern, da sie ressourcenknapper sind und unter möglicherweise weniger stabilen Netzwerkbedingungen arbeiten. Wenn sich die URL- und Ursprungsdaten deutlich unterscheiden, sollten Sie herausfinden, warum das so ist: Startseiten sind oft die ersten besuchten Seiten (d. h. Landingpages) und können daher langsamer sein als die Ursprungsseiten, da Nutzer den gesamten Browser-Cache beanspruchen. Nachfolgende Seiten werden wahrscheinlich schneller geladen, da alle freigegebenen Assets im Cache gespeichert werden, wodurch die aggregierten Daten auf Quellebene sinken.
In PSI werden außerdem die drei Core Web Vitals (LCP, CLS und INP) sowie die Diagnosemesswerte TTFB und FCP angezeigt. Werden einige der Core Web Vitals nicht erreicht und um wie viel? So können Sie besser entscheiden, wo Sie Ihre Bemühungen konzentrieren sollten.
Die Beziehungen zwischen diesen Zahlen verstehen, insbesondere für LCP Wenn der LCP-Wert, wie in diesem Beispiel, langsam ist, sehen Sie sich TTFB und FCP an. Dies sind beides Meilensteine für diesen Messwert. In diesem Beispiel beträgt die TTFB 1,8 Sekunden. Es wird also sehr schwierig sein, den empfohlenen Grenzwert von 2,5 Sekunden für eine gute LCP einzuhalten. Dies deutet entweder auf ein langsames Back-End (Serverprobleme oder fehlendes CDN), langsamere Netzwerke oder Weiterleitungen hin, die die ersten HTML-Bytes verzögern. Weitere Informationen finden Sie im Leitfaden zum Optimieren des TTFB. Für den FCP ist zusätzlich eine weitere Sekunde erforderlich, was ebenfalls auf langsamere Netzwerke hinweisen kann. In diesem Beispiel liegt der LCP nicht lange nach dem FCP, was darauf hindeutet, dass die LCP-Ressource gut optimiert ist, sobald die Seite selbst geladen ist. In CrUX werden jetzt auch weitere Diagnoseinformationen zu Ressourcentypen und ‑unterteilen angezeigt, die Ihnen bei der Diagnose von LCP-Problemen helfen.
Sehen Sie sich für CLS die CrUX-CLS- und die Lighthouse-CLS-Werte an, um festzustellen, ob es sich um ein CLS-Problem beim Laden handelt (das Lighthouse erkennt und berät) oder um ein CLS-Problem nach dem Laden, das Lighthouse nicht erkennt. Weitere Informationen finden Sie im Leitfaden zum Optimieren des CLS.
Informationen zur Reaktionsfähigkeit finden Sie in den INP-Werten. Sehen Sie sich die TBT-Analysen in Lighthouse an, um festzustellen, ob beim ersten Seitenaufbau viel JavaScript verarbeitet wird, was sich wahrscheinlich auf die INP auswirkt. Die Optimierung des INP-Werts kann schwierig sein. Weitere Informationen finden Sie im Leitfaden zur Optimierung des INP-Werts.
Seiten mit schlechter Leistung in der Search Console ermitteln
PSI ist nützlich, wenn Sie eine bestimmte URL oder die Website insgesamt 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:
- Ermitteln Sie einzelne Seitengruppen, die verbessert werden müssen, und solche, die eine gute Nutzerfreundlichkeit bieten.
- Detaillierte Daten zur Leistung nach URL, gruppiert nach Status, Messwert und Gruppen ähnlicher Webseiten (z. B. Produktdetailseiten auf einer E-Commerce-Website).
- Detaillierte Berichte, in denen URLs in die einzelnen Kategorien für die Nutzerfreundlichkeit auf Mobilgeräten und Computern unterteilt werden.
Sobald Sie sich bestimmte Seiten ansehen möchten, können Sie PSI wie oben beschrieben verwenden, um die Probleme auf diesen Seiten besser zu verstehen.
Schritt 2: Fehler beheben und optimieren
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 zur Ursache des Problems erhalten.
- Lighthouse-Analysen ansehen, um allgemeine Hinweise zur Seite zu erhalten
- Im Steuerfeld „Leistung“ können Sie die Livemesswerte für Core Web Vitals analysieren.
- Verwenden Sie die Ablaufverfolgung im Steuerfeld „Leistung“, um Leistungsprobleme zu beheben und Codeänderungen zu testen.
Ausführlichere Informationen finden Sie in den folgenden Leitfäden:
Mit Lighthouse Optimierungsmöglichkeiten erkennen
PageSpeed Insights führt Lighthouse für Sie aus. Sie können Lighthouse auch über die Chrome-Entwicklertools ausführen. Das ist nützlich, um Korrekturen lokal zu validieren. Der Bereich „Leistung“ (siehe nächster Abschnitt) ist jedoch ein umfassenderes Tool, um Leistungsprobleme lokal zu identifizieren und zu beheben.
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 die Nutzerfreundlichkeit nur beim Seitenaufbau bewertet. Da es sich um ein Lab-Tool handelt, werden auch INP zugunsten von TBT ausgeschlossen.
Wenn die Lighthouse-Messwerte auf ein ähnliches Problem hinweisen wie das, das Sie lösen möchten, können die zahlreichen Informationen in den Analysen helfen, Probleme zu identifizieren und Lösungen vorzuschlagen.
Sie können die Prüfungen auf die 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 die Nutzerfreundlichkeit die TBT-Analysen, um Probleme zu identifizieren, die sich potenziell auf diese Messwerte auswirken können. Beachten Sie jedoch, dass Lighthouse ohne Interaktionen nur eingeschränkte Diagnosemöglichkeiten bietet.
Echtzeitanalyse mit dem Chrome-Entwicklertools-Bildschirm für Livemesswerte
Auf dem Bildschirm mit den Livemesswerten der Chrome-Entwicklertools im Bereich „Leistung“ werden die Core Web Vitals während des Seitenaufbaus und beim Surfen auf einer Seite in Echtzeit angezeigt. So können INP sowie Layoutverschiebungen erfasst werden, die nach dem Laden auftreten. Sie können auch detailliertere Informationen zu den einzelnen Messwerten aufrufen:
Diese Ansicht enthält viele hilfreiche Informationen zur Identifizierung von Leistungsproblemen. Außerdem können Sie damit Feldinformationen aus CrUX abrufen. Wenn Sie noch mehr Informationen benötigen, können Sie mit einem Trace nachverfolgen.
Im Bereich „Leistung“ detaillierte Daten aufrufen
Im Bereich „Leistung“ in den Chrome-Entwicklertools können Sie ein Profil (oder einen Trace) des gesamten Seitenverhaltens während eines bestimmten Zeitraums aufzeichnen.
Leistungsstatistiken finden Sie im seitlichen Bereich Statistiken. Außerdem werden die Core Web Vitals-Messwerte zusammen mit den zugehörigen Feldwerten angezeigt, sofern verfügbar.
Im Bereich Layoutverschiebungen werden Layoutverschiebungen hervorgehoben. Wenn Sie darauf klicken, erhalten Sie weitere Informationen zu den Elementen, die sich verschoben haben, um das CLS zu debuggen.
Wichtige Zeitangaben wie LCP werden unter Timings unten im Trace angezeigt. Klicken Sie darauf, um weitere Informationen zu erhalten.
Lange Aufgaben, die zu INP-Problemen führen können, werden im Flammendiagramm ebenfalls mit roten Dreiecken hervorgehoben.
Anhand dieser Funktionen und der Informationen in anderen Bereichen des Steuerfelds „Leistung“ können Sie feststellen, ob sich Fehlerkorrekturen auf die Core Web Vitals einer Seite auswirken.
Core Web Vitals im Einsatz debuggen
Mit Lab-Tools können nicht immer alle Ursachen für Core Web Vitals-Probleme ermittelt werden, die sich auf Ihre Nutzer auswirken. Dies ist einer der Gründe, warum es so wichtig ist, eigene Felddaten zu erheben, da dabei Faktoren berücksichtigt werden, die bei Labordaten nicht berücksichtigt werden können.
Weitere Informationen finden Sie unter Leistungsprobleme vor Ort beheben.
Schritt 3: Änderungen beobachten
Nachdem Sie alle Probleme behoben haben, sollten Sie prüfen, ob sie die gewünschte Wirkung haben und ob neue Probleme Ihre Core Web Vitals nicht beeinträchtigen. Dazu müssen im Rahmen des Entwicklerworkflows Leistungsprobleme überwacht werden, um zu verhindern, dass sie in die Produktion übernommen werden. Außerdem müssen die Felddaten regelmäßig überwacht werden, um dies sicherzustellen.
Leistungsanfragen in Continuous Integration-Umgebungen (CI) überwachen
Mit Lighthouse-CI können Sie automatisch Lighthouse-Prüfungen für Codecommits ausführen, um Leistungsrückgänge zu vermeiden. So können Sie Leistungszeiträume prüfen, die variabel sind, oder nur Leistungsaudits, um mit einem Lint-Tool schlechte Praktiken im Code zu verhindern.
Website-Zustand mithilfe von Felddaten im Blick behalten
Sie sollten zwar alle Leistungsprobleme erkennen und beheben, bevor sie in die Produktion gelangen, aber das Überwachen Ihrer Felddaten mit RUM ist unerlässlich, um eventuelle Probleme zu finden. Es gibt viele kommerzielle RUM-Produkte, die Ihnen dabei helfen können. Mit der JavaScript-Bibliothek web-vitals lässt sich die Felddatenerhebung einer Website automatisieren und diese Daten optional für benutzerdefinierte Dashboards und Benachrichtigungssysteme verwenden.
Für Websites ohne RUM-Lösung können Sie die verschiedenen CrUX-Tools als grundlegende Trendanalyse von Felddaten verwenden.
Fazit
Für eine schnelle und angenehme Nutzererfahrung ist ein leistungsorientiertes Mindset und ein Workflow erforderlich, der Fortschritte sicherstellt. Mit den richtigen Tools und Prozessen zur Analyse, Fehlerbehebung und Überwachung können Sie eine hervorragende Nutzererfahrung schaffen und die für gute Core Web Vitals definierten Grenzwerte einhalten.