Enabling Caching Headers

[00:00:00]
>> Todd Gardner: All right, so we're gonna enable some caching headers and earn some free requests. So this is one of the other things that we have set up here. If we go into the root file, into performance config, this is one of the other things that I have ready wired up, and turned on.

[00:00:17]
So, the first option is enable 304 caching headers. Which is whether or not we should return the eTag and last modified headers for static content. I'm gonna start this, and we're just gonna kinda play with it locally a little bit.
>> Todd Gardner: So if we go to localhost, and I'm gonna turn this off and load this page and let's just look at hero for now.

[00:00:48]
When we made this request, the request headers, we said, great, I want this image. Please give me this image when it came back, in addition to having the contents of it, we see there's an e-tag, w/ a bunch of garbage, and a last modified of Thursday, September 26th, 2024, blah blah blah.

[00:01:12]
These is now remembered by the browser. So if I want to ask for this file again, if I refresh this, stop being so aggressive with your performance monitoring. Chrome tries so hard to optimize everything that sometimes it caches things when I don't want it to, cuz it has jumped the shark, as it were, and jumped ahead and already done the full on caching mode for me.

[00:01:39]
Returning from local cache, which is ahead of where I want to be. So let's kind of rewind, and we're just going to enable both of our caching headers right away. And so now what's gonna happen is when we visit our local system, and we make a request when we ask for hero mobile 1400.

[00:02:01]
In addition, rather than when we pull down hero mobile 1400. The server is gonna return cache control to keep this thing for 7200 milliseconds, or 7200 seconds to keep it until it's gonna return cache control to keep this thing for 7200 seconds. Here's the eTag and here's the last modified date, so that if we request this file again, disabling the local cache, the request isn't actually even made.

[00:02:30]
The request happens in 0 milliseconds. And the size, we don't even know the size, because it's returned from the memory cache. The local browser didn't even really make this request it's returning this thing as though it did the last time for free. Now, this is really great for returning experience.

[00:02:50]
This doesn't count for the first time users visit the site. They're not gonna have anything in cache. But if a user comes back to your site later, this makes things way faster.