Chrome DevTools Network-paneel-instellingen voor Core Web Vitals
De Network-paneel-instellingen die ik bij elke Core Web Vitals-audit gebruik
Delen
Het Network-paneel in Chrome DevTools is een van de handigste tools om de Core Web Vitals te debuggen. Maar met de standaardinstellingen mis je de helft van de informatie die je nodig hebt. Zo stel ik het Network-paneel in bij elke audit.
Laatst gecontroleerd door Arjen Karel in maart 2026
Het Network-paneel instellen
Om naar het Network-paneel te gaan, open je Chrome DevTools (F12 of Ctrl+Shift+I) en klik je op het tabblad "Network".
Throttling
Je bezoekers zitten niet op jouw 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 in het Network-paneel op het dropdownmenu "No throttling". 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, kies dan "Fast 4G". Zijn de netwerkomstandigheden 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 enkel request throttlen in plaats van de hele pagina. Klik met de rechtermuisknop op een request in het Network-paneel en selecteer "Throttle request". Zo beantwoord je vragen als: wat gebeurt er met mijn LCP als dit third-party script traag laadt? Of: hoe gedraagt mijn 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.
Disable cache
Om te testen zoals een nieuwe bezoeker je site ervaart, vink je in het Network-paneel het selectievakje "Disable cache" aan.
Big request rows inschakelen
Big request rows tonen cruciale details die de compacte standaardweergave verbergt:
- De kolom size toont zowel de gecomprimeerde (transfer) 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 prioriteit High laadt, of zie je direct wanneer Chrome een resource herprioriteert.
Screenshots inschakelen
Zet screenshots aan en Chrome legt een filmstrip vast van elke visuele verandering tijdens het laden van de pagina. Zo ontdek je layout shifts en controleer je of je LCP-element rendert op het moment dat je verwacht.
- Zorg dat het tabblad 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 selectievakjes in het Network-paneel.
Het screenshot-overzicht heeft een paar handige features die je misschien nog niet kent:
- Beweeg over een screenshot om te zien wanneer deze is gemaakt. Dit zie je aan een gele verticale lijn in de Overview-grafiek.
- Klik op een screenshot-thumbnail om requests weg te filteren die na dat screenshot zijn gedaan.
- Dubbelklik op een thumbnail om in te zoomen en het screenshot in detail te bekijken.
De beste Network-kolommen inschakelen
In de standaardkolommen ontbreekt cruciale data. Klik met de rechtermuisknop op een kolomkop om meer kolommen toe te voegen. Deze zet ik bij elke audit aan:
| Kolomnaam | Omschrijving | Waarom dit belangrijk is voor Core Web Vitals |
|---|---|---|
| Name | Naam van het request | Identificeer elke resource die de browser downloadt |
| Status | HTTP-statuscodes | Herken redirects (301, 302) die latency toevoegen aan je TTFB, en 404's van resources die een netwerk-roundtrip 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 dit en zie je geen h3 in deze kolom, controleer dan je DNS-configuratie |
| Domain | Domein van de resource | Scheid first-party van third-party requests. De 2024 Web Almanac toont aan dat 92% van de pagina's minstens één third-party laadt. 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 strijden om bandbreedte |
| Initiator | Trigger van het request | Achterhaal welk script of stylesheet elk request heeft getriggerd. Zo traceer je een trage keten van critical requests terug naar de bron |
| Size | Transfer- en werkelijke grootte | Herken ongecomprimeerde of te grote resources. De 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 aan opgaat. Lange balken vóór de first paint hebben direct invloed op je LCP en FCP |
Custom response headers inschakelen
| Kolomnaam | Omschrijving | 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 heeft. Slechte caching dwingt terugkerende bezoekers om resources opnieuw te downloaden, en dat schaadt elke metric. Zie ook: Cloudflare caching-configuratie |
| Link | Link response header | Controleer of je server preload- of preconnect-hints meestuurt, ook via 103 Early Hints |
| Content-Encoding | Gebruikte encoding | Controleer 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% 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-paneel
In het Network-paneel zie je wat er laadt en wanneer. Wil je zien hoe elke resource de Core Web Vitals beïnvloedt, stap dan over naar het Performance-paneel. Dat toont nu live scores voor LCP, CLS en INP zonder dat je een opname hoeft te maken, en kan CrUX field data als overlay tonen van echte gebruikers. Gebruik het Network-paneel om te diagnosticeren, het Performance-paneel om te bevestigen.
Voor doorlopende monitoring buiten een enkele debugsessie koppel je een Real User Monitoring-tool. Zo volg je of je fixes in het Network-paneel de field data in de loop van de tijd echt verbeteren.
De complete setup
Herlaad de pagina met deze instellingen en je Network-paneel ziet er zo uit. Elke kolom is gekoppeld aan iets wat de Core Web Vitals beïnvloedt.
Een snellere site nodig?
Ik ben Arjen en ik maak al 17 jaar trage sites snel. Loop je tegen iets aan dat je zelf niet opgelost krijgt? Stuur me je URL, dan praten we even.
Stuur me je URLWaarom werkt onze fix niet?
Soms serveert het CDN nog de oude HTML, of de fix zit in het desktop-template terwijl mobiel een ander template gebruikt. Stuur me je URL en het probleem, dan stuur ik je een paar momenten. Ik bekijk eerst je field data, daarna besteden we een uur aan je site, en binnen een dag heb je mijn notities op schrift. €350 excl. btw.
Stuur me je URLGeen developer om de fix te bouwen? Ik doe het werk zelf, op een kopie van je site.