Networking

How to cache static content on NGINX

Jack Wallen shows you how to eke even more speed out of NGINX by making use of static content caching.

nginxhero.jpg
Image: NGINX

As an NGINX administrator, you are constantly in search of ways to make your web servers run as efficiently as possible. This journey will take you down various paths, and in the end you'll find a seemingly never-ending amount of solutions.

One possible solution for the optimizing of NGINX is to enable caching of static content. What does this do? Simple: Instead of NGINX having to serve up every single file every time a browser visits a site, it offloads the caching of specific files (in this case, static files such as images) to the individual web browser. This can result in your NGINX-powered websites loading faster on the browser.

What I'm going to show you is how to enable caching for static content. If your website makes use of a lot of static content, this can really help speed up the loading of your pages. I'll be demonstrating on the Ubuntu Server 16.04 platform, and will assume you already have NGINX up and running. The process is actually quite easy.

Configuration

I'm going to demonstrate this configuration on the default NGINX site. If you have multiple sites and virtual hosts up and running, you will make this configuration within their individual configuration files. With that said, log into your NGINX-powered Ubuntu Server and issue the command sudo nano /etc/nginx/sites-available/default. Within that file, scroll down to the bottom of the first server section and add the following (Figure A):

location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
expires 365d;
}

Save and close the file.

Figure A

Figure A

Configuring the default NGINX site.


The above configuration will cache jpg/jpeg/png/gif/ico images as well as javascript and not expire said content for one year. Reload NGINX with the command sudo systemctl reload nginx.

Testing

In order to test our new configuration, we must install a Firefox browser extension called HTTP Header Live. Once you've installed the extension, a sidebar will open. Point your browser to the newly configured NGINX server and open up a static file such as a JPG image. What you should see in the HTTP Header Live sidebar is an Expires header and a Cache-Control header with a max-age directive (Figure B).

Figure B

Figure B

Our static cache is working.


That's all there is to enabling static content caching in NGINX. You should see an improvement on page load times for your websites. Remember, for any site configuration you have in /etc/nginx/sites-available, you will want to add the above configuration, and then reload the NGINX service.

Plenty of configurations available

NGINX is a highly configurable browser built for speed. If you're already happy with the load times of your pages, you should still give static cache a try, and see if you can eke out even more speed from the server.

Also See

About Jack Wallen

Jack Wallen is an award-winning writer for TechRepublic and Linux.com. He’s an avid promoter of open source and the voice of The Android Expert. For more news about Jack Wallen, visit his website jackwallen.com.

Editor's Picks

Free Newsletters, In your Inbox