Those of you that following me on Twitter would have just seen that I've been tweeting about improving the load times of a couple of the sites I run. I have been working on a massive news site over the past couple of months, and now that it's almost ready to go live, I wanted to see if i could improve the performance of it.
The post below outlines the steps I took in order to reduce the load time of this site down to 25%.
Why bother?
Page load times are important for both visitors to your site but also the search engines. This post here from Google goes some way to explain the importance of it.
First things first, find out how long your site takes to load. You can either use the advanced tools of your web browser to find this out, or something like this.
Get your load time, and write it down.
1. Sort those images out!
Every site contains images somewhere and on news sites they're often displayed within articles as well. If you're sourcing, or taking the images yourself, the chances are you're uploading much larger files than you need. WordPress does a lovely job of resizing the images for you, so you don't use a 1000 x 750 image for a 250 x 250 spot, but sometimes in the process of doing that, the size of the thumbnail is still larger than it should be.
The first step is to install a plugin that'll automatically put your images on a diet to get them looking trim. Log in to your WordPress site and install the plugin called "WP smushit". This plugin uses the smush.it service from Yahoo to reduce the file size of images on your site. It's free, and will automatically reduce any future images you upload to WordPress.
Once installed, click into the "Media" tab of your site and click the "bulk smush.it" link and start the process. Depending on how many images you already have in WordPress, it might take a while. The site I'm working on right now is expected to take about 15 minutes...
Plugin link : http://wordpress.org/extend/plugins/wp-smushit/
2. Compress the CSS
NOTE : For those of you that are not web developers, but are reading the tutorial to try to improve a site that was built for you, CSS is a web language used for the layout and look & feel of your site.
The problem with most CSS files is that they're not compressed down to the most efficient size they can be. It's all to easy for a web developer to not do this and I would be the first to say that I don't always remember to do this. That said, compressing the file down has more of an effect the larger and more complex a site is.
There's an awesome plugin that you can install on WordPress that dynamically compresses the CSS used in your site and caches it for future requests. Again, it's free and shaves a fair amount of time off the load time of your site.
I found a bug in the code of this plugin, so have uploaded the plugin for you to download and use without any hitches.
Plugin Link : wp-css.zip
3. Optimise your database
If you've had your WordPress site for a while, this step could be the single most effective step of this entire blog post. I jumped onto a long-running WordPress site a moment ago, ran this plugin and was amazed at the results.
Again, for the non-techies reading this, behind your WordPress site is a database that stores all the pages, comments, menus etc that exist on your site. That database is called many times when a page is loaded, and subsequently when you save changes to your site the database is adjusted then too. All these changes can make the workings of the database slightly clogged up and not as efficient as they could be. This plugin simply cleans up the mess, fills the database with a million shots of espresso and sends it on its way.
Just go ahead and install the plugin called "optimize db". When it's installed, the link to run the plugin appears under "tools" and "optimize db". When it loads it'll tell you how well it can optimise the database, and with the click of a button it'll sort it out.
Plugin Link : http://wordpress.org/extend/plugins/optimize-db/
4. Install a caching plugin
The last step is to install a plugin that will hold cached versions of your pages on the server for quicker load times. For the non-techies, WordPress is coded using a web language called PHP. All the heavy lifting is done on the web server when you load a page of the site. Each time you click refresh, the server is running all over the place to gather the information from the database, templates for the look and feel and trying to piece it together for you as quickly as it can. You could imagine that if you're only updating the site once a month this process is "too much". The idea solution is for the web server to store a pre-built version of that page that will be sent back to the web browser when nothing has changed since the last visitor. Well, that's what this plugin does!
Go into WordPress and install "WP Super Cache". It's by far the most popular caching service for WordPress and I love it. Once it's installed there's a whole host of extra options for you to tweak to make it more effective. If you're not comfortable tweaking the settings then don't. Get in touch and I'll happily sort this out for you.
Plugin Link : http://wordpress.org/extend/plugins/wp-super-cache/
Check out the effect..
Now you've done this, go back and re-run your speed test. You should see a hefty decrease in the load time of your site. Brilliant!
If you have any worries or just don't feel comfortable doing this yourself, get in touch and I'll happily help you.
Let me know your before and after scores for your sites in the comments. Would love to see how it's helped to improve your site too.