Im Bereich Leistungsstatistiken finden Sie umsetzbare und nutzungsorientierte Informationen zur Leistung Ihrer Website.
Übersicht
Im Bereich Leistungsstatistiken haben Sie folgende Möglichkeiten:
- Seitenladezeiten erfassen und messen
- Web Vitals-Leistungsmesswerte ansehen
- Netzwerkaktivität ansehen
- Langsamere CPU- und Netzwerkgeschwindigkeiten simulieren.
- Aufnahmen importieren und exportieren
Warum ein neues Panel?
Der neue Bereich Leistungsstatistiken ist ein Test, mit dem wir drei Probleme von Entwicklern bei der Arbeit mit dem Bereich Leistung angehen möchten:
- Zu viele Informationen Durch die neu gestaltete Benutzeroberfläche werden im Bereich Leistungsstatistiken nur relevante Daten angezeigt.
- Es ist schwierig, zwischen Anwendungsfällen zu unterscheiden. Der Bereich Leistungsstatistiken unterstützt nutzungsorientierte Analysen. Derzeit wird nur der Anwendungsfall „Seitenladezeit“ unterstützt. Weitere Anwendungsfälle werden in Zukunft auf Grundlage Ihres Feedbacks hinzukommen, z. B. Interaktivität.
- Erfordert fundiertes Wissen über die Funktionsweise von Browsern, um sie effektiv zu nutzen. Im Bereich Leistungsstatistiken werden die wichtigsten Statistiken im Bereich Statistiken hervorgehoben. Außerdem erhalten Sie umsetzbare Informationen zur Behebung von Problemen.
Einführung
In diesem Tutorial erfahren Sie, wie Sie die Seitenladegeschwindigkeit mithilfe des Bereichs Leistungsstatistiken messen und auswerten. 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 das Befehlsmenü verwenden, um den Bereich Leistungsstatistiken zu öffnen.
Leistung aufzeichnen
Im Bereich Leistungsstatistiken können Sie allgemeine und nutzungsabhängige Leistungsdaten (z. B. Seitenladezeit) erfassen.
- Öffnen Sie diese Demoseite in einem neuen Tab und öffnen Sie den Bereich „Leistungsstatistiken“.
Sie können das Netzwerk und die CPU während der Aufzeichnung drosseln. Aktivieren Sie für diese Anleitung die Option Cache deaktivieren und legen Sie im Drop-down-Menü für CPU die Option 4-fache Verlangsamung fest:
Klicken Sie auf Seitenaufbau messen. In den Entwicklertools werden Leistungsmesswerte erfasst, während die Seite neu geladen wird. Die Aufzeichnung wird dann einige Sekunden nach dem Laden der Seite automatisch beendet.
Aufzeichnung einer Leistung noch einmal abspielen
Mit den Steuerelementen unten kannst du die Wiedergabe deiner Aufnahme steuern.
Hier ein Beispiel:
- Klicken Sie auf Wiedergabe, um die Aufzeichnung abzuspielen.
- Klicken Sie auf Pausieren, um die Wiedergabe zu pausieren.
- Passen Sie die Wiedergabegeschwindigkeit im Drop-down-Menü an.
- Klicken Sie auf Visuelle Vorschau ein-/ausblenden, um die visuelle Vorschau ein- oder auszublenden.
Leistungsaufzeichnung aufrufen
In den DevTools wird automatisch herausgezoomt, um die gesamte Aufzeichnungszeitachse zu sehen. Sie können die Aufnahme mit dem Zoom und durch Bewegen der Zeitachse steuern.
Mit den entsprechenden Navigationsschaltflächen können Sie die Zeitachse zoomen und nach links und rechts verschieben:
- Klicken Sie auf die Zeitachse, um den Wiedergabestandort zu verschieben und einen bestimmten Frame anzusehen.
- Klicken Sie unten auf die Steuerelemente Heranzoomen und Herauszoomen, um heran- oder herauszuzoomen. In diesem Fall wird der Zoom basierend auf der Wiedergabeposition festgelegt.
- Ziehen Sie die horizontale Bildlaufleiste unten, um die Zeitleiste nach links und rechts zu verschieben.
Alternativ können Sie auch Tastenkombinationen verwenden. Klicke auf die Schaltfläche , um die Tastenkürzel aufzurufen.
Wenn Sie Tastenkombinationen verwenden, wird der Zoombereich anhand des Mauszeigers festgelegt.
Leistungsstatistiken aufrufen
Im Bereich Statistiken finden Sie eine Liste der Leistungsdaten. Potenzielle Leistungsprobleme identifizieren 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 renderblockierende Anfrage, um sie im Bereich Details zu öffnen. Weitere Informationen zum Problem finden Sie unter anderem in den Abschnitten Datei, Problem und Problem beheben.
Web Vitals-Leistungsmesswerte aufrufen
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.
Sie können diese Messwerte im Bereich Zeitachse und Statistiken aufrufen.
Bewegen Sie den Mauszeiger auf die Statistiken auf der Zeitachse, um mehr über die Messwerte zu erfahren.
Verzögerungen bei Largest Contentful Paint erkennen
Largest Contentful Paint (LCP) ist einer der Core Web Vitals-Messwerte. Er gibt die Renderingzeit des größten Bild- oder Textblocks an, der im Darstellungsbereich sichtbar ist, bezogen auf den Beginn des Ladens der Seite.
Ein guter LCP-Wert liegt bei maximal 2,5 Sekunden.
Wenn das Rendern des größten Inhaltselements auf Ihrer Seite länger dauert, wird in der Zeitachse das LCP-Logo mit einem gelben Quadrat oder einem roten Dreieck angezeigt.
Klicken Sie auf das LCP-Logo auf der Zeitachse oder im Bereich Statistiken rechts, um den Bereich Details zu öffnen. Im Bereich finden Sie mögliche Ursachen für die Verzögerungen und Vorschläge zur Behebung.
In diesem Beispiel blockiert eine Anfrage das Rendering. Sie können kritische Stile inline anwenden, um das Problem zu beheben. Weitere Informationen finden Sie unter Ressourcen entfernen, die das Rendering blockieren.
Wenn Sie die Teile der LCP-Renderingzeit sehen möchten, scrollen Sie nach unten zum Bereich Details > Aufschlüsselung der Timings.
Die LCP-Renderingzeit besteht aus den folgenden Teilzeiträumen:
| LCP-Unterabschnitt | Beschreibung |
|---|---|
| Zeit bis zum ersten Byte (TTFB) | Die Zeitspanne zwischen dem Starten des Seitenladevorgangs durch den Nutzer und dem Empfang des ersten Bytes der Antwort des HTML-Dokuments durch den Browser. |
| Verzögerung beim Laden der Ressourcen | Die Differenz zwischen dem 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 Rendering des Elements | Die Zeitspanne zwischen dem Ende des Ladens der LCP-Ressource und dem vollständigen Rendern des LCP-Elements. |
Wenn für ein LCP-Element keine Ressourcen geladen werden müssen, um es zu rendern, werden die Verzögerung und die Zeit für das Laden der Ressourcen weggelassen. Das ist beispielsweise der Fall, wenn es sich bei dem Element um einen Textknoten handelt, der mit einer Systemschriftart gerendert wird.
Layout-Shift-Aktivitäten ansehen
Aktivitätsdaten zu Layoutänderungen finden Sie im Track Layoutänderungen.
Layout Shifts werden in einem Sitzungsfenster gruppiert. In diesem Beispiel gibt es zwei Sitzungsfenster. Zwischen den Sitzungsfenstern liegen Lücken.
Cumulative Layout Shift (CLS) ist einer der Core Web Vitals-Messwerte. Mit dem Track „Layoutänderungen“ können Sie potenzielle Probleme und Ursachen für Layoutänderungen identifizieren.
Beginnen Sie immer mit dem größten Sitzungsfenster, wenn Sie den CLS-Messwert verbessern möchten. In unserem Beispiel ist Sitzungsfenster 1 aufgrund der Hintergrundfarbe und des Levels das größte Fenster.
Klicken Sie auf einen Screenshot, um Details zum Layout-Shift aufzurufen und mögliche Ursachen und betroffene Elemente zu ermitteln.
In unserem Beispiel ist die potenzielle Ursache nicht skalierte Medien. Informationen zur Behebung des Problems finden Sie unter Kumulative Layoutverschiebung optimieren.
Layout-Shift-Ergebnis
Im Bereich Details unter Window (Zeitraum) erfahren Sie, wie die Bewertungen berechnet werden. Unter Fenster sehen Sie, zu welchem Sitzungsfenster die aktuelle Layoutverschiebung gehört.
Wenn die gesamte Seite verschoben wird, ist die maximale Punktzahl für jeden Layout-Shift 1. In unserem Beispiel wurde für die erste Layoutänderung 0.15 bewertet. Die zweite Layoutänderung hat 0.041 erzielt.
Die Gesamtbewertung für dieses Sitzungsfenster beträgt 0.19. Basierend auf dem CLS-Grenzwert ist eine Verbesserung erforderlich. Die Hintergrundfarbe des Sitzungsfensters entspricht dieser Farbe.
Der Hintergrundgraph für das Sitzungsfenster nimmt mit der Zeit zu. Der kumulative Wert der Layoutverschiebung spiegelt die Steigerung zu diesem Zeitpunkt wider.
Netzwerkaktivität ansehen
Rufen Sie die Netzwerkaktivität im Track Netzwerk auf. Sie können den Netzwerk-Track maximieren, um alle Netzwerkaktivitäten zu sehen, und auf die einzelnen Elemente klicken, um die Details aufzurufen.
Renderer-Aktivitäten ansehen
Rufen Sie die Renderaktivitäten im Renderer-Track auf. Sie können jeden Renderer maximieren, um die Aktivitäten zu sehen, und auf die einzelnen Elemente klicken, um die Details aufzurufen.
GPU-Aktivität ansehen
GPU-Aktivitäten im GPU-Track ansehen Der GPU-Track ist standardmäßig ausgeblendet. Wenn Sie die Funktion aktivieren möchten, setzen Sie in den Einstellungen ein Häkchen bei GPU.
Nutzertimings ansehen
Wenn Sie benutzerdefinierte Leistungsmesswerte erhalten möchten, können Sie Nutzertiming verwenden und Ihre Timings mit dem Timing-Track visualisieren. Weitere Informationen finden Sie in der User Timing API.
Auf dieser Demoseite wird die verstrichene Zeit für das Laden von Text berechnet.
So rufen Sie die Zeitangaben für Nutzer auf:
- Markieren Sie Orte in Ihrer Anwendung mit
performance.mark(). - Mit
performance.measure()können Sie die verstrichene Zeit zwischen Markierungen messen. - Leistung erfassen
- Rufen Sie die Messungen im Track Timings auf. Wenn Sie die Spur nicht sehen, aktivieren Sie in den Einstellungen die Option Nutzerzeiten.
- Wenn du Details sehen möchtest, klicke auf die Zeitachse im Track.
Benutzeroberfläche anpassen
Wenn du die Zeitleiste und die Tracks anpassen möchtest, klicke im Steuerfeld auf das Symbol Einstellungen und setze ein Häkchen bei den gewünschten Optionen.
Aufzeichnung exportieren
Wenn Sie eine Aufnahme speichern möchten, 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.