gotchajavascriptModerate
HTTP/2 multiplexing makes domain sharding harmful rather than helpful
Viewed 0 times
HTTP/2multiplexingdomain shardingh2HTTP/3QUICconnection overhead
Problem
Domain sharding (splitting resources across cdn1.example.com, cdn2.example.com) was a valid HTTP/1.1 optimization to bypass the 6-connection-per-origin limit. Continuing this practice with HTTP/2 is actively harmful.
Solution
Consolidate resources onto a single origin when using HTTP/2. Remove subdomains that were created solely for sharding.
// HTTP/1.1 world: sharding helped
// <img src="https://img1.cdn.com/a.png">
// <img src="https://img2.cdn.com/b.png">
// (different TCP connections = parallel downloads)
// HTTP/2 world: single origin is better
// <img src="https://cdn.com/a.png">
// <img src="https://cdn.com/b.png">
// (multiplexed on single connection = same parallelism, less overhead)
// Verify HTTP/2 in DevTools:
// Network tab > right-click column header > Protocol
// Look for 'h2' in the Protocol column
// HTTP/1.1 world: sharding helped
// <img src="https://img1.cdn.com/a.png">
// <img src="https://img2.cdn.com/b.png">
// (different TCP connections = parallel downloads)
// HTTP/2 world: single origin is better
// <img src="https://cdn.com/a.png">
// <img src="https://cdn.com/b.png">
// (multiplexed on single connection = same parallelism, less overhead)
// Verify HTTP/2 in DevTools:
// Network tab > right-click column header > Protocol
// Look for 'h2' in the Protocol column
Why
HTTP/2 multiplexes all requests over a single TLS connection. Multiple origins mean multiple TCP handshakes, TLS negotiations (~2 RTTs each), and separate HOL blocking risk. Each extra origin also requires a separate preconnect hint.
Gotchas
- HTTP/2 Server Push was deprecated in Chrome — do not rely on it; use preload hints instead
- HTTP/3 (QUIC) removes head-of-line blocking entirely — migration to QUIC is the next step after HTTP/2
- Bundling many small JS files into one large file is less important under HTTP/2 than it was under HTTP/1.1
- CDNs may terminate HTTP/2 at the edge and use HTTP/1.1 to your origin — check the full chain
Code Snippets
Detect non-HTTP/2 resources via PerformanceResourceTiming
// Check protocol in PerformanceResourceTiming
const resources = performance.getEntriesByType('resource');
resources.forEach(r => {
if (r.nextHopProtocol !== 'h2' && r.nextHopProtocol !== 'h3') {
console.warn('Not using HTTP/2+:', r.name, r.nextHopProtocol);
}
});Context
When migrating a legacy site to HTTP/2 or auditing CDN configuration
Revisions (0)
No revisions yet.