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 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 Leistungsoptimierung 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 den Bereich Leistung auch über das Befehlsmenü ö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 Leistungsbereich anzeigen aus und drücken Sie die Eingabetaste.

Core Web Vitals live beobachten

Wenn Sie den Bereich Leistung öffnen, werden die lokalen Messwerte Largest Contentful Paint (LCP) und Cumulative Layout Shift (CLS) sofort erfasst und angezeigt. Sie sehen auch den jeweiligen Wert (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 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 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.

    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.

      Wenn die Felddaten aus irgendeinem Grund nicht automatisch abgerufen werden können, können Sie das bei Felddaten für die unten angegebene URL immer 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 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 Ihren lokalen Messwerten und den Werten, 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.

Umgebung an die Nutzer anpassen

Wenn 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 können, dass sie den Anforderungen Ihrer Nutzer 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 Desktop-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 im Bereich Elemente den Gerätemodus verwenden.
    2. 82% der Nutzer der Website in diesem Beispiel nutzen Computer, um im Internet zu 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. Sie können auch im selben Bereich Disable network cache (Netzwerkcache deaktivieren) aktivieren.

  3. Nachdem Sie die Umgebung konfiguriert haben, aktualisieren Sie die Seite, interagieren Sie mit ihr, um Ihren lokalen INP zu erfassen, und vergleichen Sie die Messwertbewertungen noch einmal.

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

    Anscheinend ähneln die Messwertbewertungen 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 folgenden Abschnitten erfahren Sie, wie Sie ein Profil aufzeichnen, die Aufnahmeeinstellungen ä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 Aufzeichnungseinstellungen können Sie ändern, wie Leistungsaufzeichnungen in DevTools erfasst werden. Außerdem können Sie zusätzliche Informationen im Bericht erhalten. 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 Gruppierung der Themen aus dem Leitfaden sowie weitere hilfreiche Dokumentationen:

So rufen Sie die einzelnen Bereiche des Berichts auf:

So können Sie sich auf das Wesentliche in Ihrem Workflow konzentrieren:

Weitere Informationen zu den Tabs „Bottom-Up“, „Anrufabfolge“ und „Ereignisprotokoll“:

So analysieren Sie den Bericht:

Leistung mit diesen Steuerfeldern verbessern

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