Reduce HTTP requests with Minify4Joomla
BETA release
Attention: this kind of mod is intended for developer or #Joomla site with high number of visitors and facing performances issues.
A small HOWTO, a more comprehensive documentation can be found in my WIKI. A new forum board has also been started for support, bugs and your comments.
Install
The component com_minify like any #Joomla component
Check proper installation
- Use the menu entry "Check/System", at least the file cache at components/com_minify/cache has to be writable by apache/PHP!
- Activate the URL Builder under "settings"
- Drag and Drop the Bookmarklet tool in your Firefox Bookmark Toolbar
so it look like:
Go to your Joomla frontend
And click on the bookmark tool "Create Minify URL’s", a new tab or pop up will open:
In A, the tool will present You all JavaScript and CSS it has detected in the page, Remember this may change if you are a public or a registered user, this may also change if you remove or add module and plugin!
Removing JavaScript/CSS HTTP requests
Now in that list, decide which JavaScript files can be combine (most of the time it is all, but you may want to create bundle of them if that is making sense), simply click on the blue link you want to add to the combine list.
Here for the example I select them all (also add securityimages.js):
Note:
- That I have a base Joomla1.5.8 and did not install Joomla in the root directory of my local web server.
- You can not mix JavaScript and CSS in one minify URL, this is limitation of HTML tags that are different for JavaScript and CSS.
- mootools.js and caption.js can be group under the group name jbasejs for example and thus reuse.
Click now the [Update] button, the URL query Builder present you the text below that is self explanatory
Place this URI in your HTML to serve the files above combined, minified, compressed and with cache headers.
URI
/components/com_minify/b=Joomla1.5.8&f=media/system/js/mootools.js,media/system/js/caption.js,
components/com_securityimages/js/securityImages.js (opens in new window)HTML
<script type="text/javascript" src="/components/com_minify/b=Joomla1.5.8&f=media/system/js/mootools.js,
media/system/js/caption.js,components/com_securityimages/js/securityImages.js"></script>How to serve these files as a group
For the best performance you can serve these files as a pre-defined group with a URI like:
/components/com_minify/g=keyNameTo do this, add a line like this to /components/com_minify/groupsConfig.php:
return array( ... your existing groups here ...‘keyName’ => array(‘//Joomla1.5.8/media/system/js/mootools.js’,
‘//Joomla1.5.8/media/system/js/caption.js’,
‘//Joomla1.5.8/components/com_securityimages/js/securityImages.js’),
);Make sure to replace
keyNamewith a unique key for this group.
In your Joomla! templates /templates/xxxxxxx/index.php
- Remove all reference to static JavaScript include by first commenting them if you have no backup.
- Add this line in the <head> of your template
<script type="text/javascript" src="/components/com_minify/b=Joomla1.5.8&
f=media/system/js/mootools.js,media/system/js/caption.js,components/com_securityimages/js/securityImages.js"></script>
or better this one if you did defined a group fjs (frontendjs)
<script src="/Joomla1.5.8/components/com_minify/?g=fjs" type="text/javascript"></script> - Remove all dynamically added JavaScript by : see later in article
You did avoid 3 HTTP requests for including JavaScript, and only need one now!
Do the same for all CSS, here it is 6 CSS file for the default templates rhuk_milkyway
<link rel="stylesheet" href="/Joomla1.5.8/components/com_minify/index.php?g=css" />
You did avoid 6 HTTP requests for including JavaScript, and only need one now!
Remove all dynamically added JavaScript
- This is currently a bit dirty, as Joomla! do not have any hook where com_minify can detect that a Joomla! plugin is trying to insert a new JavaScript or CSS in head of the document. In fact minify would have its place in /libraries ideally.
- I am trying to find a better/more elegant solution than this one (modifying JResponse), but this one work at the moment.
- If you start modifying the front end, I highly recommend you to minify also the Joomla back end template.
Open libraries\joomla\html\html\behavior.php and alter the class JHTMLBehavior
and comment lines like
JHTML::script(‘caption.js’);
when you are sure that you did minify the script caption.js for both front end and back end.
Test proper operations
- Test both your front end and back end!
- Using YSLOW or by looking at HTML source code, check that not any other JavaScript or CSS is inserted anymore except by com_minify
- Check the cache content
- Switch the URL builder OFF for non obvious security reasons.
My site use it NOW 🙂 but not for all js and css at the moment
