In der Übersicht zu leistungsbezogenen Optionen auf dem Tab Rendering finden Sie Informationen zu Problemen mit der Renderingleistung.
Übermalte Bereiche mit Farbblitzen hervorheben
Wenn diese Option aktiviert ist, leuchtet Chrome den Bildschirm bei jeder Neuaktualisierung grün auf.
So zeigen Sie Bereiche an, die neu gestrichen werden:
- Öffne den Tab Rendering in dieser Demo und aktiviere Farbe blinken.
- Beobachten Sie die grün hervorgehobene Übermalung.
Wenn auf einer anderen Seite der gesamte Bildschirm grün blinkt oder Bereiche des Bildschirms, die Ihrer Meinung nach nicht gezeichnet werden sollten, sollten Sie weitere Nachforschungen anstellen.
Layout Shift-Bereiche hervorheben
Layoutverschiebungen führen zu unerwarteten Darstellungsaktualisierungen und können nicht nur lästig, sondern auch schädlich sein.
So zeigen Sie die Position und das Timing der Layoutverschiebungen auf einer Seite an:
Öffnen Sie den Tab Rendering und aktivieren Sie Layout Shift Regionen.
Aktualisieren Sie die Seite. Bereiche des Layout Shifts sind kurz lila hervorgehoben.
Ebenen und Kacheln mit Ebenenrahmen anzeigen
Mit der Option Rahmen der Ebene (Layer Borders) können Sie ein Overlay mit Ebenenrahmen und Kacheln über der Seite anzeigen.
So aktivieren Sie Ebenenrahmen:
- Öffnen Sie den Tab Rendering und aktivieren Sie Rahmen der Ebene (Layer Borders).
- Sie sehen die Ebenengrenzen in Orange und Oliv sowie die Kacheln in Cyan.
In den Kommentaren unter debug_colors.cc finden Sie eine Erläuterung der Farbcodierungen.
Mit Frame-Rendering-Statistiken kannst du dir Bilder pro Sekunde in Echtzeit ansehen
Die Statistik für das Frame-Rendering ist ein Overlay, das oben rechts im Darstellungsbereich angezeigt wird.
So öffnen Sie die Frame-Rendering-Statistiken:
- Öffnen Sie den Tab Rendering und klicken Sie das Kästchen Frame-Rendering-Statistiken an.
- Sehen Sie sich die Statistiken oben rechts auf der Seite an.
Das Overlay Frame-Renderingstatistiken enthält Folgendes:
- Echtzeitschätzung von Bildern pro Sekunde beim Ausführen der Seite.
- Frame-Zeitachse als Diagramm mit drei Frame-Typen:
- Erfolgreich gerenderte Frames (blaue Linien)
- Teilweise dargestellte Frames (gelbe Linien)
- Verworfene Frames (rote Linien)
- Der Status des GPU-Rasters: ein oder aus. Weitere Informationen finden Sie unter GPU-Rasterung nutzen.
- GPU-Arbeitsspeichernutzung: die Anzahl der verwendeten und maximalen MB des Arbeitsspeichers.
Probleme mit der Scrollleistung identifizieren
Unter Probleme mit der Scrollleistung können Sie Seitenelemente mit Ereignis-Listenern im Zusammenhang mit Scrollen identifizieren, die möglicherweise die Leistung der Seite beeinträchtigen.
So rufen Sie die potenziell problematischen Elemente auf:
- Öffnen Sie den Tab Rendering und aktivieren Sie Leistungsprobleme beim Scrollen.
- Beobachten Sie die hervorgehobenen potenziell problematischen Elemente.
Core Web Vitals ansehen
Web Vitals ist eine Initiative von Google mit dem Ziel, einheitliche Informationen zu Qualitätssignalen bereitzustellen, die für eine optimale Nutzererfahrung im Web unerlässlich sind.
Core Web Vitals ist die Teilmenge der Web Vitals, die für alle Webseiten gilt. Jeder der Core Web Vitals repräsentiert einen bestimmten Aspekt der Nutzererfahrung, ist in der Praxis messbar und spiegelt die reale Erfahrung eines kritischen nutzerorientierten Ergebnisses wider. Zu den Core Web Vitals gehören:
- Largest Contentful Paint (LCP): Misst die Ladeleistung. Für eine gute Nutzerfreundlichkeit sollte der LCP innerhalb von 2, 5 Sekunden nach dem ersten Laden der Seite stattfinden.
- Interaction to Next Paint (INP): Misst die Interaktivität. Für eine gute Nutzerfreundlichkeit sollten Seiten eine INP von 200 Millisekunden oder weniger haben.
- Cumulative Layout Shift (CLS): Misst die visuelle Stabilität. Für eine gute Nutzerfreundlichkeit sollten Seiten eine CLS von 0.1. oder weniger haben.
Mit der Web Vitals-Chrome-Erweiterung können Sie sich die Core Web Vitals-Werte Ihrer Seite ansehen.