AtulHost
  • Business
    • Career and Education
    • Finance and Investments
    • Marketing Strategies
  • Productivity
  • Technology
    • Consumer Electronics
    • Solar Energy
  • Tutorials

How to cache static content on Nginx?

By AtulHost in Tutorials ⋅ November 9th, 2020

Here in this post I’ll show you how to cache static content or files on Nginx. If you are not caching static content yet, tune it now, you’ll gain more speed just doing it.

Nginx

I’m assuming that you know the configuration directories and files of nginx and we can set the parameters in an http (multi-site way) or a server block(single-site way).

location ~* \.(css|gif|jpg|js|png)$ {
    access_log off;
    expires max;
}
  • You can add more file extensions by using PIPE Symbol “|” as a divider.
  • The access log is turned “Off” for small performance gain.
  • The expires is set to “Max”, static content will be cached for a long time.

Once you have added this block, just save it, test nginx, and reload nginx web server.

nginx -t
systemctl reload nginx

I always recommend testing nginx first before reloading or restarting the nginx to avoid any downtime due to an error in typing the syntax.

Now you can try out loading your website few times in the browser and you can notice speed is improved as most of the static part is loading for the very first time and onwards it just loads a unique segment of the page.

Below is a small video of a test page we made for the sake of this tutorial, watch out for the difference between loading a website uncached and cached environments.

In the above setup, I’ve just added CSS, JavaScript, and few image file formats. That is more than enough for most of the blogs or basic websites, but you can add more.

For your convenient I have listed all the known and usable static files here:

bmp|class|css|csv|doc|docx|ejs|eot|eps|gif|ico|jar|jpeg|jpg|js|mid|midi|otf|pdf|pict|pls|png|ppt|pptx|ps|svg|svgz|swf|tif|tiff|ttf|webp|woff|woff2|xls|xlsx

I hope this will be useful.

Tagged with nginx, NGINX Cache, web dev, web hosting, web server.
Facebook Tweet LinkedIn

Published by AtulHost

Atul Kumar Pandey is a creative blogger who loves experiments with the latest tech trends like automation, artificial intelligence, data science, cloud and edge computing, hardware as well as networking, and the internet of things.

Users also read these

  • Nginx Performance Tuning
  • How to Enable HTTP/2 on NGINX?
  • How a Web Hosting Choice Can Affect SEO?
  • How to resolve the “Temporary failure in name resolution” issue?
  • How to Achieve the AWS Cloud Certification Easily?
  • Query Strings Remover: WordPress Plugin
  • 413 Request Entity Too Large
  • How to fix “Specify a Vary: Accept-Encoding Header” warning?
  • Install Latest Stable Version of NGINX in Ubuntu

Make a comment Cancel reply

Required fields are asterisked and your email address will not be shared.

Subscribe
10x your productivity
Increase your conversion rates
  • About Us
  • Affiliate Disclosure
  • Contact
  • Privacy Policy
  • Terms and Conditions
  • Write for Us
This website and its content are copyrighted © 2014-2021 by atulhost.com and individual contributors.