Hier erfährst du mehr über die neuesten PageSpeed Insights-Funktionen, mit denen du die Qualität deiner Seite und Website besser messen und optimieren kannst.
PageSpeed Insights (PSI) hat sich im Laufe der Jahre zu einer zentralen Quelle für Feld- und Labdaten entwickelt. Dabei werden Informationen aus dem UX-Bericht für Chrome (CrUX) und den Lighthouse-Diagnosen verwendet, um Erkenntnisse zu gewinnen, mit denen Sie die Leistung Ihrer Website verbessern können.
Wir freuen uns, heute eine aktualisierte Version von PSI ankündigen zu können. Dies ist zwar ein wichtiges Element in unserer Speed Tooling Suite, die PSI-Codebasis war jedoch zehn Jahre alt, enthielt viel Legacy-Code und sollte deshalb komplett neu gestaltet werden. Wir haben diese Gelegenheit genutzt, um Probleme mit der Benutzeroberfläche in PSI zu beheben, die Nutzern manchmal die Navigation im Bericht erschwert haben. Unsere Hauptziele waren:
- Gestalten Sie die Benutzeroberfläche intuitiver, indem Sie deutlich zwischen Daten aus einer synthetischen Umgebung und Daten unterscheiden, die von Nutzern vor Ort erhoben werden.
- Machen Sie auf der Benutzeroberfläche deutlich, wie der Core Web Vitals-Test berechnet wird.
- Modernisieren Sie das Design von PSI mit Material Design.
In diesem Beitrag werden die neuen Funktionen in PSI vorgestellt, die noch in diesem Jahr veröffentlicht werden.
Neuigkeiten
Ziel der Neugestaltung der PSI-Benutzeroberfläche ist es, die Darstellung der Berichtsdaten zu verbessern und die im Bericht verfügbaren Daten klarer und detaillierter zu gestalten. Die neue Benutzeroberfläche soll intuitiver sein und Entwicklern dabei helfen, schnell Erkenntnisse zur Labor- und Feldleistung für ihre Seiten zu finden. Zu den grundlegenden Änderungen der Benutzeroberfläche gehören:
Trennung von Feld- und Labdaten löschen
Wir haben die Benutzeroberfläche so geändert, dass Felddaten deutlich von Labordaten getrennt werden. Die Labels für „Felddaten“ und „Labdaten“ wurden durch Text ersetzt, der angibt, was die Daten bedeuten und wie sie helfen können. Außerdem haben wir den Bereich „Felddaten“ an den Anfang gebracht. Die herkömmliche Lab-basierte Leistungsbewertung, die derzeit oben angezeigt wird, wurde in den Abschnitt mit den Lab-Daten verschoben, um Unklarheiten bezüglich der Herkunft der Punktzahl zu vermeiden.
Core Web Vitals-Bewertung
Das Ergebnis der Core Web Vitals-Bewertung, das zuvor in Field Data als einzelnes Wort „bestanden“ oder „fehlgeschlagen“ angezeigt wurde, hebt sich jetzt als separater Unterabschnitt mit einem eigenen Symbol ab.
Der Bewertungsprozess für Core Web Vitals ändert sich nicht. Die Core Web Vitals-Messwerte FID, LCP und CLS können entweder auf Seiten- oder Ursprungsebene zusammengefasst werden. Bei Aggregationen mit genügend Daten für alle drei Messwerte besteht die Aggregation den Core Web Vitals-Test, wenn das 75. Perzentil aller drei Messwerte „Gut“ ist. Andernfalls besteht die Aggregation die Prüfung nicht. Wenn für die Aggregation nicht genügend FID-Daten vorhanden sind, besteht die Bewertung, wenn sowohl das 75. Perzentil von LCP als auch CLS gut ist. Wenn für den LCP oder CLS nicht genügend Daten vorhanden sind, kann die Aggregation auf Seiten- oder Ursprungsebene nicht bewertet werden.
Labels für die Leistung auf Mobilgeräten und Computern
Wir haben das Navigationsmenü oben geändert und Links für Mobilgeräte und Computer zentral auf der Berichtsseite eingefügt. Die Links sind jetzt gut sichtbar und geben deutlich die Plattform an, für die die Daten angezeigt werden. Dies trug auch dazu bei, die Navigationsleiste übersichtlicher zu gestalten.
Ursprung – Zusammenfassung
Die Zusammenfassung des Ursprungs mit dem aggregierten CrUX-Wert für alle Seiten des Ursprungs wird derzeit angezeigt, wenn auf ein Kästchen geklickt wird. Wir haben diesen Berichtsabschnitt auf den neuen Tab „Origin“ unter „Felddaten“ verschoben.
Zusätzliche hilfreiche Informationen
Der Bericht enthält jetzt am unteren Rand jedes Felds einen neuen Abschnitt mit Informationen und eine Lab-Karte mit den folgenden Details zu den Stichprobendaten:
- Zeitraum der Datenerhebung
- Besuchsdauer
- Geräte
- Netzwerkverbindungen
- Stichprobengröße
- Chrome-Versionen
Diese Informationen sollen die Unterscheidung zwischen Labor- und Felddaten verbessern und Nutzern helfen, die vorher unsicher waren, wie sich die beiden Datenquellen (Lab und Feld) unterscheiden können.
Ansicht maximieren
Mit der neuen Funktion „Ansicht maximieren“ wird dem Bereich „Felddaten“ eine Aufschlüsselungsfunktion hinzugefügt. So können Sie detaillierte Details zu den Core Web Vitals-Messwerten aufrufen.
Bild der Seite
Wir haben das Bild der geladenen Seite entfernt, die direkt neben den Felddaten angezeigt wird. Das Bild und die Miniaturansichten der Seite mit der Ladesequenz sind im Abschnitt mit den Labdaten verfügbar.
Die aktuelle Produktdokumentation finden Sie unter https://developers.google.com/speed/docs/insights/..
Aktualisierung von web.dev/measure
Um Inkonsistenzen zwischen den verschiedenen Tools in unserer Leistungs-Toolbox zu vermeiden, aktualisieren wir auch web.dev/measure so, dass es direkt von der PageSpeed Insights API unterstützt wird.
Früher haben Entwickler Berichte sowohl über das PSI-Tool als auch über /measure erstellt und sahen unterschiedliche Lighthouse-Zahlen. Einer der Hauptgründe für die Unterschiede war, dass /measure alle Tests aus den USA stammte (da es zuvor ein US-basiertes Cloud-Back-End hatte).
Durch den direkten Aufruf von /measure und der PSI-UI erhalten Entwickler bei der Verwendung von PSI und /measure eine einheitlichere Nutzung. Außerdem haben wir einige Optimierungen für /measure in Abhängigkeit davon vorgenommen, wie Nutzer das Tool verwenden. Das bedeutet, dass die Anmeldung für /measure nicht mehr möglich ist. Die am häufigsten verwendete Funktion – es werden jedoch mehrere Kategorien angezeigt, kannst du weiterhin verwenden.
PSI heute
Gehen wir einen Schritt zurück und sehen uns an, was der aktuelle PageSpeed Insights-Bericht zu bieten hat. Der PSI-Bericht enthält Leistungsdaten für Mobilgeräte und Computer auf separaten Tabs. Er enthält Vorschläge zur Verbesserung einer Seite. Die Hauptkomponenten des Berichts sind ähnlich und umfassen Folgendes:
Leistungspunktzahl:Die Leistungspunktzahl wird oben im PSI-Bericht angezeigt und fasst die Gesamtleistung der Seite zusammen. Dieser Wert wird ermittelt, indem Labdaten zur Seite mit Lighthouse erfasst und analysiert werden. Ein Wert von 90 oder mehr gilt als gut, 50–90 muss verbessert werden und unter 50 gilt als schlecht.
Felddaten:Felddaten, die aus dem CrUX-Berichts-Dataset stammen, bieten Einblicke in die reale Nutzererfahrung. Die Daten umfassen Messwerte wie First Contentful Paint (FCP) und messen Core Web Vitals (First Input Delay (FID), Largest Contentful Paint (LCP)) und Cumulative Layout Shift (CLS). Zusammen mit den Messwerten können Sie auch die Verteilung der Seiten sehen, auf denen der Wert eines bestimmten Messwerts „Gut“, „Optimierung erforderlich“ oder „Langsam“ war. Dies wird durch grüne, gelbe bzw. rote Balken angezeigt. Die Verteilung und die Punktzahlen werden basierend auf den Seitenladevorgängen für Nutzer im CrUX-Dataset angezeigt. Die Bewertungen werden für die letzten 28 Tage berechnet und sind nicht für neue Seiten verfügbar, für die möglicherweise nicht genügend echte Nutzerdaten verfügbar sind.
Zusammenfassung des Ursprungs:Nutzer können das Kästchen Ursprungsübersicht anzeigen anklicken, um die aggregierte Punktzahl für die Messwerte für alle Seiten aufzurufen, die in den letzten 28 Tagen von demselben Ursprung bereitgestellt wurden.
Labdaten:Die mit Lighthouse berechnete Bewertung der Lab-Leistung hilft beim Debuggen von Leistungsproblemen, da sie in einer kontrollierten Umgebung erfasst werden. Der Bericht zeigt die Leistung anhand von Messwerten wie First Contentful Paint, Largest Contentful Paint, Speed Index, Cumulative Layout Shift, Time to Interactive und Total Blocking Time. Jeder Messwert wird bewertet und mit einem Symbol gekennzeichnet, das „Gut“, „Optimierung erforderlich“ oder „Schlecht“ angibt. Dieser Abschnitt bietet einen guten Hinweis auf Leistungsengpässe vor der Veröffentlichung und kann bei der Diagnose von Problemen helfen, aber es werden möglicherweise keine realen Probleme erfasst.
Audits:In diesem Abschnitt werden alle von Lighthouse durchgeführten Prüfungen aufgeführt. Außerdem werden die bestandenen Prüfungen, Verbesserungsmöglichkeiten und zusätzliche Diagnoseinformationen aufgeführt.
Herausforderungen beim aktuellen PSI-Design
Wie im Screenshot oben zu sehen, sind die verschiedenen Datenpunkte aus Labor- und Felddaten nicht klar isoliert und Entwickler, die mit PSI noch nicht vertraut sind, verstehen den Kontext der Daten und die nächsten Schritte möglicherweise nicht so einfach. Diese Verwirrung hat zu vielen Blogposts zum Entschlüsseln des PSI-Berichts geführt.
Mit der Neugestaltung hoffen wir, Entwicklern die Interpretation des Berichts zu erleichtern, sodass sie schnell vom Erstellen des PSI-Berichts zu der Umsetzung der darin enthaltenen Erkenntnisse übergehen können.
Weitere Informationen
Weitere Informationen zu Updates bei Performance-Tools findest du in der Keynote zum Chrome Dev Summit 2021. Wir halten dich über das Veröffentlichungsdatum von PSI und die Änderungen an web.dev/measure auf dem Laufenden.
Vielen Dank an Milica Mihajlija, Philip Walton, Brendan Kenny und Ewa Gasperowicz für ihr Feedback zu diesem Artikel.