Die Web Vitals-Erweiterung enthält jetzt mehr Informationen zur Fehlerbehebung, mit denen Sie die Ursachen von Core Web Vitals-Problemen leichter ermitteln können.
Veröffentlicht: 4. Mai 2023
Die Web Vitals-Erweiterung bietet einfachen Zugriff auf Diagnoseinformationen zu Core Web Vitals, mit denen Entwickler Core Web Vitals-Probleme messen und beheben können. Es ergänzt die anderen Tools, die das Chrome-Team zur Verfügung stellt, um Entwicklern bei der Verbesserung der Nutzerfreundlichkeit ihrer Websites zu helfen.
Wir haben die Erweiterung aktualisiert, um Entwicklern zusätzliche Informationen zur Fehlerbehebung zur Verfügung zu stellen. So können sie Leistungsprobleme leichter nachvollziehen und beheben.
Informationen zur Fehlerbehebung in der Konsole anzeigen
Die Web Vitals-Erweiterung verfügt seit einiger Zeit über eine Option zur Fehlerbehebung in der Konsolenprotokollierung. Es kann im Bildschirm "Optionen" aktiviert werden:
Vor diesem letzten Upgrade wurden die Ausgaben von web-vitals library (die der Erweiterung zugrunde liegt) in einem JSON-Objekt protokolliert:
Dieses Objekt könnte dann erweitert werden, um alle Details anzuzeigen, und Elemente wie das LCP-Bild könnten mit der Maus darüber bewegt werden, um sie im Hauptsteuerfeld hervorzuheben:
Das war hilfreich, aber das Ausgabeformat war nicht besonders nutzerfreundlich. Wir dachten, wir könnten den Entwicklern eine bessere Erfahrung bieten. Deshalb haben wir die Erweiterung verbessert, damit die wichtigsten Informationen besser sichtbar sind. Das vollständige Objekt wird aber weiterhin angezeigt, wenn Sie mehr Details benötigen.
Neue Informationen zur Fehlerbehebung für jeden Messwert
In der neuen Version haben wir neue Informationen zur Fehlerbehebung hinzugefügt, die in einem besser lesbaren Format vorliegen, damit du Probleme leichter erkennen und beheben kannst. Für jeden Messwert werden unterschiedliche Informationen bereitgestellt, da die Messwerte unterschiedlich sind.
LCP-Debug-Informationen
Für den Largest Contentful Paint (LCP) werden sowohl das Element als auch die Aufschlüsselung der vier Phasen angezeigt, die im Leitfaden zur Optimierung des LCP beschrieben werden:
Die LCP-Zeit (2.876 Millisekunden oder ca. 2,9 Sekunden) wird gelb hervorgehoben, wie sie in der Kategorie „Optimierung erforderlich“ angegeben ist.
In diesem Beispiel ist die Resource load time die längste Zeit. Um die LCP-Zeit zu verbessern, sollten Sie diese optimieren. Vielleicht sollten Sie sie nicht auf einer separaten Domain hosten oder kleinere Bilder oder effizientere Formate verwenden. In diesem Fall wurde die Website künstlich verlangsamt, um die Ausgabe zu demonstrieren. web.dev ist eine schnelle Website 😀
Sie können auch den Mauszeiger auf das Element bewegen, um das Bild hervorzuheben:
Sie können das Element auch im Bereich „Elemente“ anzeigen lassen, indem Sie mit der rechten Maustaste darauf klicken.
Hier ist das LCP-Element ein Bild. Wenn Sie den Mauszeiger in der Konsole rechts darauf bewegen, wird das Element auch auf der Website links hervorgehoben.
CLS-Debug-Informationen
Verschiebungen, die zum Cumulative Layout Shift (CLS) beitragen, werden jetzt ebenfalls aufgeführt. Wenn Sie den Mauszeiger darauf bewegen, wird das entsprechende Element hervorgehoben:
Der Screenshot oben zeigt zwei Verschiebungen. Das erste besteht aus zwei Elementen (wenn das Bannerbild geladen und der Inhalt darunter heruntergeladen wird) und das zweite aus vier Elementen (wenn die dynamische Anzeige geladen wird und der größte Teil der Seite nach unten verschoben wird).
In diesem Screenshot in der rechten Konsole befindet sich der Mauszeiger auf dem Element h2. Das Element auf der linken Seite wird dadurch hervorgehoben.
FID-Debug-Informationen
Für First Input Delay (FID) werden das betroffene Element und der Interaktionstyp zusammen mit dem vollständigen JSON-Objekt wie gewohnt angezeigt. Bewegen Sie einfach den Mauszeiger darauf, um es auf der Seite hervorzuheben.
INP-Debug-Informationen
Für Interaction to Next Paint (INP) wurden zwei neue Logs hinzugefügt:
- INP - die längste Interaktion
- Interaktionen – alle Interaktionen
INP-Messwert
Zuerst wird der INP-Messwert hervorgehoben, wenn er sich ändert:
Ähnlich wie bei LCP wird die INP-Zeit in drei Phasen unterteilt:
- Eingabeverzögerung
- Verarbeitungsdauer
- Verzögerung bei der Präsentation
So können Sie feststellen, ob das Ereignis aufgrund anderer Ereignisse verzögert wurde (Eingabeverzögerung), ob der Ereignis-Handler selbst aufgrund Ihres Codes langsam war (Verarbeitungsdauer), ob die Renderverzögerung nach der Verarbeitung der Grund war (Darstellungsverzögerung) oder ob eine Kombination aus zwei oder mehr dieser Faktoren der Grund war.
Interaktionen
INP kann langsam sein, da frühere Interaktionen den Hauptthread blockieren und daher eine hohe Eingabeverzögerung verursachen. Aus diesem Grund listen wir alle Interaktionen in einem ähnlichen Format wie die INP-Protokollierung auf:
Auf diese Weise können Sie eine Website live verfolgen, indem Sie mit ihr interagieren und in der Konsole sehen, welche Interaktionen in welchen Kombinationen wahrscheinlich ein INP-Problem verursachen.
So können Sie auch mehrere langsame Interaktionen identifizieren, anstatt nur die größte INP-Interaktion. So vermeiden Sie, dass Sie sich bei der Verbesserung der Reaktionsfähigkeit im Kreis drehen.
Konsolenlogs filtern
Diese zusätzlichen Informationen sind zwar nützlich, können aber ablenken, wenn Sie andere Entwicklungen vornehmen, die nichts mit Core Web Vitals zu tun haben, oder sich gerade nur für einen bestimmten Core Web Vital interessieren.
Mit den Filteroptionen in der Console in den DevTools können Sie einige oder alle Meldungen herausfiltern:
- Wenn Sie alle Erweiterungsnachrichten entfernen möchten, können Sie diese Option entweder in den Optionen deaktivieren oder den Filter
-Extensionverwenden. - Wenn Sie sich nur den LCP ansehen möchten, können Sie den Filter
Web Vitals Extension LCPverwenden. - Wenn Sie nur INP und Interaktionen sehen möchten, können Sie den Filter
Web Vitals Extension -LCP -CLS -FIDverwenden.
Wir versuchen, die Anzahl der Optionen für diese Erweiterung so gering wie möglich zu halten. Solltest du jedoch Optionen für diese Erweiterung bevorzugen, kannst du ein GitHub-Problem melden, falls die Filterung mit den Entwicklertools nicht ausreicht.
Fazit
Wir hoffen, dass Sie die neuen Optionen zur Fehlerbehebung in der neuesten Version der Erweiterung hilfreich finden und dass sie es Ihnen erleichtern, Core Web Vitals-Probleme zu erkennen und zu beheben, um die Nutzerfreundlichkeit Ihrer Website zu verbessern.
Denken Sie daran, dass Ihre Erfahrungen auf Ihrem Entwicklercomputer möglicherweise nicht repräsentativ für die Erfahrungen Ihrer echten Nutzer sind. In unserem vorherigen Blogpost wurde beschrieben, wie Sie die CrUX-Felddaten für Ihre Website in der Erweiterung aufrufen können, um einen Eindruck davon zu bekommen, wie gut Ihre Website auf die Nutzer abgestimmt ist.
Wir würden uns über Feedback zu diesen Verbesserungen oder andere Vorschläge in unserem GitHub-Issue-Tracker freuen.