content/blog/2022-02-20-nginx-caching.org

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