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 zu finden und Möglichkeiten zur Optimierung der Ressourcennutzung zu ermitteln.

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 auf einem der Tabs Leistung aus, um den Bereich Leistung zu öffnen.

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

  1. Öffnen Sie die Entwicklertools.
  2. Öffnen Sie das Befehlsmenü , indem Sie Folgendes drücken:
  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.

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 Messwertbewertung erhalten möchten, bewegen Sie den Mauszeiger auf den Messwert, um eine Kurzinfo aufzurufen.

Vergleichen Sie Ihre Erfahrung mit der Ihrer Nutzer

Sie können auch Felddaten aus dem Chrome UX Report 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.

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

  2. Lesen Sie im Dialogfeld Felddatenabruf konfigurieren den Datenschutzhinweis 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. Maximieren Sie im Dialogfenster den Bereich Erweitert und klicken Sie auf + Neu.

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

      Die Zuordnung zwischen Entwicklungs- und Produktionsursprüngen finden Sie 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 das Kästchen Felddaten für die unten angegebene URL immer anzeigen aktivieren und eine URL angeben. Im Bereich Leistung werden zuerst 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 Messwertbewertungen 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 Messwertbewertung 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

Wenn 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. 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 eine gängige Desktop-Bildschirmgröße verwenden und die CPU und das Netzwerk drosseln, damit die Erfahrung Ihrer Nutzer besser nachvollzogen werden kann.

  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 Messwertbewertungen mit den richtigen Felddaten vergleichen können, wählen Sie in der Drop-down-Liste Felddaten > Gerät die Option Desktop aus.
    3. Legen Sie im Bereich Umgebungseinstellungen in der Drop-down-Liste Netzwerk beispielsweise Schnelles 4G und in der Drop-down-Liste CPU beispielsweise 20-fache Verlangsamung fest. Aktivieren Sie im selben Bereich 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 Messwertbewertungen noch einmal.

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

    Die Messwertbewertungen ähneln jetzt eher denen Ihrer Nutzer. Entsprechend wurden die Bereiche 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 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:

So navigieren Sie im Bericht:

Mit Performance Insights umsetzbare Informationen zur Leistung Ihrer Website erhalten:

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

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

So analysieren Sie den Bericht:

Leistung mit diesen Bereichen verbessern

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