Configure Cache-Control Headers in Nginx

Cache-control headers are used to define how the resources will be cached. These headers define how and for how long the resources will be saved on the browser so that the browser doesn’t have to fetch the same again and again.

Static resources like images, CSS, and Javascript are usually cached using these control headers so that when you visit the same website again, the browser will present the resources from the local cache itself instead of requesting them again from the server.

Prerequisites

We need a working LEMP stack along with a root or sudo user. Here is a guide to installing LEMP on your server.

What is Browser Caching?

Let’s understand Browser Caching with an example, when you visit a website the browser renders the website by downloading required resources to the browser’s local storage. So, the next time when you visit the same website, the browser will only request dynamic resources like HTML, and render the rest (Images, Javascript, CSS) from local storage. These resources are saved for a specific period which is called TTL (Time To Live). If you visit the same website again, you will browser will download a fresh copy of the resources again.

What are HTTP headers?

The core part of HTTP requests is called HTTP headers. These headers contain the required information of the requests or the responses. Each piece of information is saved inside these headers.

Usually, there are two types of headers

1. Request headers
2. Response headers

Request headers contain information like what resources need to be requested. For example, the client browser’s information, the data formats, etc.

Response headers are the ones that contain information like whether the request was completed successfully, whether the format was correct, and other body responses.

Methods to Configure Cache-Control Headers in Nginx

There are three methods to configure cache-control headers that are given below.

Cache-Control headers for all files (Not-Recommended)

open nginx.conf

    $ sudo nano /etc/nginx/nginx.conf

Copy and paste the below code under http { section

            expires 365d;
            add_header Cache-Control "public, no-transform";

Press Ctrl+x, “y” and hit “Enter” to save

Cache-Control headers for specific file types

Open your nginx vhost file

        $ sudo nano /etc/nginx/conf.d/your_domain.conf

Copy and paste the below code and make it look like this

        location ~* \.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$ {
            expires 30d;
            add_header Cache-Control "public, no-transform";
            }

Press Ctrl+x, “y” and hit “Enter” to save

The above setup will enable browser cache for the mentioned file types in the location ~* block for 30 days.

Cache-Control headers for specific file types (Recommended)

Open your nginx vhost file

$ sudo nano /etc/nginx/conf.d/your_domain.conf

Copy and paste the below code and make it look like this

        location ~* \.(js|css|jpg|jpeg|png|gif|js|ico|swf)$ {
            expires 1y;
            etag off;
            if_modified_since off;
            add_header Cache-Control "public, no-transform";
        }

        location ~* \.(html)$ {
            etag on;
            add_header Cache-Control "no-cache";
        }

Press Ctrl+x, “y” and hit “Enter” to save

The above “Recommended” method will browser cache the static files like js, css, swf and static resources but it won’t cache the HTML, as HTML contains dynamic resources.

I would recommend you to go with the “Recommended” method.