Mit Ihren bevorzugten Entwicklertools können jetzt die Core Web Vitals gemessen werden.
Die vor Kurzem angekündigte Web Vitals-Initiative bietet einheitliche Informationen zu Qualitätssignalen, die für alle Websites unerlässlich sind, um eine hervorragende Nutzererfahrung zu bieten. Wir freuen uns, Ihnen mitteilen zu können, dass alle beliebten Google-Tools für Webentwickler jetzt die Messung von Core Web Vitals unterstützen. Dadurch lassen sich Probleme mit der Nutzerfreundlichkeit leichter diagnostizieren und beheben. Dazu gehören Lighthouse, PageSpeed Insights, Chrome-Entwicklertools, die Search Console, das Analyse-Tool von web.dev, die Web Vitals-Chrome-Erweiterung und eine neue Chrome UX Report API.
Da in der Google Suche jetzt Core Web Vitals als Grundlage für die Bewertung der Nutzerfreundlichkeit von Seiten herangezogen wird, ist es wichtig, dass diese Messwerte so verfügbar und umsetzbare Informationen wie möglich sind.
Probieren Sie den folgenden Workflow aus, um mit Core Web Vitals die Nutzerfreundlichkeit zu optimieren:
- Mit dem neuen Core Web Vitals-Bericht der Search Console können Sie Seitengruppen identifizieren, die Ihre Aufmerksamkeit erfordern (basierend auf den Felddaten).
- Wenn Sie Seiten identifiziert haben, die überarbeitet werden müssen, verwenden Sie PageSpeed Insights (von Lighthouse und dem UX-Bericht von Chrome), um Labor- und Feldprobleme auf einer Seite zu diagnostizieren. PageSpeed Insights (PSI) ist über die Search Console verfügbar. Du kannst aber auch direkt eine URL auf PSI eingeben.
- Sind Sie bereit, Ihre Website im Lab lokal zu optimieren? Mit Lighthouse und den Chrome-Entwicklertools können Sie Core Web Vitals messen und erhalten umsetzbare Empfehlungen dazu, was Sie korrigieren sollten. Mit der Chrome-Erweiterung „Web Vitals“ erhalten Sie auf Computern Messwerte in Echtzeit.
- Benötigen Sie ein benutzerdefiniertes Dashboard für Core Web Vitals? Verwenden Sie das aktualisierte CrUX-Dashboard oder die neue Chrome UX Report API für Felddaten bzw. die PageSpeed Insights API für Labdaten.
- Sie benötigen Hilfe? web.dev/measure kann Ihre Seite analysieren und Ihnen eine Reihe von Leitfäden und Codelabs zur Optimierung auf Grundlage von PSI-Daten anzeigen.
- Verwenden Sie schließlich Lighthouse CI für Pull-Anfragen, damit es keine Regressionen in Core Web Vitals gibt, bevor Sie eine Änderung in der Produktion bereitstellen.
Nach dieser Einführung wollen wir uns nun die spezifischen Aktualisierungen für jedes Tool ansehen.
Leuchtturm
Lighthouse ist ein automatisiertes Tool zur Prüfung von Websites, mit dem Entwickler Probleme diagnostizieren und Möglichkeiten zur Verbesserung der Nutzererfahrung auf ihren Websites ermitteln können. Dabei werden verschiedene Dimensionen der Qualität der User Experience in einer Laborumgebung gemessen, einschließlich Leistung und Barrierefreiheit. Die neueste Version von Lighthouse (6.0, veröffentlicht Mitte Mai 2020) enthält zusätzliche Prüfungen, neue Messwerte und eine neu zusammengestellte Leistungsbewertung.
In Lighthouse 6.0 wurden drei neue Messwerte für den Bericht eingeführt. Zwei dieser neuen Messwerte – Largest Contentful Paint (LCP) und Cumulative Layout Shift (CLS) – sind Lab-Implementierungen von Core Web Vitals und liefern wichtige Diagnoseinformationen zur Optimierung der Nutzerfreundlichkeit. Da sie für die Bewertung der Nutzererfahrung wichtig sind, werden die neuen Messwerte nicht nur gemessen und in den Bericht aufgenommen, sondern auch bei der Berechnung des Leistungswerts berücksichtigt.
Der dritte neue Messwert in Lighthouse – Total Blocking Time (TBT) – passt gut zum Feldmesswert First Input Delay (FID), einem weiteren Core Web Vitals-Messwert. Wenn Sie die Empfehlungen im Lighthouse-Bericht berücksichtigen und eine Optimierung anhand Ihrer Punktzahlen vornehmen, können Sie die bestmögliche Nutzererfahrung bieten.
Alle Produkte, die von Lighthouse unterstützt werden, wurden entsprechend auf die neueste Version aktualisiert. Dazu gehört auch Lighthouse CI, mit dem sich Core Web Vitals-Werte für Pull-Anfragen ganz einfach messen lassen, bevor sie zusammengeführt und bereitgestellt werden.
Weitere Informationen zu den neuesten Funktionen von Lighthouse finden Sie in unserem Blogpost What's New in Lighthouse 6.0.
PageSpeed Insights
PageSpeed Insights (PSI) gibt Aufschluss über die Labor- und Feldleistung einer Seite auf Mobil- und Desktop-Geräten. Das Tool bietet einen Überblick darüber, wie Nutzer die Seite in der realen Welt verwenden (unterstützt durch den UX-Bericht für Chrome), und eine Reihe von umsetzbaren Empfehlungen, wie Websiteinhaber die Nutzerfreundlichkeit verbessern können (bereitgestellt von Lighthouse).
PageSpeed Insights und die PageSpeed Insights API wurden ebenfalls auf Lighthouse 6.0 aktualisiert und unterstützen jetzt die Messung von Core Web Vitals sowohl im Labor- als auch im Feldbereich des Berichts. Core Web Vitals sind wie unten dargestellt mit einem blauen Band gekennzeichnet.
Die Search Console bietet Websiteinhabern einen guten Überblick über Gruppen von Seiten, die ihre Aufmerksamkeit erfordern. PSI hilft dabei, Möglichkeiten zur Verbesserung der Nutzerfreundlichkeit für einzelne Seiten zu identifizieren. In PSI können Sie ganz oben im Bericht sehen, ob Ihre Seite die Mindestanforderungen für eine gute Nutzerfreundlichkeit für alle Core Web Vitals erfüllt. Dies wird mit den Core Web Vitals-Test oder nicht bestandener Core Web Vitals-Bewertung angegeben.
CrUX
Der UX-Bericht für Chrome (Chrome UX Report, CrUX) ist ein öffentlicher Datensatz mit realen Daten zur Nutzererfahrung auf Millionen von Websites. Es werden Feldversionen aller Core Web Vitals gemessen. Im Gegensatz zu Lab-Daten stammen die CrUX-Daten von Nutzern, die sich angemeldet haben. Anhand dieser Daten können Entwickler die Verteilung realer User Experiences auf ihren eigenen Websites oder sogar auf den Websites von Mitbewerbern nachvollziehen. Auch wenn Sie auf Ihrer Website kein RUM verwenden, können Sie mit CrUX die Core Web Vitals schnell und einfach bewerten. Das CrUX-Dataset in BigQuery enthält detaillierte Leistungsdaten für alle Core Web Vitals und ist in monatlichen Snapshots auf Ursprungsebene verfügbar.
Die einzige Möglichkeit, die Leistung Ihrer Website für Ihre Nutzer genau zu verstehen, besteht darin, die Leistung tatsächlich zu messen, während diese Nutzer Ihre Website laden und damit interagieren. Diese Art der Messung wird im Allgemeinen als Real User Monitoring (RUM) bezeichnet. Auch wenn Sie auf Ihrer Website kein RUM verwenden, können Sie mit CrUX die Core Web Vitals schnell und einfach beurteilen.
Die CrUX API
Wir freuen uns, Ihnen heute die CrUX API vorstellen zu können. Damit können Sie Ihre Entwicklungsworkflows schnell und kostenlos in die Qualitätsmessung auf Ursprungs- und URL-Ebene für die folgenden Feldmesswerte einbinden:
- Largest Contentful Paint
- Cumulative Layout Shift
- First Input Delay
- First Contentful Paint
Entwickler können einen Ursprung oder eine URL abfragen und die Ergebnisse nach verschiedenen Formfaktoren segmentieren. Die API wird täglich aktualisiert und fasst die Daten der letzten 28 Tage zusammen (im Gegensatz zum BigQuery-Dataset, das monatlich aggregiert wird). Für die API gelten dieselben gelockerten öffentlichen API-Kontingente wie für unsere andere API, die PageSpeed Insights API (25.000 Anfragen pro Tag).
Unten sehen Sie eine Demo, in der die CrUX API verwendet wird, um die Core Web Vitals-Messwerte mit Verteilungen für gut, verbesserungsbedürftig und schlecht zu visualisieren:
In zukünftigen Versionen planen wir, die API zu erweitern, um den Zugriff auf zusätzliche Dimensionen und Messwerte für CrUX-Datasets zu ermöglichen.
Überarbeitetes CrUX-Dashboard
Mit dem neu gestalteten CrUX-Dashboard können Sie die Leistung eines Ursprungs im Zeitverlauf ganz einfach erfassen und damit die Verteilung aller Core Web Vitals-Messwerte im Blick behalten. Informationen zum Einstieg in das Dashboard findest du in unserem Tutorial auf web.dev.
Wir haben eine neue Core Web Vitals-Landingpage eingeführt, damit Sie auf einen Blick die Leistung Ihrer Website noch einfacher erkennen können. Wir freuen uns über Feedback zu allen Tools zur Nutzererfahrung in Chrome. Wenn Sie Fragen haben, senden Sie uns eine E-Mail an @ChromeUXReport auf Twitter oder in der Google-Gruppe.
Bereich „Leistung“ in den Chrome-Entwicklertools
Fehler bei Layout Shift-Ereignissen im Bereich „Experience“ beheben
Im Bereich Leistung der Chrome-Entwicklertools können Sie über den neuen Bereich „Erfahrung“ unerwartete Layoutänderungen erkennen. Dies ist hilfreich, um visuelle Instabilitätsprobleme auf Ihrer Seite zu finden und zu beheben, die zu Cumulative Layout Shift beitragen.
Wählen Sie einen Layout Shift aus, um die zugehörigen Details auf dem Tab Summary (Zusammenfassung) aufzurufen. Wenn Sie sehen möchten, wo die Verschiebung selbst aufgetreten ist, bewegen Sie den Mauszeiger auf die Felder Verschoben von und Verschoben nach.
Bereitschaft zur Fehlerbehebung bei Interaktionen mit der Gesamtblockzeit in der Fußzeile
Der Messwert „Total Blocking Time“ (TBT) kann in Labortools gemessen werden und ist ein hervorragender Indikator für die First Input Delay. TBT misst die Gesamtzeit zwischen First Contentful Paint (FCP) und Zeit bis Interaktivität, bei der der Hauptthread lange genug blockiert wurde, um eine Reaktionsfähigkeit bei Eingaben zu verhindern. Leistungsoptimierungen, die die TBT im Labor verbessern, sollten FID auch vor Ort verbessern.
Wenn Sie die Seitenleistung messen, wird sie jetzt in der Fußzeile des Steuerfelds Leistung der Chrome-Entwicklertools angezeigt:
- Drücken Sie Strg + Umschalttaste + J (oder Befehlstaste + Option + J auf dem Mac), um die Entwicklertools zu öffnen.
- Klicken Sie auf den Tab Leistung.
- Klicken Sie auf Aufzeichnen.
- Aktualisieren Sie die Seite manuell.
- Warten Sie, bis die Seite geladen ist, und beenden Sie dann die Aufzeichnung.
Weitere Informationen finden Sie unter Neu in den Entwicklertools (Chrome 84).
Search Console
Mit dem neuen Core Web Vitals-Bericht in der Search Console können Sie Gruppen von Seiten auf Ihrer Website identifizieren, die auf der Grundlage von realen Daten aus CrUX-Werten überprüft werden müssen. Die URL-Leistung wird nach Status, Messwerttyp und URL-Gruppe (Gruppen ähnlicher Webseiten) gruppiert.
Der Bericht basiert auf den drei Core Web Vitals-Messwerten: LCP, FID und CLS. Wenn für eine URL keine Mindestmenge an Berichtsdaten für diese Messwerte verfügbar ist, wird sie im Bericht nicht berücksichtigt. Probieren Sie den neuen Bericht aus, um einen umfassenden Überblick über die Leistung für Ihren Ursprung zu erhalten.
Sobald Sie einen Seitentyp gefunden haben, bei dem Probleme mit Core Web Vitals vorliegen, können Sie sich über PageSpeed Insights über spezifische Optimierungsvorschläge für repräsentative Seiten informieren.
web.dev
Unter https://pagespeed.web.dev/ kannst du die Leistung deiner Seite im Zeitverlauf messen. Zur Optimierung findest du eine nach Priorität geordnete Liste mit Leitfäden und Codelabs. Die Messung wird von PageSpeed Insights unterstützt. Das Messtool unterstützt jetzt auch die unten dargestellten Core Web Vitals-Messwerte:
Web Vitals-Erweiterung
Mit der Web Vitals-Erweiterung werden die drei Core Web Vitals-Messwerte in Google Chrome für Computer in Echtzeit erfasst. Das ist hilfreich, um Probleme frühzeitig im Entwicklungsworkflow zu erkennen, und als Diagnosetool, mit dem Sie die Leistung von Core Web Vitals bewerten können, während Sie im Web surfen.
Die Erweiterung kann jetzt aus dem Chrome Web Store installiert werden. Wir hoffen, dass diese Informationen für Sie hilfreich sind. Wir freuen uns über jegliche Verbesserungsvorschläge und Feedback zum GitHub des Projekts.
Kurze Highlights
Ergebnis Weitere mögliche Aktionen:
- Mit Lighthouse in den Entwicklertools können Sie die Nutzerfreundlichkeit optimieren und die Core Web Vitals auf Erfolgskurs bringen.
- Vergleichen Sie mit PageSpeed Insights die Core Web Vitals-Leistung Ihrer Labs und Felder.
- Wenn Sie die neue Chrome User Experience Report API testen, können Sie ganz einfach abrufen, wie gut Ihre Quelle und URL in den letzten 28 Tagen im Vergleich zu den Core Web Vitals abgeschnitten haben.
- Im Bereich Erfahrung und in der Fußzeile im Bereich Leistung der Entwicklertools können Sie detaillierte Informationen zu bestimmten Core Web Vitals aufrufen und Fehler beheben.
- Der Core Web Vitals-Bericht der Search Console enthält eine Zusammenfassung der Leistung Ihrer Quellen vor Ort.
- Mit der Web Vitals-Erweiterung können Sie in Echtzeit die Leistung einer Seite anhand von Core Web Vitals analysieren.
Im Juni werden wir auf der web.dev Live näher über unsere Core Web Vitals-Tools sprechen. Melde dich an, um Updates zur Veranstaltung zu erhalten.
~ von Elizabeth und Addy, WebPerf Janitors