Leverage browser caching

Leverage browser caching is one of the easiest methods to gain a significant performance increase for any site, regardless of the CMS or system, so make sure you use it. Browser caching helps to speed up your website (Joomla or not) by using resources / files cached in your browser (this is different then the "Use Browser Caching" setting in the System - Cache plugin!). Basically what you do is: you specify an expiry limit in minutes / days / weeks for specific file-types, like images, CSS or Javascript. As long as the expiry has not passed, the resources will not be downloaded again, but the previously downloaded version will be used.

Joomla Hosting tip: Siteground

Joomlaseo.com loads in 0.5 - 1 second and has a Pingdom score of 100%!!! Reason enough to recommend Siteground hosting. Fast servers, great support, free SSL, etc. And it's not expensive at all...

 

Of course, the risk exists that resources that have been changed in the mean time will not be picked up, but for most sites this should not be a problem. You can specify the expiry per file-type, so for resources that you expect to change often you set a short limit, while for non-changing content you set it (much) longer. Typically HTML should expire very short in order to show updated content, while your javascript files may hardly change, except when you update it on purpose, or with major upgrades.

Set expire headers in .htaccess

In order to activate the feature, you have to optimize your .htaccess file. In the case of Joomla, you need to make sure you have renamed htaccess.txt to .htaccess, and switch on URL-Rewriting in your Global Configuration. In case you use another CMS (including Wordpress), you will usually find a .htaccess file in the main root of your website. In the .htaccess file, we will first set some more rules that I will first explain shortly:

  • ETag: Inform browser that image has already downloaded and should not be reloaded
  • Expires headers: like ETag but more specific per file types
  • AddOutputFilterByType DEFLATE: minifies HTML by removing blanks ()

The last rule actually does not control the caching of resources, but it takes care of compression for specified file types. Strictly speaking it does not belong in the Leverage browser caching chapter, but we might as well include it while we're updating the .htaccess file.

Now we are going to specify our rules (expire headers). There are a lot of ways you can specify your rules, depending on what file-types you use on your site, and how long the expiry should be. A simple example to start off with could be the following:

<IfModule mod_expires.c>
  FileETag MTime Size
  AddOutputFilterByType DEFLATE text/plain text/html text/xml text/css application/xml application/xhtml+xml application/rss+xml application/javascript application/x-javascript
  ExpiresActive On
  ExpiresDefault "access plus 1 seconds"
  ExpiresByType text/html "access plus 600 seconds"
  ExpiresByType application/xhtml+xml "access plus 600 seconds"
  ExpiresByType text/css "access plus 1 month"
  ExpiresByType text/javascript "access plus 1 month "
  ExpiresByType application/javascript "access plus 1 month"
  ExpiresByType application/x-javascript "access plus 1 month"
  ExpiresByType image/x-icon "access plus 1 year"
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType image/png "access plus 1 year"
  ExpiresByType image/gif "access plus 1 year"
</IfModule>

For every file-type you specify an expire header to specify how long you want to keep re-using it. In this simple example you see that Javascript and CSS is kept for 1 month and images for one year. It depends on your site whether these rules work for you. If you have frequently changing images, maybe you need a lifespan of 1 month instead of one year, etcetera.

You may need to further enhance the code and add expire headers for other file-types you use, like .mpeg, .woff, etc., or chance the expiry time if it does not suit your needs.

Note that your server needs to support the mod_expires feature in Apache. For safety, the code is wrapped in an if-statement. If your host does not support it, your site will crash. My own localhost environment on my PC does also not support it, so it helps me not having issues when I restore the site locally for testing purposes. With the if-statement in place, the code will simply not execute if no support is available.

For a more advanced example of a .htaccess file (including a lot of security rules), see the docs.joomla.org site.

Before you make any changes, first make a backup of your .htaccess file, and make sure to test thoroughly after activating the change. Check before and after to see if the change made a difference to the speed of your Joomla website.

Avoid browser caching in development

Note that when you are developing your site, you do not want resources to be cached, as the changes you make to CSS, Javascript and images do not reflect. Therefor, only apply the code when you publish the site to the live environment.

About this site

Joomlaseo.com is fully built and written by Simon Kloostra, SEO Specialist and Webdesigner from the Netherlands. I have also published a book and blogs for companies like OStraining, TemplateMonster, SEMrush and others.