So verwenden Sie Chrome Dev Tools zur Analyse der Seitenleistung (Front-End-Leistungsoptimierung)

Hintergrund

Wir verwenden Chrome Dev Tools häufig für Entwicklung und Debugging, aber nur wenige wissen, wie man damit die Seitenleistung analysiert. In diesem Artikel erkläre ich ausführlich, wie man Chrome Dev Tools zur Analyse der Seitenleistung verwendet und wie man Leistungsberichtsdaten interpretiert.

Einführung in das Analysepanel

Das obige Bild ist ein Screenshot von Chrome Dev Tools. Ich denke, die Funktionen der im Bild eingekreisten Module werden hauptsächlich zur schnellen Analyse der Seitenleistung verwendet. Hier ist eine kurze Einführung:

• Netzwerk: Die verschiedenen Ressourcenanforderungen auf der Seite. Hier können Sie den Ressourcennamen, den Status, das verwendete Protokoll (http1/http2/quic...), den Ressourcentyp, die Ressourcengröße, die Ressourcenzeitleiste usw. sehen.
• Leistung: Flammendiagramm verschiedener Leistungsindikatoren der Seite, in dem Sie die Zeit des weißen Bildschirms, FPS, die Zeitleiste zum Laden von Ressourcen, Longtask, die Speicheränderungskurve und andere Informationen sehen können
• Speicher: Kann den Seitenspeicherstatus zu einem bestimmten Zeitpunkt aufzeichnen. Wird im Allgemeinen zur Analyse von Speicherlecks verwendet.
• JavaScript Profiler: Er kann den Zeitverbrauch von Funktionen aufzeichnen und erleichtert so das Auffinden zeitintensiver Funktionen
• Ebenen: Zeigt die Ebenen auf der Seite an

Analyseschritte

Zunächst empfehlen wir, bei der Analyse die Seite im Inkognito-Modus zu öffnen, um den Einfluss von Faktoren wie Plug-Ins auf die Seitenleistung auszuschließen. Anschließend deaktivieren wir den Seitencache, um die Situation mit deaktiviertem Cache zu testen, und passen dann die Netzwerkbedingungen an. Wenn wir einen Computer zum Öffnen einer Seite verwenden, sind wir normalerweise mit WLAN usw. verbunden. Um die Leistung der Seite realistischer zu testen, ist es besser, das Netzwerk auf 3G usw. einzustellen, wie in der Abbildung gezeigt:

Nach der Anpassung wechseln wir zum Performance-Panel. Hier sind einige Schaltflächen mit Erklärung ihrer Funktionen:

Das obige Bild stellt von links nach rechts dar:

• Die Aufnahme muss manuell gestartet und nach dem Start manuell beendet werden.
• Starten Sie die Seite automatisch neu und zeichnen Sie den gesamten Seitenladevorgang auf. Dies ist die am häufigsten verwendete Option. Klicken Sie bei der Analyse der Seitenleistung im Allgemeinen einfach hierauf.
• Löschen Sie die Leistungsaufzeichnungsprotokolle
• Daten zur Seitenleistungsaufzeichnung hochladen
• Seite zum Herunterladen von Leistungsaufzeichnungsdaten
• Wählen Sie die anzuzeigenden Leistungsaufzeichnungen aus. Möglicherweise haben Sie mehrere Analysen durchgeführt. Sie können hierher wechseln, um die Ergebnisse der einzelnen Analysen anzuzeigen.
• Ob Screenshots des Seitenladevorgangs aufgenommen werden sollen, wird normalerweise aktiviert
• Ob Speicheränderungen aufgezeichnet werden sollen, wird normalerweise überprüft
• Garbage Collection: Klicken Sie hier, um die Garbage Collection durchzuführen.

Hier nehme ich eine Seite von JD.com als Beispiel, überprüfe den deaktivierten Cache und verwende das schnelle 3G-Netzwerk, um zu veranschaulichen, wie man die Leistungsergebnisse versteht und Optimierungspunkte findet.

Analysieren über das Netzwerkfenster

Werfen wir einen Blick auf das Netzwerkfenster, um zu sehen, welche Informationen verfügbar sind. Wie in der folgenden Abbildung dargestellt:

Wie aus der Abbildung ersichtlich ist, sind einige Methoden zur Leistungsoptimierung auf der Seite:

• Die Seite geht direkt raus, geben Sie https://wq.jd.com/wxportal/index_v6 ein, das von der Seite zurückgeladene Dokument ist eine gerenderte HTML-Seite
• Bildoptimierung, Bereitstellung unter verschiedenen CDN-Domänennamen, Verwendung von WebP/DPG und Bildern in anderen Formaten, Bildzuschnitt usw.
• Einige der HTTP-Protokolle verwenden HTTP2 und Multiplexing, um das Laden von Ressourcen zu beschleunigen
• Das kleine Logo wird mit Base42 verarbeitet
• Laden bei Bedarf, das Menü lädt zuerst die Symbole des ersten Bildschirms und dann die Symbole des zweiten Bildschirms, wenn es zum zweiten Bildschirm wechselt

Aus den Bildern schließe ich, dass auch folgende Methoden zur Leistungsoptimierung in Betracht gezogen werden können:

• Die Größe des HTML beträgt 138 KB und die Downloadzeit des Inhalts beträgt mehr als 700 Millisekunden. Ich denke, die Seite kann aufgeteilt werden und der Inhalt, der nicht einen oder zwei Bildschirme einnimmt, kann separat geladen werden.
• TTFB (Time To First Byte) beträgt über 500 Millisekunden, was bedeutet, dass die Wartezeit vor dem Herunterladen des ersten Bytes zu lang ist. Dies wird jedoch hauptsächlich von den Netzwerkbedingungen des Benutzers beeinflusst und es gibt nicht viel, was man dagegen tun kann. Wie zum Beispiel Optimierung der DNS-Auflösung, Verkürzung der Verarbeitungszeit von Backend-Diensten usw.
• Sprite-Bilder zusammenführen. Die Symbole in den Menükategorien unter dem großen Karussell können mithilfe eines Sprite-Bildes gruppiert werden.
• Beim ersten Laden des oberen Karussells können Sie zuerst das erste Bildbild laden und die nächsten paar Bilder verzögern.
• Wenn viele Bilder vorhanden sind, verwenden Sie nach Möglichkeit das http2-Protokoll.

Analysieren Sie über das Leistungspanel

Wechseln Sie zum Leistungsbereich, klicken Sie auf den automatischen Seitenneustart, zeichnen Sie den gesamten Seitenladevorgang auf und analysieren Sie anschließend die Ergebnisse ~​

Netzwerk &&Weißer Bildschirm

Das Leistungspanel hat viele, viele Parameter, und wir werden uns einige der gebräuchlichsten ansehen. Sehen Sie sich zunächst die Zeit des weißen Bildschirms und den Netzwerkladestatus an, wie unten gezeigt:

Im obigen Bild können wir mehrere Informationen sehen:

• Die Ladezeit für den weißen Bildschirm beträgt ca. 1000 ms.
• Die FPS-Kurve ist nicht rot markiert. Wenn viele rote Linien vorhanden sind, bedeutet dies, dass die Seite viele Rendering-Lags aufweist.
• Gemessen an der Ladesituation der Netzwerkressourcen aktivieren die Bilder http2 nicht, sodass die Anzahl der Bilder, die gleichzeitig geladen werden können, begrenzt ist und die nicht geladenen Bilder einen Wartevorgang haben
• Auch die Ladezeiten der Ressourcen können sich sehen lassen. So dauert das Laden des Hintergrundbildes des Karussells knapp 700 Millisekunden, was etwas lange ist.

Darüber hinaus können wir prüfen, ob es beim Laden der Ressourcen eine Leerzeit gibt. Obwohl in der obigen Abbildung keine Leerzeit vorhanden ist, bedeutet eine Leerzeit zwischen dem Laden der Ressourcen, dass die Leerlaufzeit beim Laden der Ressourcen nicht vollständig ausgenutzt wird und angepasst werden kann.

Flammendiagramm

Das Flammendiagramm befindet sich hauptsächlich im Hauptfenster. Es ist das Fenster, das wir am häufigsten verwenden, um den Zeitaufwand bestimmter Funktionen zu analysieren. Schauen wir es uns an, wie in der Abbildung gezeigt:

Erstens gibt es viele Aufgaben im Panel. Wenn es sich um eine zeitaufwändige Aufgabe handelt, wird die obere rechte Ecke rot markiert (nicht im Bild, was bedeutet, dass die logische Verarbeitung des ersten Bildschirms der Seite gut verteilt ist). Zu diesem Zeitpunkt können wir die rot markierte Aufgabe auswählen (wählen Sie hier einfach eine aus) und dann hineinzoomen (auswählen und mit der Maus verschieben, um hineinzuzoomen), um den spezifischen zeitaufwändigen Punkt anzuzeigen.

Nach dem Vergrößern können Sie sehen, welche Operationen ausgeführt werden und wie viel Zeit jede Funktion benötigt. Der Code ist hier komprimiert und Sie können die komprimierten Funktionsnamen sehen. Dann klicken wir auf eine Funktion und unten im Fenster werden die Codeinformationen angezeigt, unter anderem um welche Funktion es sich handelt, wie viel Zeit sie benötigt, welche Zeile aus welcher Datei stammt usw. Auf diese Weise können wir die zeitaufwändige Funktion leicht lokalisieren.

Sie können die Registerkarten auch horizontal wechseln, um den Aufrufstapel und andere Informationen anzuzeigen. So können Sie den entsprechenden Code leichter finden. Du kannst es versuchen ~

Zeitleiste und Speicherstatus

Im Bereich „Zeitangaben“ können wir einige wichtige Zeiten für das Laden sehen:

• FCP: Erstes Contentful Paint
• LCP: Größte Contentful Paint
• FMP: Erste bedeutungsvolle Farbe
• DCL: DOMContentLoaded-Ereignis
• L: Onload-Ereignis

Wir können den Bereich auswählen (den Bereich vom weißen Bildschirm bis zum Bereich mit Inhalt auswählen, der diesmal den Seitenladevorgang darstellt) und ihn mit der obigen Zeit vergleichen. Der Screenshot sieht wie folgt aus:

Darüber hinaus können wir die Speichernutzung auf der Seite sehen, z. B. JS Heap. Wenn die Kurve weiter ansteigt, bedeutet dies, dass ein Speicherverlust vorliegt. Wie aus der Abbildung ersichtlich ist, ist die Speicherkurve lange Zeit nicht gesunken. Es besteht die Möglichkeit eines Speicherverlusts. Der Speicher wird nach Onload freigegeben. Weitere Ursachen und Analysemethoden für Speicherlecks finden Sie in meinem Artikel „Analyse des Speicherbereinigungsmechanismus und von Speicherlecks im Chrome-Browser“.

Unten finden Sie eine Zusammenfassung des Zeitaufwands der Seite. Wenn die Skriptzeit zu lang ist, bedeutet dies, dass JS zu viel Logik ausführt, und Sie können eine Optimierung von JS in Betracht ziehen. Wenn die Renderzeit zu lang ist, sollten Sie eine Optimierung des Rendervorgangs in Betracht ziehen. Wenn zu viel Leerlaufzeit vorhanden ist, können Sie erwägen, diese voll auszunutzen, z. B. indem Sie einige Berichtsvorgänge in die Leerlaufzeit der Seite einfügen und dann einen Bericht erstellen.

Andere Panels

Oben sind einige der Informationen, die im Leistungsfenster angezeigt werden können. Darüber hinaus können wir das Ebenenbedienfeld verwenden, um die 3D-Ansicht der Seitenebenen anzuzeigen. Aktivieren Sie im Rendering-Bedienfeld (klicken Sie auf Weitere Tools -> Rendering, um es zu öffnen) die Option Ebenenränder, um die zusammengesetzte Ebene und den Bereich RenderLayer anzuzeigen. Dies kann bei der Analyse von Animationsstaus helfen, z. B. ob die GPU-Beschleunigung aktiviert werden soll usw. Die Speicherbedienfelder und die JavaScript-Profiler-Bedienfelder werden hauptsächlich zur Analyse von Speicherlecks verwendet. Ich werde hier nicht darauf eingehen. Sie können meinen anderen Artikel „Analyse des Speicherbereinigungsmechanismus und von Speicherlecks im Chrome-Browser“ lesen.

Analysieren mit dem Audits-Tool

Bei Audits handelt es sich eigentlich um LightHouse, ein Open-Source-Tool für automatisierte Tests von Google. Es wertet und analysiert Webseiten anhand einer Reihe von Regeln aus und erstellt schließlich einen Bewertungsbericht. Das Bedienfeld sieht folgendermaßen aus:

Gesamtsituation

Bei Audits werden Webseiten grundsätzlich anhand von fünf Aspekten bewertet, natürlich können Sie auch bestimmte Aspekte aus der Bewertung herausnehmen. Nachdem Sie das Gerät, die Bewertungsaspekte, die Netzwerkbedingungen und andere Optionen ausgewählt haben, klicken Sie auf „Audits ausführen“ und wir erhalten einen Bericht.

Die obige Abbildung stellt einen Gesamtbericht dar. Man kann erkennen, dass die Leistung dieser Seite nicht dem Standard entspricht. Natürlich kann ein einzelner Test nichts erklären, er kann nur als Referenz dienen. Schauen wir uns die Leistungsindikatoren an:

• First Contentful Paint: Der Inhalt wird zum ersten Mal gemalt.
• First Meaningful Paint: Dies kann einfach als die Zeit verstanden werden, die Benutzer benötigen, um den Hauptinhalt einer Webseite zu sehen. Je niedriger die Punktzahl, desto schneller zeigt die Seite ihren Hauptinhalt an. Im Beispiel in der Abbildung beträgt die erste effektive Zeichenzeit der Webseite 2,5 Sekunden.
• Geschwindigkeitsindex: Der Geschwindigkeitsindex ist ein Leistungsindikator für das Laden von Seiten, der Ihnen zeigt, wie schnell der Seiteninhalt scheinbar geladen wird. Je niedriger der Wert für diese Metrik, desto besser.
• Erste CPU-Leerlaufzeit: Erste CPU-Leerlaufzeit
• Zeit bis zur Interaktivität: Die Zeit, die benötigt wird, bis die meisten Netzwerkressourcen der Seite vollständig geladen sind und die CPU längere Zeit im Leerlauf ist. Zu diesem Zeitpunkt ist davon auszugehen, dass die CPU sehr im Leerlauf ist und Benutzerinteraktionsvorgänge rechtzeitig verarbeiten kann.
• Max. mögliche Verzögerung der ersten Eingabe: Maximale Eingabeverzögerungszeit. Die Reaktionsfähigkeit der Eingabe spielt eine Schlüsselrolle dabei, wie Benutzer die Leistung Ihrer Anwendung wahrnehmen. Die Anwendung hat 100 Millisekunden Zeit, um auf Benutzereingaben zu reagieren. Wenn es länger dauert, wird der Eindruck entstehen, dass die App nicht reagiert.

Für diese Zeiten können Sie auf das rote Kästchen im Bild klicken, um den Anzeigemodus zu wechseln. Die entsprechende Zeiterklärung wird angehängt, und Sie können auf „Weitere Informationen“ klicken, um die detaillierte Einführung in den Indikator anzuzeigen. In dem Dokument ist jeder Indikator klar in drei Teile unterteilt: Warum diese Überprüfung wichtig ist; wie man diese Überprüfung besteht; wie man diese Überprüfung erreicht;

Interpretation von Optimierungsvorschlägen für Kennzahlen

Leistungsempfehlungen werden hauptsächlich in drei Kategorien unterteilt: Chancen (optimierbare Elemente), Elemente zur manuellen Diagnose und genehmigte Überprüfungselemente. Das Beispiel sieht wie folgt aus:

Jedes Element in der Abbildung kann erweitert werden, um eine ausführliche Erklärung anzuzeigen, einschließlich:

Es gibt 2 Vorschläge zur Optimierung:

• Verzögerungen blockieren das Rendern des Ressourcenladens, hier ist ein navfoot.6bf68af7.css
• Verzögern Sie das Laden von Bildern außerhalb des Ansichtsfensters. Hier sind die Bilder, die nicht geladen werden müssen (was mit den Optimierungsvorschlägen übereinstimmt, die ich oben erwähnt habe, haha).

Der Inhalt dieses Artikels bezieht sich auf einige Punkte, die LightHouse entdeckt hat und die direkt optimiert werden können. Sie können entsprechend optimieren.

Es gibt 6 Vorschläge für manuelle Diagnoseelemente:

• Minimieren Sie die Arbeit des Hauptthreads
• Reduzieren Sie die JavaScript-Ausführungszeit
• Vermeiden Sie zu große DOM
• Zwischenspeichern einiger statischer Ressourcen durch effektive Caching-Strategien
• Vermeiden Sie die Verkettung kritischer Anfragen
• Halten Sie die Anzahl der Anfragen und die Übertragungsgröße gering

Diese Elemente bedeuten, dass LightHouse nicht für Sie entscheiden kann, ob die aktuelle Situation gut oder schlecht ist, aber die Details sind aufgelistet und Sie können die Situation jedes Elements manuell überprüfen.

Bestandene Prüfelemente

Hier sind die guten Punkte aufgelistet. Es gibt 16 Beispiele in diesem Artikel. Aber auch wenn sie gut gemacht sind, lohnt es sich, sie genau anzuschauen, denn wie alle Einträge hat auch jeder Eintrag hier ein Showmore, und wir können hineinklicken, um das Wissen und die Prinzipien dahinter sorgfältig kennenzulernen!

Zugänglichkeit

Zugänglichkeit bezieht sich auf das Erlebnis für Benutzer, die möglicherweise außerhalb des Rahmens „normaler“ Benutzer liegen und auf eine andere Art und Weise auf Ihre Webseiten zugreifen oder mit ihnen interagieren, als Sie es erwarten. Die Beispiele in diesem Artikel legen die folgende Abbildung nahe:

Die Kategorie „Zugänglichkeit“ testet die Fähigkeit von Bildschirmleseprogrammen und anderen unterstützenden Technologien, ordnungsgemäß mit der Seite zu funktionieren. Beispiele: Verwendung von Attributen entsprechend den Elementen, ob Tags auf standardisierte Weise verwendet werden, ob dem img-Tag ein alt-Attribut fehlt, erkennbare Elementbenennung usw. Wir werden auf diesen Punkt nicht näher eingehen, empfehlen Ihnen aber dennoch, die Webseite entsprechend den Audit-Empfehlungen zu ändern.

Bei anderen Punkten werden die Best Practices der Beispiele in diesem Artikel hoch bewertet, aber die Beispiele unterstützen keine PWA und müssen keine SEO berücksichtigen, daher werde ich hier nicht näher darauf eingehen. Wenn Sie entsprechende Anforderungen haben, können Sie sich diese im Detail ansehen.

Zusammenfassen

Abschließend möchten wir zusammenfassen: Wir verwenden Chrome Dev Tools, um die Seitenleistung zu analysieren und haben die folgenden Indikatoren als Referenz:

• Analysieren über das Netzwerkfenster
• Analysieren Sie über das Leistungspanel
• Analysieren Sie Speicherlecks über das Speicherfenster usw.
• Analysieren mit dem Audits-Tool

Diese Analysemethoden werden in diesem Artikel ausführlich beschrieben. Sie können einen ernsthaften Blick darauf werfen ~

Damit ist dieser Artikel über die Schritte zur Verwendung von Chrome Dev Tools zur Analyse der Seitenleistung (Front-End-Leistungsoptimierung) abgeschlossen. Weitere relevante Inhalte zur Seitenleistung von Chrome Dev Tools finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die verwandten Artikel weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!