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
68
|
#+date: <2022-02-20>
#+title: Caching Static Content with Nginx
#+description:
* 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.
#+begin_src config
server {
...
location ~** .(css|js|jpg|jpeg|gif|png|ico)$ {
expires 30d;
}
...
}
#+end_src
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
[[https://addons.mozilla.org/en-US/firefox/addon/http-header-live/][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.
|
