Chrome DevTools Network-panel-instellingen voor Core Web Vitals
De Network-panel-instellingen die ik bij elke Core Web Vitals-audit gebruik
Het Network-panel in Chrome DevTools is een van de handigste tools om de Core Web Vitals te debuggen. Maar de standaardinstellingen verbergen de helft van de informatie die je nodig hebt. Dit is hoe ik het Network-panel instel bij elke audit.
Laatst gecontroleerd door Arjen Karel in maart 2026
Table of Contents!
Het Network-panel instellen
Open Chrome DevTools (F12 of Ctrl+Shift+I) en klik op de tab "Network" om het Network-panel te openen.
Throttling
Je bezoekers zitten niet op je kantoor-wifi. Wereldwijd zit 30% van de mobiele verbindingen nog op 3G en nog eens 55% op 4G (GSMA Mobile Economy 2025). Met network throttling zie je wat zij zien.
Klik op de dropdown "No throttling" in het Network-panel. Kies "Fast 4G", "Slow 4G" of "3G" om mobiele netwerkomstandigheden te simuleren. De beste optie hangt af van je doelgroep. Gebruikt je doelgroep vooral high-end mobiele apparaten op een snelle verbinding, zet dan "Fast 4G" aan. Zijn de omstandigheden gemiddeld wat slechter, kies dan "Slow 4G". Speel anders op safe en kies "3G".
Individuele requests throttlen (Chrome 145+)
Sinds december 2025 kun je een los request throttlen in plaats van de hele pagina. Klik met de rechtermuisknop op een request in het Network-panel en kies "Throttle request". Zo beantwoord je vragen als: wat gebeurt er met je LCP als dit third-party script traag laadt? Of: hoe gedraagt je pagina zich als het CDN traag is maar de verbinding van de gebruiker snel? Dit is de snelste manier om de performance-impact van een enkele resource te isoleren.
Cache uitschakelen
Vink de checkbox "Disable cache" aan in het Network-panel om je site te testen zoals een nieuwe bezoeker hem ervaart.
Big request rows aanzetten
Big request rows tonen cruciale details die de standaard compacte weergave verbergt:
- De kolom size toont zowel de gecomprimeerde (transfer) grootte als de ongecomprimeerde (werkelijke) grootte van elk request.
- De kolom name toont het volledige pad, niet alleen de bestandsnaam.
- De kolom priority toont de initiële en uiteindelijke fetch priority. Zo controleer je of je LCP-afbeelding met High priority laadt, of ontdek je wanneer Chrome een resource herprioriteert.
Screenshots aanzetten
Zet je screenshots aan, dan legt Chrome een filmstrip vast van elke visuele verandering tijdens het laden van de pagina. Zo herken je layout shifts en controleer je of je LCP-element rendert op het moment dat je verwacht.
- Zorg dat de tab Network actief is en druk op Ctrl+F5 (Cmd+R op Mac) om de pagina te verversen.
- Chrome maakt screenshots tijdens het laden van de pagina.
- Thumbnails van deze screenshots verschijnen onder de rij checkboxes in het Network-panel.
Het screenshot-overzicht heeft een paar handige functies die je misschien nog niet kent:
- Beweeg over een screenshot om te zien wanneer deze is gemaakt. Een gele verticale lijn in de Overview-grafiek geeft dit aan.
- Klik op een thumbnail om requests weg te filteren die na dat screenshot plaatsvonden.
- Dubbelklik op een thumbnail om in te zoomen en het screenshot in detail te bekijken.
De beste Network-kolommen aanzetten
De standaardkolommen missen cruciale data. Klik met rechts op een kolomkop om kolommen toe te voegen. Deze zet ik bij elke audit aan:
| Kolomnaam | Beschrijving | Waarom dit belangrijk is voor Core Web Vitals |
|---|---|---|
| Name | Naam van het request | Identificeer elke resource die de browser downloadt |
| Status | HTTP-statuscodes | Spot redirects (301, 302) die latency toevoegen aan je TTFB, en 404's van resources die een network round trip verspillen |
| Protocol | Gebruikt netwerkprotocol | HTTP/3 elimineert head-of-line blocking. Volgens Cloudflare Radar gebruikt slechts 21% van de requests HTTP/3. Ondersteunt je CDN het wel maar zie je geen h3 in deze kolom, controleer dan je DNS-configuratie |
| Domain | Domein van de resource | Scheid first-party van third-party requests. Volgens het 2024 Web Almanac laadt 92% van de pagina's minstens één third-party. Sorteer op domein en je ziet direct welk deel van je waterfall buiten je controle ligt |
| Type | Type resource | Filter op type om scripts, afbeeldingen of fonts te isoleren die concurreren om bandbreedte |
| Initiator | Trigger van het request | Achterhaal welk script of stylesheet elk request triggerde. Zo herleid je een trage keten van critical requests naar de bron |
| Size | Transfergrootte en werkelijke grootte | Herken ongecomprimeerde of te grote resources. Een mediane mobiele pagina laadt 66 requests van in totaal 2,3 MB (2024 Web Almanac) |
| Priority | Laadprioriteit van de resource | Toont de initiële en uiteindelijke fetch priority. Controleer of je LCP-afbeelding op High laadt en niet-kritieke scripts op Low |
| Waterfall | Visuele tijdlijn van requests | De tijdlijn die toont waar de tijd naartoe gaat. Lange balken vóór de first paint raken direct je LCP en FCP |
Custom response headers aanzetten
| Kolomnaam | Beschrijving | Waarom dit belangrijk is voor Core Web Vitals |
|---|---|---|
| Cache-Control | Cachegedrag van de resource | Controleer of statische assets lange cache-lifetimes hebben en HTML de juiste revalidatie gebruikt. Slechte caching dwingt terugkerende bezoekers om resources opnieuw te downloaden, wat elke metric schaadt. Zie ook: Cloudflare-cacheconfiguratie |
| Link | Link-response header | Controleer of je server preload- of preconnect-hints meestuurt, ook via 103 Early Hints |
| Content-Encoding | De gebruikte encoding | Controleer of je server Brotli (br) verstuurt in plaats van gzip. Brotli comprimeert JavaScript 15 tot 20% kleiner dan gzip. Het 2024 Web Almanac laat zien dat Brotli gzip inmiddels heeft ingehaald voor JavaScript-resources (45% vs 41%) |
Wil je response headers in bulk analyseren zonder voor elke pagina DevTools te openen, probeer dan de HTTP Header Performance Analyzer.
Koppelen met het Performance-panel
Het Network-panel laat zien wat er laadt en wanneer. Schakel over naar het Performance-panel om te zien hoe elke resource de Core Web Vitals beïnvloedt. Dat toont nu live LCP-, CLS- en INP-scores zonder opname, en kan CrUX field data als overlay tonen van echte gebruikers. Gebruik het Network-panel om te diagnosticeren, het Performance-panel om te bevestigen.
Voor continue monitoring na een losse debug-sessie koppel je een Real User Monitoring-tool. Zo volg je of je fixes in het Network-panel de field data op termijn echt verbeteren.
De complete setup
Herlaad de pagina met deze instellingen en je Network-panel ziet er zo uit. Elke kolom sluit aan op iets wat de Core Web Vitals beïnvloedt.
CoreDash heb ik gebouwd voor mijn eigen audits.
Onder de 1KB. EU-gehost. Geen cookiebanner. Nu met MCP.
Probeer CoreDash gratis
