The right way to speed up your blog
In the latest posts (Is my WordPress blog fast enough? and Part 2) we spoke about measurement tools. Why is it so important? Why we can’t just ‘apply 30+ tips to speed up WordPress’? Because without knowledge about possible efficiency of these tips (for our blog of course, not for any other virtual one) we can’t say if such tips helped us or not. Or maybe some of them will slow down website, but the other speed up so the result will be positive. No doubt you can read popular articles – like the recent on smashingamagazine – but they don’t answer to the question “Why my website is slow” and “What exactly should be done to speed it up”, only a number of common practices and well-known facts.
So let’s review a few tools which can help us to construct optimization strategy for WordPress website. Server side performance seems to be good enough (yet) – now it’s about 300ms, but it’s still reasonable (server side isn’t all about HTML document, but we will talk about this next time). Client side performance is poor – it takes about 4…4.5 seconds in each browser to load this website. So our first focus will be on the client side.
But how should we start? What is the largest bottleneck (wow, oxymoron!)? What methods must be applied first? You can also try to use Yahoo! Best Practices. But they are too general and cover all websites. And we need our own way.
Choosing optimization strategy
We haven’t spoken yet about www.websiteoptimization.com – the oldest resource about web performance. If you are looking to improve performance of your website you should take a look on its analyzer. After website has been analyzed it gives a lot of data (sometimes useful). Our interest is located in the bottom of all these tables – section ‘Analysis and Recommendations’. Well, let’s take 6 warnings from this section:
- TOTAL_OBJECTS – Warning! The total number of objects on this page is 45 which by their number will dominate web page delay.
- TOTAL_IMAGES – Warning! The total number of images on this page is 33 , consider reducing this to a more reasonable number.
- TOTAL_SIZE – Warning! The total size of this page is 610740 bytes, which will load in 130.72 seconds on a 56Kbps modem.
- TOTAL_SCRIPT – Warning! The total number of external script files on this page is 8 , consider reducing this to a more reasonable number.
- IMAGES_SIZE – Warning! The total size of your images is 408495 bytes, which is over 100K.
- SCRIPT_SIZE – Warning! The total size of external your scripts is 165902 bytes, which is over 20K.
Well some of these advices look a bit outdated, but it’s OK. We are just trying to find the right way. So conclusion: a lot of images (what lead to great website size and large number of objects) and a lot of scripts (also large size).
The next tool is a YSlow extension (for Firebug / Firefox). Version 2.0 has great visual representation for website performance bottlenecks.
Well from this graphics you can see we have the same major issues: large number of images (both HTML and CSS ones), and large number / size of JavaScript (client side logic). Also there is almost no caching. So blog visitors must download all resources every time they come to read something (oh my god, it’s really very bad – I think one day I will be killed for such perversion of users 
).
Well, not very good but we know the weakest points. What’s next?
Result evaluation
All performance-related actions can takes hours and days. So we need for sure that we are doing all right before get involved into this endless story. First of all let’s begin with another Firebug extension – Page Speed from Google. It gives the following:
The same: we need to reduce size of all files. It will give us about 280 Kb of savings (from initial 650 Kb of page size, not bad, really).
Also there is a good resource to evaluate possible gain after all optimization actions (in terms of overall website speedup) – webo.name visual optimization. You can just choose actions (like minify HTML files or minify images) and it will give possible acceleration. For gzip we have about 50% speedup. For images – only about 1%. Why? It seems the most acceleration is about blocking JavaScript (we spoke previously about this), but images are downloaded concurrently and it seems there won’t much speedup with their optimization.
Final strategy
After all these words we can think about the following actions (step-by-step):
- Gzip for all text assets (HTML, CSS, JavaScript).
- Cache enabling.
- Image optimization.
Why this list isn’t large and detailed? Because after 2-3 major steps we will need to re-check our website performance, fix results and form another list of actions. After these 3 actions (they won’t be so simple as it may seem) we will have website accelerated by 50% (so about 3.5 seconds vs. 5) for new users and about 1000% for return visitors (0.5 seconds vs. 5 now). It’s our primary target.
If you can advice something more to improve this blog performance – please share your thoughts in comments.
3 RESPONSES TO The right way to speed up your blog