Other Ways To Speed Up Your Site

We’ve already seen how I saved 37% of my page load time by editing and removing a few unnecessary plugins in this post. Now I’m going to share a few more methods I used to cut another 3 seconds off my page load time.

Load jQuery from Google

My site, like most WordPress sites uses the excellent jQuery javascript library to power many effects like my sign in box and the sliding features box on the theme detail pages. For several months I had been using the copy of jQuery that comes with WordPress, but I learned from digwp.com that a better method was to load jQuery directly from Google. Here’s how to do it. Open up your functions.php file and add this:

if( !is_admin()){
   wp_deregister_script('jquery');
   wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"), false, '1.4.2');
   wp_enqueue_script('jquery');
}

Now you will need to specify where you’d like jQuery to be called in your theme by adding this to your header.php file:

<?php wp_enqueue_script('jquery'); ?>

You will want to do this before any jQuery plugins you use and before your <?php wp_head(); ?> as well.

I was skeptical this change would speed up the loading of my site, but I am a believer now. According to Pingdom Tools, all 70kb of jQuery from Google consistently loads in .2 seconds. It sometimes takes my 11.7kb logo .9 seconds to load. That’s fast! Plus it uses Google’s bandwidth which saves me money.

Use Conditional Loading

Typically if a WordPress site requires a script on one page, it loads them on all pages. I realized if I wanted to optimize my site, then I would only want to load scripts on the pages that needed them. On my theme detail posts for example, I use the excellent Nivo Slider, but I don’t need it in my blog or home page. So I use this code to load it only when the current post is in the “themes” category:

<?php if(in_category( 'themes' )) { ?>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.nivo.slider.pack.js">
<script type="text/javascript">
$(window).load(function() {
	$('#slider').nivoSlider({
		effect:'fade',
		animSpeed:500,
		pauseTime:5000,
		directionNav:false
	});
});
</script>
<?php } else {
}
?>

The WordPress codex offers several conditional statements you can use in your site here. You can also use the Art Direction plugin to selectively load code on individual pages or posts.

Use a Faster Server

Like most of us, I started out with a shared server. As I took on more clients and especially as Organized Themes grew I quickly changed to a virtual server from one of the big box hosting companies. In looking at my site’s load breakdown, I noticed that quite a bit of time was spent on the latency of my server. I began looking at the various “cloud” hosting sites to see if one of these solutions could help me with a faster server. I ened up giving VPS.net a try and I’ve been thrilled with the results. They moved my sites for me (a big plus). They charge the same as my previous host (also important). And last of all, the latency of my site has dropped significantly. Plus I can now add server resources as I need them and even remove excess ones when I don’t. Their customer service has been top notch as well. I can’t recommend them enough.

W3 Total Cache

A good cache plugin can effectively cut your page load time, but which one should you choose? W3 Total Cache’s list of sites using it on WordPress.org convinced me to give it a try. Here’s the client list:

Trusted by many popular sites like: mashable.com, smashingmagazine.com, makeuseof.com, kiss925.com, lockergnome.com, tutsplus.com, johnchow.com, ilovetypography.com, webdesignerdepot.com, pearsonified.com, css-tricks.com, yoast.com and others

If a plugin is trusted by sites as high profile as these, then it’s a worth a look. W3 total cache provides several ways to speed up your site. First it offers database caching–it keeps a record of queries run by your database server and loads them instead of re-running the query again. This reduces load on your server and gives a speedier response. Secondly it can minify your site’s content. This involves removing line breaks, comments, while combining javascript and css files. By combining your files, load times are reduced. Removing line breaks from your html also makes it smaller and quicker loading (look at the source code of this site to see what I mean). The last addition is a Content Delivery Network (CDN) which is a way to serve static files from additional locations allowing browsers to load your pages more quickly. Lastly it offers page caching that can compress your pages as they are delivered making the amount of data transfered smaller and your site faster.

So here’s my experience with W3 Total Cache. I set up a CDN using Amazon’s S3 storage. I had wanted to set up a CDN for some time, but it seemed like a hassle before W3 Total Cache. This plugin handles the uploading of your files to S3 and changing your links to match. I used it to upload many of my theme files, the wp-includes folder as well as all my uploaded images. As I add new images, they are automatically added to S3 for me. Now when one of my pages is loaded, the images, stylesheet and much of the javascript comes from S3 instead of my server. This gives more servers for an individual browser to load from speeding up load time.

I did run into some problems with the minify settings and my membership plugin. Every time I enabled the javascript and css minify settings, my home page would say you had to be a member in order to view this site. Clearly that is not good for anyone. Some of the settings would not allow users to login, which was also not acceptable. The end result was I could use the HTML minify options, but not the ones for javascript and css. Your site may be different, so experiment and see what works for you.

Overal, using the CDN and various caches saved about a second on my page loading. What’s more remarkable is that when a visitor goes to a second page, the load time is even shorter. I’m gathering data now to see if quicker second pages will lead to more page views on average. Hopefully it will, but only time will tell.

The Drop in My Page Load So Far

So combining the techniques here with the plugin edits I detailed in this post, cut my page load time from around 8 seconds to just over 2 seconds. Now that Google is planning on using site load times in calculating their search rankings, we all have a larger responsibility to ensure our sites load faster than ever. I hope you found these techniques helpful and that your site will be faster as a result.

If you’re having success using certain techniques to speed up your site, share them with us in the comments.