Performance Tuning a Hosted WordPress Blog
So you got a hosted WordPress blog and you’re not 100% happy with performance. Even worse you signed a 2 year deal to get a good rate. Now what? Ugh! D’oh! Or use whatever colorful metaphor you would like. Here’s a post on my efforts to performance tune my “cheapo” wordpress hosting plan that I have.
You Posted it – You’re the Problem!
No doubt about it – if you are posting large graphics then this is the single best place to getting better page load times. Check your graphics and use the right kind – png or jpeg. Usually jpeg is best and make sure you are picking a good quality level in terms of performance and quality. This is where I tend to screw up – I like nice banners with good resolution. Kills initial page load speed.
Before we go much further…
Test and Measure for Baseline
If you want to improve something – you need to measure something and then set a goal. There’s a ton of testing tools out there, but Apache jMeter is pretty good for basic website performance testing and loading. There’s a decent tutorial on how to build a test plan here. Build a test plan that loops over several static and several blog pages in your wordpress site. I recorded a bunch of the times and then also looked at CPU and memory usage stats from my provider. With this in hand we have something to know what is helping and what isn’t. My initial measures showed a baseline of about 12000 msec per page load.
12 seconds! WTF! Relax – I know my actual times are not this – with testing tools you have to consider their times “relative”. Its a baseline – what you want to do is improve so lets start.
The #1 thing – uninstall anything you are not actually using. Themes, plugins, whatever. Get rid of it if you are not actually using it. This is huge – do it.
#2 – optimize your graphics in your theme. I have some big banners that I like quite a bit. I’m going to leave them as they are for now, but at least I’m doing this knowing the hit I’m taking on page load times.
With the two most obvious things out of the way, what else can be done? A wordpress site has a number of potential targets for performance optimization:
- White space elimination and compression of code
- Caching of JS, CSS, HTML
- Backend caching (objects, database, CDN/media)
Here’s a great article from Google if these things are unfamiliar to you. I poked around on the wordpress.org site to find decent performance plugins and did some Google work. I’m also generally familiar with caching, minificaiton of JS, and stuff like this. What I found was that there’s a ton of plugins that handle bits and pieces of this, but the W3 Edge (W3E) plugin seems to have the best suite of capabilities. Seems to cover everything and can be configured thru a bunch of pages. I grabbed this set of tools.
Once I had the basic plugin installed I fiddled around and broke my site. Pure luck – I had the admin pages open in Firefox and was loading test pages in Chrome. So I could uncheck things I had turned on easily enough – lucky since I was not getting any content back from the server at all – just blank pages. Definitely recommend this approach; adjust settings in one browser and load pages in another. Its probably also a good idea to have a test server a fiddle around on that rather than on your production server. With that in mind I set out to do that.
Hosting Provider – How to Mirror on Windows
My hosting provider controls a lot of aspects of my system so I’m pretty limited as to what I can really do. My own development box is windows not linux so how to get all this stuff working locally? I already have a mirror of my basic blog running locally, but now I’ll need to do more work to install the things that W3E needs. The following things are missing:
- memcached server
- A few apache mods: mod_deflate, mod_env
- mime-type detection – another apache mod (mod_mine)
I’ve written about how to setup a local wordpress blog on windows. Starting with this base I’ll add the necessary apache modules and memcached server. Enable the mods by un-commenting them in your apache’s conf file. Easy – done…restart it. That seemed to work ok – now I have a safe place to play around. This of course does not solve the fact that I have some things to work on with my hosting provider.
Taking a Look at the Performance
After getting this installed I pretty much kept the defaults provided. I extended a few of the cache lifetime settings a bit since I don’t update content that often – the admin tools are pretty decent in terms of configuration. The FAQ pages are also pretty informative. There are a ton of settings for sure. You see in the screen shot that I also did turn on some of the header options to try and get browsers to use the cache – this will help out returning readers quite a bit.
So with this all done I have minification of JS (using JSMin) and CSS, but not HTML since that seems to cause a problem. I have disk based page and object caching working. I have gzip compression with linebreak elimination working.
Things I will start to experiment with:
- Cloud Flare
- HTML minification
- JS header/footer loading optimization
- User Agent Groups – these could be very interesting for the mobile interface.
- CDN: I was too chicken to play with this yet – it will take a some playing around on my dev environment before I try this.
So what’s the result? I started with some mediocre performance – keep in mind all these times are on my crappy DSL service – what you’ll see in the graph below is that I’ve improved my performance significantly. Originally jMeter was reporting 12000 as the average time and now this is about 6000 with average loads as shown in the graph below:
We’ll that is a pretty good start. I’ll continue on the points above and if I can’t get them working I may start to look at other options like WP Super Cache. So far W3 Edge Total Cache seems to have a great set of tools right out of the box and then as my blog grows, good capabilities for the future.
That is super screaming fast! Amazing! I’m seeing page loads around 1-2 seconds. nice job!
Its definitely faster – not sure about screaming fast, but I would say the page load time is cut in half at least. Some pages are even faster.
Could be my crappy DSL that is holding be back. I think Chrome is much faster than firefox for chome reason.
Althought now that I’m looking at it I see the main slider is busted and not sliding and the CSS is a bit off. NOt sure what is causing that. Looking into it.
the JS minify is messing up the slider and it looks like its also messing up the GD Star stuff.
I see the slider again.
Yeah I turned off JSmin – but this was a big feature – I can see it is slower with this off. Sigh…will continue to work on it.
Apparently the alternate compressors don’t work too good…darn…wp supercache is maybe an easier direction.
I see that your theme is loading up google fonts. You can probably speed up crap a lot by getting rid of that and either using a standard font or grabbing the font and loading it from your own web server.
Just a suggestion…
Yeah – graphene has this crap in it. Ick. Time to look elsewhere Mr. Beren.
Hmm…I’ll take a look. I did see those fonts – they’re in the H3 titles and stuff. The problem is the CSS is in the theme files and I don’t think I can get rid of that without a lot of work. Maybe if I can change the CSS so that those fonts are not used the CSS won’t load, but I think the fonts will still get loaded.
Probably right on that one. Maybe you can talk to them about removing it, making it optional, or over-ride in the custom pages.
Kaboom…hooo-haaa…tune your database too! Super cool! “Optimize” you db and you will see great performance bumps. I’m also looking at how to changes some indexes carefully.