How to enable Browser Caching for NGINX on Ubuntu

How to enable Browser Caching for NGINX on Ubuntu

In this article, we will learn How to enable Browser Caching for NGINX on Ubuntu?

Why we need Browser Caching?

Every time when someone visits your website browser request all the files, to render the HTML page. Let’s assume the visitor requested for index.html. If the visitors again request for the index.html, then if the browser cache is not enabled, the browser will request index.html again. In case of browser caching is enabled, then the browser will re-use the files which are already downloaded on the previous request. In the case of the browser caching website pages will load faster. The faster the website page load, the more visitors like to stay on your website.

How to enable Browser Caching?

Before enabling the Browser Cache, let check the current server status. To test we have the following test file index.html, lemon.jpg, Test1.css, and Test1.js. Let’s execute the following command in the SSH terminal.

Code

curl -I http://35.224.172.216/index.html

Following is the output for the index.html file

  • HTTP/1.1 200 OK
  • Server: nginx/1.14.0 (Ubuntu)
  • Date: Tue, 25 Sep 2018 11:28:10 GMT
  • Content-Type: text/html
  • Content-Length: 4138531
  • Last-Modified: Tue, 25 Sep 2018 05:44:57 GMT
  • Connection: keep-alive
  • Vary: Accept-Encoding
  • ETag: “5ba9cb59-3f2623”
  • Accept-Ranges: bytes

In the output check the second last line start with “ETag”. ETag is the unique identifier for the current version of the respected file. If we execute the same command, again and again, we will receive the same ETag. Assuming no changes in the file version. 
If we use the browser to access the same file at the first-time browser save the ETag: “5ba9cb59-3f2623”. On page refresh browser will request the same file with stored ETag value. If the ETag value is not changed, then NGINX server responds back with 304 Not Modified status. This time Server didn’t send the file. 304 Not Modified status tells the browser to use the previously downloaded file. You can check the same in Chrome Developer tools or any other browser developer tools.

 

It is useful to reduce bandwidth and load the web page faster. But it is not enough. The problem is browser always need to send the ETag information to ensure it is using the latest version of the file. Next, we will add the cache information in the header so the browser doesn’t need to send the ETag information.

NGINX Configure Cache-Control and Expires Headers

For the cache control, we need to edit the site-specific configuration file. On our server, we only have one default website. So we will use the following command to edit the site configuration. If you need to enable it for the specific domain, then you need to use the domain specific configuration file.

Code

sudo nano /etc/nginx/sites-available/default

Highlighted is the changes in the changes in the default config file.

Let’s understand configuration lines
The first line is to set the default value off. It will not add any caching control to the header.

  • Next is for text/html. We set its value to epoch. It is a special value which results explicitly no caching. It forces the browser to always ask if the website itself is up to date.
  • The next two lines are for CSS and JavaScript. We set its value to the max.
  • Finally, ~image/ is a regular expression of all the image types. Again, we set its value to the max.

Save and close the nano editor. To save the nano editor, press Ctrl + O and to close the nano editor press Ctrl+X.
To apply the configuration settings, use the following command.

Code

sudo nginx -t 
sudo service nginx restart

Test Configuration

To test the configuration, execute the following command

curl -I http://35.224.172.216/index.html
curl -I http://35.224.172.216/lemon.jpg

Check the expiry date in the output. Following image shows the output of the above command. The expiry date of the html file is the past date. It means NGINX will always serve the latest html file. Similarly, the expiry date for the image is 31 Dec 2037. It means for the next request browser will use the same download image file if available locally.

Finally, following the image display How browser behaves differently after enabling the browser caching.


We are done with the Browser Caching Configuration. We may think you also like the following articles to improve your website performance.

0 Comments
Leave A Comment

Please login to post your valuable comments.

Join the newsletter

Get the latest vLemonn news first

share