Slow loading websites have fewer pageviews, lower visitor satisfaction, higher bounce rates and ultimately, lower conversion rates. Fact.
Site speed is one of those things that’s easily overlooked by webmasters and bloggers.
Mainly because optimising your page load times can be a pain, and for a lot of people it can be a nightmare to even know where to start.
Todays post will show you step by step exactly what I’ve been doing over the last week or so to optimise my page load times, and show you why it’s such a critical factor.
The fact is, the average visitor to your website has the attention span of a schizophrenic goldfish. That’s just what the internet has slowly turned us all into.
If your site takes a long time to load, you’re leaving money and leads on the table.
But don’t just take my word for it. There are plentyofstudies out there which show a direct correlation between site speed, bounce rates and time on site:
So with that in mind, I set about optimising my page load times!
Stats on the site to begin with were pretty terrible to say the least. I ran test on a few different types of pages across the site, and had a mild panic attack when I realised the extent of the current situation.
Here’s how one of the post pages was loading at the time, to give you an idea of what we were dealing with:
Pretty grim, right?
After a good few hours sat trawling through everything, tweaking and retesting, I was able to get page load times down considerably. We were now sitting at a much more respectable time of under 1 second in most cases. Here’s how the home page now looks from that same location:
That’s a huge improvement, and well worth the time spent achieving it. If the above studies are to be believed, I should be looking at a significant improvement in conversion rates.
Here’s how I did it.
Migrating Hosting Providers
Looking down at the waterfall, there was a lot of time spent waiting for the server to respond. I figured that this was probably down to my cheapo shared hosting package, so I decided to upgrade the site to something a little more speedy.
I switched the hosting over to Terry Kyle’s new venture Traffic Planet Hosting. If you haven’t heard of Terry before, he’s the guy behind the Traffic Planet forums.
The company is still in its early days as the hosting service was only launched very recently, but if Terry was pinning his reputation on it, that was good enough for me.
I made the switch and his support team were fantastic!
They migrated the site over for me for free and basically just took care of the whole process. They also installed a caching plugin to help speed things up.
Here’s what that did to page load times:
Not a bad start! 10.72s down to 2.40 for only a few dollars a month investment. Yeah…I’ll take that.
But there’s still a lot more that can be done!
I’m going big and aiming for a sub 1 second load time. That’ll be quite some transformation from where the blog was a couple of weeks ago, and it should lead to a much better experience.
At each step of the way I’ll document exactly what I’ve done. That way you’ll be able to see exactly how much difference I’ve made and how you can follow along and do the same with your site.
Ok, so I obviously have my work cut out for me if I’m going to cull these times down.
Let’s get into it.
Updating WordPress And Plugins
I’ve not yet upgraded to the newest version of WordPress, and I also noticed that a couple of the plugins I use had some updates available.
This seemed like a good place to start, so I quickly installed all available updates.
On the whole there were some nice little improvements off the back of this (I averaged around a half second improvement at this point) which isn’t bad for something that took all of 5 mins to implement.
But we’ve still got a lot of work to do if we want to get the site performing at its best.
Removing Unnecessary Plugins
Next up is plugins.
Plugins are fantastic! They’re a part of what makes WordPress so simple to use and yet so versatile at the same time. These days there is a plugin for just about anything you’d ever want to do with your WordPress installation. The down side is that they can be quite server intensive and most guides you read on how to speed up your WordPress site will tell you that they’re all bad news for your page load times.
I for one have probably got into a bad habit of installing shit that I don’t really need. And I suspect that’s going to be holding my page load speeds back considerably.
So I needed a way to put my plugin addiction to the test. I needed to see just how these plugins were holding the sites load times back so I could make a judgement call on aesthetics/functionality vs speed.
After looking around for a while for a solution, I came across the Plugin Performance Profiler. I must admit, it did seem kind of ironic that I had to install a plugin to analyse the performance of my plugins, but as I said, I’m a sucker for a good plugin so I thought I’d give it a whirl.
The plan here was to install it, grab the data I needed and then bin it back off again.
Essentially, the P3 plugin scans your site and then tells you how long each of the individual plugins take to load. You can then look at the ones which have the most substantial effect on your overall page load times and make the call on whether they are really necessary.
The scan results were actually surprisingly insightful and easy to interpret.
You get a collective overview of all plugins combined and then a breakdown of them on an individual level.
These were my results:
So it does give you some pretty cool info in there. Looking at that, I can see that almost 91% of my total page load time is the result of plugins, and all of my plugins combined take 0.9 seconds to load up. And then there’s the handy pie chart to tell me which of my 22 active plugins is taking up the most of that time.
And yup, that would be the twitter integration widget taking up over half of the total time. Not cool.
If this is your first time on the site or you just don’t remember, the widget used to display my latest tweets in the right sidebar. I quite like having the Twitter integration there, but I’m certainly not enjoying the knock on effect that’s having on load times.
That’s got to go.
So I uninstalled the widget. While I was in there, I also decided to kill one of the other widgets I had in place.
I had a tabbed widget which displayed my most recent and most popular posts in the right sidebar. The problem was, if a post had no featured image assigned to it, then the plugin would spend ages looking for a thumbnail file that didn’t exist, before eventually conceding that it was hopeless and not displaying one. The whole process of trying to load that non existent image was taking just over 1 second! As a result of nothing other than sloppy coding by the plugins coder(s). Here it is in the waterfall from pingdom:
So with those 2 gone, we were really starting to make some good progress.
Technical Code-ey Stuff
One of the main things holding the post pages back at this point seems to be the social shares buttons.
These are an absolutely essential part of my content syndication strategy, so I can’t just remove them like I’ve done with other troublesome aspects of the page.
I need to find a way to get them loading the stats quicker.
It seems to be the way that they connect to the various platforms to pull out the share stats that is causing the bottlenecks here.
I used this plugin to make sure that all the Javescript code was loading asynchronously and not causing any hold ups.
Having done this, I still wasn’t happy with the social sharing side of things on the post page. It still seemed like it was taking a disproportionately long time to load up.
As a test, I deactivated the one I was using (Social Sharing Toolkit) and give this one a whirl instead. If I’m being honest, I don’t know if I like this one, as I feel like it makes the share buttons less prominent than they were before. But as an experiment I decided to try it and see what kind of effect it would have. If it ends up taking a big enough chunk out of the load times then maybe it will be a trade off that’s worth making.
While I was getting my code on, I decided to have a little spring clean of the database. WP Optimise is a pretty nifty WordPress plugin for optimisng your database. In the end, I did most of this stuff manually rather than using the plugin, but if you’re not too keen on getting down and dirty with the technical side of things, the plugin is a great alternative.
Reducing File Sizes
By this point, we’re starting to run out of things to tweak.
The final thing on the list is to reduce file sizes as much as possible. In particular, I’m talking about image files.
A lot of my blog posts, particularly the tutorial and case study posts, are quite image intensive. So having image files which are larger than they need to be can be a big blag on load times.
The key thing to remember with your image files is to not have the images any bigger (in terms of pixel length and width) than how they will be inserted into the post. So for example, if the image in the page is going to be displayed at 100px by 200px, there’s really no sense in having an image file that’s configured at 500px by 1000px. You might as well scale the image down to size before you insert it into the post, and thus save yourself the file space.
So I went through and did that to my image files.
Of course, there are some image files where I need for visitors to be able to click and enlarge the image so that they can see the details more clearly. These ones will just have to stay as they are.
After that, I also installed WP Smush.it (hat tip to Matthew Woodward for the heads up on this one) to compress the image files down further.
Remember that post page which was taking over 10 seconds to load?
Well, check it out now:
You’ve read how it’s done, now it’s time to put it into action on your own sites.
If you’re not doing everything you can to make your site as fast and slick as possible, you’re literally leaving stacks of cash and valuable leads on the table.
You work hard to get traffic to your site in the first place. Make sure you’re doing everything you can to keep it there.
Anyone got an extra tips or tricks? Feel free to fire them through in the comments below.