Leistungsstatistiken: Umsetzbare Informationen zur Leistung Ihrer Website erhalten

Sofia Emelianova
Sofia Emelianova

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

  1. Öffnen Sie die Entwicklertools.
  2. Klicken Sie auf Weitere Optionen > Weitere Tools > Leistungsdaten.

    Leistungsstatistiken.

    Alternativ können Sie das Befehlsmenü verwenden, um den Bereich Leistungsstatistiken zu öffnen.

    Befehl „Leistungsstatistiken“ im Befehlsmenü anzeigen.

Rekordleistung

Im Bereich Leistungsstatistiken kann die allgemeine Leistung und die Leistung nach Anwendungsfällen (z. B. Seitenaufbau) erfasst werden.

  1. Öffnen Sie diese Demoseite in einem neuen Tab und öffnen Sie dort den Bereich „Leistungsstatistiken“.
  2. 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:

    Drosselung.

  3. 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.

    Startoptionen.

Aufführung noch einmal abspielen

Mit den Steuerelementen unten kannst du die Wiedergabe der Aufnahme steuern.

Steuerelemente für die erneute Wiedergabe.

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.

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. Tastenkombinationen.

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

Bereich „Statistiken“.

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.

Statistikdetails.

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.

Web Vitals-Leistungsmesswerte 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.

LCP-Grenzwerte

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.

Das LCP-Logo.

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.

Detailbereich

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.

Aufschlüsselung der Zeitangaben.

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.

Track für Layout Shifts.

Layout Shifts werden in einem Sitzungsfenster gruppiert. Im Beispiel gibt es zwei Sitzungsfenster. Zwischen den Sitzungsfenstern gibt es Lücken.

Sitzungsfenster und -lücke.

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.

CLS

Klicken Sie auf einen Screenshot, um sich die Details des Layout Shifts anzusehen, potenzielle Ursachen und betroffene Elemente zu identifizieren.

Sehen Sie sich die Details zu Layout Shift an.

In unserem Beispiel sind dies Medien ohne große Größe. Informationen zur Behebung dieses Problems finden Sie unter Cumulative Layout Shift optimieren.

mögliche Ursachen identifizieren.

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.

Informationen zu Layout Shifts

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.

CLS-Grenzwert.

Das Hintergrunddiagramm des Sitzungsfensters nimmt im Laufe der Zeit zu. Die kumulative Punktzahl des Layout Shifts spiegelt den Anstieg zu diesem Zeitpunkt wider.

Hintergrunddiagramm des Cessionsfensters.

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.

Netzwerkaktivität ansehen.

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.

Sehen Sie sich die Renderer-Aktivität an.

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.

GPU-Aktivität ansehen.

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:

  1. Sie können Orte in Ihrer Anwendung mit performance.mark() markieren.
  2. Mit performance.measure() können Sie die verstrichene Zeit zwischen den Markierungen messen.
  3. Leistung aufzeichnen:
  4. Sehen Sie sich die Messwerte im Track Timings an. Wenn du den Titel nicht siehst, prüfe in den Einstellungen die Option Nutzertiming.
  5. Klicke auf das Timing des Titels, um Details aufzurufen. Der Timing-Track.

Benutzeroberfläche anpassen

Um die Zeitachse und Tracks anzupassen, klicken Sie auf das Symbol Einstellungen und aktivieren Sie die gewünschten Optionen.

Einstellungen.

Aufzeichnung exportieren

Aufnahme speichern: Klicken Sie auf Exportieren .

Exportiere eine Aufzeichnung.

Aufnahme importieren

Wenn Sie eine Aufnahme laden möchten, wählen Sie Importieren aus.

Importieren Sie eine Aufnahme.

Aufnahme löschen

So löschen Sie eine Aufzeichnung:

  1. Klicken Sie auf Löschen. Ein Bestätigungsdialogfeld wird geöffnet. Löschen Sie die Aufnahme.
  2. Klicken Sie im Dialogfeld auf Löschen, um den Löschvorgang zu bestätigen.