- Jan
- 03
Update: A script is now available to do this, and much more, here: site speed boost script. This script doesn't rely on Smarty.
One of the keys to getting your pages to load quicker is to make fewer HTTP requests. So, for example, if you have 6 javascript files it would be much quicker for you to join all the JavaScript together into one file and serve that instead. However, doing this manually is a pain. Even using a tool to join them together can be a pain. Far easier would be to set up a PHP script to automatically do it for you.
Example
This plugin can automatically turn this:
<script src="/app/resources/js/scriptaculous-js-1.8.0/src/builder.js" type="text/javascript"></script>
<script src="/app/resources/js/scriptaculous-js-1.8.0/src/effects.js" type="text/javascript"></script>
<script src="/app/resources/js/scriptaculous-js-1.8.0/src/dragdrop.js" type="text/javascript"></script>
<script src="/app/resources/js/fastinit/fastinit.js" type="text/javascript"></script>
<script src="/app/resources/js/controllers/controller.sitewide.popup.js" type="text/javascript"></script>
<script src="/app/resources/js/beyond_the_dom/beyond_the_dom.js" type="text/javascript"></script>
<script src="/app/resources/js/newsticker/newsticker.js" type="text/javascript"></script>
<script src="/app/resources/js/image_swapper/image_swapper.js" type="text/javascript"></script>
<script src="/app/resources/js/NiftyCube/niftycube.js" type="text/javascript"></script>
<script src="/app/resources/js/validation/validation.js" type="text/javascript"></script>
<script src="/app/resources/js/flash_detect/flash_detect.js" type="text/javascript"></script>
<script src="/app/resources/js/swfobject/swfobject.js" type="text/javascript"></script>
into this:
Smarty
This script is an output filter for Smarty, a template engine for PHP. If you don't already use Smarty, the script can be adapted and used with PHP's output buffer functions. If you do use Smarty, setting this up with be a breeze.
Installing the Plugins
You should call
$smarty->load_filter('output','join_css');
from within your application. Then just drop the plugin files into your Smarty plugins directory. Make sure you specify a "cachedir" in the plugins. This is the directory where the joined files will be stored. It should be writeable by the server.
Joining Javascript
Your JavaScript links should contain src and type tags. For example:
<script src="/wp-content/themes/leon/libs/nifty_corners/nifty.js" type="text/javascript"></script>
This is the only requirement for the HTML of your page.
The script will take the JS within the files, join it together, and create a new file. The new file will be saved in the directory you specify, and a new link to it created.
Joining CSS
Your JavaScript links should contain href and type tags. For example:
Again, the script will automatically join together all files with the text/css type tag.
Note that when you make a change to your original CSS or JavaScript files, you will have to delete the cached file.
Download
You can download the plugin files here: http://aciddrop.com/aciddrop/aciddrop_output_filters.zip
Examples
I use this technique on a number of sites, including this one. Check out the source of pitch-invasion.com, simplifydiy.com and purrl.net for examples.
Can you explain how to use this technique without Smarty?
Hi splake,
I'll cover that in the next tutorial. Cheers, Leon.
Hi, great idea. Would it be nice if on the end packer could be used http://dean.edwards.name/packer/usage/
Greetings
Gerwin
Hi Gerwin,
True. I have considered that, although I don't use packer myself as it requires all statements (including functions) to be terminated with a semi-colon. I have another tutorial planned on how to use the technique without Smarty (as requested above), and I plan to integrate minification and gzipping. Subscribe to my RSS feed to stay tuned! http://aciddrop.com/feed/
Cheers, Leon
hi there!
great plugin, useful, just implemented in my sites. just a few tricks that i notice in code.
- some of javascript files that i include have ?ts=111 at the end (problem with file_exist)
- problem with scriptaculous (scriptaculous.js?load=effect,...): scriptaculous includes some other files with that kind of code.
solution: removed all chars behing "?" in javascript src, that works for me, but another problem is that some script have to be included before other, example:
myscripts.js
prototype.js
scriptaculous.js?load=effect,dragdrop
my_scriptaculous_addon.js
... this one renders:
/cache/42334535344.js
scriptaculos.js?load=effect,dragdrop
... which is not cool, my_scriptaculous_addon.js needs included scripts above, also prototype. you know what i mean? for other solutions of "hacks", contact me at my email.
greetings. matija
Hi Matja,
You should just include all the scriptaculous files directly in the HEAD. Eg:
<script src="../libs/js/prototype.js" type="text/javascript"></script>
<script src="../libs/js/builder.js" type="text/javascript"></script>
<script src="../libs/js/effects.js" type="text/javascript"></script>
<script src="../libs/js/dragdrop.js" type="text/javascript"></script>
etc
Thanks for the great plugin and tutorial.
I tried to subscribe to your feed but got an error message.
Thanks SEO Diva, it should be OK now.
HI THERE! I NEED TO JOIN YOU