How to Enable Leverage Browser Caching in NGINX

Last updated on August 6th, 2024 at 04:28 am

Browser caching improves website speed and performance by storing static content on client browser for future access. This is a great way to render CSS, JS, Image files from client browser without sending request to the web server. Almost every web server allows you to instruct client browsers to cache certain files and data. But this setting is turned off by default. Are you wondering how to cache static content in NGINX? Here are the steps to enable leverage browser caching in NGINX.

What is Browser Caching

Every web browser has a small database that it uses to store frequently requested files and data. For example, it generally caches static files such as CSS, JS, HTML, etc. as well as images, videos and more. It allows web browsers to load certain files without requesting them to remote web server. This improves website speed and performance. However, it is generally done by web browser’s internal algorithms that determine what content needs to be cached. Using web server such as NGINX server, you can control which content needs to be cached. It is done by setting certain response headers which tell the web browser to store the response’s files and data for later use. This is very useful in improving website speed and reducing server bandwidth.

Enable Leverage Browser Caching in NGINX

Here’s how to enable leverage browser cachinghttps://pressidium.com/blog/browser-cache-work/ in NGINX.

1. Open NGINX Server configuration

Open terminal and run the following command to open NGINX server configuration file.

$ sudo vi /etc/nginx/nginx.conf

If you have configured separate virtual hosts for your website (e.g www.example.com), such as /etc/nginx/sites-enabled/website.conf then open its configuration with the following command

$ sudo vi /etc/nginx/sites-enabled/website.conf

Bonus Read : How to Remove Trailing Slash in NGINX

2. Enable Leverage Browser Caching

Add the following 3 lines in your NGINX server configuration file to cache static content in NGINX

expires 30d;
add_header Pragma "public";
add_header Cache-Control "public";

The first line instructs NGINX to cache content in client browser for 30 days (30d). You can change this cache duration as per your requirement. After this period, any new request from user will result in cache re-validation and update from the client browser.

The next couple of lines are used to set cache related headers.

Cache Specific Location

You can place the above lines in location, server or http blocks.

location /static/ {
 expires 30d;
 add_header Pragma "public";
 add_header Cache-Control "public";
}

When you place them in location block, only the content served by that location will be cached. In the above case, only requests to /static/ will be cached.

Cache Specific File Types

If you want to cache specific file types, you can do so using location block.

location ~* \.(js|jpg|jpeg|gif|png|css|tgz|gz|rar|bz2|doc|pdf|ppt|tar|wav|bmp|rtf|swf|ico|flv|txt|woff|woff2|svg)$ {
 expires 30d;
 add_header Pragma "public";
 add_header Cache-Control "public";
}

In the above example, we are caching various file types such as js, jpg, css, etc.

Bonus Read : How to Enable NGINX Status Page

Cache Entire Server

Similarly, you can place cache configuration in server block before any location block. In this case, all responses from this server will be cached.

server {
 ...
 expires 30d;
 add_header Pragma "public";
 add_header Cache-Control "public";
 ...
}

Cache All Servers in HTTP Block

You can may also place the cache configuration in http block, before any server block.

http {
 ...
 expires 30d;
 add_header Pragma "public";
 add_header Cache-Control "public";
 ...
}

In this case, all server requests supported by the configuration file will be cached.

Typically, websites cache content from a specific folder, or having specific file extensions, using location block.

Bonus Read : How to Install & Configure Modsecurity in NGINX

3. Restart NGINX Server

Run the following command to check syntax of your updated config file.

$ sudo nginx -t

If there are no errors, run the following command to restart NGINX server.

$ sudo service nginx reload #debian/ubuntu
$ systemctl restart nginx #redhat/centos

Conclusion

Hopefully, this article will help you enable leverage browser caching in NGINX. In this article, we have learnt how to enable browser caching in NGINX server. Every web server this setting that can be turned on by site administrators. Web browser caching is a great way to load pages quickly and reduce server load. When a user requests a web page, its cached contents are directly loaded from web browser without sending the request to server. Only, its non-cached files and data are loaded from web server.