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. Are you wondering how to cache static content in NGINX? Here are the steps to enable leverage browser caching in NGINX.
Enable Leverage Browser Caching in NGINX
Here’s how to enable leverage browser caching 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.
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.
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
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";
...
}
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
Hopefully, this article will help you enable leverage browser caching in NGINX.
