Check out a free preview of the full Full Stack for Front-End Engineers, v2 course:
The "HTTP/2" Lesson is part of the full, Full Stack for Front-End Engineers, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Jem explains what the requirements are to enable HTTP 2, and explains the main differences between HTTP and HTTP 2.

Get Unlimited Access Now

Transcript from the "HTTP/2" Lesson

[00:00:00]
>> Jem Young: Everything we were discussing before use the old protocol HTTP1.1. This was invented in 89? 1.0? And 1.1 was like 98 or something like that. I'm guessing on the dates but I think I'm about right. But again this protocol is just a standard that everybody agreed on. HTTP1.1 was the latest and greatest until people said you know what?

[00:00:28] This isn't working for us, we need something a little bit different. We need something that not just 1.2, we need something that's entirely different. Thus HTTP/2 came along, anybody, excuse me, anybody know what HTTP/2 is?
>> Jem Young: Anybody, anybody, yes?
>> Speaker 2: It's a way of streaming packets so that you have a persistent connection and you don't have to create multiple connections with each request link.

[00:00:56]
>> Jem Young: Yeah, you're close, you're describing almost, you're driving HTTP/3 actually. So nice job, but we're jumping a little ahead, you're on the right track, though. Get the same answer?
>> Speaker 2: Yeah. So it relies on SSL being in place, you have to have HTTPS setup. Otherwise, it's a deal breaker for HTTP/2.

[00:01:18] Once you have that in place, then it's an extension of Google's SPD wire, speedy protocol? But basically it allows multiplexing.
>> Jem Young: Yes-
>> Speaker 2: That's a big deal.
>> Jem Young: [LAUGH] Nailed it, nailed it again. That's why we, again, this journey, we're following from looking at the headers and checking off status codes, we understand what a request and response looks like.

[00:01:40] To adding HTTPS to our site, now we're gonna add HTTP/2. Because one of the requirements for HTTP/2 is you have SSL enabled first. Again, they're just kinda nudging you in the right direction. You wanna use the latest greatest technology. You gotta have the encryption placed. With HTTP1.1, like Adar was just saying, every single request had its own thread, its own pipe.

[00:02:05] So if I wanna request main.js, request response. But remember, this is all over TCP, and TCP has that long handshake where it sends those SYN packets. And then it send the acknowledge packets, the ACK. And then you send back SYN/ACK, and it's called the handshake, and that's really cumbersome.

[00:02:23] So that means every single resource that I want, is gonna need a separate handshake which makes it slower by default. With HTTP/2 we can multiplex, so you're right that we can stream our connections over. Well, we're not streaming but we can make one connection. Then we can request everything just over a larger pipe.

[00:02:42] And Sammy mentioned it, but that's what's known as multiplexing. Using one connection and doing multiple things over a single connection. So instead of that, every single time I want a dog.png, index.html, we do that handshake. Which causes overhead and increase just an amount of data using. We can just do with one connection, that said, there is a limit to the number of connections we can make.

[00:03:03] And that's largely depending on your computer. I should add a side note, this is just nerd trivia, and I think it's ten, actually. People have done, I think it depends on the browser and the computer, things like that.
>> Speaker 2: Most browsers are limited to six connections.
>> Jem Young: Six?

[00:03:15] I thought it was ten.
>> Speaker 3: It changed.
>> Jem Young: Per domain.
>> Speaker 3: It used to be six.
>> Jem Young: It's not ten?
>> Speaker 3: It depends on your browser.
>> Jem Young: Yeah, but this isn't like a silver bullet. This isn't, I can make one connection and everything goes through it. There is a maximum amount of connections you can make per connection.

[00:03:30] So largely it'll be add networks, you'll just see the deluge of requests, that's gonna be multiple connections. So HTTP/2 is not this magic thing but however, just getting rid of that handshake, when you talk about something that happens. What's bigger than a trillion? I don't even know.
>> Speaker 2: Quadrillion.

[00:03:49]
>> Jem Young: Quadrillion, we're talking about quadrillions of requests, getting rid of this handshake every single time, saves a lot of time and energy and just makes the internet faster. So let's add HTTP/2.
>> Jem Young: This one's even easier than Certbot. In our nginx conf, just add HTTP/2 in between the 443 and the SSL part.

[00:04:15]
>> Jem Young: I'm sorry, I lied to you before, Certbot was pretty easy. This one's even easier.
>> Jem Young: I'm gonna go ahead and do that. I'm just gonna go up and come down here,
>> Jem Young: And turn on http2.
>> Jem Young: And then I'm gonna turn on http2 here as well.
>> Jem Young: Okay, anybody lost, anybody know where I am?

[00:05:01] If you need to, if you can't find in that blob of nginx configuration, /443 and that'll take you to the right location.
>> Jem Young: Slash is just the find command.
>> Jem Young: Then when we're done, we want to write and quit as usual. Wq and make sure we reload our nginx.

[00:05:25] So, sudo service nginx reload.
>> Jem Young: And let's test out our site.
>> Jem Young: Hey, nice work, Jem! You probably don't notice a difference. But if you go into your inspector in whatever browser you're using, you can see the h2. That just means you are now using HTTP/2 protocol.
>> Jem Young: And I think there's a good demo.

[00:05:58] Let me see if I can pull this up here, let's see. Akamai http2 demo, yeah, I like this one.
>> Jem Young: Yeah, so I like this demo, I didn't include it because I don't have copyright on it, but I can show it to you. This is just the Akamai demo, demonstrating the difference between HTTP/1 and HTTP/2.

[00:06:21] You see it really with large images, so because of that multplexing, I can request an image. And it just sends down the chunk over one pipe. And because it's not doing that handshake, it's much faster. You see it primarily the benefit on large files you're sending down. Not so much small ones, but turning HTTP/2, it's so painless and easy.

[00:06:40] It doesn't hurt to do it, we saw it's pretty minimal, I'll run that again.
>> Jem Young: Not bad, not bad at all. That was pretty as straightforward as we can get. That was pretty easy. I don't say that very often, but that was pretty easy, right? The second benefit to HTTP/2 besides that multiplexing is something called HPACK.

[00:07:05] HPACK is a compression algorithm again, but instead of, let me jump back to the
>> Jem Young: I'll jump back to the header section. So what HTTP/2 allows is, most of these are the same. My user agent generally is not gonna change magically between requests and responses. It's not gonna change over time, my Accepts is not gonna change, my language isn't going to change.

[00:07:31] So what the HPACK compression algorithm does is it takes all these headers, compresses them into a hash. And it just compares them over time. That comparison gives us about a 30, 40% speed up. Because instead of sending these headers every single time, it can just compress these down and then read them at will.

[00:07:49] That's really powerful and that's beside multiplexing is probably the secondary, most powerful benefit of using HTTP/2. That's the other speed up that we get, is compressing those headers. But remember, cookies can't be compressed generally. You can, but it probably won't. Because cookies change over time, they're more dynamic.

[00:08:08] So if you send a large cookie payload, HTTP/2 is not gonna help you very much. You wanna minimize the amount of cookies you send.