Steuerfeld „Leistung“: Leistung der Website analysieren

Dale St. Marthe
Dale St. Marthe
LinkedIn
Sofia Emelianova
Sofia Emelianova
GitHub

Verwenden Sie den Bereich Leistung , um die Leistung Ihrer Website zu 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 haben Sie folgende Möglichkeiten:

  • Leistungsprofil aufzeichnen
  • Aufzeichnungseinstellungen ändern
  • Leistungsbericht analysieren

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

Bereich „Leistung“ öffnen

Öffnen Sie die Entwicklertools und wählen Sie oben in der Tab-Leiste Leistung aus, um den Bereich Leistung zu öffnen.

Alternativ können Sie den Bereich Leistung auch über das Befehlsmenü öffnen. Gehen Sie dazu so vor:

  1. Öffnen Sie die Entwicklertools.
  2. Öffnen Sie das Befehlsmenü mit folgender Tastenkombination:
  3. macOS: Command+Shift+P
  4. Windows, Linux, ChromeOS: Control+Shift+P Befehlsmenü mit
  5. Geben Sie Performance panel ein, wählen Sie Show Performance panel aus und drücken Sie die Eingabetaste.

Core Web Vitals live beobachten

Wenn Sie den Bereich Leistung öffnen, werden sofort die lokalen Messwerte für Largest Contentful Paint (LCP) und Cumulative Layout Shift (CLS) erfasst und angezeigt. Außerdem wird die Bewertung (gut, muss verbessert werden oder schlecht) angegeben.

Wenn Sie mit der Seite interagieren, werden im Bereich Leistung auch der lokale Messwert für Interaction to Next Paint (INP) und die Bewertung erfasst. Zusammen mit LCP und CLS erhalten Sie so einen vollständigen Überblick über die Core Web Vitals Ihrer Seite mit Ihrer Netzwerkverbindung und Ihrem Gerät. Außerdem werden die Core Web Vitals für clientseitige Soft-Navigations in Single-Page-Anwendungen erfasst und gemeldet.

Unter den drei Messwertkarten auf den Tabs Interaktionen und Layoutverschiebungen finden Sie Tabellen mit Informationen zu erfassten Interaktionen und Layoutverschiebungen, einschließlich Elementen, Zeitangaben, Phasen (für Interaktionen) und Bewertungen (für Layoutverschiebungen). Wenn Sie beide Listen löschen möchten, klicken Sie auf Löschen.

Wenn Sie eine Aufschlüsselung der Bewertung eines Messwerts erhalten möchten, bewegen Sie den Mauszeiger auf den Messwert, um eine Kurzinfo aufzurufen.

Ihre Nutzererfahrung mit der Ihrer Nutzer vergleichen

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

So fügen Sie Felddaten hinzu:

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

    Die Schaltfläche „Einrichten“ im Bereich „Nächste Schritte“.

  2. Lesen Sie im Dialogfeld Felddatenabruf konfigurieren die Datenschutzerklärung und klicken Sie auf OK.

    Erweitert: Zuordnung zwischen Entwicklungs- und Produktionsumgebungen einrichten

    Optional können Sie eine oder mehrere Zuordnungen zwischen Ihren Entwicklungs- und Produktionsursprüngen einrichten, um automatisch die relevantesten Felddaten zu erhalten:

    1. Erweitern Sie im Dialogfenster den Abschnitt Erweitert und klicken Sie auf + Neu.

    2. Geben Sie in der Zuordnungstabelle die URLs für die Entwicklung und Produktion ein und klicken Sie auf +.

      Die Zuordnung zwischen einem Entwicklungs- und einem Produktionsursprung im erweiterten Bereich.

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

      Wenn Sie die Felddaten aus irgendeinem Grund nicht automatisch abrufen können, können Sie außerdem Felddaten für die unten angegebene URL immer anzeigen aktivieren und eine URL angeben. Im Bereich Leistung werden zuerst die Felddaten für diese URL abgerufen und dann angezeigt, unabhängig davon, zu welcher Seite Sie navigieren.

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

    Nachdem Sie den Felddatenabruf eingerichtet haben, wird im Bereich Leistung ein Vergleich zwischen Ihren lokalen Messwerten und denen Ihrer Nutzer angezeigt. Der Erfassungszeitraum ist rechts im Bereich Felddaten zu sehen.

    Der Erfassungszeitraum der Felddaten nach dem Abrufen.

    Wenn Sie eine Aufschlüsselung der Bewertung eines Messwerts erhalten möchten, bewegen Sie den Mauszeiger auf den Messwert, um eine Kurzinfo aufzurufen.

Umgebung so konfigurieren, dass sie besser zu der Ihrer Nutzer passt

Nachdem Sie den Felddatenabruf wie im vorherigen Abschnitt beschrieben eingerichtet haben, erhalten Sie im Bereich Leistung Empfehlungen zur Konfiguration Ihrer Umgebung, damit sie besser zu der Ihrer Nutzer passt.

So konfigurieren Sie Ihre Umgebung:

  1. Erweitern Sie auf jeder Messwertkarte gegebenenfalls den Abschnitt Lokale Testbedingungen berücksichtigen und lesen Sie die Empfehlungen.

    Der Abschnitt „Lokale Testbedingungen berücksichtigen“ ist auf jeder Messwertkarte maximiert.

    In diesem Beispiel sollten Sie eine gängige Desktop-Bildschirmgröße verwenden und die CPU- und Netzwerkgeschwindigkeit drosseln, um die Nutzererfahrung besser nachzubilden.

  2. So konfigurieren Sie die Umgebung für dieses Beispiel:

    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 verwenden Desktops zum Surfen. Damit Sie Ihre lokalen Messwerte mit den richtigen Felddaten vergleichen, können Sie in der Drop-down-Liste Felddaten > Gerät die Option Desktop auswählen.
    3. Legen Sie im Abschnitt Umgebungseinstellungen in der Drop-down-Liste Netzwerk beispielsweise Schnelles 4G und für CPU beispielsweise 20-fache Verlangsamung fest. Aktivieren Sie im selben Abschnitt auch das Kästchen Netzwerkcache deaktivieren.

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

    Die Umgebung ist so konfiguriert, dass sie der realen Nutzererfahrung entspricht.

    Die Messwerte ähneln jetzt eher denen, die Ihre Nutzer sehen. Entsprechend wurden die Abschnitte Lokale Testbedingungen berücksichtigen von den Messwertkarten entfernt.

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

Leistungsbericht erfassen und analysieren

In den nächsten Abschnitten finden Sie eine Anleitung zum Aufzeichnen eines Profils, zum Ändern der Aufzeichnungseinstellungen und zum Analysieren des Berichts.

Leistungsprofil aufzeichnen

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

Aufzeichnungseinstellungen ändern

Mit den Aufzeichnungseinstellungen können Sie ändern, wie Entwicklertools Leistungsaufzeichnungen erfassen, und zusätzliche Informationen im Bericht erhalten. Klicken Sie auf die Einstellungen für die Aufzeichnungseinstellungen , um das Menü Aufzeichnungseinstellungen aufzurufen.

Wählen Sie im Menü Aufzeichnungseinstellungen 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 von Themen aus der Anleitung sowie weitere hilfreiche Dokumentation:

Informationen zur Navigation im Bericht:

Mit Performance Insights umsetzbare Informationen zur Leistung Ihrer Website erhalten:

Informationen dazu, wie Sie sich auf das konzentrieren, was für Ihren Workflow wichtig ist:

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

Informationen zum Analysieren des Berichts:

Leistung mit diesen Bereichen verbessern

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

Zusätzliche Ressourcen