Freigeben über

Leistungstool: Analysieren der Leistung Ihrer Website

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

  • Auf der Startseite werden lokale Metriken angezeigt, während Sie mit der aktuellen Webseite interagieren.
  • Zeichnen Sie ein Profil auf, und zeigen Sie eine Leistungs-Zeitleiste an.

Ausführlicher Inhalt:

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

Ü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 einer neuen Registerkarte zu einer Webseite, z . B. zur Demo Exploring the universe .

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

    DevTools wird geöffnet.

  3. Klicken Sie oben auf der Aktivitätsleiste auf das LeistungssymbolLeistungstool .

    Wenn das LeistungssymbolLeistungstool in der Aktivitätsleiste nicht angezeigt wird, klicken Sie auf die Schaltfläche Weitere Tools (Symbol 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 einer neuen Registerkarte zu einer Webseite, z . B. zur Demo Exploring the universe .

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

    DevTools wird geöffnet.

  3. Klicken Sie in der oberen rechten Ecke von DevTools auf DevTools anpassen und steuern, und klicken Sie auf Befehl ausführen.

    Oder drücken Sie Folgendes:

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

    Das Befehlsmenü wird geöffnet und liest Befehl ausführen>.

  4. Beginnen Sie mit der Eingabe der Leistung, wählen Sie Leistung anzeigen [Panel] aus, und drücken Sie dann die EINGABETASTE.

    Befehlsmenü mit eingabe

Lokale Metriken für Seiteninteraktionen

Verwenden Sie das Leistungstool , um Core 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:

  • Größter inhaltsbehafteter Paint (LCP): Wie schnell der Hauptinhalt der Seite geladen wird.
  • Kumulative Layoutverschiebung (CLS): Ein Maß für die letzte unerwartete Seitenlayoutverschiebung.
  • Interaktion mit nächstem Paint (INP): Die Reaktionsfähigkeit der letzten Benutzerinteraktion auf der Seite.

Wenn Sie das Leistungstool zum ersten Mal öffnen, werden Core Web Vitals-Metriken in drei Karten im Abschnitt Lokale Metriken angezeigt:

Startseite des Leistungstools mit lokalen Metriken

Aufgezeichnete Zeitleiste

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

  • Zeichnen Sie ein Leistungsprofil auf.
  • Ändern der Erfassungseinstellungen.
  • Analysieren eines Leistungsberichts. Zeigt Informationen zur Leistung der Seite über den Zeitraum an, in dem die Aufzeichnung stattgefunden hat, z. B.:
    • Die Benutzerinteraktionen, die während der Aufzeichnung aufgetreten sind.
    • Der JavaScript-Code, der ausgeführt wurde.
    • Die aufgetretenen Formatierungs- und Layoutvorgänge.
    • Andere Leistungsmetriken im Laufe der Zeit, z. B. Netzwerkanforderungen und Layoutverschiebungen.

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

Wechseln zur Anzeige lokaler Metriken oder eines anderen Profils

Um zur Anzeige der anfänglichen Ansicht lokale Metriken zu wechseln, klicken Sie auf die schaltfläche Zurück zur Seite "Livemetriken

Um zum Anzeigen eines anderen geöffneten aufgezeichneten Profils Zeitleiste zu wechseln, klicken Sie auf die Dropdownliste Letzte Zeitleiste Sitzungen anzeigen, rechts neben dem Zurück zur Seite "Livemetriken

Das Leistungstool, das ein aufgezeichnetes Profil anzeigt

Überwachen von Core Web Vitals-Metriken

Verwenden Sie das Leistungstool , um Core 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:

  • Größter inhaltsbehafteter Paint (LCP): Wie schnell der Hauptinhalt der Seite geladen wird.
  • Kumulative Layoutverschiebung (CLS): Ein Maß für die letzte unerwartete Seitenlayoutverschiebung.
  • Interaktion mit nächstem Paint (INP): Die Reaktionsfähigkeit der letzten Benutzerinteraktion auf der Seite.

Begrifflichkeiten

Ausdruck Beschreibung Docs
Web Vitals Ein großer Satz von Metriken, die eine einheitliche Anleitung für eine hervorragende Benutzererfahrung im Web bieten. Web Vitals web.dev.
Core Web Vitals Die Teilmenge von Web Vitals, die für alle Webseiten gelten und von allen Websitebesitzern gemessen werden sollten. Jedes der Core Web Vitals stellt ein unterschiedliches Facet der Benutzererfahrung dar, ist in diesem Bereich messbar und spiegelt die reale Erfahrung eines kritischen benutzerorientierten Ergebnisses wider. Core Web Vitals in Web Vitals bei web.dev.
Größter inhaltsbehafteter Paint (LCP) Misst die Ladeleistung . Um eine gute Benutzererfahrung zu gewährleisten, sollte LCP innerhalb von 2,5 Sekunden nach dem ersten Laden der Seite auftreten. Die Renderzeit des größten Bilds, Textblocks oder Videos, das im Viewport sichtbar ist, relativ zu dem Zeitpunkt, zu dem der Benutzer zum ersten Mal zur Seite navigiert hat. Größte inhaltsreiche Farbe (LCP) im Glossar bei MDN. LargestContentfulPaint bei MDN.
Kumulative Layoutverschiebung (CLS) Misst die visuelle Stabilität. Um eine gute Benutzererfahrung zu gewährleisten, sollten Seiten die CLS-Version 0.1 beibehalten. oder weniger. Die größte Anzahl von Layoutverschiebungsbewertungen für jede unerwartete Layoutverschiebung, die während des gesamten Lebenszyklus einer Seite auftritt. Kumulative Layoutverschiebung (CLS) im Glossar bei MDN. LayoutShift bei MDN.
Interaktion mit nächstem Paint (INP) Misst die Interaktivität. Um eine gute Benutzererfahrung zu gewährleisten, sollten Seiten einen INP-Wert 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 gesamten Lebensdauer des Besuchs einer Seite durch einen Benutzer auftreten. Interaction to 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, während Sie mit der Seite interagieren.

Verwenden der Demoseite

So erstellen Sie im Leistungstool eine Metrik mit "Schlecht" oder "Verbesserungsbedarf" auf den LCP-, CLS- und INP-Karten:

  1. Öffnen Sie eine Webseite, z. B. die Demo zum Erkunden des Universums , in einem neuen Fenster oder einer neuen Registerkarte.

    Die Demoseite "Exploring the universe" ist so konzipiert, dass Interaktionen absichtlich 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 LeistungssymbolLeistungstool aus.

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

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

    Wenn der Bereich der Demoseite zu schmal ist, werden einige Karten möglicherweise weiterhin gut mit einem grünen Wert angezeigt, was nicht das beabsichtigte Ergebnis ist.

  5. Wählen Sie den Bereich >Nächste SchritteUmgebungseinstellungen Karte > Dropdownliste >CPU-Drosselung die Option 4x Verlangsamung – empfohlen aus.

    Oder wählen Sie Einstellungen erfassen (Symbol ) >DROPDOWN-Drosselung> der CPU-4-fache Verlangsamung – empfohlen.

  6. Wählen Sie den Bereich >Nächste SchritteUmgebungseinstellungen Karte > Dropdownliste >Netzwerkdrosselung die Option Langsame 4G aus.

  7. Wählen Sie den Bereich >Nächste SchritteUmgebungseinstellungen aus, Karte > aktivieren Sie das Kontrollkästchen Netzwerkcache deaktivieren.

    Ergebnisse lokaler Metriken: schlecht; Verbesserungsbedarf; und arm

  8. Klicken Sie mit der rechten Maustaste auf die Schaltfläche Aktualisieren links neben der Adressleiste, und wählen Sie dann Leerer Cache und harte Aktualisierung aus.

    Dadurch wird sichergestellt, dass das Image erneut vom Server und nicht aus dem 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 nach Abschluss des Renderings des Galaxiebilds gut ist, maximieren Sie das Fenster, und vergrößern Sie den Bereich der Demoseite.

    Die LCP-Karte zeigt, dass das Laden des Galaxiebilds sehr lange dauerte. 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 renderde Element.

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

    Die CLS-Karte veranschaulicht, dass plötzliche, unerwartete Sprünge im Layout die Benutzer negativ beeinflussen können. Dies liegt auch daran, dass das Laden des Bilds einige Zeit in Anspruch nimmt. Die Demowebseite versäumt es, eine Höhe für das Bild anzugeben, sodass die Seite anfänglich 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 im CLS-Karte auf den Metrikwert, um Informationen in einer QuickInfo anzuzeigen.

  12. Nachdem das Rendering des Galaxiebilds abgeschlossen ist, klicken Sie auf der gerenderten Demoseite auf eine der Überschriften in der spalte "Entdeckungen", z. B. Heliocentric Theory (1543).

    Die INP-Karte ändert sich von keinem Wert, zu einem orangefarbenen Wert und muss verbessert werden, oder ein roter Wert und schlecht. Ein INP-Wert wird angezeigt.

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

  14. Klicken Sie im INP-Karte auf den Wert INP.

    Auf der Demoseite sind die Discoveries-Karten so konzipiert, dass sie langsam erweitert und neu gerendert werden, sodass es zwischen dem Klicken auf die Überschrift und dem Rendern des erweiterten Karte Inhalts sehr lange dauert. 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 für lokale Metriken werden die Registerkarten Interaktionen und Layoutverschiebungen aufgefüllt.

Registerkarte "Interaktionen"

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

Registerkarte

Die Registerkarte Interaktionen enthält Folgendes:

  • Phasen.
  • Elemente.
  • Zeiteinteilungen.

Klicken Sie rechts neben der Registerkarte Interaktionen auf die Schaltfläche Aktuelles Protokoll löschen (Symbol Löschen), um die Registerkarte Interaktionen zu löschen.

Registerkarte "Layoutverschiebungen"

Auf der Registerkarte Layoutverschiebungen werden Informationen zu Layoutverschiebungen angezeigt:

Registerkarte

Die Registerkarte Layoutverschiebungen umfasst Folgendes:

  • Spielergebnisse.
  • Elemente.

Erfassen und Analysieren eines Leistungsberichts

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

Aufzeichnen eines Leistungsprofils

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

Ändern der Erfassungseinstellungen

Mit den Erfassungseinstellungen können Sie ändern, wie DevTools Leistungsaufzeichnungen erfasst, und Sie können zusätzliche Informationen im Bericht bereitstellen. Klicken Sie auf die Schaltfläche Einstellungen erfassen (Symbol erfassen"), um auf das Menü Aufzeichnungseinstellungen zuzugreifen.

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

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:

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

Informationen zu den Registerkarten Bottom-up, Anrufstruktur und Ereignisprotokoll :

So analysieren Sie einen Leistungsbericht:

Verbessern der Leistung mit diesen Tools

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

Tool Artikel
Lighthouse-Tool Optimieren der Websitegeschwindigkeit mit Lighthouse
Speichertool Beheben von Speicherproblemen
Registerkarte "Erkenntnisse" des Leistungstools> Erhalten Sie umsetzbare Erkenntnisse in der Referenz zu Leistungsfeatures.
Renderingtool Renderingtool, um zu sehen, wie eine Webseite mit verschiedenen Anzeigeoptionen oder Sehfehlern aussieht
Problemtool Suchen und Beheben von Problemen mit dem Tool "Probleme"
Leistungstool Anzeigen von Ebeneninformationen in der Referenz zu Leistungsfeatures

Siehe auch

Hinweis

Teile dieser Seite sind Änderungen, die auf Arbeiten basieren, die von Google erstellt und geteilt und gemäß den in der Creative Commons Attribution 4.0 International License beschriebenen Bedingungen verwendet werden. Die Originalseite ist hier zu finden und wird von Dale St. Marthe und Sofia Emelianova geschrieben.

Creative Commons License Dieses Werk ist unter einer Creative Commons Attribution 4.0 International License lizenziert.

  • Last updated on