Http3 Demo

This post first demonstrates http1, http2, http3 like akamai, then shows how the demo works.

Demonstrations

HTTP1

HTTP2

HTTP3

How does these Tests Work?

Frontend

The frontend creates some img elements, set appropriate styles, set where to download the images, set onload callback that will update load time when the image is successfully loaded and appends these image elements to the main body. Unlike akamai, this site doesn’t use iframe. In fact, you can just inspect element to find the implementation details.

Backend

The images, along with the site itself, are all served by one caddy instance. To force the use of a particular http version, the images are served under 3 different subdomains but share the same underlying files.

Caddy is configured to:

1. Force http1 and http2 by setting tls alpn, as this value determines tls negotiated protocol and thus, the http version used. Set Alt-Svc header to clear to prevent browser from trying to use http3 to connect to the server.
2. Prevent image caching by client by setting appropriate Cache-Control header. Every time the test is run, client will always request the images so the load time is calculated.
3. Request matching by http version. Since browser will first establish a tcp connection and when discovering the server supports http3, switches to http3, caddy is configured to serve grayscale images when http version is not http3.

Here is the Caddyfile for these 3 subdomains:

http1.moebuta.org {
    import demo_tls http/1.1
    header Alt-Svc clear
    header Cache-Control "max-age=0, no-cache, no-store"
    file_server {
        root /path/to/colored/image
    }
}

http2.moebuta.org {
    import demo_tls h2
    header Alt-Svc clear
    header Cache-Control "max-age=0, no-cache, no-store"
    file_server {
        root /path/to/colored/image
    }
}

http3.moebuta.org {
    import common
    header Cache-Control "max-age=0, no-cache, no-store"
    @h3 protocol http/3
    handle @h3 {
        file_server {
            root /path/to/colored/image
        }
    }

    file_server {
        root /path/to/gray/image
    }
}

demo_tls is a snippet that configures most of tls settings and exposes alpn as a configurable parameter.

(demo_tls) {
    import common
    tls your_email_address {
        alpn {args[:]}
        ca ca_url
        eab your_key your_id
    }
}