Leverage Browser Caching Using Apache on Ubuntu

We are all trying to increase our sites speed and give our users a better experience and one often overlooked method is to leverage browser caching.

For anyone who doesn’t know exactly what we are trying to do here, I’ll try and explain. Browser caching stores elements of internet sites for an amount of your time so as to form them load quicker. For instance, if you look at 10 pages on a website and it has the same background image, logo, social media icons and so on, we can store these in the browser in order that they don’t keep being downloaded.

You can do this on any operating system and with any web server software but one of the most common setups these days is LAMP (Linux Apache MySQL PHP).

There are two ways to do this, one is using the Apache Hosts file and the other is using the .htaccess file

The .htaccess Way

1. Open up the .htaccess file which is normally in the root directory of a site.

2. Add the following lines to the end:

<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/javascript "access plus 1 year"
</IfModule>

3.Check it works using Browser Caching Validator

If you do not see any files listed on your domain then you are good to go!

The Apache Host File Way

1. Firstly, with the method we will go through today you will need server access (such as SSH or access to the Apache config files). In a standard LAMP stack setup using Ubuntu this is in:

/etc/apache2/sites-available/000-default.conf

2. Open this file using your favourite text editor

sudo nano /etc/apache2/sites-enabled/000-default.conf

3. Add the following lines of code just inside the closing virtual host tag (</VirtualHost>)

ExpiresActive On
ExpiresByType application/x-font-woff "access plus 1 months"
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/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"

4. Restart Apache

sudo service apapche2 restart

If you get the following error you’d just need to enable the ExpiresActive module (this can also be seen generally if you get a 500 error when trying to load the webpage:

Invalid command ‘ExpiresActive’, perhaps misspelled or defined by a module not included in the server configuration Action ‘configtest’ failed.

To enable to module run:

sudo ln -s /etc/apache2/mods-available/expires.load /etc/apache2/mods-enabled/

5. Again restart Apache

sudo service apache2 restart

Now run your site through Google Page Insights and reap the fruits of you labor!