Latency vs Bandwidth

Also Known As

TL;DR

Explanation

Latency: time for a packet to travel from source to destination — physical distance, hops, processing time. Cannot be improved beyond the speed of light. Bandwidth: maximum data transfer rate — upgradeable with better hardware. For small responses (API calls, HTML pages), latency dominates performance. A 10Mbps connection at 10ms RTT delivers a 10KB response faster than 100Mbps at 200ms RTT. HTTP/2 multiplexing and CDN reduce the impact of latency.

Common Misconception

Why It Matters

Common Mistakes

• Serial HTTP requests where parallel would reduce total time
• No HTTP keep-alive — each new connection adds one RTT
• No CDN — distant users have high latency regardless of origin bandwidth
• Optimising file sizes when connection count is the real bottleneck

Code Examples

// 10 serial API calls — each adds full RTT:
async function loadDashboard() {
    const user    = await fetch('/api/user');     // 100ms RTT
    const orders  = await fetch('/api/orders');   // 100ms RTT
    const reviews = await fetch('/api/reviews');  // 100ms RTT
    // Total: 300ms in latency alone
}

// Parallel requests — latency is max(individual):
async function loadDashboard() {
    const [user, orders, reviews] = await Promise.all([
        fetch('/api/user'),
        fetch('/api/orders'),
        fetch('/api/reviews'),
    ]);
    // Total: ~100ms (parallel) vs 300ms (serial)
}

References

• ↗ https://hpbn.co/

Tags

Related Terms