Die perfekten Einstellungen für das Chrome-Netzwerk-Panel zur Optimierung der Core Web Vitals

Die perfekten Einstellungen für das Chrome-Netzwerk-Panel zur Optimierung der Core Web Vitals

Das Chrome DevTools Netzwerk-Panel ist ein unverzichtbares Werkzeug für Webentwickler, die Core Web Vitals optimieren wollen. Leider sind die Standardeinstellungen nicht die besten für die Optimierung der Geschwindigkeit. Durch die Konfiguration der richtigen Einstellungen können Sie reale Bedingungen genau simulieren und bessere Einblicke in die Leistung Ihrer Website erhalten. Dieser Leitfaden führt Sie durch das ideale Chrome DevTools Netzwerk-Panel-Setup zur Analyse und Verbesserung Ihrer Core Web Vitals Scores.

Das Netzwerk-Panel konfigurieren

Um auf das Netzwerk-Panel zuzugreifen, öffnen Sie Chrome DevTools (F12 oder Strg+Umschalt+I) und klicken Sie auf den Tab "Netzwerk".

Drosselung (Throttling)

Eine der wichtigsten Einstellungen zur Optimierung der Core Web Vitals ist die Netzwerkdrosselung. Dies ermöglicht es Ihnen, verschiedene Netzwerkbedingungen zu simulieren, die Ihre Benutzer erleben könnten.

Klicken Sie im Netzwerk-Panel auf das Dropdown-Menü "Keine Drosselung". Wählen Sie "Schnelles 4G", "Langsames 4G" oder "3G", um mobile Netzwerkbedingungen zu simulieren. Die beste Option hängt von Ihrem Publikum ab. Wenn Ihr Publikum typischerweise High-End-Mobilgeräte unter schnellen Netzwerkbedingungen verwendet, aktivieren Sie "Schnelles 4G". Wenn die typischen Netzwerkbedingungen etwas schlechter sind, wählen Sie "Langsames 4G"  und ansonsten gehen Sie auf Nummer sicher und wählen "3G"

Cache deaktivieren

Um sicherzustellen, dass Sie Ihre Seite so testen, wie ein Erstbesucher sie erleben würde: Aktivieren Sie das Kontrollkästchen "Cache deaktivieren" im Netzwerk-Panel.

Große Anforderungszeilen aktivieren

Große Anforderungszeilen bieten eine umfassendere Ansicht jeder Anforderung. Die wichtigsten neuen Informationen, die Ihnen dies gibt, sind:

• Die Spalte Größe zeigt nun die unkomprimierte und komprimierte Größe der Anforderung an.
• Die Spalte Name gibt Informationen über den Pfad.
• Die Spalte Priorität zeigt Ihnen die anfängliche und endgültige Abrufpriorität.

Screenshots aktivieren

Wenn Sie Screenshots aktivieren, nimmt Chrome während des Seitenladens Screenshots auf. Jeder Screenshot repräsentiert eine visuelle Änderung auf der Seite und kann verwendet werden, um die verschiedenen Phasen des Seitenladens zu verstehen und Cumulative Layout Shifts zu identifizieren.

• Drücken Sie bei fokussiertem Netzwerk-Tab Strg+F5 (Cmd+R auf Mac), um die Seite neu zu laden.
  
• Chrome nimmt während des Seitenladeprozesses Screenshots auf.
• Thumbnails dieser Screenshots erscheinen unter der Zeile der Kontrollkästchen im Netzwerk-Panel.

Die Screenshot-Übersicht hat einige praktische kleine Funktionen, die Sie vielleicht noch nicht kennen:

• Fahren Sie mit der Maus über einen Screenshot, um zu sehen, wann er aufgenommen wurde. Dies wird durch eine gelbe vertikale Linie im Übersichtsdigramm angezeigt.
• Klicken Sie auf ein Screenshot-Thumbnail, um Anforderungen herauszufiltern, die nach der Aufnahme dieses Screenshots aufgetreten sind.
• Doppelklicken Sie auf ein Thumbnail, um hineinzuzoomen und den Screenshot detaillierter zu betrachten.

Die besten Netzwerkspalten aktivieren

Um Probleme mit den Core Web Vitals zu finden, geben Ihnen die folgenden Panels nützliche Informationen. Klicken Sie einfach mit der rechten Maustaste auf einen beliebigen Spaltennamen und wählen Sie Ihre bevorzugten Spalten aus

Aktivieren Sie dann die folgenden Spalten, die für die Core Web Vitals von Bedeutung sind:

Diese benutzerdefinierten Antwort-Header aktivieren:

Aktivieren Sie diese benutzerdefinierten Antwort-Header:

Das Endergebnis:

Jetzt ist es an der Zeit, die Seite neu zu laden und die neue und verbesserte Netzwerkantwort im Chrome-Netzwerk-Tab zu sehen. Es wird ungefähr so aussehen und zeigt alle Informationen, die Sie benötigen, um mit dem Debuggen der Core Web Vitals zu beginnen!