Leverage browser caching

One of the most easy ways to make your Joomla website faster is to leverage Joomla browser caching. This is one of the high priority tasks recommended by Google to make your website load faster.

Essentially, what you are doing is reusing any files which exist on the users machine, without having to download them again. By extending the caching lifetime, you are making sure that your visitors do not spend time downloading the same files everytime they visit your website.

Change .htaccess to increase Joomla browser cache

To set the expiry time of files such as images and CSS files, this requires a slight modification to your .htaccess file, which is found in the WEBROOT of your site. This is done by changing the expire headers.

As a bare minimum you add the following in your .htaccess file. To do this, simply access your hosting CPanel, and with your File Editor, (or via FTP using your favourite client) find the .htaccess file and add the following to the bottom of the file. Do not make any other changes.

<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>

So, what we really did here?

The trick relies in the fact that you can instruct most modern browsers how long to keep in their cache various page assets after the last visit date. Each browser has a default setting for this - some provide a way to update this via options for the user, but based on the existing standards, they are listening - and respect - these settings.

So, we are using this feature, and we are setting the caching times to obtin maximum of download time savings vs. minimum of potential problems created. We are setting files which refresh quickly such as the HTML of your site to expire after 600 seconds, whilst we are changing such things as the CSS and Javascript to only expire one a month. This means, that if your visitor visits the site again within a month, they don't need to redownload your CSS and JS files again. If you know that you rarely perform these types of changes on your site - you can see the value higher, to 1 year, similar to the jpeg, png expires header.

Set Image files change to a long browser caching expiry

As you can also see in our example above, our image files are set to expire only once a year. This makes sure that the files which take most time to download are kept on the visitors machine, and won't have to be downloaded again next year. Due to this change in your Joomla browser caching - the images are not downloaded again for one whole year. This makes the experience of a returning customer much more positive. the trick shows it's strenght for returning users, with the condition to not flush their local browser cache too often. Luckily, this is the case of average users. Also this setting has effect on some other caching devices between your server and client's browser, so chances to have real speed boost are high.

Anyway, Google's Page Speed Tool, his ranking algorythm and most website speed testers are taking this settings in account when measure your site's speed and rank it - wich is already great from SEO perspective. This thing alone worth fully that simple copy&paste operation.