Im Bereich Leistungsstatistiken finden Sie umsetzbare und anwendungsspezifische Informationen zur Leistung Ihrer Website.
Warum ein neues Panel?
Der neue Bereich Leistungsstatistiken ist ein Test, mit dem die folgenden drei Probleme von Entwicklern gelöst werden sollen, wenn sie 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.
- schwierige Unterscheidung zwischen Anwendungsfällen. Der Bereich Leistungsstatistiken unterstützt Analysen von Anwendungsfällen. Aktuell werden nur Anwendungsfälle für den Seitenaufbau unterstützt. Basierend auf Ihrem Feedback, z. B. zur Interaktion, wird es in Zukunft weitere hinzukommen.
- Erfordert umfassende Kenntnisse über die effektive Nutzung von Browsern. Im Bereich Leistungsstatistiken finden Sie die wichtigsten Informationen unter Statistiken sowie umsetzbares Feedback zur Behebung von Problemen.
Einleitung
In dieser Anleitung erfahren Sie, wie Sie die Leistung beim Seitenaufbau im Bereich Leistungsstatistiken messen und verstehen. Lesen Sie weiter oder sehen Sie sich die Videoversion dieser Anleitung oben an.
Bereich „Leistungsstatistiken“ öffnen
- Öffnen Sie die Entwicklertools.
Klicken Sie auf Weitere Optionen > Weitere Tools > Leistungsstatistiken.
Alternativ können Sie den Bereich Leistungsstatistiken über das Befehlsmenü öffnen.
Leistung aufzeichnen
Im Bereich Leistungsstatistiken können Sie die allgemeine und anwendungsfallbasierte Leistung (z. B. Seitenaufbau) aufzeichnen.
- Öffnen Sie diese Demoseite in einem neuen Tab und öffnen Sie dort den Bereich „Leistungsstatistiken“.
Du kannst das Netzwerk und die CPU während der Aufnahme drosseln. Klicken Sie für diese Anleitung das Kästchen Cache deaktivieren an und setzen Sie CPU im Drop-down-Menü auf 4x Verlangsamung:
Klicken Sie auf Seitenaufbau messen. Die Entwicklertools erfassen Leistungsmesswerte, während die Seite aktualisiert wird, und stoppt die Aufzeichnung dann automatisch einige Sekunden nach Abschluss des Seitenaufbaus.
Aufzeichnung einer 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 Aufzeichnung abzuspielen.
- Klicken Sie auf Anhalten, um die erneute Wiedergabe anzuhalten.
- Passe die Wiedergabegeschwindigkeit im Drop-down-Menü an.
- Klicken Sie auf Visuelle Vorschau ein- oder ausblenden, um die visuelle Vorschau ein- oder auszublenden.
In einer Leistungsaufnahme navigieren
In den Entwicklertools wird automatisch herausgezoomt, um die vollständige Zeitachse der Aufnahme anzuzeigen. Sie können durch Zoomen in der Aufnahme navigieren und die Zeitachse verschieben.
Zum Zoomen und Verschieben der Zeitachse nach links und rechts verwenden Sie die entsprechenden Navigationsschaltflächen:
- Klicken Sie auf die Zeitachse, um den Abspielkopf zu verschieben und einen bestimmten Frame anzusehen.
- Klicken Sie zum Zoomen unten auf die Steuerelemente Heranzoomen und Herauszoomen. In diesem Fall zoomen Sie auf Basis des Abspielkopfs.
- Ziehen Sie die horizontale Bildlaufleiste am unteren Rand, um die Zeitachse nach links und rechts zu verschieben.
Alternativ können Sie Tastenkombinationen verwenden. Klicken Sie auf die Schaltfläche , um die Verknüpfungen aufzurufen.
Bei der Verwendung von Tastenkombinationen wird auf Basis des Mauszeigers herangezoomt.
Leistungsstatistiken ansehen
Im Bereich Statistiken finden Sie eine Liste mit Leistungsstatistiken. Identifizieren und beheben Sie mögliche Leistungsprobleme.
Bewegen Sie den Mauszeiger auf die einzelnen Erkenntnisse, um sie in den Haupt-Tracks hervorzuheben.
Klicken Sie auf eine Statistik, z. B. eine Anfrage zum Blockieren des Renderings, um sie im Bereich Details zu öffnen. Sehen Sie sich unter anderem die Abschnitte Datei, Problem und Problembehebung an, um mehr über das Problem zu erfahren.
Web Vitals-Leistungsmesswerte 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.
Sie können diese Messwerte in den Bereichen Zeitachse und Statistiken aufrufen.
Bewegen Sie den Mauszeiger auf der Zeitachse auf die Statistiken, um mehr darüber zu erfahren.
Verzögerungen beim Largest Contentful Paint ermitteln
Der Largest Contentful Paint (LCP) ist einer der Core Web Vitals-Messwerte. Er gibt die Renderingzeit des größten sichtbaren Bild- oder Textblocks im Darstellungsbereich an, bezogen auf den Beginn des Ladens der Seite.
Ein guter LCP-Wert beträgt maximal 2,5 Sekunden.
Wenn das Rendern des größten Contentful Paint auf Ihrer Seite länger dauert, sehen Sie auf der Zeitachse das LCP-Logo mit einem gelben Quadrat oder einem roten Dreieck.
Klicken Sie auf der Zeitachse oder rechts im Bereich Statistiken auf das LCP-Symbol, um den Bereich Details zu öffnen. Dort finden Sie mögliche Ursachen für Verzögerungen sowie Vorschläge zur Behebung.
In diesem Beispiel blockiert eine Anfrage das Rendering. Sie können wichtige Stile inline anwenden, um das Problem zu beheben. Weitere Informationen finden Sie unter Ressourcen entfernen, die das Rendering blockieren.
Wenn Sie sich die Teile der LCP-Renderingzeit ansehen möchten, scrollen Sie nach unten zum Bereich Details > Timing-Aufschlüsselung.
Die LCP-Renderingzeit setzt sich aus den folgenden Teilen zusammen:
| LCP-Teilabschnitt | Beschreibung |
|---|---|
| Zeit bis zum ersten Byte (TTFB) | Der Zeitraum zwischen dem Beginn des Ladens der Seite durch den Nutzer bis zu dem Zeitpunkt, zu dem der Browser das erste Byte der HTML-Dokumentantwort empfängt. |
| Verzögerung beim Laden der Ressource | 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 vollständigen Laden der LCP-Ressource und dem vollständigen Rendern des LCP-Elements. |
Wenn für ein LCP-Element keine Ressourcenlast zum Rendern erforderlich ist, werden die Verzögerung beim Laden der Ressource und die entsprechende Zeit weggelassen. Das ist beispielsweise der Fall, wenn das Element ein Textknoten ist, der mit einer Systemschrift gerendert wird.
„Layout Shifts“-Aktivität ansehen
Sehen Sie sich die „Layout Shifts“-Aktivität im Track Layout Shifts an.
Layout Shifts sind in einem Sitzungsfenster gruppiert. In diesem Beispiel gibt es zwei Sitzungsfenster. Sitzungsfenster haben Lücken zwischen ihnen.
Cumulative Layout Shifts (CLS) ist einer der Core Web Vitals-Messwerte. Mit dem Track Layout Shifts können Sie potenzielle Probleme und Ursachen von Layoutverschiebungen identifizieren.
Beginnen Sie immer mit dem größten Sitzungsfenster, wenn Sie den CLS-Messwert verbessern. In unserem Beispiel ist Sitzungsfenster 1 das größte Fenster, basierend auf der Hintergrundfarbe und -ebene.
Klicken Sie auf einen Screenshot, um die Details des Layout Shifts anzuzeigen und potenzielle Ursachen und betroffene Elemente zu identifizieren.
In unserem Beispiel sind Medien ohne Größe die potenzielle Ursache. Informationen zur Behebung dieses Problems finden Sie unter Cumulative Layout Shift optimieren.
Wert für Layout Shifts
Informationen zur Berechnung der Punktzahlen finden Sie im Bereich Details unter Fenster. Das Fenster zeigt, zu welchem Sitzungsfenster der aktuelle Layout Shift gehört.
Wenn die gesamte Seite verschoben wird, beträgt der maximale Wert jeder Layoutverschiebung 1. In unserem Beispiel hat der erste Layout Shift einen Wert von 0.15 erzielt. Der zweite Layout Shift erzielte 0.041.
Die Gesamtpunktzahl für dieses Sitzungsfenster ist 0.19. Basierend auf dem CLS-Grenzwert muss er verbessert werden. Die Hintergrundfarbe des Sitzungsfensters ist identisch.
Das Hintergrunddiagramm des Sitzungsfensters nimmt mit der Zeit zu. Der kumulative Wert der Layoutverschiebung 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 maximieren, 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 zu sehen.
GPU-Aktivität ansehen
Sehen Sie sich die GPU-Aktivität im GPU-Track an. Der GPU-Track ist standardmäßig ausgeblendet. Zum Aktivieren klicken Sie in den Einstellungen das Kästchen GPU an.
Nutzertimings ansehen
Um benutzerdefinierte Leistungskennzahlen zu erhalten, können Sie Nutzertiming verwenden und Ihr Timing mit dem Track Timing grafisch darstellen. Weitere Informationen finden Sie unter User Timing API.
Auf dieser Demoseite wird die verstrichene Zeit für das Laden von Text berechnet.
So rufen Sie das Nutzertiming auf:
- Orte in Ihrer App mit
performance.mark()markieren. - Messen Sie die verstrichene Zeit zwischen den Markierungen mit
performance.measure(). - Erfasse Leistung.
- Die Messwerte finden Sie im Track Timing. Wenn du den Titel nicht sehen kannst, sieh dir das Nutzertiming in den Einstellungen an.
- Klicken Sie auf das Timing im Titel, um Details zu sehen.
Benutzeroberfläche anpassen
Wenn du die Zeitachse und Tracks anpassen möchtest, klicke auf das Symbol für die Einstellungen des Steuerfelds und wähle die gewünschten Optionen aus.
Aufnahme exportieren
Wenn Sie eine Aufzeichnung speichern möchten, klicken Sie auf Exportieren .
Aufnahme importieren
Wenn Sie eine Aufzeichnung laden möchten, wählen Sie Importieren aus.
Aufzeichnung 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 Vorgang zu bestätigen.