Speeding up my WordPress site with W3TC and CloudFlare
As far back as 1997, Jakob Nielsen was already saying that slow web page speed turns off visitors. The main culprits then were big images from graphic-intensive websites carried across slow modems.
Fast forward to 2011, the age of broadband internet, and studies prove that users still prefer fast loading websites over slow ones (but naturally!). A snappy website makes happy web visitors and happy visitors are more likely to turn into customers. Today however, the choking points of most slow websites are server delays and overly fancy web widgets.
One of the things I remember from Nielsen’s usability articles is that web users have an attention span of no more than 10 seconds. That means, optimally, your website must load and users must be able to interact with your page within that time frame or else they click away to other sites. It seems that patience limit has decreased from 10 to 5 seconds over the years. I assume that’s the reason why Google marked 5 seconds as the sweet spot for acceptable page speed.
I’m not exactly a speed junkie like other bloggers, but I have W3TC installed on my WordPress sites, including this one, for some time now. I stumbled across this plugin while researching about ways to improve website performance and to reduce bandwidth back in the old days when I was still on shared hosting (I am now on 6 nodes of vps at vps.net yay!) Then recently, a link to CloudFlare showed up in the W3TC options panel, so I researched about this service, liked the idea behind it and signed up for that too.
So now I have a plugin and a web service that supposedly should speed up my site. But do they really? My site does seem fast but I want numbers to prove it. So last night, I decided to test my website using the page speed tester at Pingdom Tools and Google Labs.
First I had to revert my site to an un-optimized state, so I cleared all cache (plugin and CloudFlare), I deactivated Pingdom and W3TC, then ran the tests. Here are the results:
I guess 9 seconds load time for an un-optimized website is not too bad.
Next, I activated W3TC but instead of just accepting the default settings, I tweaked it further by specifying the css and js scripts to be minified. I also have an Amazon S3 account with CloudFront, so I added that into the CDN setting, and uploaded the files into the Amazon cloud. Then I cleared the plugin cache to make sure the tests will load from an uncached page and ran the tests again:
I must say I was hoping for more speed difference than mere 1.9 seconds but that was what I got from the test even after repeat testing.
Finally, I re-activated CloudFlare, but stopped before making the last test. I thought it might need some time for my minified scripts and cloud files to propagate across the globe, so I decided to go to sleep and do the test in the morning.
Ten hours later, I was back online tweaking my CloudFlare setup. On top of the usual setup, I activated the minify and CDNJS settings. So now I have W3TC minification and CloudFlare minification; Cloudfront CDN and Cloudflare CDN; how they all work together without breaking my site confounds even myself, but my website loads fine so I let it be.
Running the tests one last time yields these results:
A speed improvement from 9 secs un-optimized page to 4.1 secs, and a Google Page Speed Score of 93. Yay! So W3TC and CloudFlare together, do increase page speed.
My next goal is to see if I can improve the results further. Reading the suggestions from Google Labs, I think I can lighten the load some more by removing unnecessary page widgets (do I really need a Facebook Like box on the homepage?), or hosting external services in my server (e.g., replacing typekit with self-hosted webfonts and @font-face css). Will keep you posted on how that will turn out.