Agility, Java programming, New technologies and more…
  • rss
  • Home
  • Management
  • Agile Programming
  • Technology
  • Linux
  • Event
  • Android app
  • Contact
  • About the author
  • English
  • Francais

Boost your WordPress blog: W3 Total Cache + CloudFlare

Fabian Piau | Sunday December 28th, 2014 - 06:00 PM
  • Print
  • Twitter
  • LinkedIn
  • Facebook
  • Pocket

 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…).

W3 Total Cache logo

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.

CloudFlare logo

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.

Go go go!

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?

Related posts

Mobile devicesA mobile version of your WordPress Blog WordPressWordPress plugins of CarmaBlog Clean browser cacheCSS and Javascript files play hide and seek in browsers’ cache wordpress-hackerTips to make your WordPress website secure
Comments
4 Comments »
Categories
Technology
Tags
cache, cloudflare, dns, performance, w3 total cache, wordpress
Comments rss Comments rss
Page 1 of 11
Download CarmaBlog App

RSS feeds

  • RSS feed RSS - Posts
  • RSS feed RSS - Comments

Most viewed posts

  • Changing the language in Firefox - 115,578 views
  • Using Google Forms / Drive / Docs to create an online survey - 63,166 views
  • FAQ – Online survey with Google Forms / Drive / Docs - 52,403 views
  • Customizing Gnome 3 (Shell) - 30,017 views
  • The meaning of URL, URI, URN - 17,251 views
  • Java EE & CDI vs. Spring - 15,442 views
  • Open Street Map, better map than Google Maps? - 14,648 views
  • Comparing NoSQL: Couchbase & MongoDB - 14,082 views
  • Firefox Nightly, Aurora, Beta, Desktop, Mobile, ESR & Co. - 13,087 views
  • API, REST, JSON, XML, HTTP, URI… What language do you speak? - 12,718 views

Recent Comments

  • Pauline on FAQ – Online survey with Google Forms / Drive / DocsMerci Fabian, mais le but étant que nos clients pu…
  • Fabian Piau on FAQ – Online survey with Google Forms / Drive / DocsProbablement mais ces options sont en général paya…
  • Pauline on FAQ – Online survey with Google Forms / Drive / DocsBonjour Fabian, Merci de votre retour, oui j'avais…
  • Fabian Piau on FAQ – Online survey with Google Forms / Drive / DocsBonjour Pauline, ce n'est pas possible de créer un…
  • Pauline on FAQ – Online survey with Google Forms / Drive / DocsBonjour, Je suis en train de créer un Google Forms…

Recent posts

  • How to write a blog post? At least my way! - 3 months and 2 weeks ago
  • Bot Attacks: You are not alone… - 1 year and 11 months ago
  • Flagger – Monitor your Canary deployments with Grafana - 2 years and 8 months ago
  • Flagger – Canary deployments on Kubernetes - 2 years and 10 months ago
  • Flagger – Get Started with Istio and Kubernetes - 2 years and 10 months ago
  • Expedia CoderDojo in London - 3 years and 7 months ago
  • Volunteering at Devoxx4Kids - 3 years and 10 months ago
  • A Java 11 migration successful story - 4 years and 2 months ago
  • Tips to make your WordPress website secure - 4 years and 5 months ago
  • Devoxx UK 2018 – Day 2 - 4 years and 9 months ago
  • Devoxx UK 2018 – Day 1 - 4 years and 9 months ago
  • Wise, Revolut and Monzo, a small revolution for travelers and expats - 5 years and 1 month ago
  • Autocomplete for Git - 5 years and 10 months ago
  • Swagger, the automated API documentation - 6 years and 2 weeks ago
  • Microservices architecture – Best practices - 6 years and 5 months ago
Buy me a coffee

Language

  • Français
  • English

Follow me!

Follow me on Linkedin
Follow me on Twitter
Follow me on Stackoverflow
Follow me on Github
Follow me on Rss
Link to my Contact

Email subscription

Enter your email address to receive notifications of new posts.

Tags

.net agile agility android bash best practices blog cache cloud computing conference continuous integration css developer devoxx docker eclipse extreme programming firefox flagger google helm hibernate istio java job jug kubernetes london mobile computing overview performance plugin programmer script security sharing society spring tdd test tool ubuntu windows wordpress

Links

  • Blog Ippon Technologies
  • Blog Publicis Sapient
  • Blog Zenika
  • Classpert
  • CommitStrip
  • Coursera
  • Le Touilleur Express
  • Les Cast Codeurs Podcast
  • OCTO talks !
  • The Twelve-Factor App

Categories

  • Event (15)
  • Linux (3)
  • Management (8)
  • Agile programming (29)
  • Technology (45)

Archives

  • December 2022 (1)
  • April 2021 (1)
  • June 2020 (1)
  • May 2020 (2)
  • July 2019 (1)
  • May 2019 (1)
  • December 2018 (1)
  • October 2018 (1)
  • June 2018 (1)
  • May 2018 (1)
  • January 2018 (1)
  • May 2017 (1)
  • March 2017 (1)
  • October 2016 (1)
  • April 2016 (2)
  • March 2016 (1)
  • November 2015 (1)
  • May 2015 (1)
  • February 2015 (1)
  • December 2014 (1)
  • November 2014 (1)
  • September 2014 (2)
  • August 2014 (1)
  • July 2014 (2)
  • June 2014 (1)
  • April 2014 (1)
  • March 2014 (1)
  • February 2014 (2)
  • January 2014 (1)
  • December 2013 (1)
  • November 2013 (1)
  • October 2013 (3)
  • September 2013 (5)
  • July 2013 (1)
  • June 2013 (1)
  • May 2013 (1)
  • April 2013 (1)
  • March 2013 (2)
  • February 2013 (1)
  • January 2013 (2)
  • December 2012 (2)
  • October 2012 (1)
  • September 2012 (1)
  • July 2012 (1)
  • May 2012 (1)
  • April 2012 (1)
  • March 2012 (1)
  • February 2012 (1)
  • January 2012 (2)
  • December 2011 (1)
  • November 2011 (2)
  • October 2011 (2)
  • September 2011 (1)
  • July 2011 (1)
  • June 2011 (2)
  • April 2011 (1)
  • March 2011 (1)
  • February 2011 (1)
  • January 2011 (2)
  • November 2010 (2)
  • September 2010 (1)
  • August 2010 (1)
  • July 2010 (1)
  • June 2010 (1)
  • May 2010 (1)
  • April 2010 (1)
  • March 2010 (1)
  • February 2010 (1)
  • December 2009 (1)
  • November 2009 (1)
  • October 2009 (2)
  • September 2009 (2)
  • August 2009 (3)
  • July 2009 (1)
  • June 2009 (2)
Follow me on Twitter
Follow me on Linkedin
Follow me on Stackoverflow
Follow me on Rss
Link to my Contact
Follow me on Github
 
Fabian Piau | © 2009 - 2023
All Rights Reserved | Top ↑