How to Optimise a Joomla Website

Joomla is an excellent piece of kit, and has opened the doors for millions of websites to be easily built and managed, but to get a speedy, lean and optimised site there are a few tweaks you need to make.

Safety First

As always, take a full backup of your site before you start.

Also, if possible, run these tests on a development/testing area first before moving the changes to a live/production website.

Please note: some of these changes may cause errors.  Clear your Joomla cache and check the front end of your website after making your changes, so that you know at which point any errors occur, and can undo your change if needed.

Troubleshooting and Top Tips

Don’t forget to clear your Joomla Cache before running each of your tests to make sure you’re seeing your latest changes:

To do this go to Site -> Maintenance -> Clear Cache and delete all the cache for the site (front-end).  You can also Purge Expired Cache if desired.

If you need any modules to not be cached (perhaps a comments module, or a random image module), you can easily exclude them from caching by logging into the Joomla administrator -> Extensions -> Module Manager -> Find your module -> Open it -> In the Advanced Options section on the right-hand side, set the Caching option to No Caching.

Establish a Baseline

Before we get started we need to check out the current health of our site.

Head over to Google PageSpeed, pop your website in the box and hit Analyse.

This will analyse your website and give you a list of actionable items.  If they look a bit overwheming to you, don’t worry.  We’re going to fix most of the problems in this article.

Record the following numbers somewhere (we’ll come back to these later):

1. Mobile Speed: XX/100
2. Mobile User Experience: XX/100
3. Desktop: XX/100

Hosting

First and foremost, your hosting provider can make a huge difference to the speed of your website.

For performance-optimised, SEO-friendly hosting (even on the Shared Hosting plans), we recommend:

• Rochen
• SiteGround

Template

The website template that you chose can make a big difference to your page speed.  We personally love YooTheme for their wide range of good looking templates, which are also SEO-friendly, responsive design (any YooTheme template from Nano2 (2012) onwards) and not too heavy.

Check out your templates features (if it has any) and switch off any you don’t need or use.

Fonts

Each font you load is an additional thing your website has to deliver.  Stick to a minimal number of fonts.  Bear in mind that the same font in regular, bold, italic and bold-italic means that your website is loading 4 different versions of the same font.  Do you really need bold italic font?  If not, don’t use it.

System Cache

To configure this:

• Log into your Joomla Administrator.
• Go to Site -> Global Configuration -> System tab -> Cache Settings area and set Cache to ON – Conservative Caching.

The ON – Progressive Caching option creates a cache for each one of your visitors, so isn’t recommended unless you know that you need this kind of caching.

One moment though – you’re not done yet.

The next step is to switch the caching on:

• In the Joomla Administrator go to Extensions -> Plug-in Manager
• In the Filter box type cache and push the Search button.
• You should see a plug-in called System – Cache.  Click on the title to open it.
• Set this plug-in to enabled and set Use Browser Caching to Yes.

Now go to Site -> Maintenance -> Clear Cache and delete all the cache for the site area.  You can also Purge Expired Cache if desired.

If you just checked Google PageSpeed and are wondering why the results aren’t as good as you were expecting (and possibly have even become worse), don’t fret.  We’re not done yet.

You may see Google PageSpeed still complaining about the fact you need to “Leverage browser caching”.  But didn’t we just do that?

Well, yes and no.

First complete the Compression section below:

Compression

This is a nice quick fix, however be warned that this might cause errors if Gzip is not installed or configured correctly on your server.  If you get errors, switch Gzip off (set Gzip Page Compression to No, following the instructions below) and contact your hosting company to see if they can resolve the issue.  If they can’t resolve the issue, you may want to consider our hosting provider recommendations at the start of this article.

To enable Gzip compression on your Joomla website:

• In the Joomla Administrator go to Site -> Global Configuration -> Server tab -> Server Settings area and set Gzip Page Compression to Yes.

That’s it!

You can check that Gzip is doing it’s job by either running Google PageSpeed again or using http://checkgzipcompression.com to quickly check that all’s working happily.

Ok, so back to caching.  The final part to the caching puzzle is the crowning gem (a huge thanks to SiteGround for their wonderful article which provided the below cherry-on-top code to encapsulate any browser cache stragglers).

Add the below Option 1 code at the end of your .htaccess file and save.  If the below code causes a Server 500 Error, remove from your .htaccess file and try the below Option 2 code instead:

Option 1

########## Begin – ETag Optimization
## This rule will create an ETag for files based only on the modification
## timestamp and their size.
## Note: It may cause problems on your server and you may need to remove it
FileETag MTime Size
# AddOutputFilterByType is now deprecated by Apache. Use mod_filter in the future.
AddOutputFilterByType DEFLATE text/plain text/html text/xml text/css application/xml application/xhtml+xml application/rss+xml application/javascript application/x-javascript
# Enable expiration control
ExpiresActive On
# Default expiration: 1 hour after request
ExpiresDefault “now plus 1 hour”
# CSS and JS expiration: 1 week after request
ExpiresByType text/css “now plus 1 week”
ExpiresByType application/javascript “now plus 1 week”
ExpiresByType application/x-javascript “now plus 1 week”

# Image files expiration: 1 month after request
ExpiresByType image/bmp “now plus 1 month”
ExpiresByType image/gif “now plus 1 month”
ExpiresByType image/jpeg “now plus 1 month”
ExpiresByType image/jp2 “now plus 1 month”
ExpiresByType image/pipeg “now plus 1 month”
ExpiresByType image/png “now plus 1 month”
ExpiresByType image/svg+xml “now plus 1 month”
ExpiresByType image/tiff “now plus 1 month”
ExpiresByType image/vnd.microsoft.icon “now plus 1 month”
ExpiresByType image/x-icon “now plus 1 month”
ExpiresByType image/ico “now plus 1 month”
ExpiresByType image/icon “now plus 1 month”
ExpiresByType text/ico “now plus 1 month”
ExpiresByType application/ico “now plus 1 month”
ExpiresByType image/vnd.wap.wbmp “now plus 1 month”
ExpiresByType application/vnd.wap.wbxml “now plus 1 month”

ExpiresByType application/smil “now plus 1 month”
# Audio files expiration: 1 month after request
ExpiresByType audio/basic “now plus 1 month”
ExpiresByType audio/mid “now plus 1 month”
ExpiresByType audio/midi “now plus 1 month”
ExpiresByType audio/mpeg “now plus 1 month”
ExpiresByType audio/x-aiff “now plus 1 month”
ExpiresByType audio/x-mpegurl “now plus 1 month”
ExpiresByType audio/x-pn-realaudio “now plus 1 month”
ExpiresByType audio/x-wav “now plus 1 month”

# Movie files expiration: 1 month after request
ExpiresByType application/x-shockwave-flash “now plus 1 month”
ExpiresByType x-world/x-vrml “now plus 1 month”
ExpiresByType video/x-msvideo “now plus 1 month”
ExpiresByType video/mpeg “now plus 1 month”
ExpiresByType video/mp4 “now plus 1 month”
ExpiresByType video/quicktime “now plus 1 month”
ExpiresByType video/x-la-asf “now plus 1 month”
ExpiresByType video/x-ms-asf “now plus 1 month”

Option 2

ExpiresActive On
ExpiresByType text/html “access plus 1 seconds”
ExpiresByType image/gif “access plus 1 month”
ExpiresByType image/jpeg “access plus 1 month”
ExpiresByType image/png “access plus 1 month”
ExpiresByType text/css “access plus 1 month”
ExpiresByType text/javascript “access plus 1 month”
ExpiresByType application/x-javascript “access plus 1 month”
ExpiresByType image/ico “access plus 1 month”

Images

Image size can make or break your website’s SEO.  Whilst we have cameras and phones that can take amazingly high resolution photos, the web is not the place for high res.  It’s heavy and results in a poor user experience (and if you’re on a mobile, then you’re going to be waiting a long, long time for that image to load).

If you’re a photographer or artist, then forget everything you know about “bigger is better”.  The web is the complete opposite.  Light, lean and fast rule this realm.

Ok, so quantifying size:

1. No image should really be bigger than 1000px wide.
2. The image resolution should be 72dpi.
3. Ideally you should never have an image larger than 100KB.  Most normal sized images (800px by 600px) should be around half that.
4. Use lightweight vector images if you can (they scale better and SVG images can be incredibly light).

If you have Photoshop, then please use the guide here.
If you don’t have Photoshop and are happy to use a free alternative, please use this guide.

If you’ve already got your images in the right size, you can optimise images in bulk here: http://www.smushit.com/ysmush.it/

Light and Lean

Remove any extensions that you have installed and don’t use.  The lighter your website, the quicker it will run.

Clear down any unused modules – unpublish and delete where appropriate.  Each additional module is a weight to your website.

Turn off any Joomla Stats if enabled – they bombard your website’s database and weigh down your Joomla install.  Google Analytics does a great job on it’s own – use it.

Joomla Extensions to Help Make Your Life Easier

Tired of having to keep traipsing over to the Global Configuration Page to clear your cache?  Cache Cleaner is a neat little extension that adds a quick and accessible button to your admin area so that you can easily clean your cache with a single click.  If you’re installing this for a client (or if you just want an easier life), then spring for the Pro version (€10 at time of writing) which includes “Clean cache on save” to save you additional time if you update your website often.

JotCache – enhanced and tailored caching.  Especially good for large websites.

JCH Optimize – good optimisation tool.

jbetolo – similar to JCH Optimize, but with additional CDN support.

See How You’ve Done

Now here’s the fun part!

Once you’ve done all of the above, head back over to Google PageSpeed, pop your website in the box and hit Analyse.

Check the following numbers and compare them to the numbers you had at the beginning of this article.

1. Mobile Speed: XX/100
2. Mobile User Experience: XX/100
3. Desktop: XX/100

How awesome do you feel right now?

I’m guessing pretty awesome.

I’d love to know your before/after PageSpeed scores.  Make me smile today by posting them in the comments below.

Over and out powerful people.