Leistungstool: Analysieren Sie die Leistung Ihrer Website

Verwenden Sie das Leistungstool, um die Leistung Ihrer Website zu analysieren. Es gibt zwei Hauptansichten:

• Auf der Startseite werden lokale Kennzahlen angezeigt, während Sie mit der aktuellen Webseite interagieren.
• Aufzeichnen eines Profils und Anzeigen einer Zeitleiste für die Performance.

Detaillierter Inhalt:

• Übersicht
  • Öffnen des Leistungstools
    • Verwenden des Befehlsmenüs
  • Lokale Metriken für Seiteninteraktionen
  • Aufgezeichnete Profil-Zeitleiste
  • Wechseln zur Anzeige lokaler Metriken oder eines anderen Profils
• Überwachen der wichtigsten Web Vitals-Metriken
  • Terminologie
  • Verwenden der Demoseite
  • Registerkarte "Interaktionen"
  • Registerkarte "Layoutverschiebungen"
• Mitschreiben und Analysieren eines Leistungsberichts
  • Aufzeichnen eines Leistungsprofils
  • Aufnahmeeinstellungen ändern
  • Analysieren eines Leistungsberichts
• Verbessern Sie die Leistung mit diesen Tools

Eine exemplarische Vorgehensweise zur Verwendung des Leistungstools zum Verbessern der Leistung Ihrer Website finden Sie unter Analysieren der Laufzeitleistung (Lernprogramm).

Übersicht

Das Leistungstool zeigt lokale Metriken für Seiteninteraktionen an und ermöglicht es Ihnen, CPU-Leistungsprofile Ihrer Webanwendungen aufzuzeichnen. Analysieren Sie Profile, um potenzielle Leistungsengpässe und Möglichkeiten zur Optimierung der Ressourcennutzung zu finden.

Öffnen des Leistungstools

So öffnen Sie das Leistungstool:

1. Wechseln Sie in einem neuen Fenster oder auf einer neuen Registerkarte zu einer Webseite, z. B. die Demo "Das Universum erkunden ".

2. Klicken Sie mit der rechten Maustaste auf die Webseite, und wählen Sie dann "Überprüfen" aus.

   DevTools wird geöffnet.

3. Klicken Sie oben in der Aktivitätsleiste auf das Leistungstool .

   Wenn das Leistungstool nicht in der Aktivitätsleiste angezeigt wird, klicken Sie auf die Schaltfläche Weitere Tools () und wählen Sie dann das Leistungstool aus.

Verwenden des Befehlsmenüs

So öffnen Sie das Leistungstool über das Befehlsmenü:

1. Wechseln Sie in einem neuen Fenster oder auf einer neuen Registerkarte zu einer Webseite, z. B. die Demo "Das Universum erkunden ".

2. Klicken Sie mit der rechten Maustaste auf die Webseite, und wählen Sie dann "Überprüfen" aus.

   DevTools wird geöffnet.

3. Klicken Sie oben rechts in DevTools auf DevTools anpassen und steuern, und klicken Sie auf Befehl ausführen.

   Oder drücken Sie:

   • macOS: BEFEHL+UMSCHALT+P
   • Windows, Linux, ChromeOS: CTRL+UMSCHALT+P

   Das Befehlsmenü wird geöffnet und enthält die Option Befehl ausführen>.

4. Beginnen Sie mit der Eingabe von Leistung, wählen Sie Leistung anzeigen [Bereich] und drücken Sie dann die Eingabetaste.

   

Lokale Metriken für Seiteninteraktionen

Verwenden Sie das Leistungstool, um die wichtigsten Web Vitals-Metriken in der anfänglichen Ansicht "Lokale Metriken " anzuzeigen. Auf der Startseite des Leistungstools werden lokale Metriken angezeigt, d. h. Leistungsmetriken zur gerenderten Webseite:

• Largest Contentful Paint (LCP) – Gibt an, wie schnell der Hauptinhalt der Seite geladen wurde.
• Kumulative Layoutverschiebung (CLS) – Ein Maß für die letzte unerwartete Seitenlayoutänderung.
• Interaktion zum nächsten Paint (INP): Die Reaktionsfähigkeit der letzten Benutzerinteraktion auf der Seite.

Wenn Sie das Performance-Tool zum ersten Mal öffnen, werden die Core Web Vitals-Metriken in drei Karten in einem Abschnitt "Lokale Metriken " angezeigt:

Aufgezeichnete Profil-Zeitleiste

Verwenden Sie auch das Leistungstool, um eine aufgezeichnete Leistungsablaufverfolgung anzuzeigen, einschließlich:

• Aufzeichnen eines Leistungsprofils.
• Aufnahmeeinstellungen ändern.
• Analysieren eines Leistungsberichts. Zeigt Informationen über die Leistung der Seite über den Zeitraum an, in dem die Aufzeichnung aufgetreten ist, z. B.:
  • Die Benutzerinteraktionen, die während der Aufzeichnung aufgetreten sind.
  • Der ausgeführte JavaScript-Code.
  • Die aufgetretenen Formatierungs- und Layoutvorgänge.
  • Andere Leistungsmetriken im Zeitverlauf, z. B. Netzwerkanforderungen und Layoutänderungen.

Nachdem Sie eine Leistungsablaufverfolgung aufgezeichnet haben, wird diese Leistungsablaufverfolgung anstelle der lokalen Metriken angezeigt.

Wechseln zur Anzeige lokaler Metriken oder eines anderen Profils

Um zur Anzeige der anfänglichen Ansicht "Lokale Kennzahlen" zu wechseln, klicken Sie auf die Schaltfläche Zurück zur Seite mit den Live-Kennzahlen ().

Um zur Anzeige eines anderen geöffneten aufgezeichneten Profils Zeitleiste zu wechseln, klicken Sie auf das Dropdown-Menü Zuletzt Zeitleiste Sitzungen anzeigen, rechts neben der Schaltfläche Zurück zur Seite mit den Live-Metriken ().

Überwachen der wichtigsten Web Vitals-Metriken

Verwenden Sie das Leistungstool, um die wichtigsten Web Vitals-Metriken in der anfänglichen Ansicht "Lokale Metriken " anzuzeigen. Auf der Startseite des Leistungstools werden lokale Metriken angezeigt, bei denen es sich um Leistungsmetriken zur gerenderten Webseite handelt:

• Largest Contentful Paint (LCP) – Gibt an, wie schnell der Hauptinhalt der Seite geladen wurde.
• Kumulative Layoutverschiebung (CLS) – Ein Maß für die letzte unerwartete Seitenlayoutänderung.
• Interaktion zum nächsten Paint (INP): Die Reaktionsfähigkeit der letzten Benutzerinteraktion auf der Seite.

Begrifflichkeiten

Ausdruck	Beschreibung	Docs
Web Vitals	Eine große Gruppe von Metriken, die einheitliche Anleitungen zur Bereitstellung einer großartigen Benutzererfahrung im Web bieten.	Web Vitals at web.dev.
Core Web Vitals	Die Teilmenge der Web Vitals, die für alle Webseiten gelten und von allen Websitebesitzern gemessen werden sollten. Jedes der Core Web Vitals repräsentiert eine bestimmte Facette der Benutzererfahrung, ist in der Praxis messbar und spiegelt die reale Erfahrung eines kritischen benutzerzentrierten Ergebnisses wider.	Core Web Vitals in Web Vitals bei web.dev.
Largest Contentful Paint (LCP)	Misst die Ladeleistung . Um eine gute Benutzererfahrung zu bieten, sollte LCP innerhalb von 2,5 Sekunden nach dem ersten Laden der Seite erfolgen. Die Renderzeit des größten Bildes, Textblocks oder Videos, das im Ansichtsfenster sichtbar ist, bezogen auf den Zeitpunkt, zu dem der Benutzer zum ersten Mal zur Seite navigiert hat.	Largest Contentful Paint (LCP) in Glossary bei MDN. LargestContentfulPaint bei MDN.
Kumulative Layoutverschiebung (CLS)	Misst die visuelle Stabilität. Um eine gute Benutzererfahrung zu bieten, sollten Seiten einen CLS von 0,1 beibehalten. oder weniger. Die größte Burst von Layoutänderungsbewertungen für jede unerwartete Layoutänderung, die während des gesamten Lebenszyklus einer Seite auftritt.	Kumulative Layoutverschiebung (CLS) im Glossar bei MDN. LayoutShift bei MDN.
Interaktion mit nächster Farbe (INP)	Misst Interaktivität. Um eine gute Benutzererfahrung zu bieten, sollten Seiten einen INP von 200 Millisekunden oder weniger aufweisen. Die allgemeine Reaktionsfähigkeit der Seite auf Benutzerinteraktionen, basierend auf der Latenz aller Klick-, Tipp- und Tastaturinteraktionen, die während der Lebensdauer des Besuchs eines Benutzers auf einer Seite auftreten.	Interaktion mit Next Paint (INP) im Glossar bei MDN. PerformanceEventTiming bei MDN.
lokale Metriken, lokale Daten	Die LCP-, CLS- und INP-Metriken. Sie werden lokal auf der überprüften Webseite erfasst und aktualisiert, wenn Sie mit der Seite interagieren.

Verwenden der Demoseite

So erstellen Sie eine schlechte oder verbesserungswürdige Metrik auf den LCP-, CLS- und INP-Kartenim Leistungstool :

1. Öffnen Sie eine Webseite, z. B. die Demo "Das Universum erkunden ", in einem neuen Fenster oder auf einer neuen Registerkarte.

   Die Demoseite "Das Universum erkunden" ist so konzipiert, dass Interaktionen absichtlich langsam geladen und verarbeitet werden, um zu veranschaulichen, wie die LCP-, CLS- und INP-Metriken im Leistungstool verwendet werden können, um Leistungsprobleme zu identifizieren und zu beheben.

2. Klicken Sie mit der rechten Maustaste auf die Webseite, und wählen Sie dann "Untersuchen" aus.

   DevTools wird geöffnet.

3. Wählen Sie oben in der Aktivitätsleiste das aus .

   Wenn das Leistungstool nicht in der Aktivitätsleiste angezeigt wird, klicken Sie auf die Schaltfläche Weitere Tools () und wählen Sie dann das Leistungstool aus.

4. Maximieren Sie das Fenster, und machen Sie den Demoseitenbereich breit, z. B. 60 % der Breite des Fensters.

   Wenn der Demoseitenbereich zu schmal ist, werden einige Karten möglicherweise weiterhin gut mit einem grünen Wert angezeigt, was nicht dem beabsichtigten Ergebnis entspricht.

5. Wählen Sie den Bereich "> Nächste Schritte" aus, Karte "Umgebungseinstellungen", > Dropdownliste >"CPU-Drosselung", "4x Verlangsamung" auswählen – empfohlen.

   Oder wählen Sie Einstellungen mitschreiben () >CPU-Drosselungs-Dropdown>4-fache Verlangsamung – empfohlen.

6. Wählen Sie den Bereich >"Nächste Schritte", die Karte > "Umgebungseinstellungen", das Dropdownmenü >"Netzwerkdrosselung", wählen Sie "Slow 4G" aus.

7. Wählen Sie den Bereich "> Nächste Schritte" aus, die Karte >"Umgebungseinstellungen", und aktivieren Sie das Kontrollkästchen "Netzwerkcache deaktivieren".

   

8. Klicken Sie mit der rechten Maustaste (oder klicken Sie lange) auf die Schaltfläche "Aktualisieren " links neben der Adressleiste, und wählen Sie dann "Cache leeren und hartes Aktualisieren" aus.

   Dadurch wird sichergestellt, dass das Image erneut vom Server und nicht vom lokalen Cache geladen wird.

   Die LCP- und CLS-Karten zeigen einen orangefarbenen Wert an und müssen verbessert werden, oder einen roten Wert und einen schlechten Wert anstelle eines grünen Werts und gut.

9. Wenn die LCP- oder CLS-Karte grün bleibt und "Gut" anzeigt, nachdem das Galaxiebild gerendert wurde, maximieren Sie das Fenster und verbreitern Sie den Demoseitenbereich.

   Die LCP-Karte zeigt, dass das Laden des Galaxienbildes sehr lange gedauert hat. Die Karte zeigt einen orangefarbenen Wert an und muss verbessert werden, oder einen roten Wert und einen schlechten Wert anstelle eines grünen Werts und gut. Die Engine identifiziert dieses Bild als das größte zu rendernde Element.

10. Zeigen Sie in der LCP-Karte auf den Metrikwert, um Informationen in einer QuickInfo anzuzeigen.

    Die CLS-Karte veranschaulicht, dass sich plötzliche, unerwartete Sprünge im Layout negativ auf Benutzer auswirken können. Dies ist auch darauf zurückzuführen, dass das Laden des Bildes einige Zeit dauert. Die Demo-Webseite vernachlässigt entwurfsbedingt die Angabe einer Höhe für das Bild, sodass die Seite zunächst geladen wird, ohne viel Platz für das Bild zu reservieren. Wenn das Bild angezeigt wird, springt der Inhalt darunter plötzlich nach unten.

11. Zeigen Sie auf der CLS-Karte mit dem Mauszeiger auf den Metrikwert, um Informationen in einer QuickInfo anzuzeigen.

12. Nachdem das Galaxienbild gerendert wurde, klicken Sie auf der gerenderten Demoseite auf eine der Überschriften in der rechten Spalte Entdeckungen , z. B. Heliozentrische Theorie (1543).

    Die INP-Karte ändert sich von "Kein Wert" zu "Orangefarbener Wert, der verbessert werden muss" oder zu "Rot" und "Schlecht". Ein INP-Wert wird angezeigt.

13. Zeigen Sie in der INP-Karte mit der Maus auf den Metrikwert, um Informationen in einer QuickInfo anzuzeigen.

14. Klicken Sie in der INP-Karte auf den INP-Wert.

    Auf der Demoseite sind die Entdeckungskarten so konzipiert, dass sie langsam erweitert und neu gerendert werden, sodass es lange dauert, auf die Überschrift zu klicken und den Inhalt der erweiterten Karte zu rendern. Die Verzögerung ist ein zufälliger Wert zwischen 100 ms und 1000 ms, was zu einem hohen INP-Wert führt.

    Unterhalb der Karten "Lokale Kennzahlen " sind die Registerkarten "Interaktionen " und " Layoutschichten " aufgefüllt.

Registerkarte "Interaktionen"

Auf der Registerkarte Interaktionen werden Informationen zu Ihren Interaktionen mit der Webseite angezeigt:

Die Registerkarte "Interaktionen " enthält Folgendes:

• Phasen.
• Elemente.
• Zeitangaben.

Um die Registerkarte "Interaktionen" zu löschen, klicken Sie rechts neben der Registerkarte "Interaktionen" auf die Schaltfläche "Aktuelles Protokoll löschen" (").

Registerkarte "Layoutverschiebungen"

Auf der Registerkarte Layoutverschiebungen werden Informationen zu Layoutverschiebungen angezeigt:

Die Registerkarte "Layoutschichten " enthält Folgendes:

• Ergebnisse.
• Elemente.

Mitschreiben und Analysieren eines Leistungsberichts

Befolgen Sie in den nächsten Abschnitten die Anleitung zum Aufzeichnen eines Profils, Ändern der Aufzeichnungseinstellungen und Analysieren des Berichts.

Aufzeichnen eines Leistungsprofils

Wenn Sie zum Aufzeichnen bereit sind, bietet Ihnen das Leistungstool die folgenden Optionen:

• Aufzeichnen der Laufzeitleistung in Referenz zu Leistungsfeatures.
• Ladeleistung in Referenz zu Leistungsfeatures aufzeichnen.
• Mitschreiben von Screenshots während der Aufzeichnung in Referenz zu Leistungsfeatures.
• Erzwingen der Garbage Collection während der Aufzeichnung in der Referenz zu Leistungsfeatures.
• Speichern und teilen Sie eine Aufzeichnung in der Referenz zu Leistungsfeatures.
• Laden Sie eine Aufzeichnung in Referenz zu Leistungsfeatures.
• Löschen Sie die vorherige Aufzeichnung in Bezug auf Leistungsfeatures.

Aufnahmeeinstellungen ändern

Mit den Einstellungen zum Mitschreiben können Sie ändern, wie DevTools Leistungsaufzeichnungen erfasst, und zusätzliche Informationen im Bericht erhalten. Klicken Sie auf die Schaltfläche Einstellungen für die Mitschreiben (), um auf das Menü "Einstellungen für Mitschreiben" zuzugreifen.

Wählen Sie im Menü "Einstellungen für Mitschreiben" die folgenden Optionen aus:

• Aktivieren Sie das Kontrollkästchen JavaScript-Beispiele deaktivieren : Deaktiviert die Aufzeichnung der JavaScript-Aufrufstapel, die in der Hauptspur angezeigt werden und während der Aufzeichnung aufgerufen werden. Reduziert den Overhead für die Leistung. Siehe Beispiele zum Deaktivieren von JavaScript in Referenz zu Leistungsfeatures.

• Aktivieren Sie das Kontrollkästchen Erweiterte Renderinginstrumentation aktivieren (langsam): Erfasst erweiterte Malinstrumente. Beeinträchtigt die Leistung erheblich. Weitere Informationen finden Sie unter Aktivieren der erweiterten Paint-Instrumentierung in der Referenz zu Leistungsfeatures.

• Aktivieren Sie das Kontrollkästchen CSS-Selektorstatistiken aktivieren (langsam): Erfasst CSS-Selektorstatistiken. Beeinträchtigt die Leistung erheblich. Weitere Informationen finden Sie unter Anzeigen der Kosten für CSS-Selektoren in der Seitenleiste des Leistungstools unter Neuigkeiten in DevTools (Microsoft Edge 131).

• CPU-Drosselung: Simulieren Sie langsamere CPU-Geschwindigkeiten. Siehe Drosseln der CPU während der Aufzeichnung in Referenz zu Leistungsfeatures.

• Netzwerkdrosselung: Simulieren Sie langsamere Netzwerkgeschwindigkeiten. Siehe Drosseln des Netzwerks während der Aufzeichnung in Referenz zu Leistungsfeatures.

Analysieren eines Leistungsberichts

Eine vollständige Anleitung zur Verwendung des Leistungstools finden Sie unter Analysieren einer Leistungsaufzeichnung in der Referenz zu Leistungsfeatures.

So navigieren Sie in einem Leistungsbericht:

• Siehe Navigieren in der Aufzeichnung in Referenz zu Leistungsfeatures.

• Weitere Informationen finden Sie unter Suchen nach Aktivitäten in Referenz zu Leistungsfeatures.

• Weitere Informationen finden Sie unter Nachverfolgen von Ereignisinitiatoren in Referenz zu Leistungsfeatures.

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

• Ändern der Reihenfolge von Titeln und Ausblenden

• Funktionen und ihre untergeordneten Elemente im Flammendiagramm ausblenden

• Zoomen Sie auf Teile einer Aufzeichnung und wechseln Sie zwischen Zoomstufen in Referenz zu Leistungsfeatures.

So erfahren Sie mehr über die Registerkarten Bottom-up,Aufrufstruktur und Ereignisprotokoll :

• Anzeigen von Aktivitäten in einer Tabelle in der Referenz zu Leistungsfeatures.

So analysieren Sie einen Leistungsbericht:

• Zeigen Sie die Hauptthreadaktivität in der Referenz zu Leistungsfeatures an.
• Lesen Sie das Flammendiagramm in der Referenz zu Leistungsfeatures.
• Screenshots in Referenz zu Leistungsfeatures anzeigen.
• Zeigen Sie Speichermetriken in der Referenz zu Leistungsfeatures an.
• Anzeigen der Dauer eines Teils einer Aufzeichnung in der Referenz zu Leistungsfeatures.
• Analysieren Sie die Leistung des CSS-Selektors während "Stil neu berechnen"-Ereignisse.
• Analysieren Sie Frames pro Sekunde (FPS) in der Referenz zu Leistungsfeatures.
• Referenz der Leistungsaufzeichnung

Verbessern Sie die Leistung mit diesen Tools

Entdecken Sie weitere Tools, mit denen Sie die Performance Ihrer Website verbessern können:

Tool	Artikel
Lighthouse-Tool	Optimieren Sie die Websitegeschwindigkeit mithilfe von Lighthouse
Speichertool	Beheben von Arbeitsspeicherproblemen
Registerkarte"Einblicke" des Leistungstools >	In der Referenz zu Leistungsfeaturesfinden Sie umsetzbare Erkenntnisse.
Rendering-Tool	Renderingtool, um zu sehen, wie eine Webseite mit verschiedenen Anzeigeoptionen oder für Personen mit Sehstörungen aussieht
Probleme-Tool	Suchen und Beheben von Problemen mit dem Problemtool
Leistungstool	Anzeigen von Ebeneninformationen in der Referenz zu Leistungsfeatures

Siehe auch

• Erkunden der Demo-Seite "Universum"

Hinweis

Teile dieser Seite sind Änderungen, die auf von Google erstellten und freigegebenen Werken basieren und gemäß den in der Creative Commons Attribution 4.0 International License beschriebenen Begriffen verwendet werden. Die Originalseite findet sich hier und wurde von Dale St. Marthe und Sofia Emelianova verfasst.

Diese Arbeit ist lizenziert unter einer Creative Commons Attribution 4.0 International License.