Speed up WordPress via jQuery

I think WordPress is just awesome, but before we get into an argument, let’s take a look at how just about anyone can speed up with WordPress site simply by how they handle the world’s most popular JavaScript library, jQuery.  Brace yourself.  This is gonna get nerdy.

Don’t use <script> to jQuery in your header.php

Often you’ll see websites that load style sheets, favicons, and JavaScript in the header (which in WordPress is in your header.php file in your theme).  All that is fine, except the JavaScripts.  Remember, HTML loads top-to-bottom and JavaScript doesn’t do much of anything before the page has fully loaded (according to the DOM).  So holding up even the very first line of HTML for your page because it has to load 18 JavaScripts it can’t use yet is silly.

Easiest way around this is simply to move all your <script> references to your footer.php file which is called toward the very bottom of your site.

Faster, but more techie…

If you’re ready to get a little more technical, you could instead use WordPress’ wp_enqueue_script() function.  The code you would add to your functions.php file (in your theme) would look something like this:

function my_js_stuff() {
	if (!is_admin()) {
		wp_enqueue_script('jquery');
	}
}
add_action('init', 'my_js_stuff'); 

The is_admin() checks to prevent the script queuing on your admin pages. It’s already included in the core.  Feel free to come up with a more inspired function name than “my_js_stuff()”, but beware of conflicts.

Now the above function will load the local version of jQuery (included in WordPress).  For reasons we’ve mentioned earlier, Google’s jQuery CDN might be a better place to reference.  To use Google’s CDN, here’s what that same function might look like added to the footer hook so it loads at the end:

function my_js_stuff() {
	if (!is_admin()) {
		wp_deregister_script('jquery'); // Ditch WP's version

		wp_register_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js', false, '1.8.3', true);

		wp_enqueue_script('jquery'); // Add your registered jQuery from Google's CDN, above.
	}
}
add_action('init', 'my_js_stuff');

Let’s break that down.  The function is ignored if you’re on an admin page; it deregisters WordPress’ local copy of jQuery; registers a new one from Google’s CDN and then enqueues Google’s.

Nerdy Note:
As of version 3.5, WordPress changed its minification convention for scripts and styles. Before, minified scripts and styles had the .js and .css extensions, unminified had .dev.js and .dev.css. However, following the change, the extensions are .min.js and .min.css for minified files.

A lot to do about nothing?

If that all seems to be a lot of work for a minor payoff, check your site out with YSlow or ProScore.  Maybe it is.  Maybe it isn’t.

By the way, there’s a great article by Eric Martin with even more weird and wonderful ways to speed up your site by using WordPress’ functions, as well as handling conflicts and uncooperative CDN servers.