HTTP/2 & HTTP/3 (QUIC) Configuration in Cloudflare
In this tutorial, you'll learn about HTTP/2 & HTTP/3 (QUIC) Configuration in Cloudflare. We cover key concepts, practical examples, and best practices to help you understand and apply this topic effectively.
Cloudflare HTTP/2 and HTTP/3 enable multiplexed streams, header compression, and connection Migration, delivering faster page loads and more efficient use of network resources for every Visitor.
What You'll Learn
By the end of this tutorial, you will understand the differences between HTTP/1.1, HTTP/2, and HTTP/3, how to enable each protocol in Cloudflare, and how to verify which protocol your visitors are using.
Why It Matters
HTTP/2 and HTTP/3 address the head-of-line blocking problem in HTTP/1.1 and reduce connection establishment overhead. For sites with many assets, protocol upgrades alone can improve load times by 15-40%.
Real-World Use
Doda Browser supports HTTP/3 natively. When connecting to Cloudflare-originated sites, the browser establishes zero-RTT connections that feel instant even on high-latency networks like satellite or cellular.
Your Learning Path
flowchart LR
A[Rocket Loader] --> B["HTTP/2 & HTTP/3"]
B --> C[Signed Exchanges]
C --> D[Prefetch & Preload]
D --> E[Page Rules Intro]
B --> F{You Are Here}
style F fill:#f90,color:#fff
Protocol Overview
| Feature | HTTP/1.1 | HTTP/2 | HTTP/3 |
|---|---|---|---|
| Transport | TCP | TCP | QUIC (UDP) |
| Multiplexing | No (6 connections per domain) | Yes (streams) | Yes (streams) |
| Header compression | No | HPACK | QPACK |
| Server push | No | Yes | Yes |
| Connection Migration | No | No | Yes |
| 0-RTT handshake | No | No | Yes |
| Encryption | Optional (TLS) | Required (TLS 1.2+) | Required (TLS 1.3) |
Enabling HTTP/2 and HTTP/3
- Log in to the Cloudflare dashboard.
- Select your domain.
- Go to Speed > Optimization > Protocols.
- Toggle HTTP/2 and HTTP/3 to On.
- HTTP/2 is enabled by default on all Cloudflare plans. HTTP/3 requires at least a Free plan.
Verifying Protocol in Use
# Check which protocol your browser used
curl -v --http3 https://yourdomain.com 2>&1 | grep -E "(HTTP/|ALPN)"
# Expected output for HTTP/3:
# * Using HTTP/3 (QUIC)
# * ALPN: h3
# Expected output for HTTP/2:
# * Using HTTP/2
# * ALPN: h2
Multiplexing Demonstration
<!-- HTTP/1.1: Loading 10 images requires 6 connections, queuing occurs -->
<!-- HTTP/2: All 10 images load over a single connection simultaneously -->
<!DOCTYPE html>
<html>
<head>
<title>Multiplexing Test</title>
</head>
<body>
<h1>HTTP/2 Multiplexing</h1>
<div id="gallery">
<!-- All 10 requests share one TCP connection with HTTP/2 -->
<img src="img/photo1.webp" alt="Photo 1" />
<img src="img/photo2.webp" alt="Photo 2" />
<img src="img/photo3.webp" alt="Photo 3" />
<img src="img/photo4.webp" alt="Photo 4" />
<img src="img/photo5.webp" alt="Photo 5" />
<img src="img/photo6.webp" alt="Photo 6" />
<img src="img/photo7.webp" alt="Photo 7" />
<img src="img/photo8.webp" alt="Photo 8" />
<img src="img/photo9.webp" alt="Photo 9" />
<img src="img/photo10.webp" alt="Photo 10" />
</div>
</body>
</html>
// Measure protocol performance difference
async function measureProtocolLoad(url) {
const start = performance.now();
await fetch(url);
const duration = performance.now() - start;
const protocol = performance.getEntriesByType('resource')
.find(r => r.name === url)?.nextHopProtocol || 'unknown';
console.log(protocol, duration.toFixed(2) + 'ms');
}
// Expected output (one line per protocol):
// h2 84.23ms
// h3 72.15ms
Server Push Configuration
HTTP/2 server push is being phased out in favor of 103 Early Hints. However, Cloudflare still supports it for legacy configurations.
# Cloudflare sends Link headers as push hints
# Origin sets:
Link: </critical.css>; rel=preload; as=style
Common Errors
HTTP/3 not connecting. Some corporate firewalls block UDP ports required by QUIC. These users fall back to HTTP/2 automatically. No action is needed.
WebSockets not working with HTTP/3. Cloudflare's WebSocket implementation uses TCP, not QUIC. WebSocket connections use HTTP/2 or HTTP/1.1 regardless of the HTTP/3 setting.
Mixed protocol warnings. If your page loads assets over HTTP/1.1 while the main document uses HTTP/2, the performance benefit is reduced. Ensure all assets are served from the same protocol.
Load balancers stripping QUIC. If your origin is behind a load balancer that does not support QUIC, Cloudflare terminates HTTP/3 and proxies the request as HTTP/2 to the origin.
Server push causing duplicate downloads. Browsers now ignore server push for cached resources. Use Early Hints instead for finer-grained control over preloading.
Practice Questions
- What is the primary transport protocol difference between HTTP/2 and HTTP/3?
- How does multiplexing in HTTP/2 solve the head-of-line blocking problem?
- What fallback mechanism does Cloudflare use when a client cannot connect via HTTP/3?
Challenge
Create a test page with 50 small images. Load it over HTTP/1.1, HTTP/2, and HTTP/3. Measure the total load time for each protocol and calculate the percentage improvement.
Real-World Task
Check your Cloudflare Analytics dashboard under Traffic. Identify what percentage of your visitors currently use HTTP/3 versus HTTP/2. Document the trend over one week.
FAQ
Related Tutorials
- Signed Exchanges — Instant page loads using SXG with HTTP/2
- Early Hints — 103 status code for faster preloading over HTTP/2
- Prefetch & Preload — Predictive loading strategies
Built by the developers of Doda Browser, DodaZIP, and Durga Antivirus Pro — security-first tools for the modern web.
Built by the developers of DodaTech
Doda Browser, DodaZIP & Durga Antivirus Pro