Chrome DevTools Network Panel-Einstellungen für Core Web Vitals
Die Network Panel-Einstellungen, die ich bei jedem Core Web Vitals-Audit verwende
Das Chrome DevTools Network Panel ist eines der nützlichsten Tools zum Debuggen der Core Web Vitals. Aber die Standardeinstellungen verbergen die Hälfte der benötigten Informationen. Hier zeige ich, wie ich das Network Panel bei jedem Audit konfiguriere.
Zuletzt überprüft von Arjen Karel im März 2026
Table of Contents!
Konfiguration des Network Panels
Um auf das Network Panel zuzugreifen, öffnen Sie die Chrome DevTools (F12 oder Strg+Umschalt+I) und klicken Sie auf den Tab "Network" (Netzwerk).
Throttling
Ihre Besucher nutzen nicht das WLAN Ihres Büros. Weltweit sind 30 % der mobilen Verbindungen immer noch 3G und weitere 55 % sind 4G (GSMA Mobile Economy 2025). Mit Network Throttling können Sie sehen, was Ihre Nutzer erleben.
Klicken Sie im Network Panel auf das Dropdown-Menü "No throttling". Wählen Sie "Fast 4G", "Slow 4G" oder "3G", um mobile Netzwerkbedingungen zu simulieren. Die beste Option hängt von Ihrer Zielgruppe ab. Wenn Ihre Zielgruppe typischerweise High-End-Mobilgeräte unter schnellen Netzwerkbedingungen verwendet, aktivieren Sie "Fast 4G". Wenn die typischen Netzwerkbedingungen etwas schlechter sind, wählen Sie "Slow 4G". Gehen Sie andernfalls auf Nummer sicher und wählen Sie "3G".
Einzelne Requests drosseln (Chrome 145+)
Seit Dezember 2025 können Sie einen einzelnen Request anstelle der gesamten Seite drosseln. Klicken Sie mit der rechten Maustaste auf einen beliebigen Request im Network Panel und wählen Sie "Throttle request". Damit lassen sich Fragen beantworten wie: Was passiert mit meinem LCP, wenn dieses Third-Party-Skript langsam lädt? Oder: Wie verhält sich meine Seite, wenn das CDN langsam ist, die Verbindung des Nutzers aber schnell? Es ist der schnellste Weg, um die Performance-Auswirkungen einer einzelnen Ressource zu isolieren.
Cache deaktivieren (Disable Cache)
Um sicherzustellen, dass Sie Ihre Website so testen, wie sie ein Erstbesucher erleben würde, aktivieren Sie das Kontrollkästchen "Disable cache" im Network Panel.
Große Request-Zeilen (Big request rows) aktivieren
Große Request-Zeilen zeigen entscheidende Details, die die standardmäßige Kompaktansicht verbirgt:
- Die Spalte size zeigt sowohl die komprimierte (Übertragung) als auch die unkomprimierte (tatsächliche) Größe jedes Requests.
- Die Spalte name zeigt den vollständigen Pfad und nicht nur den Dateinamen.
- Die Spalte priority zeigt die anfängliche und die finale Fetch-Priorität. So überprüfen Sie, ob Ihr LCP-Bild mit der Priorität "High" geladen wird, oder erkennen, wenn Chrome eine Ressource neu priorisiert.
Screenshots aktivieren
Aktivieren Sie Screenshots, und Chrome erfasst einen Filmstreifen (Filmstrip) jeder visuellen Änderung während des Seitenaufbaus. So erkennen Sie Layoutverschiebungen (Layout Shifts) und verifizieren, dass Ihr LCP-Element dann gerendert wird, wenn Sie es erwarten.
- Wenn der Network-Tab im Fokus ist, drücken Sie Strg+F5 (Cmd+R auf dem Mac), um die Seite neu zu laden.
- Chrome erstellt Screenshots während des Ladevorgangs der Seite.
- Miniaturansichten (Thumbnails) dieser Screenshots erscheinen unter der Zeile mit den Kontrollkästchen im Network Panel.
Die Screenshot-Übersicht bietet 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 Übersichtsdiagramm angezeigt.
- Klicken Sie auf ein Screenshot-Thumbnail, um Requests herauszufiltern, die stattfanden, nachdem dieser Screenshot aufgenommen wurde.
- Doppelklicken Sie auf ein Thumbnail, um hineinzuzoomen und den Screenshot detaillierter zu betrachten.
Die besten Network-Spalten aktivieren
In den Standardspalten fehlen kritische Daten. Klicken Sie mit der rechten Maustaste auf eine beliebige Spaltenüberschrift, um weitere hinzuzufügen. Dies sind diejenigen, die ich bei jedem Audit aktiviere:
| Spaltenname | Beschreibung | Warum sie für Core Web Vitals wichtig ist |
|---|---|---|
| Name | Request-Name | Identifizieren Sie jede Ressource, die der Browser herunterlädt |
| Status | HTTP-Statuscodes | Erkennen Sie Redirects (301, 302), die Latenz zu Ihrer TTFB hinzufügen, sowie 404-Fehler für Ressourcen, die einen Netzwerk-Roundtrip verschwenden |
| Protocol | Verwendetes Netzwerkprotokoll | HTTP/3 eliminiert Head-of-Line Blocking. Laut Cloudflare Radar verwenden nur 21 % der Requests HTTP/3. Wenn Ihr CDN es unterstützt und Sie kein h3 in dieser Spalte sehen, überprüfen Sie Ihre DNS-Konfiguration |
| Domain | Ressourcen-Domain | Trennen Sie First-Party- von Third-Party-Requests. Der 2024 Web Almanac hat herausgefunden, dass 92 % der Seiten mindestens eine Drittpartei laden. Eine Sortierung nach Domain zeigt, wie viel von Ihrem Waterfall außerhalb Ihrer Kontrolle liegt |
| Type | Ressourcentyp | Filtern Sie nach Typ, um Skripte, Bilder oder Fonts zu isolieren, die um Bandbreite konkurrieren |
| Initiator | Request-Auslöser | Finden Sie heraus, welches Skript oder Stylesheet jeden Request ausgelöst hat. So verfolgen Sie eine langsame Kette von kritischen Requests bis zu ihrer Quelle zurück |
| Size | Übertragungs- und tatsächliche Größe | Erkennen Sie unkomprimierte oder übergroße Ressourcen. Die mediane mobile Seite lädt 66 Requests mit insgesamt 2,3 MB (2024 Web Almanac) |
| Priority | Lade-Priorität der Ressource | Zeigt die anfängliche und finale Fetch-Priorität. Überprüfen Sie, ob Ihr LCP-Bild mit "High" und nicht-kritische Skripte mit "Low" geladen werden |
| Waterfall | Visuelle Zeitleiste der Requests | Die Zeitleiste, die zeigt, wo die Zeit verbracht wird. Lange Balken vor dem ersten Paint wirken sich direkt auf Ihr LCP und FCP aus |
Benutzerdefinierte Response-Header aktivieren
| Spaltenname | Beschreibung | Warum sie für Core Web Vitals wichtig ist |
|---|---|---|
| Cache-Control | Caching-Verhalten der Ressource | Überprüfen Sie, ob statische Assets lange Cache-Laufzeiten haben und HTML eine angemessene Revalidierung aufweist. Schlechtes Caching zwingt wiederkehrende Besucher, Ressourcen erneut herunterzuladen, was jeder Metrik schadet. Siehe auch: Cloudflare Caching-Konfiguration |
| Link | Link-Response-Header | Prüfen Sie, ob Ihr Server Preload- oder Preconnect-Hints sendet, einschließlich über 103 Early Hints |
| Content-Encoding | Die verwendete Kodierung | Verifizieren Sie, dass Ihr Server Brotli (br) anstelle von gzip sendet. Brotli komprimiert JavaScript 15 bis 20 % kleiner als gzip. Der 2024 Web Almanac zeigt, dass Brotli gzip bei JavaScript-Ressourcen überholt hat (45 % gegenüber 41 %) |
Wenn Sie Response-Header in großen Mengen analysieren möchten, ohne DevTools für jede Seite zu öffnen, probieren Sie den HTTP Header Performance Analyzer aus.
Mit dem Performance Panel verbinden
Das Network Panel zeigt Ihnen, was lädt und wann. Um zu sehen, wie sich jede Ressource auf die Core Web Vitals auswirkt, wechseln Sie in das Performance Panel. Es zeigt jetzt Live-Werte für LCP, CLS und INP ohne Aufzeichnung an und kann CrUX-Felddaten von echten Nutzern darüberlegen. Nutzen Sie das Network Panel zur Diagnose und das Performance Panel zur Bestätigung.
Für ein kontinuierliches Monitoring, das über eine einzelne Debugging-Sitzung hinausgeht, binden Sie ein Real User Monitoring Tool an, damit Sie nachverfolgen können, ob Ihre Network Panel-Fixes die Felddaten im Laufe der Zeit tatsächlich verbessern.
Das komplette Setup
Laden Sie die Seite mit diesen Einstellungen neu, und Ihr Network Panel sieht so aus. Jede Spalte lässt sich einem Faktor zuordnen, der die Core Web Vitals beeinflusst.
I have done this before at your scale.
Complex platforms, large dev teams, legacy code. I join your team as a specialist, run the performance track, and hand it back in a state you can maintain.
Discuss Your Situation
