Steuerfeld „Leistung“: Leistung der Website analysieren

Dale St. Marthe
Dale St. Marthe
LinkedIn

Im Bereich Leistung können Sie die Leistung Ihrer Website analysieren.

Übersicht

Im Bereich Leistung können Sie CPU-Leistungsprofile Ihrer Webanwendungen aufzeichnen. Analysieren Sie Profile, um potenzielle Leistungsengpässe zu erkennen und Möglichkeiten zur Optimierung der Ressourcennutzung zu finden.

Im Bereich Leistung haben Sie folgende Möglichkeiten:

  • Erstellen Sie ein Leistungsprofil.
  • Ändern Sie die Aufnahmeeinstellungen.
  • Leistungsbericht analysieren

Eine umfassende Anleitung zur Verbesserung der Leistung Ihrer Website finden Sie unter Laufzeitleistung analysieren.

Steuerfeld „Leistung“ öffnen

Wenn Sie den Bereich Leistung öffnen möchten, öffnen Sie die DevTools und wählen Sie oben einen der Tabs Leistung aus.

Alternativ können Sie auch die folgenden Schritte ausführen, um den Bereich Leistung über das Befehlsmenü zu öffnen:

  1. Öffnen Sie die Entwicklertools.
  2. So öffnen Sie das Befehlsmenü:
  3. macOS: Befehlstaste + Umschalttaste + P
  4. Windows, Linux, ChromeOS: Strg + Umschalttaste + P Befehlsmenü mit
  5. Geben Sie Performance panel ein, wählen Sie Steuerfeld anzeigen aus und drücken Sie die Eingabetaste.

Core Web Vitals live beobachten

Wenn Sie das Steuerfeld Leistung öffnen, werden sofort Ihre lokalen Messwerte Largest Contentful Paint (LCP) und Cumulative Layout Shift (CLS) erfasst und angezeigt. Sie sehen die entsprechende Punktzahl (gut, verbesserungswürdig oder schlecht).

Wenn Sie mit Ihrer Seite interagieren, wird im Bereich Leistung auch der lokale Wert für „Interaction to Next Paint“ (INP) und seine Bewertung erfasst. Zusätzlich zu LCP und CLS erhalten Sie so einen vollständigen Überblick über die Core Web Vitals Ihrer Seite unter Verwendung Ihrer Netzwerkverbindung und Ihres Geräts.

Im Bereich Leistung wird eine Liste der erfassten Interaktionen unter den drei Messwertkarten angezeigt. Um die Liste zu löschen, klicken Sie auf Löschen.

Wenn Sie eine Aufschlüsselung einer Messwertbewertung aufrufen möchten, bewegen Sie den Mauszeiger auf den Messwert.

Ihre Erfahrungen mit denen Ihrer Nutzer vergleichen

Sie können auch Felddaten aus dem Chrome UX Report abrufen und die Nutzererfahrung Ihrer Website mit Ihren lokalen Messwerten vergleichen.

So fügen Sie Felddaten hinzu:

  1. Klicken Sie unter Leistung > Nächste Schritte > Felddaten auf Einrichten.

    Klicken Sie im Abschnitt „Nächste Schritte“ auf die Schaltfläche „Einrichten“.

  2. Lesen Sie im Dialogfeld Abruf von Felddaten konfigurieren die Datenschutzerklärung und klicken Sie auf OK.

    Erweitert: Zuordnung zwischen Entwicklungs- und Produktionsumgebung einrichten...

    Optional können Sie mehrere Zuordnungen zwischen Ihren Entwicklungs- und Produktionsquellen einrichten, um automatisch die relevantesten Felddaten zu erhalten:

    1. Maximieren Sie im Dialogfeld den Bereich Erweitert und klicken Sie auf + Neu.

    2. Geben Sie in der Zuordnungstabelle Ihre Entwicklungs- und Produktions-URLs ein und klicken Sie auf +.

      Die Zuordnung zwischen Entwicklungs- und Produktions-Origins im Bereich „Erweitert“.

      Wenn Sie beispielsweise http://localhost:8080 zu https://example.com zuordnen, werden Felddaten für example.com/page1 angezeigt, wenn Sie zu localhost:8080/page1 wechseln.

      Sollten Sie die Felddaten aus irgendeinem Grund nicht automatisch abrufen können, können Sie Felddaten immer für die unten angegebene URL anzeigen aktivieren und eine URL angeben. Im Bereich Leistung wird zuerst versucht, Felddaten für diese URL abzurufen. Diese Felddaten werden dann unabhängig davon angezeigt, auf welche Seite Sie zugreifen.

      Wenn Sie die Einstellungen für den Abruf von Felddaten nach der Einrichtung ändern möchten, klicken Sie auf Felddaten > Konfigurieren

    Nachdem Sie den Abruf von Felddaten eingerichtet haben, sehen Sie im Bereich Leistung jetzt einen Vergleich zwischen Ihren lokalen Messwerten und denen, die Ihre Nutzer sehen. Sie finden den Erfassungszeitraum rechts im Bereich Felddaten.

    Der Zeitraum, in dem Felddaten nach dem Abrufen erfasst werden.

    Wenn Sie eine Aufschlüsselung einer Messwertbewertung aufrufen möchten, bewegen Sie den Mauszeiger auf den Messwert, um eine Kurzinfo aufzurufen.

Konfigurieren Sie Ihre Umgebung besser an die Ihrer Nutzer

Nachdem Sie den Abruf von Felddaten wie im vorherigen Abschnitt beschrieben eingerichtet haben, erhalten Sie im Bereich Leistung Empfehlungen dazu, wie Sie Ihre Umgebung so konfigurieren, dass sie der Nutzererfahrung besser entspricht.

So konfigurieren Sie Ihre Umgebung:

  1. Maximieren Sie auf jeder Messwertkarte den Abschnitt Lokale Testbedingungen berücksichtigen, falls vorhanden, und lesen Sie die Empfehlungen.

    Im Abschnitt „Berücksichtige die lokalen Testbedingungen“ die in jeder Messwertkarte maximiert sind.

    In diesem Beispiel könnten Sie eine gängige Desktop-Bildschirmgröße verwenden und die CPU und das Netzwerk drosseln, um der Nutzererfahrung besser gerecht zu werden.

  2. So passen Sie die Umgebungskonfiguration für dieses Beispiel an:

    1. Legen Sie den Darstellungsbereich auf eine der gängigen Bildschirmgrößen fest (z. B. 720p oder 1080p). Wenn Sie bestimmte Geräte und Bildschirmgrößen emulieren möchten, können Sie im Bereich Elemente den Gerätemodus verwenden.
    2. In diesem Beispiel verwenden 82% der Website-Nutzer Computer zum Surfen. Damit Sie die Bewertungen Ihrer lokalen Messwerte mit den richtigen Felddaten vergleichen können, wählen Sie in der Drop-down-Liste Felddaten > Gerät die Option Desktop aus.
    3. Wählen Sie im Abschnitt Umgebungseinstellungen in der Drop-down-Liste Netzwerk beispielsweise Schnelles 4G und CPU beispielsweise 20x verlangsamung aus. Sie können auch im selben Bereich Disable network cache (Netzwerkcache deaktivieren) aktivieren.

  3. Nachdem Sie Ihre Umgebung konfiguriert haben, aktualisieren Sie die Seite, interagieren Sie damit, um Ihren lokalen INP zu erfassen, und vergleichen Sie die Messwerte noch einmal.

    Die Umgebung ist so konfiguriert, dass sie der tatsächlichen Nutzererfahrung entspricht.

    Anscheinend ähneln die Messwerte jetzt denen Ihrer Nutzer. Daher wurden die Abschnitte Lokale Testbedingungen berücksichtigen aus den Messwertkarten entfernt.

So können Sie jetzt die Core Web Vitals Ihrer Website verbessern:

Leistungsbericht erfassen und analysieren

In den nächsten Abschnitten erfahren Sie, wie Sie ein Profil aufzeichnen, die Erfassungseinstellungen ändern und den Bericht analysieren.

Leistungsprofil aufzeichnen

Wenn Sie bereit sind, die Aufzeichnung zu starten, haben Sie im Bereich Leistung folgende Möglichkeiten:

Aufnahmeeinstellungen ändern

Mit den Erfassungseinstellungen können Sie ändern, wie in den Entwicklertools Leistungsaufzeichnungen erfasst werden. Außerdem erhalten Sie zusätzliche Informationen im Bericht. Klicken Sie auf Aufnahmeeinstellungen. , um auf das Menü Aufnahmeeinstellungen zuzugreifen.

Wählen Sie im Menü Aufnahmeeinstellungen die folgenden Optionen aus:

Leistungsbericht analysieren

Eine vollständige Anleitung zur Verwendung des Bereichs Leistung finden Sie unter Leistungsaufzeichnung analysieren.

Im Folgenden finden Sie eine Gruppierung der Themen aus dem Leitfaden sowie weitere hilfreiche Dokumentationen:

So verwenden Sie den Bericht:

So können Sie sich auf das konzentrieren, was für Ihren Workflow wichtig ist:

Weitere Informationen zu den Tabs „Bottom-up“, „Aufrufstruktur“ und „Ereignisprotokoll“:

So analysieren Sie den Bericht:

Mit diesen Bereichen die Leistung verbessern

Weitere Infofelder, mit denen Sie die Leistung Ihrer Website verbessern können: