Im Bereich Leistungsstatistiken erhalten Sie umsetzbare und anwendungsfallbezogene Informationen zur Leistung Ihrer Website.
Warum ein neuer Bereich?
Der neue Bereich Leistungsstatistiken ist ein Test, mit dem die folgenden drei Probleme von Entwicklern behoben werden sollen, die mit dem bestehenden Bereich Leistung arbeiten:
- Zu viele Informationen. Mit der neu gestalteten Benutzeroberfläche werden die Daten im Bereich Leistungsstatistiken optimiert und nur relevante Informationen angezeigt.
- Schwer zwischen Anwendungsfällen zu unterscheiden: Im Bereich Leistungsstatistiken werden anwendungsfallorientierte Analysen unterstützt. Aktuell werden nur Anwendungsfälle unterstützt, die den Seitenaufbau betreffen. Weitere Funktionen folgen basierend auf deinem Feedback, z. B. Interaktivität.
- Erfordert umfassendes Fachwissen zur effektiven Nutzung von Browsern. Im Bereich Leistungsstatistiken werden die wichtigsten Statistiken im Bereich Statistiken zusammen mit umsetzbarem Feedback zur Behebung von Problemen hervorgehoben.
Einleitung
In dieser Anleitung erfahren Sie, wie Sie die Leistung beim Seitenaufbau mithilfe des Bereichs Leistungsdaten messen und auswerten. Lesen Sie weiter oder sehen Sie sich die Videoversion dieser Anleitung an.
Bereich „Leistungsstatistiken“ öffnen
- Öffnen Sie die Entwicklertools.
Klicken Sie auf Weitere Optionen > Weitere Tools > Leistungsdaten.
Alternativ können Sie das Befehlsmenü verwenden, um den Bereich Leistungsstatistiken zu öffnen.
Rekordleistung
Im Bereich Leistungsstatistiken kann die allgemeine Leistung und die Leistung nach Anwendungsfällen (z. B. Seitenaufbau) erfasst werden.
- Öffnen Sie diese Demoseite in einem neuen Tab und öffnen Sie dort den Bereich „Leistungsstatistiken“.
Sie können das Netzwerk und die CPU während der Aufzeichnung drosseln. Klicken Sie für diese Anleitung das Kästchen Cache deaktivieren an und setzen Sie CPU im Drop-down-Menü auf 4x verlangsamen:
Klicken Sie auf Seitenaufbau messen. Die Entwicklertools zeichnet Leistungsmesswerte auf, während die Seite neu geladen wird, und stoppt die Aufzeichnung dann automatisch einige Sekunden nach Abschluss des Seitenaufbaus.
Aufführung noch einmal abspielen
Mit den Steuerelementen unten kannst du die Wiedergabe der Aufnahme steuern.
Hier ist ein Beispiel dafür.
- Klicken Sie auf Wiedergeben, um die Aufnahme abzuspielen.
- Klicke auf Pausieren, um die Wiedergabe zu pausieren.
- Über das Drop-down-Menü kannst du die Wiedergabegeschwindigkeit anpassen.
- Klicken Sie auf Visuelle Vorschau ein-/ausblenden, um die visuelle Vorschau ein- oder auszublenden.
Leistungsaufzeichnung aufrufen
In den Entwicklertools wird automatisch herausgezoomt, um die vollständige Aufnahmezeitachse anzuzeigen. Sie können mit der Zoomfunktion in der Aufnahme navigieren und die Zeitachse verschieben.
Mit den entsprechenden Navigationsschaltflächen können Sie die Zeitachse nach links und rechts verschieben und zoomen:
- Klicken Sie auf die Zeitachse, um den Abspielkopf zu bewegen und einen bestimmten Frame zu sehen.
- Klicken Sie zum Heranzoomen unten auf die Steuerelemente Heranzoomen und Herauszoomen. In diesem Fall wird basierend auf dem Abspielkopf gezoomt.
- Ziehen Sie die horizontale Bildlaufleiste unten, um die Zeitachse nach links und rechts zu verschieben.
Alternativ können Sie auch Tastenkombinationen verwenden. Klicken Sie auf die Schaltfläche , um die Tastenkombinationen aufzurufen.
Bei Verwendung von Tastaturkürzeln zoomen Sie basierend auf dem Mauszeiger.
Leistungsstatistiken ansehen
Eine Liste der Leistungsstatistiken wird im Bereich Statistiken angezeigt. Potenzielle Leistungsprobleme ermitteln und beheben
Bewegen Sie den Mauszeiger auf die einzelnen Statistiken, um sie in den Haupt-Tracks hervorzuheben.
Klicken Sie auf eine Statistik, z. B. die Anfrage zum Blockieren des Renderings, um sie im Bereich Details zu öffnen. Weitere Informationen zum Problem finden Sie unter anderem in den Abschnitten Datei, Problem und Problembehebung.
Web Vitals-Leistungsmesswerte 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.
Sie können sich diese Messwerte in der Zeitachse und im Bereich Statistiken ansehen.
Bewegen Sie den Mauszeiger auf der Zeitachse auf die Statistiken, um weitere Informationen zu den Messwerten zu erhalten.
Verzögerungen beim Largest Contentful Paint erkennen
Der Largest Contentful Paint (LCP) ist einer der Core Web Vitals-Messwerte. Sie erfasst die Renderingzeit des größten Bilds oder Textblocks, das im Darstellungsbereich sichtbar war, im Verhältnis zu dem Zeitpunkt, zu dem die Seite zum ersten Mal geladen wurde.
Ein guter LCP-Wert liegt bei 2,5 Sekunden oder weniger.
Wenn das Rendern des Large Contentful Paint auf Ihrer Seite länger dauert, wird auf der Zeitachse das LCP-Logo mit einem gelben Quadrat oder einem roten Dreieck angezeigt.
Wenn Sie den Bereich Details öffnen möchten, klicken Sie auf der Zeitachse oder rechts im Bereich Statistiken auf das LCP-Logo. Dort finden Sie mögliche Ursachen für Verzögerungen sowie Vorschläge zu deren Behebung.
In diesem Beispiel blockiert eine Anfrage das Rendering und Sie können kritische Stile inline anwenden, um das Problem zu beheben. Weitere Informationen finden Sie unter Ressourcen entfernen, die das Rendering blockieren.
Scrollen Sie nach unten zum Bereich Details > Aufschlüsselung der Timings, um die Teilbereiche der LCP-Renderingzeit anzusehen.
Die LCP-Renderingzeit besteht aus den folgenden Unterabschnitten:
| LCP-Teilabschnitt | Beschreibung |
|---|---|
| Zeit bis zum ersten Byte (TTFB) | Der Zeitraum ab dem Start des Ladens der Seite durch den Nutzer bis zu dem Zeitpunkt, an dem der Browser das erste Byte der HTML-Dokumentantwort empfängt. |
| Verzögerung beim Laden von Ressourcen | Die Abweichung zwischen der TTFB und dem Zeitpunkt, zu dem der Browser mit dem Laden der LCP-Ressource beginnt. |
| Ladezeit der Ressource | Die Zeit, die zum Laden der LCP-Ressource selbst benötigt wird. |
| Verzögerung beim Rendern von Elementen | Die Differenz zwischen dem Abschluss des Ladevorgangs der LCP-Ressource und dem vollständigen Rendern des LCP-Elements. |
Wenn ein LCP-Element zum Rendern kein Ressourcenladevorgang erfordert, werden die Verzögerung und Zeit beim Laden der Ressource weggelassen. Beispiel: Das Element ist ein Textknoten, der mit einer Systemschrift gerendert wird.
Aktivität zu Layout Shifts ansehen
Im Track Layout Shifts können Sie sich die Aktivität zu Layout Shifts ansehen.
Layout Shifts werden in einem Sitzungsfenster gruppiert. Im Beispiel gibt es zwei Sitzungsfenster. Zwischen den Sitzungsfenstern gibt es Lücken.
Cumulative Layout Shifts (CLS) ist einer der Core Web Vitals-Messwerte. Verwenden Sie den Track Layout Shifts, um potenzielle Probleme und Ursachen von Layout Shifts zu identifizieren.
Beginnen Sie bei der Verbesserung des CLS-Messwerts immer mit dem größten Sitzungsfenster. In unserem Beispiel ist Sitzungsfenster 1 das größte Fenster, basierend auf der Hintergrundfarbe und -ebene.
Klicken Sie auf einen Screenshot, um sich die Details des Layout Shifts anzusehen, potenzielle Ursachen und betroffene Elemente zu identifizieren.
In unserem Beispiel sind dies Medien ohne große Größe. Informationen zur Behebung dieses Problems finden Sie unter Cumulative Layout Shift optimieren.
Wert für Layout Shifts verstehen
Informationen zur Berechnung der Bewertungen finden Sie im Bereich Fenster im Bereich Details. Unter Fenster sehen Sie, zu welchem Sitzungsfenster der aktuelle Layout Shift gehört.
Wenn die gesamte Seite verschoben wird, beträgt die maximale Punktzahl für jeden Layout Shift 1. In unserem Beispiel erhielt der erste Layout Shift 0.15. Der zweite Layout Shift erzielte 0.041.
Die Gesamtpunktzahl für dieses Sitzungsfenster beträgt 0.19. Basierend auf dem CLS-Grenzwert sollte sie verbessert werden. Auch die Hintergrundfarbe des Sitzungsfensters ist identisch.
Das Hintergrunddiagramm des Sitzungsfensters nimmt im Laufe der Zeit zu. Die kumulative Punktzahl des Layout Shifts spiegelt den Anstieg zu diesem Zeitpunkt wider.
Netzwerkaktivität anzeigen
Sehen Sie sich die Netzwerkaktivität im Track Netzwerk an. Sie können den Netzwerk-Track erweitern, um alle Netzwerkaktivitäten anzuzeigen, und auf die einzelnen Elemente klicken, um die Details anzuzeigen.
Renderer-Aktivität ansehen
Sehen Sie sich die Rendering-Aktivität im Renderer-Track an. Sie können die einzelnen Renderer maximieren, um die Aktivitäten zu sehen, und auf die einzelnen Elemente klicken, um die Details aufzurufen.
GPU-Aktivität ansehen
Sehen Sie sich die GPU-Aktivität im GPU-Track an. Der GPU-Track ist standardmäßig ausgeblendet. Sehen Sie in den Einstellungen unter GPU nach, um sie zu aktivieren.
Nutzertimings ansehen
Wenn Sie benutzerdefinierte Leistungsmessungen erhalten möchten, können Sie das Nutzertiming verwenden und das Timing mit dem Track Timing visualisieren. Weitere Informationen finden Sie unter User Timing API.
Auf dieser Demoseite sehen Sie, wie lange das Laden von Text dauert.
So rufen Sie das Nutzertiming auf:
- Sie können Orte in Ihrer Anwendung mit
performance.mark()markieren. - Mit
performance.measure()können Sie die verstrichene Zeit zwischen den Markierungen messen. - Leistung aufzeichnen:
- Sehen Sie sich die Messwerte im Track Timings an. Wenn du den Titel nicht siehst, prüfe in den Einstellungen die Option Nutzertiming.
- Klicke auf das Timing des Titels, um Details aufzurufen.
Benutzeroberfläche anpassen
Um die Zeitachse und Tracks anzupassen, klicken Sie auf das Symbol Einstellungen und aktivieren Sie die gewünschten Optionen.
Aufzeichnung exportieren
Aufnahme speichern: Klicken Sie auf Exportieren .
Aufnahme importieren
Wenn Sie eine Aufnahme laden möchten, wählen Sie Importieren aus.
Aufnahme löschen
So löschen Sie eine Aufzeichnung:
- Klicken Sie auf Löschen. Ein Bestätigungsdialogfeld wird geöffnet.
- Klicken Sie im Dialogfeld auf Löschen, um den Löschvorgang zu bestätigen.