WordPress makes it easy to add features by installing plugins. While most of these are well designed, they often use WordPress defaults that are not the greatest for accessibility or performance. One of the key elements of making your site load faster is to put the JavaScript at the bottom of the page, just before closing the body tag.
Put Scripts at the Bottom
The problem caused by scripts is that they block parallel downloads. The HTTP/1.1 specification suggests that browsers download no more than two components in parallel per hostname. If you serve your images from multiple hostnames, you can get more than two downloads to occur in parallel. While a script is downloading, however, the browser won’t start any other downloads, even on different hostnames.
Best Practices for Speeding Up Your Web Site – Yahoo! Developer Network
Good WordPress plugins will use the wp_enqueue_script function to bundle their js and insert it into the page. The default setting is to place the JavaScript into the head. It’s easy to modify your individual plugins to switch to the bottom of the page.
You’ll need to add a true value to the in_footer variable.
$in_footer
(boolean) (optional) Normally scripts are placed in the <head> section. If this parameter is true the script is placed at the bottom of the <body>. This requires the theme to have the wp_footer() hook in the appropriate place. Note that you have to enqueue your script before wp_head is run, even if it will be placed in the footer. (New in WordPress 2.8)
Function Reference/wp enqueue script – WordPress Codec
Let’s look at a sample module: Tweet Blender. If you’ve got this module installed, open tweet-blender.php in your editor. Here’s the original code for inserting the main JavaScript.
// load main JS code
wp_enqueue_script('tb-main', '/' . PLUGINDIR . '/tweet-blender/js/main.js', $dependencies);
This line is creating a link to the needed JavaScript and passing an array of the dependencies to the wp_enqueue_script function. We want to add a couple variables to this. The final set will be (script, dependencies, version, in_footer). The default value for version is false, so that is what I’m adding.
// load main JS code
wp_enqueue_script('tb-main', '/' . PLUGINDIR . '/tweet-blender/js/main.js', $dependencies,false,true);
Try this with your module, refresh the page and make sure it doesn’t break the functionality. If it does, consult the WordPress documentation for setting up the correct stacking order for your scripts. This change was all I needed to make the Tweet Blender place the scripts in the footer.
Check your site’s performance
How many plugins are inserting javascript into the head of your blog? Use the Yslow plugin to do a performance evaluation. It’s now available for multiple browsers and even mobile devices. Click on the “Put JavaScript at the bottom” link to see which ones are still in the head. It’ll take a bit of time to track down the correct file in your plugins directory, but your site will be faster and your visitors will appreciate the performance boost.
Leave a Reply