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
Facebook Tweet LinkedIn

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.

Content is tagged with nginx, NGINX Cache, web dev, web hosting, web server.
Facebook Tweet LinkedIn

You’ll also like:

  • 413 request entity too large
  • Reasons to Use CDN on Your Website
  • What is shared hosting?
  • Query Strings Remover: WordPress Plugin
  • How to remove website (URL) field from WordPress comments?
  • How to check Nginx version?
  • How to fix 403 forbidden in Nginx?
  • Apache vs. Nginx: Selection of a Perfect Web Server
  • How to Configure FastCGI Cache with Nginx?
  • NetworkError: Failed to execute ‘send’ on ‘XMLHttpRequest’

Published by AtulHost

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

Make a comment Cancel reply

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

Subscribe

Recent Posts

  • Transitioning your startup out of the beginning stages
  • HR trends for 2021
  • How to pick the right financing company for your customers
  • How to reduce initial server response time?
  • What every ecommerce business needs to know when it comes to product images
  • What is shared hosting?
Taking care of communication within your small business
Best laptop brands
Cool business ideas

We serve cookies on this site to offer the excellent user service.

  • About
  • Contact
  • Privacy Policy
  • Terms and Conditions
  • Write for Us
This website and its content are copyrighted © 2014-2021 by atulhost.com and individual contributors.