Chrome DevTools Network Panel Instellingen voor Core Web Vitals
De Network panel instellingen die ik bij elke Core Web Vitals audit gebruik
Het Chrome DevTools Network panel is een van de handigste tools voor het debuggen van de Core Web Vitals. Maar de standaardinstellingen verbergen de helft van de informatie die je nodig hebt. Hier is hoe ik het Network panel configureer bij elke audit.
Laatst beoordeeld door Arjen Karel in maart 2026
Table of Contents!
Het Network panel configureren
Om toegang te krijgen tot het Network panel, open je Chrome DevTools (F12 of Ctrl+Shift+I) en klik je op het tabblad "Network".
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 netwerk throttling kun je zien wat zij zien.
Klik op de "No throttling" drop-down in het Network panel. Selecteer "Fast 4G", "Slow 4G" of "3G" om mobiele netwerkomstandigheden te simuleren. De beste optie hangt af van je doelgroep. Als je publiek voornamelijk high-end mobiele apparaten gebruikt met snelle netwerkverbindingen, schakel dan "Fast 4G" in. Als de gemiddelde netwerkomstandigheden wat slechter zijn, selecteer dan "Slow 4G". Speel anders op safe en kies "3G".
Individuele requests throttlen (Chrome 145+)
Sinds december 2025 kun je één enkel request throttlen in plaats van de hele pagina. Klik met de rechtermuisknop op een willekeurig request in het Network panel en selecteer "Throttle request". Hiermee kun je vragen beantwoorden als: wat gebeurt er met mijn LCP als dit third-party script traag laadt? Of: hoe gedraagt mijn pagina zich wanneer het CDN traag is, maar de verbinding van de gebruiker snel is? Het is de snelste manier om de performance impact van een enkele resource te isoleren.
Disable Cache
Om er zeker van te zijn dat je de site test zoals een nieuwe bezoeker deze zou ervaren, vink je het "Disable cache" selectievakje aan in het Network panel.
Big Request Rows inschakelen
Big Request Rows tonen cruciale details die de standaard compacte weergave verbergt:
- De size kolom toont zowel de gecomprimeerde (transfer) grootte als de ongecomprimeerde (actual) grootte van elk request.
- De name kolom toont het volledige pad, niet alleen de bestandsnaam.
- De priority kolom toont de initiële en uiteindelijke fetch priority. Dit is hoe je verifieert dat je LCP-afbeelding met 'High' prioriteit laadt, of hoe je ziet wanneer Chrome een resource een andere prioriteit geeft.
Screenshots inschakelen
Schakel screenshots in en Chrome legt een filmstrip vast van elke visuele verandering tijdens het laden van de pagina. Dit is hoe je layout shifts opspoort en verifieert dat je LCP element op het scherm wordt getekend wanneer je dat verwacht.
- Met het Network tabblad in focus, druk op Ctrl+F5 (Cmd+R op Mac) om de pagina te verversen.
- Chrome zal screenshots maken tijdens het laden van de pagina.
- Thumbnails van deze screenshots verschijnen onder de rij met selectievakjes in het Network panel.
Het screenshot-overzicht heeft een paar handige kleine features die je misschien nog niet kende:
- Hover over een screenshot om te zien wanneer deze is gemaakt. Dit wordt aangegeven door een gele verticale lijn in de Overview grafiek.
- Klik op een screenshot thumbnail om requests eruit te filteren die plaatsvonden nadat die screenshot was genomen.
- Dubbelklik op een thumbnail om in te zoomen en de screenshot in meer detail te bekijken.
De beste Network kolommen inschakelen
De standaard kolommen missen cruciale data. Klik met de rechtermuisknop op een willekeurige kolomkop om er meer toe te voegen. Dit zijn de kolommen die ik bij elke audit inschakel:
| Kolomnaam | Beschrijving | Waarom dit belangrijk is voor Core Web Vitals |
|---|---|---|
| Name | Request naam | Identificeer elke resource die de browser downloadt |
| Status | HTTP status codes | Ontdek redirects (301, 302) die vertraging toevoegen aan je TTFB, en 404's voor resources die een netwerk round-trip verspillen |
| Protocol | Gebruikt netwerkprotocol | HTTP/3 elimineert head-of-line blocking. Volgens Cloudflare Radar gebruikt slechts 21% van de requests HTTP/3. Als je CDN dit ondersteunt en je geen h3 in deze kolom ziet, controleer dan je DNS-configuratie |
| Domain | Resource domein | Scheid first-party van third-party requests. De 2024 Web Almanac ontdekte dat 92% van de pagina's minstens één third party inlaadt. Sorteren op domein onthult hoeveel van je waterval buiten je controle ligt |
| Type | Resource type | Filter op type om scripts, afbeeldingen of lettertypen te isoleren die concurreren om bandbreedte |
| Initiator | Request trigger | Ontdek welk script of stylesheet elk request activeerde. Dit is hoe je een trage keten van critical requests herleidt naar de bron |
| Size | Transfer- en werkelijke grootte | Spot ongecomprimeerde of te grote resources. De gemiddelde mobiele pagina laadt 66 requests met een totaal van 2,3 MB (2024 Web Almanac) |
| Priority | Resource laadprioriteit | Toont de initiële en uiteindelijke fetch priority. Verifieer dat je LCP-afbeelding met 'High' en niet-kritieke scripts met 'Low' laden |
| Waterfall | Visuele tijdlijn van requests | De tijdlijn die laat zien waaraan tijd wordt besteed. Lange balken vóór de eerste paint hebben direct invloed op je LCP en FCP |
Aangepaste response headers inschakelen
| Kolomnaam | Beschrijving | Waarom dit belangrijk is voor Core Web Vitals |
|---|---|---|
| Cache-Control | Resource caching gedrag | Verifieer dat statische assets lange cache-levensduren hebben en dat HTML de juiste revalidatie heeft. Slechte caching dwingt terugkerende bezoekers om resources opnieuw te downloaden, wat elke metric schaadt. Zie ook: Cloudflare caching configuratie |
| Link | Link response header | Controleer of je server preload of preconnect hints verstuurt, waaronder via 103 Early Hints |
| Content-Encoding | De gebruikte codering | Verifieer of je server Brotli (br) verstuurt in plaats van gzip. Brotli comprimeert JavaScript 15 tot 20% kleiner dan gzip. De 2024 Web Almanac laat zien dat Brotli gzip heeft ingehaald voor JavaScript resources (45% versus 41%) |
Als je response headers in bulk wilt analyseren zonder DevTools voor elke pagina te openen, probeer dan de HTTP Header Performance Analyzer.
Verbinden met het Performance panel
Het Network panel laat zien wat er laadt en wanneer. Om te zien hoe elke resource de Core Web Vitals beïnvloedt, schakel je over naar het Performance panel. Dit toont nu live LCP, CLS, en INP scores zonder op te nemen en kan CrUX field data van echte gebruikers als overlay tonen. Gebruik het Network panel om te diagnosticeren, het Performance panel om te bevestigen.
Voor continue monitoring na een enkele debugging sessie, koppel je een Real User Monitoring tool zodat je kunt volgen of je Network panel fixes de field data daadwerkelijk verbeteren in de loop van de tijd.
De complete setup
Herlaad de pagina met deze instellingen en je Network panel ziet er zo uit. Elke kolom is gekoppeld aan iets dat invloed heeft op de Core Web Vitals.
17 years of fixing PageSpeed.
I have optimized platforms for some of the largest publishers and e-commerce sites in Europe. I provide the strategy, the code, and the RUM verification. Usually in 1 to 2 sprints.
View Services
