Steuerfeld „Leistung“: Leistung der Website analysieren

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

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 haben Sie folgende Möglichkeiten:

  • Leistungsprofil aufzeichnen
  • Aufnahmeeinstellungen ändern
  • Leistungsbericht analysieren

Einen umfassenden Leitfaden zur Verbesserung der Leistung Ihrer Website finden Sie unter Laufzeitleistung analysieren.

Leistungssteuerfeld öffnen

Öffnen Sie die DevTools und wählen Sie oben auf einem der Tabs Leistung aus, um den Bereich Leistung zu öffnen.

Alternativ können Sie das Leistungssteuerfeld auch so über das Befehlsmenü öffnen:

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

Core Web Vitals live beobachten

Wenn Sie das Leistungsübersicht-Panel öffnen, werden sofort Ihre lokalen Messwerte für Largest Contentful Paint (LCP) und Cumulative Layout Shift (CLS) erfasst und angezeigt. Außerdem wird die Bewertung (gut, Optimierung erforderlich oder schlecht) angegeben.

Wenn Sie mit Ihrer Seite interagieren, werden im Bereich Leistung auch Ihr lokaler INP (Interaction to Next Paint) und der zugehörige Wert 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 Werten (für Layoutverschiebungen). Wenn Sie beide Listen löschen möchten, klicken Sie auf Löschen.

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

Ihre Erfahrungen mit denen 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 Abschnitt „Nächste Schritte“.

  2. Sehen Sie sich im Dialogfeld Felddatenabruf konfigurieren die Datenschutzerklärung an und klicken Sie auf Ok.

    Erweitert: Zuordnung zwischen Entwicklungs- und Produktionsumgebungen einrichten…

    Optional können Sie (mehrere) Zuordnungen zwischen Ihren Entwicklungs- und Produktionsursprüngen 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 Produktionsursprüngen im erweiterten Bereich.

      Wenn Sie beispielsweise http://localhost:8080 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 Felddaten für diese URL abgerufen und dann angezeigt, unabhängig davon, auf welche Seite Sie wechseln.

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

    Nachdem Sie das Abrufen von Felddaten eingerichtet haben, sehen Sie im Bereich Leistung einen Vergleich zwischen Ihren lokalen Messwertwerten und denen, die Ihre Nutzer sehen. Der Erfassungszeitraum wird rechts im Bereich Felddaten angezeigt.

    Der Erhebungszeitraum für Felddaten nach dem Abrufen.

    Wenn Sie eine Aufschlüsselung eines Messwert-Scores aufrufen 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 das Abrufen von Felddaten wie im vorherigen Abschnitt beschrieben eingerichtet haben, erhalten Sie im Bereich Leistung Empfehlungen zur Konfiguration Ihrer Umgebung, damit sie besser den Anforderungen Ihrer Nutzer 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.

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

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

  2. So richten Sie die Umgebungskonfiguration für dieses Beispiel ein:

    1. Stellen Sie den Darstellungsbereich auf eine der gängigen Bildschirmgrößen ein, 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 Computer zum Surfen. Wenn Sie die Messwerte für Ihre Kampagne mit den richtigen Felddaten vergleichen möchten, wählen Sie in der Drop-down-Liste Felddaten > Gerät die Option Desktop aus.
    3. Legen Sie im Bereich Umgebungseinstellungen die Drop-down-Liste Netzwerk auf z. B. Schnelles 4G und CPU auf z. B. 20-fache Verlangsamung fest. Achten Sie außerdem darauf, dass im selben Bereich Netzwerk-Cache deaktivieren ausgewählt ist.

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

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

    Die Messwertwerte ähneln jetzt mehr denen, die Ihre Nutzer sehen. Die Abschnitte Lokale Testbedingungen berücksichtigen sind daher nicht mehr auf den Messwertkarten zu sehen.

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

Leistungsbericht erstellen und analysieren

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

Leistungsprofil aufzeichnen

Wenn Sie bereit sind, die Aufnahme zu starten, haben Sie im Bereich Leistung die folgenden Optionen:

Aufnahmeeinstellungen ändern

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

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

Leistungsbericht analysieren

Einen vollständigen Leitfaden zur Verwendung des Leistungsbereichs finden Sie unter Leistungsaufzeichnung analysieren.

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

So navigieren Sie im Bericht:

Mit Performance Insights erhalten Sie umsetzbare Informationen zur Leistung Ihrer Website:

So konzentrieren Sie sich auf das Wesentliche für Ihren Workflow:

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

So analysieren Sie den Bericht:

Mit diesen Bereichen die Leistung verbessern

Weitere Bereiche, die Ihnen helfen können, die Leistung Ihrer Website zu verbessern: