Auf dem Tab Rendering finden Sie eine Übersicht über leistungsbezogene Optionen, mit denen Sie Leistungsprobleme beim Rendering erkennen können.
Neu gestrichene Bereiche mit Farbblitz hervorheben
Wenn diese Option aktiviert ist, blinkt der Chrome-Bildschirm jedes Mal grün, wenn neu gemalt wird.
So zeigen Sie Bereiche an, die neu gezeichnet werden:
- Öffnen Sie in dieser Demo den Tab Rendering und setzen Sie ein Häkchen bei Paint flashing (Farbblitz).
- Sehen Sie sich die Neulackierung an, die grün hervorgehoben ist.
Wenn auf einer anderen Seite der gesamte Bildschirm grün blinkt oder Bereiche des Bildschirms, die Ihrer Meinung nach nicht gemalt werden sollten, sollten Sie weitere Untersuchungen in Betracht ziehen.
Layout Shift-Bereiche hervorheben
Layout Shifts verursachen unerwartete Aktualisierungsvorgänge und können nicht nur lästig, sondern auch schädlich sein.
So zeigen Sie die Position und den Zeitpunkt der Layout Shifts auf einer Seite an:
Öffnen Sie den Tab Rendering und klicken Sie das Kästchen Layout Shift-Bereiche an.
Aktualisieren Sie die Seite. Bereiche des Layout Shifts sind kurz lila hervorgehoben.
Ebenen und Kacheln mit Ebenengrenzen ansehen
Mit Ebenenränder können Sie sich ein Overlay mit Ebenenrändern und Kacheln oben auf der Seite anzeigen lassen.
So aktivieren Sie Ebenengrenzen:
- Öffnen Sie den Tab Rendering und klicken Sie das Kästchen Rahmenlinien der Ebene an.
- Beobachten Sie die Ebenenränder in Orange und Oliv und die Kacheln in Cyan.
Eine Erklärung der Farbcodierungen finden Sie in den Kommentaren unter debug_colors.cc.
Mit Frame-Rendering-Statistiken Bilder pro Sekunde in Echtzeit ansehen
Die Statistiken zum Frame-Rendering sind ein Overlay, das oben rechts im Viewport angezeigt wird.
So öffnen Sie die Frame-Rendering-Statistik:
- Öffnen Sie den Tab Rendering und aktivieren Sie das Kontrollkästchen Frame-Rendering-Statistik.
- Sehen Sie sich die Statistiken rechts oben auf der Seite an.
Das Overlay Frame-Rendering-Statistik zeigt Folgendes an:
- Echtzeitschätzung der Bilder pro Sekunde während der Seitenausführung.
- Frame-Zeitachse als Plot mit drei Frame-Typen:
- Erfolgreich gerenderte Frames (blaue Linien)
- Teilweise angezeigte Frames (gelbe Linien)
- Abgesetzte Frames (rote Linien)
- Der Status des GPU-Rasters: „An“ oder „Aus“. Weitere Informationen finden Sie unter GPU-Rasterung.
- GPU-Arbeitsspeichernutzung: die Anzahl des verwendeten und maximalen MB-Arbeitsspeichers.
Probleme mit der Scrollleistung ermitteln
Verwenden Sie Probleme mit der Scroll-Leistung, um Elemente der Seite mit Ereignis-Listenern im Zusammenhang mit dem Scrollen zu identifizieren, die die Leistung der Seite beeinträchtigen können.
So rufen Sie die potenziell problematischen Elemente auf:
- Öffnen Sie den Tab Rendering und aktivieren Sie Probleme mit der Scrollleistung.
- Sehen Sie sich die hervorgehobenen potenziell problematischen Elemente an.
Core Web Vitals ansehen
Web Vitals ist eine Initiative von Google mit einheitlichen Leitlinien für die Qualität von Signalen, die für eine positive Nutzererfahrung im Web entscheidend sind.
Die Core Web Vitals sind Teil der Web Vitals, die für alle Webseiten gelten. Jeder der Core Web Vitals steht für einen bestimmten Aspekt der Nutzerfreundlichkeit, ist im praktischen Einsatz messbar und spiegelt die tatsächliche Nutzererfahrung eines wichtigen nutzerorientierten Ergebnisses wider. Die Core Web Vitals sind:
- Largest Contentful Paint (LCP): Damit wird die Ladeleistung gemessen. Für eine gute Nutzerfreundlichkeit sollte der LCP innerhalb von 2,5 Sekunden nach Beginn des Seitenaufbaus erreicht werden.
- Interaction to Next Paint (INP): Hiermit wird die Interaktivität gemessen. Für eine gute Nutzerfreundlichkeit sollten Seiten einen INP-Wert von 200 Millisekunden oder weniger haben.
- Cumulative Layout Shift (CLS): misst die visuelle Stabilität. Aus Gründen der Nutzerfreundlichkeit sollten Seiten einen CLS-Wert von 0.1. oder weniger haben.
Mit der Chrome-Erweiterung für Web Vitals können Sie die Core Web Vitals-Werte Ihrer Seite aufrufen.