Digital Marketing
Now Reading
Leverage Browser Caching using Apache on Ubuntu
0

Leverage Browser Caching using Apache on Ubuntu

by Adrian RandallOctober 29, 2016

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 parts of websites for a period of time in order to make them load faster. 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 so they do not 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 our 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!

About The Author
Adrian Randall
I'm a digital marketing specialist, love working on digital business and coding on just about anything. I'm the founder of Arcadian Digital and this site shares some of our knowledge and practices.

Leave a Response