Transferring data on the web costs time and money, thus it’s important to reduce those data.

Caching is a solution that allows the browser to store some static files. Those files are thus not downloaded from the server anymore.

If you use Qualitycs (or Lighthouse), you can see the error on this form:

Caching can be tricky as you’ll need a cache strategy: You want to cache only static files and have a solution to refresh those files when needed. That’s one of the reason we usually cache pictures, JS and CSS files.

Currently, there is no caching rule defined at all. We need to configure the server to explicitly tell the browser how long files can be stored.

This article describes how to enable an easy caching rule. We will simply cache files for 30 days. Meaning that the browser will store files for 30 days at max.

Nginx

By default, browser caching is not enabled in Nginx. You can enable it for specific file types, locations, server or the whole nginx.

The configuration block is the same:

1
2
3
expires 30d;  # Files will be stored 30 days
add_header Pragma "public";  # The files can be cached
add_header Cache-Control "public";  # The files can be cached

To enable caching for your whole server (discouraged), you can place those lines in your main config file (in your http block):

1
sudo nano /etc/nginx/nginx.conf

To enable cache for a specific virtual host, put those cache configuration in your server block or in a specific location block.

Enable for a specific folder

To enable caching only for files in the /static folder, you can use:

1
2
3
4
5
location /static/ {
 expires 30d;
 add_header Pragma "public";
 add_header Cache-Control "public";
}

Enable for specific file types

That’s my preferred method, as it’s more selective. For example, I use this block by default:

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

Now that you have the configurations in place, you can save it and restart nginx:

1
2
sudo nginx -t # Verifies that the configuration files are valid
sudo service nginx restart # Realy restart the server

Apache 2

To enable browser caching on Apache, you need the module expires:

1
sudo a2enmode expires # Normally already installed

You can then configure cache expiration in .htaccess files.

Add this configuration in your .htaccess to define a default duration of 1 month:

1
2
ExpiresActive on
ExpiresDefault  "access plus 1 month"

You can also define a specific duration per file type. For example, to set file duration for jpeg files, use:

1
ExpiresByType images/jpeg "modification plus 90 days"

I personally use the following rules:

1
2
3
4
5
6
7
8
9
10
11
12
13
<IfModule mod_expires.c>
  ExpiresActive on
  ExpiresDefault "access plus 1 week" # Default rule
 
  # Disable cache for html, json & cache-manifest files
  ExpiresByType text/cache-manifest "access plus 0 seconds"
  ExpiresByType text/html "access plus 0 seconds"
  ExpiresByType application/json "access plus 0 seconds"
  # Set Cache control header (allows browser to cache files)
  <IfModule mod_headers.c>
    Header append Cache-Control "public"
  </IfModule>
</IfModule>

Result

Now that cache is allowed to the browser, you should see an improvement of your Qualitycs score. For example, I gained 2 points with only that configuration change. The gain will depend on the amount of images and static files that you include on your pages.

Want to track your website’s performance over time and optimize it efficiently? Qualitycs is a SaaS tool that runs Lighthouse regularly. You can register on https://qualitycs.dev