How to Leverage Browser Caching for Resources in Apache Server

In this tutorial, you will learn how to leverage browser caching and add expiry headers for cacheable resources like images, CSS, JavaScript files, etc.

Browser caching is very important to improve your website loading speed when visitors repeatedly visit your website.

With cached resources, the user will download less data while navigating through your website pages. As a result, this will improve the user experience with faster loading time.

Here, we will implement browser caching for websites running on the Apache server. For this, we will add the expiry headers that will instruct the browser about which resources to cache and for how much time. And, this can be done in two ways:

Using Apache’s Virtual Host File to Implement Browser Caching

First, we will open the virtual host file in the nano editor using the following command:

> sudo nano /etc/apache2/sites-available/example.com-ssl.conf

If you are not using SSL, then you can run the following command instead:

> sudo nano /etc/apache2/sites-available/example.com.conf

To add expiry headers using Apache’s virtual host file, we will add the “<ifModule mod_expires.c>” module with expiry rules before the closing “</VirtualHost>” tag.

So, this will look like this:

<VirtualHost *:443> 
        ...
        ...
        ...
	<ifModule mod_expires.c>
		ExpiresActive On
		ExpiresByType image/gif "access plus 1 months"
		ExpiresByType image/jpg "access plus 1 months"
		ExpiresByType image/jpeg "access plus 1 months"
		ExpiresByType image/png "access plus 1 months"
		ExpiresByType image/svg+xml "access plus 1 months"
		ExpiresByType image/vnd.microsoft.icon "access plus 1 months"
		ExpiresByType image/x-icon "access plus 1 months"
		ExpiresByType image/ico "access plus 1 months"
		ExpiresByType application/javascript "now plus 1 months"
		ExpiresByType application/x-javascript "now plus 1 months"
		ExpiresByType text/javascript "now plus 1 months"
		ExpiresByType text/css "now plus 1 months"
		ExpiresDefault "access plus 1 days"
	</ifModule>
</VirtualHost>

After adding the expiry headers, save the file (Ctrl + X and Y to save in nano editor).

Now, depending on your website’s files, you can set different expiry times. For example, if certain types of files update more frequently, then you would set an earlier expiry time on them (like CSS files).

Also, you can comment out the line using “#” at the start in case you don’t want to add caching for some resources like this:

#ExpiresDefault "access plus 1 days"

After saving the file, enable the Apache module “expires” by running the command:

> sudo a2enmod expires

Lastly, restart the Apache server:

> sudo systemctl restart apache2

Or, you can run the following command to restart the Apache server:

> sudo service apache2 restart

Using the “.htaccess” file

Similarly, you can add those expiry rules in the “.htaccess” file like this:

## EXPIRES CACHING ##
<ifModule mod_expires.c>
	ExpiresActive On
	ExpiresByType image/gif "access plus 1 months"
	ExpiresByType image/jpg "access plus 1 months"
	ExpiresByType image/jpeg "access plus 1 months"
	ExpiresByType image/png "access plus 1 months"
	ExpiresByType image/svg+xml "access plus 1 months"
	ExpiresByType image/vnd.microsoft.icon "access plus 1 months"
	ExpiresByType image/x-icon "access plus 1 months"
	ExpiresByType image/ico "access plus 1 months"
	ExpiresByType application/javascript "now plus 1 months"
	ExpiresByType application/x-javascript "now plus 1 months"
	ExpiresByType text/javascript "now plus 1 months"
	ExpiresByType text/css "now plus 1 months"
	ExpiresDefault "access plus 1 days"
</ifModule>
## EXPIRES CACHING ##

Finally, you can check if the expiry headers work as expected by simply running site performance tests on websites like “GTmetrix”, “PageSpeed Insights”, etc.