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 Steuerfeld 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 können Sie Folgendes tun:

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

Eine umfassende Anleitung zur Leistungssteigerung Ihrer Website finden Sie unter Laufzeitleistung analysieren.

Steuerfeld „Leistung“ öffnen

Wenn Sie den Bereich Leistung öffnen möchten, öffnen Sie die Entwicklertools und wählen Sie oben auf den Tabs Leistung aus.

Alternativ können Sie den Bereich Leistung auch über das Befehlsmenü öffnen:

  1. Öffnen Sie die Entwicklertools.
  2. Öffnen Sie das Befehlsmenü, indem Sie Folgendes drücken:
  3. macOS: Befehlstaste + Umschalt + 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 für 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, werden im Steuerfeld Leistung auch Ihre lokale Interaction to Next Paint (INP) und ihr Wert erfasst. So erhalten Sie neben LCP und CLS einen vollständigen Überblick über die Core Web Vitals Ihrer Seite unter Verwendung Ihrer Netzwerkverbindung und Ihres Geräts.

Im Bereich Leistung finden Sie unter den drei Messwertkarten eine Liste der erfassten Interaktionen. Wenn Sie die Liste löschen möchten, klicken Sie auf  Löschen.

Wenn Sie eine Aufschlüsselung eines Messwerts sehen möchten, bewegen Sie den Mauszeiger auf den Wert, um eine Kurzinfo aufzurufen.

Vergleichen Sie Ihre Erfahrung mit der Ihrer Nutzenden.

Sie können Felddaten auch aus dem Chrome-UX-Bericht abrufen und die Erfahrung der Nutzer Ihrer Website mit Ihren lokalen Messwerten vergleichen.

So fügen Sie Felddaten hinzu:

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

    Über die Schaltfläche „Einrichten“ im Abschnitt „Nächste Schritte“

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

    Fortgeschrittene Nutzer: Zuordnung zwischen Entwicklungs- und Produktionsumgebung einrichten

    Optional kannst du (mehrere) Zuordnungen zwischen Entwicklungs- und Produktionsursprung 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 Steuerfeld Leistung wird zuerst versucht, Felddaten für diese URL abzurufen. Anschließend werden diese Felddaten unabhängig davon angezeigt, welche Seite Sie aufrufen.

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

    Nachdem Sie den Felddatenabruf eingerichtet haben, sehen Sie im Bereich Leistung einen Vergleich zwischen den Werten Ihrer lokalen Messwerte und denen Ihrer Nutzer. Rechts im Bereich Felddaten sehen Sie den Erfassungszeitraum.

    Die Sammlung von Felddaten nach dem Abruf.

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

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 gegebenenfalls den Bereich Lokale Testbedingungen berücksichtigen und lesen Sie die Empfehlungen.

    Die Abschnitte „Lokale Testbedingungen berücksichtigen“ sind auf jeder Messwertkarte maximiert.

    In diesem Beispiel sollten Sie für eine bessere Nutzererfahrung eine gängige Bildschirmgröße für Computer verwenden und die CPU und das Netzwerk drosseln.

  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 den Gerätemodus im Steuerfeld Elemente 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 Bereich Umgebungseinstellungen in der Drop-down-Liste Netzwerk beispielsweise Schnelles 4G und unter CPU beispielsweise 20-fache Verlangsamung aus. Aktivieren Sie im selben Bereich auch die Option Disable network cache (Netzwerkcache deaktivieren).

  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.

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

Einen Leistungsbericht erstellen 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 für die Aufnahme bereit sind, sehen Sie im Bereich Leistung folgende Optionen:

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 das Menü Aufnahmeeinstellungen aufzurufen.

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 Zusammenstellung von Themen aus dem Leitfaden sowie weitere hilfreiche Dokumentationen:

So rufen Sie die einzelnen Bereiche des Berichts auf:

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:

Leistung mit diesen Steuerfeldern verbessern

Entdecken Sie weitere Bereiche, mit denen Sie die Leistung Ihrer Website verbessern können: