Browser Caching in NGINX

In the fast-paced world of the internet where every millisecond counts, no one wants to wait while the website loads. A visitor is more likely to stick around if a page loads quickly. A web page is made up of many different files like html, css, js, jpg, svg, gif, json, xml, etc.

By default, When the user reloads the page it requests all files again from the server. The crucial step to load the page faster is to reduce the number of steps and save static files to the browser cache. Today we will learn how nginx can be configured to leverage web browser cache.

Step1: Create and edit Nginx configuration file

Open the default nginx configuration file (/etc/nginx/nginx.conf) or existing virtual host configuration (/etc/nginx/sites-enabled/domain.com.conf) in the vim or nano editor with these commands.

$ sudo vim /etc/nginx/sites-enabled/domain.com.conf

Step2: Configure web browser caching

Add these lines to the server block in the config file. To enable NGINX to cache static material.

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

The first line tells NGINX to keep client browser content in cache for 30 days (30d). This cache time can be adjusted to meet your needs. Any new request made by the user after this point will cause the client browser to revalidate and update its cache.

The following few lines are used to set headers relating to the cache.

The lines mentioned above can be inserted into location, server, or http blocks.

Cache configuration can also be added before any location blocks in the server block. In this scenario, this server's entire output will be cached.

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

The cache setting can also be added before any server blocks in the http block.

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

To enable for specific directory.

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

Utilizing location blocks, you can cache particular file types.

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";
}

Finally, You can save the file and exit the editor.

Step3: Verify our configuration, then launch Nginx.

It is a recommended practice to test new configurations before loading them to the production server because a single syntax mistake will prevent the Nginx service from running, which will prevent users from accessing your website. You can use the following command to do so.

$ sudo nginx -t -c /etc/nginx/sites-available/domain.com.conf

Enable the site if no issues were discovered. In order to accomplish this, we must build a symbolic link between the site configuration file and the sites-enabled directory using the following command:

$ sudo ln -s /etc/nginx/sites-available/domain.com.conf /etc/nginx/sites-enabled/domain.com.conf

Finally, Start/Restart/Reload the server to load the changes:

$ sudo systemctl restart nginx

or

$ sudo service nginx restart