Joomla performance tuning: the Mootools / CSS slimfast plan (updated)
I was browsing the web and reading some articles last night from my Nokia E71. It's got a pretty reasonable web browser but one of the things that''s really noticeable when you're on a slightly slower link and your browser has a data counter is just how bloated have websites become!?!
I was quick to mock those websites until I looked at our own slim and beautiful GoldFigure site with its fairly minimal new template and it was a bit beefy itself. Call to action - let's get this site on a diet!
This problem first jumped out at me when I was reading a great article on laptop battery life by David Pogue in the New York Times. The article is split into two pages and each one is >640k in size. Leave a bit of room for caching scripts / stylesheets and I still have to download about 1meg of data just to read that one article. On my 3G contract i could only browse about 1,000 articles in a month!
Our own website has recently undergone a facelift and is looking rather more svelte than it did last week. Even so it was still a bit podgy, weighing in at 278k for our front page. That had to be fixed! A quick Google search on the subject turned up two interesting articles: So you want to speed up Joomla? from JoomlaPerformance and Mootools Optimizaion in Joomla 1.5 from Synaptec LLC. There were a number of areas the first article suggested looking at (this list is abridged):
- Template optimisation
- GZip (sometimes)
- Joomla Stats
- Mambots (plugins)
- SEF URL generation
- Caching
- Application bridges
Basic Joomla optimisations
We were fairly well prepared with our template, it's not too image heavy (could be better but it wouldn't look as sweet), and we're careful on the extensions we install on any Joomla site we build.
Until recently we were hosting GoldFigure with Streamline (but moved!) because amongst many other things their servers had random go-slow hours and GZip compression wasn't supported properly. Now that we are hosted on our own dedicated server I enabled GZip in the Joomla administrator and it works perfectly, instantly kicking 20% (or 50k) off the total page size. GZip compression is probably a good thing but required a fast CPU that's not already working too hard to cope with the extra load. Ours is fast enough to cope so thumbs up!
We don't use a Joomla Stats package, instead relying on StatCounter for visitor statistics. StatCounter is pretty lean so nothing doing there.
Whilst SEF URL's put an extra load on the server the sh404SEF component we use is excellent and the benefits of SEF URL's far outweigh the small performance gains we might get without them.
Caching... there's a sore point. It seems that caching in Joomla can cause issues, even in core component as we wrote about in Stop Joomla polls giving 'invalid token' when voting. Normally I am a big fan of caching and use it extensively when we write .NET applications. Maybe it's worth looking into this after the Streamline move but I'm not yet convinced.
We don't use application bridges, although I am considering the merits of a Wordpress bridge now that the blog is getting a bit busier. We're holding off on anything too rash until we know how Joomla 1.6 will improve the situation.
Optimising Mootools.js
All in all 'So you want to speed up Joomla?' was well written and made some good points but we were pretty much there anyway which was quietly reassuring. On to the Mootools javascript framework then. I know it's big but it's there for a reason isn't it? Mootools Optimizaion in Joomla 1.5 suggests otherwi se and on that basis I went digging. On mootools.net you can download a customised mootools containing only the modules you need and it's compressed using the YUI algortihm. As it turns out I didn't need much more than the core and my Mootools size decresed from ~100k to less than 10k - more than a 90% size reduction!
Last step... compressing the CSS
Last stop on this adventure was to compress the CSS. GoldFigure uses an Artisteer generated template and the CSS is reasonably tidy but there is just quite a lot of it. I used CSS Drive's CSS compressor which strips out comments and white space and gave us around 30% saving on the CSS file sizes.
The results!

All in all this was an interesting exercise. GoldFigure was never a huge bloated website but even so it's not that long ago where I was hand building HTML sites where the page size, with images, would rarely exceed 100k. Our own home page was weighing in at around 280k this morning but with a little effort this is now a much more respectable 102 .9k... and boy does that make a difference. It's like the honeymoon month you get re-installing Windows on your PC - right up until we install some more extensions!
Update: so after slimming this down I found out that my Google Maps and akJoomGallery plugins stopped working properly. For now I have restored the original mootools.js and, based on this initial success, will go hunting to find out which bits of mootools are needed and remove the rest.
Last Updated (Wednesday, 23 September 2009 17:07)

