I've just released an update for our free jQuery system plugin for Joomla 1.5 and Joomla 1.7 which has a very nifty new feature. You can now automatically add javascript to the bottom of your Joomla site simply by uploading your files to the plg_jblibrary/user folder media folder.

Why do we need this?

One of the technical requirements for optimising your site's load time is to add javascript files as far down the page as possible. Doing this means that the browser does not block the rendering of other elements on the page and so means that the assets required for the page load in the fastest way possible without causing any noticeable degradation of the styling of the page as it loads.

Will this work on your site?

Sometimes it's not always functionally possible to add javascript references at the bottom of the page. Certainly in the case where a script fires in the head of your page and is also required as the page loads, you will not be able to load the javascript file related to that script at the bottom of the page, without causing a javascript error or at the very least having a flash of unstyled content or a flash of what the page looks like without javascript enabled.

There are however some core Joomla javascript files that are not required on load and can be safely placed at the bottom of the page.

In my tests the following files appeared to present no real issue to the test site when placed at the bottom of the page:

• modal.js
• caption.js
• k2.js if you have the k2 component installed
• joomla.javascript.js

Don't we have two versions of the files loading now though?

Another handy feature of the JB Library is that in addition to being able to add files to your page it can also strip them from the output. If you add the files above to the user folder it does not remove them from the output of the page, so you need to perform one more step to strip them from the output.

The screenshots below highlight the process for stripping core joomla javascript and then re-adding it to the bottom of the page.

1. Upload the javascript you are adding to the media/plg_jblibrary/user folder.

2. In your Joomla admin navigate to the JB Library parameters via extensions > plugins > JB Library

3. Enable the strip extra scripts option.

4. Enter the filenames of the scripts you want to strip. eg the name of the files we added to the user folder.

Check your source and clear your cache ...

Now if you check the source of your page you should see references to the files above loading at the very bottom of your page.

You will of course need to test your site thoroughly and clear all browser and relevant Joomla cache to make sure that making the changes above works for your specific context.

If you are in an adventurous mood feel free to download the latest version of the plugin and test it out.

Please note that this update also adds jQuery 1.6.4 to the jQuery stack available in the JB Library plugin.

blog comments powered by Disqus