Web Performance Fundamentals, v2

Using HTTP/2 & HTTP/3

Todd Gardner

Todd Gardner

Request Metrics
Web Performance Fundamentals, v2

Check out a free preview of the full Web Performance Fundamentals, v2 course

The "Using HTTP/2 & HTTP/3" Lesson is part of the full, Web Performance Fundamentals, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Todd demonstrates how the website makes an initial request using HTTP/2 over HTTPS, but switches to HTTP/3 for the remaining connections, which are streamed over a UDP connection. The impact of using HTTP/3 is demonstrated by comparing the performance of the website before and after enabling compression and using HTTP/3.

Preview
Close

Transcript from the "Using HTTP/2 & HTTP/3" Lesson

[00:00:00]
>> Todd Gardner: Now there are some drawbacks to doing this, one is, it's all very hard to get working locally, very hard to demo, there's a lot of different moving pieces involved. The second thing is that, both HTTP/2 and HTTP/3 require HTTPS, require TLS encryption, which means you're dealing with certificates, which is always such a huge pain in the ass to deal with, setting up locally, making sure you have a trusted cert.

[00:00:26]
I didn't wanna do any of that for this, so we're gonna demo that in a slightly different way. UDP networking is hard if you especially have a big company, you need to open up special firewall rules to enable any of this stuff to work, which can be kind of a pain.

[00:00:42]
And third, HTTP/3, is so new that, stuff doesn't even work. Curl cannot make an HTTP/3 request, it doesn't know how to do it. There's a fork of it that you can download called, Curl3, that'll let you do it, but the overhead of just dealing in HTTP/3 is just a little higher.

[00:00:58]
So generally, locally, you don't wanna do it, you wanna push all this stuff into operations, into your servers, and let that handle it, which is what we're going to demo now, because I've already set all of this stuff up. So now if I go to eu.devstickers.shop port 3000 and reload this thing, I should see that my document came down with, in this case, it shows, G-zip compression.

[00:01:27]
I hope that they're both on and that I didn't screw that up, let's just check, true. Okay, it was just randomly chose a protocol. So that's fine. So I have already taken this site, and I've put it behind a proxy server that will do HTTP/3 for me. So I used a tool called Caddy, which isn't important for you guys to understand at all, but I just wanna give Caddy a shout out, Cuz Caddy is awesome, it's like one of my favorite pieces of technology that's happened in the last five years or so.

[00:02:04]
Is just the easiest HTTP front end ever that automatically gets certificates and serves protocols and stuff like that, and it's free and open source and it's just really cool, I used Caddy for this. So this same site here, @eudev.stickers.shop, is proxied behind caddy@eu.devstickers.shop, so HPS on the regular port.

[00:02:29]
So I'm going to now switch to that, and reload our page with all the same things. And what you'll see here, is that it makes this initial request to eu.devstickers.shop using the protocol, HTTP/2. And it does that because it, it knows just by default, it tries that over HTPS, it negotiates whether or not that's happening kinda under the covers.

[00:02:56]
But one of the things that come back from the response is this, Alt service header, Alt-Svc that says, hey, you know what? I can also talk over HTTP/3, H3 on this port, by the way. And so for all the remaining connections, it switches, and the remaining connections are all H3 connections and streamed over that UDP connection.

[00:03:24]
Now, what impact does this actually make? What's the significance of this? So if I go in here and I turn on all of the same performance profiling problems on, eu.devstickers.shop, and I load this up, now, this all we've done so far is, we've enabled compression and we're behind HTTP/3.

[00:03:51]
>> Todd Gardner: We've already sped things up a bunch, so we're down to TTFB @ 1.1 seconds, which I guess we're at 1.1 seconds. We haven't made that big of improvement. The internet's random. What we did do is all of these different requests here are streaming out as a response, rather than just 1z 2z happening.

[00:04:15]
And we can see that happening with this HTTP/3 protocol, happening here at the much smaller response body.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now