WordPress: How To Prevent Repetitive Calls of Same JavaScripts

These days most of the plugins are using prototype & Script.aculo.us Javascripts. Once activated the plugin calls and load these scripts from their respective directory. Imagine, if you’ve 6 plugins using these two scripts, in that case the scripts will be called six times and will load from six different places. Thus overloading and slowing down your […]

These days most of the plugins are using prototype & Script.aculo.us Javascripts. Once activated the plugin calls and load these scripts from their respective directory. Imagine, if you’ve 6 plugins using these two scripts, in that case the scripts will be called six times and will load from six different places. Thus overloading and slowing down your page.

The WordPress 2.1.x onwards, prototype & Script.aculo.us are bundled with the package and called, when you browse your WordPress blog i.e. add to another call of the two scripts.

When I installed WordPress 2.1, I had edited all my plugins, and changed the location of the two scripts to wordpress/wp-includes/js and deleted those from the plugins directorys. That doesn’t made much difference in terms of load reducing, but to some extent this trick helped.

Now to optimize my blog, I’m going to compress all JavaScripts running on my blog, but before that I wanted to get rid of the same scripts loading again and again. As I wanted to have a faster solution, I had posted on WordPress support fourm, and Otto42 refered me to wp_enqueue_script() function in WordPress 2.1.x.

Further digging, and I ended up finding the function wp_enqueue_scripts() within /wp-includes/script_loader.php which allows you to add a script to the <head> section of the page easily and ensure that your script is only loaded once. The function call looks like this:

wp_enqueue_script( $handle, $src = false, $deps = array(), $ver = false );

If WordPress recognizes the handle you provide, the library will be added for you. If it doesn’t support calling the library by handle (or the library is something custom you wrote) you’ll have to supply the path to the file as a second argument. The third argument lists any dependencies that the library you are loading may have (in the form of an array or false if there are no dependences). Finally, the fourth argument is the script version which, according to the documentation is primarily for cache busting. To use the function, you’d do something like this:

wp_enqueue_script('prototype');
wp_enqueue_script('my_custom_prototype', 'path/to/my/js', array('prototype'));

It’s really very handy, and hopefully everyone writting plugin for WordPress 2.1.x that uses prototype in their theme or plugin will start using wp_enqueue_script() to load the prototype.js file.

Plugin writen for WordPress 2.1.x and backword version can use a simple query to check WordPress version and then call the script for older version.

In my present case, the plugins in question doesn’t use customized version of the two scripts. So, it was only a matter of few minutes to get rid of the repetitive call of the scripts. All that, I have done was, immediately edited and re-uploaded all plugins using prototype & Script.aculo.us scripts.

If you too have a similiar problem, take a look at the e.g. below,  it’s extremely easy to modify plugins. In the e.g., I’m using Share This plugin from Alex, as it’s the most commonly used:

  1. Open wp-content/plugins/share-this/share-this.php
  2. Go to line 188 approx. and find (code below)

    <script type="text/javascript" src="'.$wp.'/wp-includes/js/prototype.js"></script>

  3. Delete all of  the code above.
  4. Save share-this.php and upload it to wp-content/plugins/share-this/ folder.
  5. That’s it!.

Similalry, you can edit all your plugins that uses prototype & Script.aculo.us scripts. If you’ve any problem, just leave a comment in this post or use contact form.

Additional Optimization Posts:


wordpress, wordpress optimization, prevent repetitive call, repetitive loading javascripts, java, scripts, javascripts, prototype, script.aculo.us