• Jan
  • 03

Automatically join Javascript and CSS into a single file

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:

HTML:
<script src="/app/resources/js/scriptaculous-js-1.8.0/lib/prototype.js" type="text/javascript"></script>
<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:

HTML:
<script type="text/javascript" src="/app/resources/cache/03e8cd4518c686feb8e18fa1eb329abb.js"></script>

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

PHP:
$smarty->load_filter('output','join_javascript');
$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:

HTML:
<script src="/wp-content/themes/leon/libs/scriptaculous-js-1.8.0/lib/prototype.js" type="text/javascript"></script>
<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:

HTML:
<link href="/wp-content/themes/leon/libs/nifty_corners/niftyCorners.css" type="text/css" rel="stylesheet" />

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.


Related posts

Posted by admin in php, tutorials
trackback
 

  • Jan
  • 4
splake42
splake42

Can you explain how to use this technique without Smarty?

  • Jan
  • 8
admin
Leon

Hi splake,

I'll cover that in the next tutorial. Cheers, Leon.

  • Jan
  • 12
Gerwin
Gerwin

Hi, great idea. Would it be nice if on the end packer could be used http://dean.edwards.name/packer/usage/

Greetings
Gerwin

  • Jan
  • 12
admin
Leon

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

  • Feb
  • 12
ma.tija

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

  • Feb
  • 12
admin
Leon

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

  • Mar
  • 21
SEO Diva

Thanks for the great plugin and tutorial.

I tried to subscribe to your feed but got an error message.

  • Mar
  • 21
admin
Leon

Thanks SEO Diva, it should be OK now.

  • Apr
  • 21
GEORGE KADUGA

HI THERE! I NEED TO JOIN YOU

Comments are closed