1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
|
+++
date = 2022-02-20
title = "Caching Static Content with Nginx"
description = "Learn how to cache static content client-side with Nginx configurations."
draft = false
+++
## Update Your Nginx Config to Cache Static Files
If you run a website on Nginx that serves static content (i.e., content that is
not dynamic and changing with interactions from the user), you would likely
benefit from caching that content on the client-side. If you're used to Apache
and looking for the Nginx equivalent, this post should help.
Luckily, setting up the cache is as easy as identifying the file types you want
to cache and determining the expiration length. To include more file types,
simply use the bar separator (`|`) and type the new file extension you want to
include.
```config
server {
...
location ~* .(css|js|jpg|jpeg|gif|png|ico)$ {
expires 30d;
}
...
}
```
I have seen some people who prefer to set `expires` as `365d` or even `max`, but
that is only for stable, infrequently changing websites.
As my site often changes (i.e., I'm never content with my website), I need
to know that my readers are seeing the new content without waiting too long.
So, I went ahead and set the expiration date at `30d`, which is short enough to
refresh for readers but long enough that clients/browsers won't be re-requesting
the static files too often, hopefully resulting in faster loading times, as
images should be the only thing slowing down my site.
## Testing Results
To test my changes to the Nginx configuration, I used the
[HTTP Header Live](https://addons.mozilla.org/en-US/firefox/addon/http-header-live/)
extension on my Gecko browser and used the sidebar to inspect the headers of a
recent image from my blog.
In the image below, you can see that the `Cache-Control` header is now present
and set to 2592000, which is 30 days represented in seconds (30 days _ 24
hours/day _ 60 minutes/hour \* 60 seconds/minute = 2,592,000 seconds).
The `Expires` field is now showing 22 March 2022, which is 30 days from the day
of this post, 20 February 2022.
## Caveats
Remember that this caching system is **client-side**, which means that content
is only cached for as long as a client allows it. For example, my browser purges
all caches, data, etc. upon exit, so this caching policy will only work as long
as my browser remains open and running.
If you need to test updates to your site, you'll need to clear the cache to see
updates for any file extension you configured. This can often be done with the
`Shift + F5` or `Ctrl + F5` key combinations in most browsers.
|
