Im Bereich Leistungsstatistiken finden Sie umsetzbare und nutzungsorientierte Informationen zur Leistung Ihrer Website.
Übersicht
Im Bereich Leistungsstatistiken können Sie Folgendes tun:
- Leistung beim Laden von Seiten erfassen und messen
- Web Vitals-Leistungsmesswerte ansehen
- Netzwerkaktivität ansehen
- Langsamere CPU- und Netzwerkgeschwindigkeiten simulieren.
- Aufzeichnungen 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.
- Schwer 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 umfassendes Fachwissen zur effektiven Nutzung von Browsern. 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 > Leistungsdaten.
Alternativ können Sie das Befehlsmenü verwenden, um den Bereich Leistungsstatistiken zu öffnen.
Leistung aufzeichnen
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 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.
- Klicken Sie auf Wiedergeben, um die Aufnahme 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
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 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. Klicke auf die Schaltfläche , um die Tastenkürzel aufzurufen.
Wenn Sie Tastenkombinationen verwenden, wird der Zoom basierend auf dem Mauszeiger ausgeführt.
Leistungsstatistiken aufrufen
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 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 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.
Sie können sich diese Messwerte in der Zeitachse und im Bereich Statistiken ansehen.
Bewegen Sie den Mauszeiger auf die Statistiken auf der Zeitachse, um mehr über die Messwerte zu erfahren.
Verzögerungen bei 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 größten sichtbaren Elements 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. 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.
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 Rendern von Elementen | Die Zeitspanne zwischen dem Ende des Ladens der LCP-Ressource und dem vollständigen Rendern des LCP-Elements. |
Wenn ein LCP-Element zum Rendern kein Ressourcenaufbau erfordert, werden die Verzögerung und Zeit beim Laden der Ressource weggelassen. Das ist beispielsweise der Fall, wenn es sich bei dem Element um einen Textknoten handelt, der mit einer Systemschriftart gerendert wird.
Aktivität zu Layout Shifts ansehen
Aktivitätsdaten zu Layoutänderungen finden Sie im Track Layoutänderungen.
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. 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 das größte Fenster, basierend auf der Hintergrundfarbe und -ebene.
Klicken Sie auf einen Screenshot, um Details zum Layout-Shift aufzurufen und mögliche Ursachen und betroffene Elemente zu ermitteln.
In unserem Beispiel sind dies Medien ohne große Größe. Informationen zur Behebung des Problems finden Sie unter Kumulatives Layout-Verschieben optimieren.
Layout-Shift-Ergebnis
Informationen zur Berechnung der Bewertungen finden Sie im Bereich Fenster im Bereich Details. Unter Fenster sehen Sie, zu welchem Sitzungsfenster die aktuelle Layoutverschiebung gehört.
Wenn die gesamte Seite verschoben wird, beträgt die maximale Punktzahl für jeden Layout Shift 1. In unserem Beispiel wurde für die erste Layoutänderung 0.15 bewertet. Der zweite Layout Shift erhielt 0.041.
Die Gesamtbewertung für dieses Sitzungsfenster beträgt 0.19. Basierend auf dem CLS-Grenzwert sollte sie verbessert werden. Auch die Hintergrundfarbe des Sitzungsfensters ist identisch.
Der Hintergrundgraph für das Sitzungsfenster nimmt mit der Zeit zu. Die kumulative Punktzahl des Layout Shifts spiegelt den Anstieg zu diesem Zeitpunkt wider.
Netzwerkaktivität ansehen
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
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 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 erfassen
- Sehen Sie sich die Messwerte im Track Timings an. Wenn Sie die Spur nicht sehen, aktivieren Sie in den Einstellungen die Option Nutzerzeiten.
- 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
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.