Web Performance Fundamentals, v2

Efficient Protocols

Todd Gardner

Todd Gardner

Request Metrics
Web Performance Fundamentals, v2

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

The "Efficient Protocols" 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 discusses the protocols used in web communication, specifically HTTP 1.1, HTTP 2, and HTTP 3. He explains how HTTP 2 and HTTP 3 aim to improve efficiency by streaming requests and responses over a single TCP connection or a UDP protocol called QUIC, respectively.

Preview
Close

Transcript from the "Efficient Protocols" Lesson

[00:00:01]
>> Todd Gardner: So, let's talk about some protocols. Everything that I've been doing in my site so far has been in plain old HTTP/1.1, which is the normal HTTP that's been around forever and ever and ever. Let's briefly talk about how HTTP works. So when HTTP starts up, the browser needs to make a request to the server.

[00:00:24]
And then the server responds with what you asked for, and then the browser makes another request for the next thing, and then the server comes back with that, again, and again and again. It's a bunch of chatty network traffic happening over and over and over again, to get all of the assets, all of the resources, all of the requests needed to build your web page.

[00:00:46]
So, that's kind of inefficient, there's a lot of request setup and tear it down the keeps happening over and over. And so, we developed a new protocol, and we call it HTTP/2. And the idea is, we already have this connection set up, rather than building and destroying them all the time, what if we just streamed everything back through a single TCP connection?

[00:01:11]
So the browser makes a single request to the server, and the server returns things, and more requests can happen over the same TCP connection. And we keep getting more and more stuff back, it causes us to have lower overhead of making requests. Now, that was set several years ago, and it turns out there was some complications to how that worked.

[00:01:34]
So we had HTTP/3 came out. Now, HTTP/3 is like HTTP/2, except it operates over a different protocol. Rather than using TCP, it uses a protocol called QUIC, Q-U-I-C, which is a UDP protocol. I know we're getting down into the depths of how the Internet works here, but there's an important reason for this.

[00:02:02]
So, this is a comparison of all of the communication that happens between HTTP/1, or between HTTP/2 and HTTP/3. Is that, even though HTTP/2, which is both different options on how it worked on the left-hand side, operated under one connection to stream all the requests out there was still a bunch of stuff happened to set everything up.

[00:02:25]
Handshakes that had to happen to set up secure communication, like TLS, all the stuff that goes into making HTTPS happen, was kind of expensive. And HTTP/3 figured out how to make that all happen in a single request, and how to do that over UDP. So, what's the difference between TCP and UDP?

[00:02:49]
Well, so a TCP request on the right-hand side is guaranteed, so if you and I are talking over TCP, I send you something, and you acknowledge that you got it by saying ACK. And then I send you something else, and then you say, ACK, and then I send you something else, and I say ACK.

[00:03:12]
There's a redundant step of communication that happens for every single request to acknowledge that the other party received the information that I just sent, over and over and over. Whereas UDP doesn't really give a crap if the other person got it, it says, here's the thing, here's the thing, here's the thing, here's the thing, here's the thing, I don't know if you got it.

[00:03:33]
I don't care, if you didn't get something and it's confusing, you'll ask for it again, and just start streaming the data out. Now, it's a little bit more faulty in theory, but it's way faster, cuz you don't have to sit there and wait to make sure the other party got it.

[00:03:49]
Okay, so this is all like, there's so many things that happen under the covers for these things. That it's totally unreliable to just do a little demo and show you like, it's defiantly faster, because nine times out of ten it might not even be faster, and it totally send the wrong message.

[00:04:05]
So, instead, we did some research. This is some real data that me and my team did a couple years ago we were putting some stuff together. Is we set up web servers in Los Angeles, Singapore, and Frankfurt, somewhere in Europe, I don't know. And we had the servers respond on HTTP/1, HTTP/2 and HTTP/3.

[00:04:29]
And it wasn't just one file, we did the Hello World app of Bayer HTML and a simple React application and a few other things. And then we just charted how things worked, for HTTP/1 requests, HTTP/2 requests, and HTTP/3 requests. And you can see that it's about 100% improvement.

[00:04:53]
It's about twice as fast every time, between HTTP/1, HTTP/2, and HTTP/3, in getting faster. HTTP 1 is the slowest.
>> Todd Gardner: So for one file, it's reasonably fast. For a simple website, it's a little slower, and for a single page app, it was actually slightly faster than the whole website, for some reason.

[00:05:24]
HTTP/2, were about, I don't know, more than half the size, faster in terms of its delivery. And that's in just in terms of we're not setting up and tearing down all these different TCP connections. But we're still operating over TCP, and then when we switch to UDP, it gets quite a bit faster again.

[00:05:45]
Now, there's still some outliers. Sometimes things run slow, it's the Internet, things are complicated, but in general, we get faster and faster and faster the farther we progress along this chain.

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