Auf dem Tab Rendering finden Sie eine Übersicht über leistungsbezogene Optionen, mit denen Sie Leistungsprobleme beim Rendern erkennen können.
Neu gestrichene Bereiche mit Farbblitz hervorheben
Wenn diese Option aktiviert ist, blinkt das Chrome-Fenster grün, wenn die Neuzeichnung erfolgt.
So rufen Sie Bereiche auf, die neu gestrichen werden:
- Öffnen Sie in dieser Demo den Tab Rendering und setzen Sie ein Häkchen bei Paint flashing (Farbflackern).
- 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 die Ursache genauer untersuchen.
Layout Shift-Bereiche hervorheben
Layoutänderungen führen zu unerwarteten Neumalereien und können nicht nur ärgerlich, sondern auch schädlich sein.
So rufen Sie den Ort und die Zeit der Layoutänderungen auf einer Seite auf:
Öffnen Sie den Tab Rendering und klicken Sie das Kästchen Layout Shift-Bereiche an.
Aktualisieren Sie die Seite. Bereiche mit Layout-Shift werden kurzzeitig lila hervorgehoben.
Ebenen und Kacheln mit Ebenengrenzen anzeigen
Mit Ebenenränder können Sie sich ein Overlay mit Ebenenrändern und Kacheln oben auf der Seite anzeigen lassen.
So aktivieren Sie Ebenenränder:
- Öffnen Sie den Tab Rendering und klicken Sie das Kästchen Ebenenränder an.
- Ebenengrenzen sind orange und oliv und Kacheln sind cyan.
Eine Erläuterung der Farbcodierung finden Sie in den Kommentaren unter debug_colors.cc.
Mit Frame-Rendering-Statistiken Frames 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-Statistiken:
- Öffnen Sie den Tab Rendering und aktivieren Sie das Kästchen Frame-Rendering-Statistiken.
- Sehen Sie sich die Statistiken rechts oben auf der Seite an.
Im Overlay Frame-Rendering-Statistiken werden folgende Informationen angezeigt:
- Echtzeit-Schätzung der Frames pro Sekunde während der Ausführung der Seite.
- Frame-Zeitachse als Plot mit drei Frame-Typen:
- Erfolgreich gerenderte Frames (blaue Linien)
- Teilweise angezeigte Frames (gelbe Linien)
- Ausgelassene Frames (rote Linien)
- Der Status des GPU-Rasters: „An“ oder „Aus“. Weitere Informationen finden Sie unter GPU-Rasterisierung erhalten.
- GPU-Arbeitsspeichernutzung: Die Anzahl der verwendeten und maximalen MB Arbeitsspeicher.
Probleme mit der Scrollleistung identifizieren
Mit Leistungsprobleme beim Scrollen können Sie Elemente auf der Seite identifizieren, die Ereignis-Listener für das Scrollen haben, die die Leistung der Seite beeinträchtigen können.
So rufen Sie die potenziell problematischen Elemente auf:
- Öffnen Sie den Tab Rendering und klicken Sie das Kästchen Probleme mit der Scrollleistung an.
- Sehen Sie sich die hervorgehobenen Elemente an, die potenziell problematisch sind.
Core Web Vitals ansehen
Web Vitals ist eine Initiative von Google, mit der einheitliche Leitlinien für die Qualitätskriterien angeboten werden, die entscheidend für eine optimale Nutzererfahrung beim Surfen im Internet 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): Hiermit 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 von 200 Millisekunden oder weniger haben.
- Cumulative Layout Shift (CLS): Hiermit wird die visuelle Stabilität gemessen. Für eine gute Nutzerfreundlichkeit sollte der CLS der Seiten 0, 1 oder weniger betragen.
Mit der Chrome-Erweiterung für Web Vitals können Sie die Core Web Vitals-Werte Ihrer Seite aufrufen.