Mootools Optimizaion in Joomla 1.5 |
|
| Written by Rick Winkler | |
| Monday, 10 March 2008 | |
 As you may be able to tell from earlier articles, I have been testing a production Joomla 1.5 installation. One of few complaints I have with Joomla 1.5 is the inclusion of Mootools by default. Not that this is a real complaint per se, but more a pet peeve. Why you ask? Well, the Mootools file that comes with Joomla 1.5 is whopping 74k in size. This really slows down initial page load times especially for users who have slower connections, and you never get a second chance to make a first impression.
After tweaking my images and my template as far as I was willing to go, I decided it was time to tackle the biggest file on my page: mootools.js. The Joomla Forum is a pretty good resource, but I have found that the knowledge base for 1.5 just isn’t that developed yet. Sometimes you are on your own. After searching and posting, I still didn’t have any answers on how I could optimize this file. I did however read a post that mentioned removing the unneeded components from Mootools to reduce the file size. So I headed over to the Mootools Website. Luckily the Download Section is designed to allow you to download a version of Mootools with only the components you need. The hard part was figuring out which components are needed. I posted a question about this in the forum, but I didn’t receive a response. Impatiently, I decided to find out which function I needed the old fashioned way through trial and error.  The first thing I did was make a backup of my mootools.js file. It is located at (root)/media/system/js/mootools.js. Next I headed over to the downloads section at Mootools.net. I downloaded a custom package with all of the components. This yielded a file size of ~40k. I then replaced the original file. I found it interesting that all of the components of the official package total to ~40k, but the one that comes with Joomla 1.5 is ~74k. I tested my load times using the Utility at WebsiteOptimization.com.I next went back to the downloads section and deselected one component at the bottom, saved the file, and replaced the current file. I kept doing this until received JavaScript errors while viewing my page. I added back the last component I had removed and checked my file size. I was now down to 20k, that’s a 50k reduction. Through testing, I didn’t find any problem with the end user portion of the site, but I did find a few strange quirks in the admin panel. I now know that the admin panel uses the same file. I had to figure out some way to easily send one file to my users, and a different file to the admins. I did uncover this post on how to remove Mootools from the auto-generated header using your site template. I decided the leave the original file in place so that the admin panel could use it. I then name my optimized file mootoolsnew.js. I inserted the code into my template to remove Mootools from the auto generate headers and manually entered the line into the headers of my template pointing to the new file.  Here is what the final code looked like:
<?php // Remove auto generated mootool from header $headerstuff = $this->getHeadData(); reset($headerstuff['scripts']); $moo = key($headerstuff['scripts']); unset($headerstuff['scripts'][$moo]); $this->setHeadData($headerstuff); ?> <jdoc:include type="head" /> <script type="text/javascript" src="//media/system/js/mootoolsnew.js"> </script> In the end, I was able to remove the Window, Effects, Drag, Remote, and Plugins components. When finished, my final mootoolsnew.js file size was only 20k. This dramatically improved my initial load times. Using this method also has the benefit of being future proof as updates to Joomla won't overwrite my file. Good luck, and always remember to make a backup before you start! UPDATE: As Chris pointed out below, the other big file that can also be removed it the caption.js. I have modified the PHP script to remove both .js files. They can manually be added where needed. The modified version is here: <?php $user =& JFactory::getUser(); if ($user->get('guest') == 1) { $headerstuff = $this->getHeadData(); $headerstuff['scripts'] = array(); $this->setHeadData($headerstuff); } ?> <jdoc:include type="head" /> |