Back to blog
InspectionJanuary 1, 2024· 4 min read

Network Request Monitoring: See What Websites Really Do

A practical Fusebox guide to network request monitoring.

Network Request Monitoring: See What Websites Really Do

Published: January 2024
Reading time: 7 minutes

Every website makes dozens (or hundreds) of network requests. Here's how to monitor them, what they reveal, and why developers should care.

What Are Network Requests?

Every website loads through requests:

  • HTML: The page structure
  • CSS: Styles and layout
  • JavaScript: Functionality
  • Images: Visual content
  • APIs: Dynamic data
  • Analytics: Tracking scripts
  • Fonts: Typography
  • Third-party: Ads, widgets, tools

Each request tells a story about performance, security, and architecture.

Why Monitor Network Requests?

For Debugging

  • Find slow resources
  • Identify failed requests
  • Spot blocking scripts
  • Track API errors

For Performance

  • Measure load times
  • Find bottlenecks
  • Optimize delivery
  • Reduce requests

For Security

  • Detect trackers
  • Find data leaks
  • Verify HTTPS
  • Monitor third parties

For Intelligence

  • Discover APIs
  • Understand architecture
  • Find hidden features
  • Reverse engineer

Reading Network Data

Request Basics

Every request has:

Method: GET/POST/PUT/DELETE
URL: https://api.example.com/data
Status: 200/404/500
Time: 234ms
Size: 45.2KB

Status Codes That Matter

2xx Success

  • 200: OK - Request succeeded
  • 201: Created - Resource created
  • 204: No Content - Success, no data

3xx Redirects

  • 301: Permanent redirect
  • 302: Temporary redirect
  • 304: Not Modified - Using cache

4xx Client Errors

  • 401: Unauthorized - Need login
  • 403: Forbidden - No access
  • 404: Not Found - Missing resource

5xx Server Errors

  • 500: Server Error - Code broke
  • 502: Bad Gateway - Server down
  • 503: Unavailable - Overloaded

Real Developer Scenarios

Scenario 1: Slow Page Load

What you see:

HTML:          50ms   ✓
CSS:           80ms   ✓
main.js:       2.3s   ⚠️
analytics.js:  450ms
images:        1.2s

Problem: Unminified JavaScript Solution: Minify and compress

Scenario 2: API Debugging

Request:

POST /api/users
Status: 400 Bad Request
Response: {"error": "Invalid email"}

What you learn:

  • Validation happens server-side
  • Email format issue
  • API returns JSON errors

Scenario 3: Third-Party Overload

Discovery:

Your domain:     15 requests
Google Analytics: 5 requests
Facebook Pixel:   8 requests
Chat widget:      12 requests
Ad network:       25 requests

Reality: Third parties using 4x your resources!

Common Patterns to Recognize

1. Waterfall Analysis

Good Pattern:

HTML     |==|
CSS      |==|
JS        |===|
Images     |=======|

Resources load in parallel.

Bad Pattern:

HTML     |==|
         wait...
CSS          |==|
             wait...
JS               |===|
                 wait...
Images                |=======|

Everything loads sequentially.

2. API Patterns

RESTful APIs:

GET  /api/users      - List users
GET  /api/users/123  - Get user
POST /api/users      - Create user
PUT  /api/users/123  - Update user

GraphQL:

POST /graphql
Body: {"query": "{ users { id name } }"}

Webhooks:

POST /webhook/payment
POST /webhook/user-signup

3. Performance Indicators

Fast Site:

  • < 50 requests total
  • < 2MB total size
  • < 3s load time
  • Minimal third parties

Slow Site:

  • 200 requests

  • 10MB size

  • 10s load time

  • Dominated by third parties

Advanced Monitoring Techniques

1. Filter by Type

Find JavaScript issues:

Filter: JS
Look for:
- Large files (> 500KB)
- Failed loads (4xx, 5xx)
- Slow loads (> 1s)
- Duplicate libraries

2. Monitor API Calls

Track data flow:

/api/auth/login     → User logs in
/api/user/profile   → Fetch profile
/api/products       → Load products
/api/cart/add       → Add to cart

3. Security Checks

Look for:

  • HTTP requests (should be HTTPS)
  • Credentials in URLs
  • Exposed API keys
  • Tracking pixels
  • Cross-origin requests

Performance Optimization Tips

1. Reduce Request Count

Before: 50 CSS files After: 1 bundled CSS file Impact: 49 fewer requests

2. Optimize Images

Before: photo.png (2MB) After: photo.webp (200KB) Impact: 90% smaller

3. Lazy Load

// Load images when visible
<img loading="lazy" src="image.jpg">

// Load scripts when needed
<script defer src="script.js">

4. Cache Headers

Cache-Control: max-age=31536000  // 1 year
Cache-Control: no-cache          // Always check
Cache-Control: private           // User-specific

Practical Examples

E-commerce Site Analysis

Home page requests:

HTML/CSS/JS:      15 requests
Product images:   30 requests
Analytics:        8 requests
Chat widget:      5 requests
Payment scripts:  3 requests
Reviews widget:   7 requests
Total:           68 requests

Optimization opportunities:

  • Lazy load product images
  • Defer chat widget
  • Combine analytics scripts

SaaS Application

Dashboard requests:

App bundle:       1 request (good!)
API calls:        25 requests
Websocket:        1 connection
Fonts:           4 requests
Icons:           15 requests
Total:           46 requests

Findings:

  • Well-optimized bundles
  • Many API calls (consider batching)
  • Icons could be sprites

Blog/Content Site

Article page:

Article HTML:     1 request
Styles:          2 requests
Images:          8 requests
Comments:        5 requests
Ads:            45 requests (!!)
Social widgets:  12 requests
Total:          73 requests

Problem: Ads dominate loading!

Tools and Techniques

Browser DevTools

Chrome/Firefox/Safari:

  1. Right-click → Inspect
  2. Network tab
  3. Reload page
  4. Analyze requests

Pro tips:

  • Disable cache for real results
  • Filter by type/status
  • Sort by size/time
  • Preserve log across pages

Performance Metrics

Key metrics:

  • DOMContentLoaded: HTML parsed
  • Load: All resources loaded
  • First Paint: Something visible
  • Largest Contentful Paint: Main content

Automation

// Monitor with Performance API
const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log(`${entry.name}: ${entry.duration}ms`);
  }
});
observer.observe({ entryTypes: ['resource'] });

Quick Network Checklist

When analyzing any site:

  • Total request count
  • Total download size
  • Slowest resources
  • Failed requests (4xx/5xx)
  • Third-party percentage
  • HTTP vs HTTPS
  • API endpoints found
  • Optimization opportunities

Common Issues and Fixes

Issue: Slow Time to First Byte (TTFB)

Fix: Better hosting, CDN, caching

Issue: Blocking JavaScript

Fix: Async/defer attributes

Issue: Large Images

Fix: Compress, modern formats, lazy load

Issue: Too Many Requests

Fix: Bundle, sprite, concatenate

Issue: Third-party Scripts

Fix: Load async, delay non-critical

The Developer's Edge

Understanding network requests gives you:

  • Debugging power: Find issues faster
  • Performance insights: Optimize effectively
  • Security awareness: Spot vulnerabilities
  • Competitive intel: Learn from others

Make network monitoring part of your routine. Every site visit becomes a learning opportunity.

Monitor network requests instantly: Fusebox shows live network activity while you browse. See requests, responses, and performance data. $29 one-time purchase.