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!). Configuration is fully done in the .htaccess system file, outside the Joomla configuration. Basically what you do is the following: 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.
Of course, there is a small risk 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. Only if you are devloping a site and change your CSS files often you should not use it yet. 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 does not actually 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.
Then, 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 mod_expires, your site will crash. My own localhost environment on my PC also does 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.
