Enabling Gzip & Brotli Compression

[00:00:00]
>> Todd Gardner: Some tactics. Here's what we're gonna cover. One, we can compress our HTTP resources, so we can ship fewer bytes over the wire, doing fewer things. We can use more efficient protocols that do less chatty things. We can change the capacity of our host, and we can change where our host is located.

[00:00:16]
We're gonna do all of those things. First Let's talk about compression. So compression is reducing the size of our plain text files, so the HTML, the CSS, and the JavaScript. We ship regular text across the wire. You can read the HTML. Maybe shipping all of those bytes is not the most efficient way, and we can compress it down into a more efficient format.

[00:00:38]
The ways to do that is with a couple of protocols called Gzip and Brotli. There's some other ones, but these are the most predominantly used. And here's some examples of what these things do. So I have an example, HTML document, CSS file, and JavaScript file, and totally uncompressed, just the plain text source.

[00:00:57]
It's about 1.1 megabytes uncompressed HTML. If I run that through Gzip on the medium setting, that comes out at 282 kilobytes, so about 25% of the original file. Brotli, which is a newer compression algorithm that came out from Google, but it's broadly supported standard in all browsers, gets that all the way down to 20 kilobytes, so 1.7% of the original size.

[00:01:30]
You can see similar examples in the CSS file and the Javascript file. Compressing, even if you can only compress in Gzip is great if you can compress in broadly. Be it's even better. So what does compression actually look like over the wire? So when the user is making a request, the user says, hey, get me the root of devstickers.shop.

[00:01:53]
It'd be great. It can send up an accept encoding header, accept. Encoding is basically, how can you compress the file that's gonna come back? And most often you'll see this, accept encoding, gzip, deflate, brotli. Br is brotli. Deflate is another standard that's more broadly used than brotli. It's a little better than Gzip.

[00:02:19]
Generally, I'm not talking about that too much because most browsers today support broadly. So it says, here's the things that I know how to read. Here's the things I can deal with. And the browser, when it sends something back, it's gonna choose based on the options the client sent about what the client can understand, which one to use.

[00:02:38]
And will return the content with the header content encoding whatever content encoding broadly, that means that the actual stuff inside the response body has been compressed, has been encoded with whatever algorithm. It says here, it's not shipping the raw bytes over the wire anymore. So let's see what that looks like we can actually turn that on.

[00:03:01]
We're gonna go into our local DevStickers app. So in local DevStickers, I have everything kind of already set up on how to turn this on. So if we go into performance config in the root, I have all the different settings kind of I've abstracted out here for what kinds of things we want to do.

[00:03:23]
So I have enabled Gzip compression and enabled Brotli compression options out here. When these things are turned on, I'm, it's basically instructing the server, which lives in source app JS. If you actually are interested in where this gets used. We're instructing the static server whether or not to use compression.

[00:03:42]
Now, compression doesn't always work super well or it's not always worth it on super small files. If you have a file that's only like a few bytes, it's usually not worth the processing power to bother compressing it. But I have it turned on to always compress everything just so we can see it for demo purposes.

[00:04:02]
So, what I'm gonna do here is I'm gonna go to performance config, and I'm going to turn Qzip compression on. And save it, and the whole thing should automatically reload so we can play with it.
>> Todd Gardner: When I make a request here against localhost, and we look inside the network panel.

[00:04:30]
I'm just gonna pick the first thing here, which is the request to local host, we see that the request headers, we will accept encoding of Gzip, deflate, Brotli, or Zstandard. And then when the response came back down, it said, great. I'm going to send you some Gzip. And the response that was actually in here, this wasn't actually what was returned.

[00:04:59]
It was this that was encoded with Gzip, was returned. Now we can see a size improvement. So this file that was gzip encoded was six kilobytes. The same file, when we requested it from my hosted version that did not do any gzip, returned. Returned 33 kb. So we cut this from 33 kb down to 6 kb just by turning on a widely accepted compression algorithm.

[00:05:30]
That's just a setting in most web servers. Huge boost. Let's go a step further. We're gonna go to our code and we're also gonna turn on Brotli compression and save this. And now we're gonna make in our DevTools, localhost, we're going to refresh this page all right. So we had 6k on gzip, and it was actually slightly larger on broadly it made it a little bit Bigger.

[00:06:00]
Now this is not entirely unusual, because the different algorithms will compress at different rates. Brotli is slightly less, is slightly less effective at small file sizes, but hugely more effective at large file sizes. So if you're dealing with mostly a bunch of really small. Small files, you can probably stick with gzip.

[00:06:24]
Brotli is really good for more real-world applications. Obviously, in this sample site, all of my pages are teeny tiny. They don't do that much. So we're not quite hitting those thresholds. But we have both on now for the future. So we enabled compression.