Kombinieren Sie Google-Tools, um Ihre Website effektiv zu prüfen, zu verbessern und zu überwachen.
Veröffentlicht: 28. Mai 2020
Core Web Vitals sind eine Reihe von Messwerten, mit denen die Nutzerfreundlichkeit anhand von Kriterien wie Ladeleistung, 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 vorgestellt. Wo dieser Workflow beginnt, hängt davon ab, ob Sie eigene Felddaten erheben. Wo sie endet, hängt davon ab, welche Tools von Google Sie für die Diagnose und Behebung von Problemen mit der Nutzerfreundlichkeit nützlich finden.
Core Web Vitals werden am besten im Feld gemessen
Die Core Web Vitals sind speziell darauf ausgelegt, die Nutzererfahrung auf Ihrer Website zu messen. Es handelt sich um nutzerorientierte Messwerte. Laborbasierte Tools wie Lighthouse sind Diagnosetools, mit denen potenzielle Leistungsprobleme und Best Practices aufgezeigt werden. Labortools 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 lab-basiertes Tool, das Tests mit simulierter Drosselung in einer simulierten Desktop- oder Mobilumgebung ausführt. Solche Simulationen von langsameren Netzwerk- und Gerätebedingungen sind zwar hilfreich, wenn Sie Leistungsprobleme diagnostizieren möchten, sie sind jedoch nur ein kleiner Teil der großen Vielfalt an Netzwerkbedingungen und Gerätefunktionen und spiegeln daher möglicherweise nicht wider, was Nutzer auf Ihren Websites erleben.
Laborbasierte Tools wie Lighthouse führen in der Regel auch ein „kaltes Laden“ einer Webseite als völlig neuer Besucher durch. Dies 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 sich auf der Website umsehen. Neue Besucher und Tools können die Website auch anders wahrnehmen, wenn ihnen Cookie-Banner oder andere Inhalte angezeigt werden.
Kurz gesagt: Labortools können zwar Hinweise auf potenzielle Leistungsprobleme geben und Ihnen bei der Fehlerbehebung und Iteration 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 labbasierte Tools wie Lighthouse, um zu diagnostizieren, wie Sie sie verbessern können. Weitere Informationen finden Sie im Abschnitt Wann Lighthouse verwendet werden sollte.
Google misst die Core Web Vitals über den Chrome User Experience Report (CrUX). Dies ist ein öffentlicher Datensatz, der von echten Chrome-Nutzern erhoben wurde. Er ist die Grundlage vieler Tools von Google und Drittanbietern, die die Core Web Vitals einer Website erfassen.
CrUX hat jedoch seine Grenzen. Sie kann Ihnen oft sagen, wann ein Problem auftritt, aber oft fehlen ihr die Daten, um Ihnen zu sagen, warum.
Wenn möglich, eigene Felddaten erheben
Der beste Datensatz zur Verbesserung der Websiteleistung in der Praxis ist der, den Sie erstellen. Dazu müssen Sie zuerst Felddaten von den Besuchern Ihrer Website erheben. Wie Sie dabei vorgehen, hängt von der Größe Ihrer Organisation ab und davon, ob Sie für eine Lösung eines Drittanbieters bezahlen oder eine eigene Lösung erstellen möchten.
Kostenpflichtige Lösungen messen mit ziemlicher Sicherheit die Core Web Vitals (und andere Leistungsmesswerte) und bieten 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 sind Sie jedoch nicht Teil einer großen Organisation oder einer Organisation, die sich eine Drittanbieterlösung 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 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 im Feld erhobene Web Vitals-Daten an Google Analytics zu senden und die BigQuery-Exporte von GA4 für Berichte zu den Daten zu verwenden.
Tools von Google
Unabhängig davon, ob Sie eigene Felddaten erheben, gibt es mehrere Google-Tools, die für die Analyse der 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.
Chrome User Experience Report (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 wurden. Er enthält Core Web Vitals-Messwerte und andere Messwerte für Websites mit ausreichendem Traffic.
CrUX ist als monatliches BigQuery-Dataset auf Ursprungsebene oder als tägliche API auf URL- oder Ursprungsebene verfügbar, sofern eine URL oder ein Ursprung genügend Stichproben im CrUX-Dataset hat. Die CrUX-Daten sind über verschiedene CrUX-Tools sowohl für den programmatischen Zugriff als auch für visuelle Tools verfügbar, die von Nutzern verwendet werden können.
Wann sollte CrUX verwendet werden?
Auch wenn Sie Ihre eigenen Felddaten erheben, ist der CrUX nützlich. Obwohl der CrUX nur eine Teilmenge der Chrome-Nutzer darstellt, ist es hilfreich, die Felddaten Ihrer Website mit den CrUX-Daten zu vergleichen. Beide haben Vor- und Nachteile, was zu Unterschieden führen kann. Wenn Sie keine Felddaten für Ihre Website erfassen, ist CrUX besonders nützlich, um einen allgemeinen Überblick zu erhalten – vorausgesetzt, Ihre Website ist im Datensatz enthalten.
Sie können CrUX direkt oder mit einem anderen Tool verwenden (einschließlich der unten genannten). Die direkte Verwendung des CrUX-Datasets, entweder über BigQuery oder die API, ist nützlich, um Daten offenzulegen, die in anderen Tools nicht angezeigt werden. Beispielsweise sind 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 oft nicht angezeigt werden.
Wann CrUX nicht verwendet werden sollte
CrUX repräsentiert nur Chrome-Nutzer und selbst dann nur eine Teilmenge der Chrome-Nutzer. Eine vollständige RUM-Lösung kann mehr Nutzererfahrungen in Chrome und anderen Browsern umfassen, die die Web Vitals-Messwerte unterstützen.
Websites, die nicht genügend Traffic erhalten, sind im CrUX-Dataset nicht vertreten. In diesem Fall müssen Sie Ihre eigenen Felddaten erheben, um die Leistung Ihrer Website zu verstehen, da CrUX nicht verfügbar ist. Alternativ müssen Sie sich auf Labdaten verlassen, die jedoch wie oben beschrieben möglicherweise nicht repräsentativ sind.
Da die von CrUX bereitgestellten Daten einen gleitenden Durchschnitt der letzten 28 Tage darstellen, ist es kein ideales Tool für die Entwicklung, da es einige Zeit dauert, bis sich Verbesserungen im CrUX-Dataset widerspiegeln.
Da es sich bei CrUX um ein öffentliches Dataset handelt, ist die Menge der verfügbaren Informationen und die Art und Weise, wie diese Daten abgefragt werden können, begrenzt. Wenn Sie Ihre eigenen RUM-Daten erfassen, können Sie mehr Details (z. B. das LCP-Element) erfassen und die Daten weiter segmentieren, um Probleme zu identifizieren. Sind die Core Web Vitals-Werte für angemeldete Nutzer besser oder schlechter als für 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 Labdaten aus Lighthouse für eine bestimmte Seite liefert. Weitere Informationen finden Sie in den entsprechenden Abschnitten.
Wann sollte PSI verwendet werden?
PSI eignet sich hervorragend, um die CrUX-Leistung auf Seiten- oder Ursprungsebene für Mobil- und Desktopnutzer zu bewerten. Es ist eine gute Wahl 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 liefert auch Lighthouse-Daten, die nützliche Empfehlungen zur Verbesserung Ihrer Core Web Vitals enthalten – sofern die Messwerte übereinstimmen. Wenn diese nicht übereinstimmen, sind die Lighthouse-Empfehlungen möglicherweise weniger relevant.
Da Lighthouse vom Server aus ausgeführt wird, kann es eine konsistentere Baseline bilden als bei der Ausführung von Lighthouse über die Entwicklertools.
Wann Sie PSI nicht verwenden sollten
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 Teilnahmevoraussetzungen erfüllen, einschließlich Schwellenwerten für die Beliebtheit der Website. 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-Labdaten angezeigt werden können.
Wenn Sie nur CrUX-Daten auf Ursprungsebene und nicht für die spezifische URL haben, die getestet wird, ist die Nützlichkeit der Korrelation der Felddaten auf Ursprungsebene mit der Labordiagnose auf Seitenebene ebenfalls eingeschränkt. Die Felddaten auf Ursprungsebene sind immer noch sehr nützliche Informationen, um die Leistung der Website zusammenzufassen, und die Lighthouse-Prüfungen können hilfreich sein. In diesem Fall ist jedoch besondere Vorsicht geboten.
Wenn auf Seitenebene Daten im UX-Bericht für Chrome verfügbar sind, die sich von den Lighthouse-Labdaten unterscheiden, sind die Empfehlungen von Lighthouse möglicherweise nur von begrenztem Wert. Das kann insbesondere bei CLS-Problemen nach dem Laden und bei Core Web Vitals für Interaktivität (FID und INP) der Fall sein, bei denen laborgestützte Prüfungen weniger nützlich sind.
Search Console
Die Search Console misst den Traffic über das Suchnetzwerk und die Leistung Ihrer Website, einschließlich der Core Web Vitals. Sie ist nur für Websiteinhaber verfügbar, die ihre 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 einzigen Gruppenbewertung zusammengefasst werden. Die Search Console enthält auch einen Core Web Vitals-Bericht, der auf Felddaten aus CrUX basiert.
Wann die Search Console verwendet werden sollte
Die Search Console eignet sich sowohl für Entwickler als auch für Nicht-Entwickler, um die Such- und Seitenleistung auf eine Weise zu bewerten, die mit anderen Google-Tools nicht möglich ist. Die Darstellung der CrUX-Daten und die Gruppierung von Seiten nach Ähnlichkeit bieten neue Einblicke in die Auswirkungen von Leistungsverbesserungen auf ganze Seitenkategorien.
Wann Sie die Search Console nicht verwenden sollten
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-Dataset enthalten ist.
Die Seitengruppierung 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 erfüllt, die Beispielseiten aber alle diese Core Web Vitals zu erfüllen scheinen. Das kann passieren, wenn eine Gruppe Longtail- oder selten besuchte Seiten enthält, die möglicherweise langsamer geladen werden, da sie seltener im Cache gespeichert werden. Wenn es im Longtail genügend solcher Seiten gibt, können sie die Gesamt-Bestehensquote der Gruppe beeinflussen.
Leuchtturm
Lighthouse ist ein Lab-Tool, das konkrete Möglichkeiten zur Verbesserung der Seitenleistung bietet. Mit Lighthouse-Nutzerflüssen können Entwickler auch Interaktionsflüsse für Leistungstests über den Seitenaufbau hinaus skripten.
Lighthouse-CI ist ein ähnliches Tool, das Lighthouse während der Projekterstellung und -bereitstellung ausführt, um bei Leistungstests zu helfen. Es stellt einen Lighthouse-Bericht zusammen mit Pull-Anfragen bereit und verfolgt Leistungsmesswerte im Zeitverlauf.
Wann sollte Lighthouse verwendet werden?
Lighthouse eignet sich hervorragend, um während der Entwicklung in lokalen und Staging-Umgebungen Möglichkeiten zur Leistungsverbesserung zu finden. Lighthouse CI ist auch in den Build- und Bereitstellungsphasen für Staging- und Produktionsumgebungen nützlich, in denen Leistungstests erforderlich sind, um eine gute Nutzererfahrung zu gewährleisten.
Wann Sie Lighthouse nicht verwenden sollten
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 angezeigten Empfehlungen entsprechen möglicherweise nicht immer der Leistung, die Ihre Nutzer erleben.
Lighthouse kann zwar mit Tools wie PageSpeed Insights zur Diagnose von Produktionswebsites verwendet werden, idealerweise sollte es jedoch in Entwicklungs- und Continuous-Integration-Umgebungen eingesetzt werden, um Leistungsprobleme zu beheben, bevor sie in die Produktion gelangen.
Die von Lighthouse bereitgestellten Prüfungen 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 browserinternen Entwicklungstools, einschließlich des Bereichs „Leistung“. Das Steuerfeld „Leistung“ ist ein Lab-Tool, das aus zwei „Modi“ besteht:
Wenn Sie das Steuerfeld „Leistung“ zum ersten Mal öffnen, wird ein Bildschirm mit Live-Messwerten angezeigt, auf dem die aktuellen Core Web Vitals-Messwerte zu sehen sind. Außerdem können Sie Felddaten aus CrUX importieren. Sie ist nützlich als „Live“-Ansicht der Leistung, während Sie mit der Seite interagieren, um Leistungsprobleme zu finden – insbesondere für Probleme nach dem Laden, die Sie möglicherweise mit den CLS- und INP-Messwerten sehen.
Zweitens können Entwickler im Bereich „Leistung“ ein Profil (oder einen Trace) aller Seitenaktivitäten während des Seitenaufbaus oder eines aufgezeichneten Zeitraums erfassen. Diese Ansicht bietet detaillierte Einblicke in alle beobachteten Dimensionen, z. B. Netzwerk-, Rendering-, Painting- und Scripting-Aktivitäten sowie die Core Web Vitals einer Seite. Außerdem enthält es Statistiken, die denen von Lighthouse ähneln.
Wann sollte das Steuerfeld „Leistung“ verwendet werden?
Das Steuerfeld „Leistung“ sollte von Entwicklern verwendet werden, um detaillierte Einblicke in die Leistung einer bestimmten Seite zu erhalten.
In der Ansicht „Live-Messwerte“ können Sie sich schnell einen Überblick über die aktuellen Leistungsmerkmale der Seite verschaffen und potenzielle Probleme erkennen, wenn mit der Seite interagiert wird.
Die Trace-Ansicht ist besonders nützlich, um Probleme mit der Reaktionsfähigkeit zu beheben, die sich auf den INP auswirken. Sobald eine Interaktion mit schlechter Antwortzeit identifiziert und reproduzierbar ist, kann das Steuerfeld „Leistung“ eine Fülle von Daten darüber liefern, was im Browser passiert, um das Problem zu verstehen – von der Blockierung des Hauptthreads über JavaScript-Aufrufstapel bis hin zu Rendering-Arbeiten.
Wann Sie das Steuerfeld „Leistung“ nicht verwenden sollten
Das Steuerfeld „Leistung“ ist ein Entwicklertool, das hauptsächlich Labdaten liefert, aber auch einige Felddaten aus CrUX enthält. Sie sind kein Ersatz für Felddaten.
Die Trace-Ansicht enthält viele Debugging-Informationen, die für unerfahrene Entwickler oder Personen in Nicht-Entwicklerrollen jedoch schwer zu verstehen sein können. Die Ansicht „Live-Messwerte“, die beim Öffnen des Bereichs angezeigt wird, bietet jedoch eine einfachere Benutzeroberfläche für alle, die nicht die vollständigen Details benötigen.
Ein dreistufiger Workflow, mit dem Sie dafür sorgen, dass die Core Web Vitals Ihrer Website im grünen Bereich bleiben
Wenn Sie die Nutzerfreundlichkeit verbessern möchten, sollten Sie den Prozess als kontinuierlichen Zyklus betrachten. Ein Ansatz zur Verbesserung der Core Web Vitals und anderer Leistungsmesswerte könnte so aussehen:
- Website-Zustand bewerten und Pain Points identifizieren
- Fehler beheben und optimieren.
- Überwachen Sie die Leistung mit Tools für die kontinuierliche Integration, um Regressionen zu erkennen und zu verhindern.
Schritt 1: Websitezustand 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 die allgemeinen Core Web Vitals-Messwerte für die Nutzerfreundlichkeit des Ursprungs und spezifische Informationen zu einer einzelnen URL ansehen.
- Die Search Console kann nützlich sein, um Seiten zu identifizieren, die verbessert werden müssen, wenn die Funktion zur Seitengruppierung für Ihre Website gut funktioniert.
- Wenn Sie RUM-Daten haben, ist das 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 die CrUX-Daten möglicherweise aus, um Ihnen einen Überblick zu verschaffen – vorausgesetzt, Ihre Website ist im Datensatz enthalten.
Websiteleistung mit PageSpeed Insights analysieren
In PageSpeed Insights werden die CrUX-Daten der letzten 28 Tage im 75. Perzentil angezeigt. Wenn also 75 % der Nutzererfahrungen den für einen bestimmten Messwert festgelegten Schwellenwert erreichen, wird die Erfahrung als „gut“ eingestuft.
Wenn Sie die Leistung einer bestimmten Seite analysieren möchten, verwenden Sie diese. Wenn Sie mit der Optimierung beginnen, sollten Sie sich zuerst die Startseite ansehen, da sie in der Regel eine der beliebtesten Seiten auf vielen Websites ist.
Konzentrieren Sie sich in PSI zuerst auf den Abschnitt Was Ihre echten Nutzer erleben. Sie sehen bis zu vier Ansichten der Daten: Mobilgeräte und Computer für die eingegebene URL und den gesamten Ursprung. Vergleichen Sie diese und sehen Sie sich die Unterschiede an. Mobilgeräte sind in der Regel weniger leistungsfähig als Computer, da sie weniger Ressourcen haben und die Netzwerkbedingungen möglicherweise weniger stabil sind. Wenn sich die URL- und Ursprungsdaten erheblich unterscheiden, versuchen Sie, den Grund dafür zu ermitteln: Startseiten sind oft die ersten Seiten, die besucht werden (also eine Landingpage), und können daher langsamer sein als der Ursprung, da Nutzer die volle Auswirkung eines nicht vorbereiteten Browser-Caches zu spüren bekommen. Nachfolgende Seiten werden wahrscheinlich schneller geladen, da alle freigegebenen Assets im Cache gespeichert werden, wodurch die aggregierten Daten auf Ursprungsebene reduziert werden.
PSI zeigt auch alle drei Core Web Vitals (LCP, CLS und INP) sowie die Diagnosemesswerte TTFB und FCP an. Werden die Grenzwerte für die Core Web Vitals-Werte nicht eingehalten und wenn ja, um wie viel? So wissen Sie, worauf Sie sich konzentrieren müssen.
Machen Sie sich mit den Beziehungen zwischen diesen Zahlen vertraut, insbesondere für LCP. Wenn der LCP langsam ist, wie in diesem Beispiel, sehen Sie sich TTFB und FCP an, die beide Meilensteine für diesen Messwert sind. In diesem Beispiel beträgt die TTFB 1,8 Sekunden. Damit wird es sehr schwierig, den empfohlenen Grenzwert von 2,5 Sekunden für einen guten LCP-Wert 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 der TTFB. Der FCP dauert eine weitere Sekunde, was wiederum auf langsamere Netzwerke hindeuten 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 wird. Der CrUX zeigt jetzt auch mehr Diagnoseinformationen zu Ressourcentypen und Unterteilen an, was ebenfalls bei der Diagnose von LCP-Problemen hilft.
Sehen Sie sich für CLS die CrUX-CLS- und Lighthouse-CLS-Werte an, um festzustellen, ob es sich um ein CLS-Problem beim Laden (das von Lighthouse erkannt und gemeldet wird) oder um ein CLS-Problem nach dem Laden handelt, das von Lighthouse nicht erkannt wird. Weitere Informationen finden Sie im Leitfaden zur CLS-Optimierung.
Die Reaktionsfähigkeit wird anhand der INP-Werte gemessen. Sehen Sie sich die TBT-Prüfungen in Lighthouse an, um festzustellen, ob beim ersten Laden der Seite viel JavaScript verarbeitet wird. Das wirkt sich wahrscheinlich auf den INP aus. Der INP ist ein Messwert, der sich nur schwer verbessern lässt. Weitere Informationen finden Sie im Leitfaden zur Optimierung des INP.
Seiten mit schlechter Leistung in der Search Console identifizieren
PSI ist nützlich, wenn Sie eine bestimmte URL oder die Website als Ganzes testen möchten. Mit der Search Console können Sie Ihre Bemühungen 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 sich aber auch bestimmte Seiten genauer ansehen, die Aufmerksamkeit erfordern. Mit der Search Console können Sie außerdem:
- 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 Detailberichte, in denen URLs für Mobilgeräte und Computer in die einzelnen Qualitätskategorien für die Nutzerfreundlichkeit eingeordnet werden.
Sobald Sie bestimmte Seiten gefunden haben, die Sie sich ansehen möchten, können Sie PSI wie oben beschrieben verwenden, um die Probleme auf diesen Seiten besser zu verstehen.
Schritt 2: Fehlerbehebung und Optimierung
In Schritt 1 sollten Sie Seiten identifiziert haben, deren Leistung verbessert werden muss, 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.
- Sehen Sie sich die Lighthouse-Prüfungen an, um allgemeine Informationen zur Seite zu erhalten.
- Verwenden Sie die Ansicht „Live-Messwerte“ im Bereich „Leistung“, um die Core Web Vitals in Echtzeit zu analysieren.
- Verwenden Sie das Tracing im Bereich „Leistung“, um Leistungsprobleme zu beheben und Codeänderungen zu testen.
Ausführliche Informationen finden Sie in den folgenden Leitfäden:
Mit Lighthouse Optimierungsmöglichkeiten finden
PageSpeed Insights führt Lighthouse für Sie aus. Es ist auch möglich, Lighthouse über die Chrome-Entwicklertools auszuführen. Das ist nützlich, um Korrekturen lokal zu validieren. Der Bereich „Leistung“ (wird als Nächstes behandelt) ist jedoch ein umfassenderes Tool, um Leistungsprobleme lokal zu identifizieren und zu beheben.
Ein wichtiger Punkt ist, dass die Lighthouse-Prüfung die Probleme reproduziert, die Sie beheben möchten (z. B. langsamer LCP oder CLS-Probleme). Standardmäßig wird in Lighthouse nur die Nutzerfreundlichkeit während des Seitenaufbaus bewertet. Da es sich um ein Lab-Tool handelt, wird INP zugunsten von TBT ausgeschlossen.
Wenn die Lighthouse-Messwerte auf ein ähnliches Problem hindeuten wie das, das Sie lösen möchten, können die umfangreichen Informationen in den Audits 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 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 diagnostizieren kann.
In Echtzeit mit dem Bildschirm für Live-Messwerte der Chrome-Entwicklertools analysieren
Auf dem Bildschirm für Live-Messwerte in den Chrome-Entwicklertools im Bereich „Leistung“ werden die Core Web Vitals in Echtzeit während des Seitenaufbaus und beim Surfen auf 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 bietet viele hilfreiche Informationen, um Leistungsprobleme zu identifizieren, und kann sogar Felddaten aus CrUX abrufen. Wenn Sie noch mehr Informationen benötigen, können Sie einen Trace ausführen.
Mit dem Bereich „Leistung“ detaillierte Informationen abrufen
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.
Der Track Layoutverschiebungen hebt Layoutverschiebungen hervor. Wenn Sie darauf klicken, erhalten Sie weitere Informationen zu den verschobenen Elementen, um den CLS-Wert zu debuggen.
Wichtige Zeitangaben wie LCP werden im Abschnitt Timings unten im Trace angezeigt. Klicken Sie darauf, um weitere Informationen zu erhalten.
Long Tasks (die zu INP-Problemen führen können) werden im Flame-Diagramm ebenfalls 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.
Fehlerbehebung bei Core Web Vitals im Feld
Labortools können nicht immer die Ursache aller Core Web Vitals-Probleme identifizieren, die sich auf Ihre Nutzer auswirken. Das ist einer der Gründe, warum es so wichtig ist, eigene Felddaten zu erheben, da dabei Faktoren berücksichtigt werden, die Labordaten nicht berücksichtigen können.
Weitere Informationen finden Sie unter Leistung im Feld debuggen.
Schritt 3: Auf Änderungen achten
Nachdem Sie alle Probleme behoben haben, sollten Sie prüfen, ob die gewünschte Wirkung erzielt wurde und ob neue Probleme Ihre Core Web Vitals beeinträchtigen. Dazu müssen Leistungsprobleme im Rahmen des Entwickler-Workflows überwacht werden, um zu verhindern, dass Leistungsprobleme in die Produktion gelangen. 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 Lighthouse-Audits automatisch für Code-Commits ausführen, um zu verhindern, dass Leistungseinbußen in den Code gelangen. Damit können Sie die Leistungstimings (die variieren können) oder nur die Leistungsprüfungen als Linting-Tool prüfen, um schlechte Praktiken im Code zu vermeiden.
Trends zur Website-Integrität mit Felddaten ansehen
Sie sollten zwar versuchen, alle Leistungsprobleme zu erkennen und zu beheben, bevor sie in die Produktion gelangen, aber es ist wichtig, Ihre Felddaten mithilfe von RUM zu überwachen, um alle Probleme zu finden, die durchschlüpfen. Es gibt viele kommerzielle RUM-Produkte, die dabei helfen können. Mit der JavaScript-Bibliothek web-vitals lässt sich die Erhebung 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 eine schnelle und angenehme Nutzererfahrung zu bieten, ist eine leistungsorientierte Denkweise und die Einführung eines Workflows erforderlich, der Fortschritte ermöglicht. Mit den richtigen Tools und Prozessen für die Prüfung, Fehlerbehebung und Überwachung können Sie großartige Nutzererfahrungen schaffen und die für gute Core Web Vitals definierten Grenzwerte einhalten.