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 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. 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.
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, 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.
Laborbasierte Tools können zwar Hinweise auf potenzielle Leistungsprobleme geben und Ihnen bei der Fehlerbehebung und Iteration helfen, doch sie spiegeln nicht unbedingt wider, wie viele Ihrer Besucher tatsächlich Ihre Website erleben. Verwenden Sie Felddaten, um die tatsächliche Leistung zu messen, und Lab-basierte 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 kann oft erkennen, wann ein Problem vorliegt, aber oft sind nicht genügend Daten vorhanden, um den Grund zu ermitteln.
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 eine eigene 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 alle Web Vitals über die web-vitals-Bibliothek von Google 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 (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 monatlicher 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 BigQuery-Daten sind auch im CrUX-Dashboard verfügbar. Dort können Website-Betreiber Verlaufstrends für ihre Website einsehen.
Wann sollte man CrUX verwenden?
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, 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 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 vertreten. In diesem Fall müssen Sie eigene Daten erheben, um die Leistung Ihrer Website in der Praxis zu ermitteln, da CrUX nicht verfügbar 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 in den CrUX-Datensätzen widerspiegeln.
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 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 als nicht angemeldete Nutzer? Haben Nutzer mit einer langsamen LCP ein bestimmtes LCP-Element? Welche Interaktionen verursachen hohe FID- und INP-Werte?
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.
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. 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, z. B. von Mitbewerbern, ansehen.
PSI bietet auch Lighthouse-Daten mit nützlichen Empfehlungen zur Verbesserung Ihrer Core Web Vitals, sofern die Messwerte übereinstimmen. Stimmen sie nicht überein, sind die Lighthouse-Empfehlungen möglicherweise weniger relevant.
Da Lighthouse vom Server aus ausgeführt wird, kann eine konsistentere Baseline erstellt werden als beim Ausführen von Lighthouse über DevTools.
Wann PSI nicht verwendet werden soll
PSI ist nur für öffentliche URLs verfügbar und 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 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.
Und wenn 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 begrenztem Wert. 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.
Eine nützliche Funktion der Search Console ist, dass ähnliche Seiten, z. B. Seiten, die dieselbe Vorlage verwenden, in einer einzelnen 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 Personen, die keine Entwickler sind, um die Leistung von Such- und Seitenfunktionen 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 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. 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 Long Tail 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 außerdem Skripte für Interaktionsabläufe erstellen, um Leistungstests über den Seitenaufbau hinaus auszuführen.
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.
Der Bereich „Leistung“ in den Chrome-Entwicklertools
Die Chrome-Entwicklertools sind eine Sammlung von browserinternen Entwicklungstools, einschließlich des Bereichs „Leistung“. Das Steuerfeld „Leistung“ ist ein Lab-Tool, das aus zwei „Modi“ besteht:
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.
Wann sollte ich das Steuerfeld „Leistung“ verwenden?
Der Bereich „Leistung“ sollte von Entwicklern genutzt werden, um detaillierte Informationen zur Leistung einer bestimmten Seite zu erhalten.
In der Ansicht mit Live-Messwerten sind die aktuellen Leistungsmerkmale der Seite schnell zu erkennen und potenzielle Probleme bei der Interaktion mit der Seite zu erkennen.
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 soll das Steuerfeld „Leistung“ nicht verwendet werden?
Der Bereich „Leistung“ ist ein Entwicklertool, das hauptsächlich Lab-Daten enthält, aber auch einige Kontextinformationen aus CrUX. Sie ist kein Ersatz für Felddaten.
Die Trace-Ansicht enthält viele Informationen zur Fehlerbehebung. Daher kann sie für Einsteiger oder Nutzer, die keine Entwickler sind, 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.
Workflow in drei Schritten, damit die Core Web Vitals Ihrer Website gesund bleiben
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 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.
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 aber, 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. 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. Sie sehen bis zu vier Datenansichten: „Mobilgerät“ und „Computer“ für die eingegebene URL und die gesamte Quelle. Vergleiche diese und finde heraus, 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 reduziert werden.
PSI zeigt außerdem die drei Core Web Vitals (LCP, CLS und INP) sowie die Diagnosemesswerte TTFB und FCP an. 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 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 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. 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 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-Audits 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 testen möchten oder die Website als Ganzes. Mit der Search Console können Sie Ihre Aktivitäten 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).
- 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 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. Sie können die Google-Tools verwenden, um weitere Informationen zur Ursache des Problems zu erhalten.
- Lighthouse-Analyse ausführen, um Empfehlungen auf Seitenebene zu erhalten
- Im Steuerfeld „Leistung“ können Sie die Livemesswerte für Core Web Vitals analysieren.
- Im Leistungssteuerfeld können Sie Leistungsprobleme beheben und Codeänderungen 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. Für die lokale Entwicklung ist es aber auch möglich, Lighthouse über die Chrome DevTools auszuführen. Das ist nützlich, um Korrekturen lokal zu 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 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 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 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:
Nutzen Sie für INP-Prüfungen 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.
In Echtzeit mit den Livemesswerten der Chrome-Entwicklertools analysieren
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. Aus diesem Grund können INP- und Layoutverschiebungen nach dem Laden erfasst werden. Sie können auch detailliertere Informationen zu den einzelnen Messwerten aufrufen:
Diese Ansicht enthält viele hilfreiche Informationen zur Identifizierung von Leistungsproblemen. Wenn Sie noch mehr Informationen benötigen, können Sie mithilfe eines Tracings 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.
Wichtige Zeitangaben wie LCP werden im Zeitachsen-Track angezeigt. Klicken Sie darauf, um weitere Informationen zu erhalten.
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.
Lange Aufgaben, die zu INP-Problemen führen können, werden 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 lässt sich nicht immer die Ursache aller Core Web Vitals-Probleme ermitteln, die sich auf Ihre Nutzer auswirken. Dies ist einer der Gründe, warum es so wichtig ist, eigene Felddaten zu erfassen, da dabei Faktoren berücksichtigt werden, die mit Labordaten nicht möglich sind.
Weitere Informationen finden Sie unter Leistungsprobleme vor Ort beheben.
Schritt 3: Auf Änderungen überwachen
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 Leistungseinbußen 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.
Trends zur Websitezuverlässigkeit mit Felddaten ansehen
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 das CrUX-Dashboard als grundlegende Trendanalyse von Felddaten verwenden. Für Websites in CrUX werden folgende Daten erfasst:
- Websiteübersicht, in der die Core Web Vitals nach Computer- und Mobilgerätetypen segmentiert werden.
- Bisheriger Trend nach Messwerttyp: Verteilung der Messwerte im Zeitverlauf für jeden verfügbaren monatlichen Release von Chrome-Berichtsdaten.
- Nutzerdemografie: Hier sehen Sie die Verteilung der Seitenaufrufe auf eine gesamte Quelle für Nutzer in den einzelnen demografischen Gruppen, einschließlich Geräte- und effektiver Verbindungstypen.
Das CrUX-Dashboard basiert auf dem CrUX-BigQuery-Dataset, das einmal im Monat aktualisiert wird. Das kann eine gute Erinnerung sein, Ihre Core Web Vitals regelmäßig zu prü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 zur Analyse, Fehlerbehebung und Überwachung können Sie eine hervorragende Nutzererfahrung schaffen und die für gute Core Web Vitals definierten Grenzwerte einhalten.