Im Bereich Leistungsstatistiken finden Sie umsetzbare und anwendungsbezogene Informationen zur Leistung Ihrer Website.
Übersicht
Im Bereich Leistungsstatistiken haben Sie folgende Möglichkeiten:
- Seitenladezeiten aufzeichnen und messen
- Web Vitals-Leistungsmesswerte ansehen
- Netzwerkaktivität ansehen
- Langsamere CPU- und Netzwerkgeschwindigkeiten simulieren
- Aufnahmen importieren und exportieren
Warum ein neues Steuerfeld?
Der neue Bereich Leistungsstatistiken ist ein Test, um die folgenden drei Probleme von Entwicklern bei der Arbeit mit dem vorhandenen Bereich Leistung zu beheben:
- Zu viele Informationen Mit der neu gestalteten Benutzeroberfläche werden im Bereich Leistungsstatistiken nur relevante Informationen angezeigt.
- Schwer zu unterscheidende Anwendungsfälle: Der Bereich Leistungsstatistiken unterstützt anwendungsfallbezogene Analysen. Derzeit wird nur der Anwendungsfall „Seitenaufruf“ unterstützt. In Zukunft werden basierend auf Ihrem Feedback weitere Anwendungsfälle hinzukommen, z. B. Interaktivität.
- Erfordert fundierte Kenntnisse der Funktionsweise von Browsern, um effektiv eingesetzt zu werden. Im Bereich Statistiken zur Leistung werden die wichtigsten Statistiken aus dem Bereich Statistiken zusammengefasst. Außerdem erhalten Sie umsetzbares Feedback dazu, wie Sie Probleme beheben können.
Einführung
In diesem Tutorial erfahren Sie, wie Sie die Seitenladegeschwindigkeit mit dem Bereich Leistungsstatistiken messen und analysieren können. 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 das Steuerfeld Leistungsstatistiken zu öffnen.
Leistung aufzeichnen
Im Bereich Leistungsstatistiken können allgemeine und anwendungsfallspezifische (z. B. Seitenladezeit) Leistungsdaten erfasst werden.
- Öffnen Sie diese Demoseite in einem neuen Tab und öffnen Sie das Feld „Leistungsstatistiken“.
Sie können das Netzwerk und die CPU während der Aufnahme drosseln. Aktivieren Sie für dieses Tutorial Cache deaktivieren und legen Sie im Drop-down-Menü CPU auf 4-fache Verlangsamung fest:
Klicken Sie auf Seitenaufbau messen. DevTools erfasst Leistungsmesswerte, während die Seite neu geladen wird, und beendet die Aufzeichnung automatisch einige Sekunden nach Abschluss des Seitenaufrufs.
Aufzeichnung einer Performance noch einmal abspielen
Mit den Steuerelementen unten kannst du die Wiedergabe deiner Aufnahme steuern.
Hier ist ein Beispiel dafür.
- Klicken Sie auf Wiedergabe, um die Aufzeichnung abzuspielen.
- Klicken Sie auf Pausieren, um die Wiedergabe zu pausieren.
- Passen Sie die Wiedergabegeschwindigkeit über das Drop-down-Menü an.
- Klicken Sie auf Visuelle Vorschau ein-/ausblenden, um die visuelle Vorschau ein- oder auszublenden.
Leistungsaufzeichnung aufrufen
DevTools zoomt automatisch heraus, um die gesamte Aufzeichnungszeitachse anzuzeigen. Sie können die Aufnahme durch Zoomen und Verschieben der Zeitachse durchsuchen.
Mit den entsprechenden Navigationsschaltflächen können Sie die Zeitachse zoomen und nach links und rechts verschieben:
- Klicken Sie auf die Zeitachse, um den Abspielkopf zu verschieben und ein bestimmtes Frame anzusehen.
- Klicken Sie unten auf die Steuerelemente Heranzoomen und Herauszoomen, um zu zoomen. In diesem Fall wird basierend auf dem Playhead gezoomt.
- Ziehen Sie die horizontale Scrollleiste 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.
Wenn Sie Tastenkombinationen verwenden, wird der Zoomvorgang auf den Mauszeiger zentriert.
Leistungsstatistiken ansehen
Im Bereich Statistiken finden Sie eine Liste der Leistungsstatistiken. Potenzielle Leistungsprobleme identifizieren und beheben
Bewegen Sie den Mauszeiger auf die einzelnen Statistiken, um sie auf den Haupt-Tracks hervorzuheben.
Klicken Sie auf einen Insight, z. B. die blockierende Anfrage, um ihn im Bereich Details zu öffnen. Weitere Informationen zum Problem finden Sie in den Abschnitten Datei, Problem und Behebung.
Web Vitals-Leistungsmesswerte ansehen
Web Vitals ist eine Initiative von Google, mit der einheitliche Informationen zu wichtigen Faktoren für eine optimale Nutzererfahrung im Web zur Verfügung gestellt werden.
Sie können diese Messwerte im Bereich Zeitachse und Insights 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 2,5 Sekunden oder weniger.
Wenn das Rendern des Largest Contentful Paint auf Ihrer Seite länger dauert, sehen Sie in der Zeitachse das LCP-Symbol mit einem gelben Quadrat oder roten Dreieck.
Wenn Sie den Bereich Details öffnen möchten, klicken Sie auf der Zeitachse oder im Bereich Statistiken rechts auf das LCP-Symbol. Im Bereich finden Sie mögliche Ursachen für die Verzögerungen und Vorschläge zur Behebung der Probleme.
In diesem Beispiel wird das Rendern durch eine Anfrage blockiert. Sie können das Problem beheben, indem Sie kritische Stile inline anwenden. Weitere Informationen
Wenn Sie die Unterabschnitte der LCP-Renderzeit aufrufen möchten, scrollen Sie nach unten zum Abschnitt Details > Aufschlüsselung der Zeitmessungen.
Die LCP-Renderzeit besteht aus den folgenden Unterteilen:
| LCP-Unterabschnitt | Beschreibung |
|---|---|
| Zeit bis zum ersten Byte (TTFB) | Die Zeitspanne vom Beginn des Ladens der Seite durch den Nutzer bis zum Empfang des ersten Byte der HTML-Dokumentantwort 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 Rendern des Elements | Die Zeitspanne zwischen dem Ende des Ladevorgangs der LCP-Ressource und dem vollständigen Rendern des LCP-Elements. |
Wenn für das Rendern eines LCP-Elements kein Ressourcenladevorgang erforderlich ist, werden die Verzögerung und die Zeit für das Laden der Ressource ausgelassen. Das kann beispielsweise der Fall sein, wenn das Element ein Textknoten ist, der mit einer Systemschriftart gerendert wird.
Layout Shifts-Aktivität ansehen
Aktivitäten zu Layoutverschiebungen können Sie im Track für Layoutverschiebungen ansehen.
Layout Shifts werden in einem Sitzungsfenster gruppiert. Im Beispiel gibt es zwei Sitzungszeiträume. Zwischen den Sitzungsfenstern gibt es Lücken.
Cumulative Layout Shift (CLS) ist einer der Core Web Vitals-Messwerte. Mit dem Track für Layoutverschiebungen können Sie potenzielle Probleme und Ursachen von Layoutverschiebungen ermitteln.
Beginnen Sie immer mit dem größten Sitzungszeitraum, wenn Sie den CLS-Messwert verbessern möchten. In unserem Beispiel ist Sitzungsfenster 1 das größte Fenster, basierend auf der Hintergrundfarbe und der Ebene.
Klicken Sie auf einen Screenshot, um die Details der Layoutverschiebung aufzurufen und potenzielle Ursachen und betroffene Elemente zu ermitteln.
In unserem Beispiel ist die mögliche Ursache Media ohne Größenangabe. Informationen zum Beheben des Problems finden Sie unter Cumulative Layout Shift optimieren.
Layout-Shift-Ergebnis
Wie die Werte berechnet werden, erfahren Sie im Bereich Zeitraum im Bereich Details. Im Fenster sehen Sie, zu welchem Sitzungsfenster der aktuelle Layout Shift gehört.
Wenn die gesamte Seite verschoben wird, beträgt der maximale Wert für jeden Layout Shift 1. In unserem Beispiel hat die erste Layoutverschiebung einen Wert von 0.15. Die zweite Layoutverschiebung hat 0.041 erzielt.
Das Gesamtergebnis für dieses Sitzungsfenster ist 0.19. Basierend auf dem CLS-Grenzwert ist eine Optimierung erforderlich. Die Hintergrundfarbe des Sitzungsfensters spiegelt dies wider.
Der Hintergrundgraph für das Sitzungs-Windowing steigt im Zeitverlauf an. Das kumulative Ergebnis für den Layout-Shift spiegelt die Zunahme zu diesem Zeitpunkt wider.
Netzwerkaktivität ansehen
Netzwerkaktivität im Network-Track ansehen 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ät ansehen
Render-Aktivitäten werden im Renderer-Track angezeigt. Sie können jeden Renderer maximieren, um die Aktivitäten aufzurufen, und auf die einzelnen Elemente klicken, um die Details zu sehen.
GPU-Aktivität ansehen
GPU-Aktivität im GPU-Track ansehen Der GPU-Track ist standardmäßig ausgeblendet. Aktivieren Sie dazu in den Einstellungen die Option GPU.
Nutzertimings ansehen
Wenn Sie benutzerdefinierte Leistungsmessungen erhalten möchten, können Sie User Timing verwenden und Ihre Zeitmessungen 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 Nutzer-Timings auf:
- Markieren Sie Orte in Ihrer Anwendung mit
performance.mark(). - Mit
performance.measure()können Sie die verstrichene Zeit zwischen Markierungen messen. - Leistung aufzeichnen:
- Sehen Sie sich die Messungen auf dem Timings-Track an. Wenn Sie den Track nicht sehen, prüfen Sie die Nutzer-Zeitachse in den Einstellungen.
- Klicke auf den Zeitstempel auf dem Track, um Details aufzurufen.
Benutzeroberfläche anpassen
Wenn Sie die Zeitachse und die Tracks anpassen möchten, klicken Sie auf das Symbol Einstellungen des Bereichs und setzen Sie ein Häkchen bei den gewünschten Optionen.
Aufnahme exportieren
Wenn Sie eine Aufnahme speichern möchten, klicken Sie auf Exportieren .
Aufnahme importieren
Wählen Sie zum Laden einer Aufnahme 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.