DEV Community

Cover image for Testing HTTP/1.1, HTTP/2, and HTTP/3 Performance with a React App
Tomas Stveracek
Tomas Stveracek

Posted on

Testing HTTP/1.1, HTTP/2, and HTTP/3 Performance with a React App

#http #performance #testing #webdev

Ever wondered how much faster HTTP/3 really is compared to HTTP/1.1? I built a simple web app to find out.

Quick HTTP History

HTTP/1.1 (1997) - One request per connection. Want 50 images? Open multiple TCP connections and wait. Head-of-line blocking is a real problem. HTTP/2 (2015) - Multiplexing! Multiple requests over single TCP connection. Binary protocol, header compression (HPACK). Big improvement. HTTP/3 (2022) - Uses QUIC over UDP instead of TCP. No more TCP head-of-line blocking. 0-RTT connection resumption. Built-in encryption.

The App

I created HTTP Protocol Performance Testing to measure real differences between protocols.

What It Measures

  • TTFB (Time to First Byte)
  • DOM Load Time
  • Full Page Load
  • Total Transfer Size

Test Scenarios

  1. Baseline - 5 images (minimal difference expected)
  2. Large Files - 35 images (HTTP/2 should be faster)
  3. Multiplexing - 50 small images (HTTP/2 and HTTP/3 shine here)

How to Test Each Protocol

  • HTTP/3: Visit the live demo (Cloudflare serves HTTP/3 by default)
  • HTTP/2: Disable QUIC in Chrome (chrome://flags → "QUIC" → Disable)
  • HTTP/1.1: Run locally with npm run dev

Results

From my testing:

  • HTTP/2 shows ~10-50% improvement over HTTP/1.1 (varies by scenario)
  • Multiplexing test shows the biggest difference
  • HTTP/3 is ~5-15% faster than HTTP/2 on stable networks
  • HTTP/3 benefits are more visible on mobile/unstable connections

Tech Stack

React 19, Vite, Tailwind CSS v4, Chart.js, Cloudflare Workers

Links

Top comments (0)