Boost your WordPress blog: W3 Total Cache + CloudFlare

 Version française disponible

A WordPress blogger has a tendency to install many plugins on his/her blog in order to add functionality and some interactivity. Read WordPress plugins of CarmaBlog if you are not convinced. Over time, the blog becomes slow and longer to load. I think I got to the point I just had to do something…

The site GTmetrix is able to calculate the performance of any website by assigning an overall grade and provides a detailed and useful report to help you optimize and improve your rating. The goal is to get a decent score, I would say between 75 and 85%, which corresponds to a rating between B and C. For CarmaBlog, the result was not very glorious with a rating of 60% and an overall grade D, the loading time of the home page (i.e. 3 articles) was about 6-7 seconds, it was just ok.

A cache management plugin: W3 Total Cache

At the end of the year, I decided to tackle this problem by installing a WordPress plugin to add some caching features and speed up the blog. For those who don’t know, a cache is a place (usually some disk space directly on the server) where pre-computed pages are stored. The server displays these pages directly instead of recalculating the original page every time. This process significantly improves the performance. But note that you have to clear the cache if you modify a page, otherwise you won’t see your changes. To be honest, at the beginning I was a bit afraid of breaking my site, but the poor grade of GTmetrix gives me some strength to do it.

I finally choose the W3 Total Cache plugin which is very popular. My choice was somewhat arbitrary, depending on the number of users and also the ratings pretty good. For this kind of plugin, the configuration is the most important and probably the trickiest part. You have to go step by step and be patient… The best way to break everything is to activate all optimizations simultaneously and see the final result (that’s also a good option if you like taking risks…).

When I was going through the configuration, I realized that W3 Total Cache was supporting plugins, including plugins for Feedburner and WordPress SEO. A good thing as I use both of them.

Some manual image optimizations

Once the cache management was set up and properly configured, I noticed a slightly better performance, but that was not transcendent. GTmetrix also provides many indicators to help you improve the performance, here are the two manual things I realized:

• Optimize images. GTmetrix provides optimized images you can download and use to replace your old ones. You can easily save 50% space while preserving the quality… Impressive! Imagine the gain when you are handling a couple of pictures of 200-300 kb each. Also, I suggest that you bookmark this site: TinyPNG, definitely a valuable help for your next images. This optimization is particularly important for the common images including in the header, footer and sidebars… as they will be downloaded for sure by your visitors.
• Define dimensions on images. Attributes width and height on img tags. We usually ignore them, but they prevent the browser to do the calculation for you and therefore it will increase the performance. In addition, the space occupied by the images is already set so you’ll avoid some annoying page or scrollbar moves (if you didn’t understand, trust me that’s something positive).

These are the two major optimizations that I had to do manually. W3 Total Cache handles the rest automatically.

A free CDN: CloudFlare

Second step, I see the possibility of coupling CloudFlare with W3 Total Cache through an internal plugin. I take a look at CloudFlare. In fact, I had already heard of it, but that was all.

Good news, they had a free plan and there are no ads or specific limitations (at least for a personal blog like mine). But what is it actually? CloudFlare acts as an interface between the visitor and your host (1and1 in my case) and serves as a CDN (Content Delivery Network). It’s all Greek to me, but it seems to have a great impact on the perfs and GTMetrix advised me to use a CDN so… Unfortunately, there is some DNS reconfiguration to do, brrr that is scary. I’m not specialized in networking, but the DNS (Domain Name System) is like a directory, from the domain name, it matches the IP address of the server to reach. Changing of DNS is like changing of address, and if the move goes wrong, you are no longer accessible. After some thinking, I decided to continue, it is better to break everything during the festive season when the traffic on my site is quite low.

So I create my CloudFlare account, I add the site CarmaBlog, I leave the default settings for most of the options. I choose a fairly low security profile (anyway, it could hardly be worse than before). For the performance profile, I choose “CDN only” as W3 Total Cache will handle most of the optimizations, and conflict is the last thing I want to see (be reasonable). The setup wizard is very nice, especially when you are a beginner. Then comes up the DNS configuration, CloudFlare asks me to update my DNS settings from my 1and1 account… Oops, let’s move on to something more serious!

This is the touchy part as your website can become completely unavailable in case of some misconfiguration. I feverishly logged in to my 1and1 account, select the domain config, there are a lot of warning messages like “Are you aware of what you do?”. I am not convinced myself, but I click “yes” then I fill in the fields to point to the two new DNS provided by CloudFlare. This DNS change can take between 1h and 48h. It is all about network configuration, far beyond my skills, so I confirm my choice. At the same time, I enable the CloudFlare plugin in W3 Total Cache, and establish the link with my CloudFlare account by filling in a couple of fields… It is already late, so I go to bed.

The next morning, one of the first things I do was to go on the blog. Phew, it was still available. I already noticed some speed (perhaps psychological, we’ll see in the conclusion…). I logged in to my CloudFlare account and… Victory! CarmaBlog is well configured, the DNS reconfiguration went well, now the traffic goes through CloudFlare. CloudFlare provides a dashboard showing visits, threats (yes!), the bandwidth saved, etc. Then I ask myself if going through a third party provider was really a good choice? What will happen if the CloudFlare DNS is down? But at the end, a DNS server is rarely down and if it falls, there is always the backup to take over. And the problem might have happened with 1and1 DNS, so there should be no worries! In the worst case, I can always switch back to the previous settings and use the 1and1 DNS again within 24 hours.

Conclusion

I go through the blog to make sure everything works, I turn on private browsing to be sure that the browser is not using cached data. So far so good, it is fast and fluid, really good news. I submit the site again on GTmetrix, and there you go… The performance is much better. I have more than 80% and an overall grade B. A is available from 90%, it is difficult to achieve such a score if your blog is using a lot of plugins and a quite complex theme.

After all these optimizations, the page size go down from 1.2 mb to 800 kb (this obviously depends on the pictures, but I made the comparison on the same page to give me a good idea), I got 33% improvement. Meanwhile, the number of requests falls from over 100 to around 65 (thanks to the CSS and JS combination among other things). I had already noticed a faster loading time with W3 Total Cache, but having CloudFlare on top, I went from 6-7 seconds to below 3 seconds (over 50% gain).

The combo W3 Total Cache + CloudFlare really works great! This article is more like a feedback than a tutorial, but you will find all the resources needed on the Internet if you decide to do this change.

Not only my host should be happy, because most of the bandwidth is now rerouted to the CloudFlare servers (much more powerful architecture), but my visitors too, as the page is displaying much quickly than before. Today, the only question I ask to myself is: why did I not do it earlier?