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:
- Öffnen Sie die Entwicklertools.
- So öffnen Sie das Befehlsmenü:
- macOS: Befehlstaste + Umschalttaste + P
- Windows, Linux, ChromeOS: Strg + Umschalttaste + P
- 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, 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 Ihrer Website mit Ihren lokalen Messwerten vergleichen.
So fügen Sie Felddaten hinzu:
Klicken Sie unter Leistung > Nächste Schritte > Felddaten auf Einrichten.
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 können Sie (mehrere) Zuordnungen zwischen Entwicklungs- und Produktionsursprung einrichten, um automatisch die relevantesten Felddaten zu erhalten:
- Maximieren Sie im Dialogfeld den Bereich Erweitert und klicken Sie auf + Neu.
Geben Sie in der Zuordnungstabelle Ihre Entwicklungs- und Produktions-URLs ein und klicken Sie auf +.
Wenn Sie beispielsweise
http://localhost:8080
zuhttps://example.com
zuordnen, werden Felddaten fürexample.com/page1
angezeigt, wenn Sie zulocalhost: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 den Werten Ihrer lokalen Messwerte und denen Ihrer Nutzer. Sie finden den Erfassungszeitraum rechts im Bereich Felddaten.
Wenn Sie eine Aufschlüsselung einer Messwertbewertung aufrufen möchten, bewegen Sie den Mauszeiger auf den Messwert, um eine Kurzinfo aufzurufen.
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:
Maximieren Sie auf jeder Messwertkarte gegebenenfalls den Bereich Lokale Testbedingungen berücksichtigen und lesen Sie die Empfehlungen.
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.
So passen Sie die Umgebungskonfiguration für dieses Beispiel an:
- 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.
- 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.
- 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).
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.
Anscheinend ähneln die Messwerte 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:
- Laufzeitleistung erfassen
- Ladeleistung erfassen
- Screenshots während der Aufnahme erstellen
- Automatische Speicherbereinigung während der Aufnahme erzwingen
- Aufnahme speichern
- Aufzeichnung laden
- Aufzeichnung löschen
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:
- JavaScript-Samples deaktivieren: Hiermit wird die Aufzeichnung der JavaScript-Aufrufstacks deaktiviert, die im Haupt-Track angezeigt werden und während der Aufzeichnung aufgerufen werden. Dadurch wird der Leistungsaufwand reduziert.
- Erweiterte Paint-Instrumentierung aktivieren (langsam): Erfasst erweiterte Paint-Instrumentierung. die Leistung erheblich beeinträchtigen.
- CSS-Selektorstatistiken aktivieren (langsam): Hiermit werden CSS-Selektorstatistiken erfasst. die Leistung erheblich beeinträchtigen.
- CPU-Drosselung: Hiermit wird eine langsamere CPU-Geschwindigkeit simuliert.
- Netzwerkdrosselung: Hiermit werden langsamere Netzwerkgeschwindigkeiten simuliert.
- Hardware-Parallelität: Konfigurieren Sie den von der
navigator.hardwareConcurrency
gemeldeten Wert.
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:
- Reihenfolge der Titel ändern und Titel ausblenden
- Funktionen und ihre untergeordneten Elemente im Flammendiagramm ausblenden
- Brotkrüme erstellen und zwischen Zoomebenen wechseln
Weitere Informationen zu den Tabs „Bottom-Up“, „Anrufabfolge“ und „Ereignisprotokoll“:
So analysieren Sie den Bericht:
- Aktivitäten im Hauptthread ansehen
- Flame-Diagramm auswerten
- Screenshot ansehen
- Speichermesswerte ansehen
- Dauer eines Abschnitts einer Aufnahme ansehen
- Leistung von CSS-Selektoren bei Ereignissen vom Typ „Stil neu berechnen“ analysieren
- Node.js-Leistung mit dem Bereich „Leistung“ analysieren
- Bilder pro Sekunde (FPS) analysieren
- Referenz zum Zeitachsenereignis
Leistung mit diesen Steuerfeldern verbessern
Weitere Steuerfelder, mit denen Sie die Leistung Ihrer Website verbessern können: