note

This article was last updated on August 10, 2023, 8 months ago. The content may be out of date.

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

Demonstrations

info

Firefox has a bug/feature that it will cache images even though instructed not to. Use another browser or hard refresh to rerun the tests.

HTTP1

HTTP2

HTTP3

info

If the image is gray, http3 is not used. There are several reasons why this may happen:

  1. This is the first time your browser connects to this site and doesn’t know it supports http3. Simply rerun the test and see the result.
  2. Some of your configurations prevent the use of http3 like proxy settings.
  3. Your browser doesn’t support http3. Use another browser to test again.
  4. There are bugs with caddy or quic-go.

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
    }
}