We had a few websites hammered by big traffic recently, so we started playing around with CDNs like Amazon S3 and the like. After getting some pretty good gains from using S3 for video, we thought we would turn to our own website to see if we could increase the load times here.
After getting achingly slow reports from Google Webmaster tools, we realised we could spare a few hours to play around with WordPress to make it go faster. After what seemed like forever hacking around with the .htaccess file and WP Super Cache, we realised that, you know what, there has to be a better way Kevin.
So, like all good scientists, we benchmarked ourselves over at Load Impact. Below is the report we got from them.
Total loading time: 6.25 s
Total downloaded data: 304.81 KiB
Effective compression ratio: 26.3405%
This was running wordpress with WP Super Cache, with all the settings set to producing and serving a compressed cache and Apache is set to compress files too. We also had a few .htaccess lines to increase the speed too. As you can see, the performance is pretty average. One thing we noticed straight away is that, because we use a lot of images to make our website look good, they take up the lions share of the load. We also noticed that, while there was some compression of the pages, a lot of the files like the css and js spent too much of their time in the queue at the wrong place. That is pretty much why we searched for a better Cache plug in for WordPress, and why we found W3 Total Cache. We installed the plug in, and ran another report, and came up with these results.
Total loading time: 5.64 s
Total downloaded data: 308.54 KiB
Effective compression ratio: 27.7343%
The benefits of W3TC
Right away we improved performance by 10%, just by installing W3TC. No idea why this is, and it could be a fluke, but all I can say is; its science, don’t argue.There are a couple of really great reasons you should switch to W3TC;
- It has Minify built in and does it really well
- It handles CDNs really well
- It automatically adds expires headers etc
- It is easier to use and better laid out than WP Super Cache
Overall we found W3TC really easy to use and it offered more options than WP Super Cache. It seemed to improve the performance of the website straight out of the box.
Next we moved on to improving the Javascript speed. Looking at the load report, we could also see that jQuery was taking a long time to load as well as the images. So we reoptimised the major images, like our logo which loads on every page. We also installed the “Use Google Libraries“ plug in so that jQuery would come from Google.
You can see in the graph above the difference using jQuery from Google makes. The 70kb jQuery from Google loads about 25% faster than a 1.6kb file loaded from our server. Overall, using this method, we saved another 10%. If you do nothing else to speed up your website, it is worth looking into this plugin.
Total loading time: 5.26 s
Total downloaded data: 248.92 KiB
Effective compression ratio: 18.3117%
Next we started tinkering with the settings in W3TC, which is where this plug in really comes into its own. It comes with its own “minify” where you can specify for it to combine js and CSS and remove whitespace and line breaks. Again we saved another 5% in load time by just tweaking that.
Total loading time: 4.94 s
Total downloaded data: 250.51 KiB
Effective compression ratio: 16.7327%
Overall we ended up saving over 20% in load time just by tweaking some settings in WordPress and compressing images better. Next up I think I will move some of the larger files onto Amazon s3 to see what we can get.
Very interssting results. A 10% page load speed increase is a significant result. I think I might give W3 Total Cache a go too. One of the things That I do is host my mail header image / logo with Amazone S3 to try to ensure that at least the top of my site loads as quickly as possible.
10% is really significant. Thanks for the info