What CloudFlare and MaxCDN did for my page load times

A while ago I decided to test some services that could speed up my site worldwide. I took some steps that decreased my page load time immediately:

  • Installed the W3 Total Cache plugin (I'm a WordPress user) to set cache headers, minify CSS and JS, etc.
  • Installed the Smush.it plugin to optimize my images without lossing quality (lossless)
  • Transferred my site to a new hosting provider/solution

This first move was already a good one, page load times decreased and my site felt fast. But, as I could see in Google Analytics the page load times outside the Netherlands (where my hosting provider hosts) weren't as good as I hoped. So I took the next step by adding a CDN to my site. This was the situation before any optimization:

situation1

MaxCDN

Then I added a CDN to handle all of my files: blog images, theme-images, etc. Any user from anywhere in the world would only have to download 1 HTML file from the Netherlands, and the rest (CSS, JS, PNG, JPG, GIF, etc) from a MaxCDN server somewhere near them:

situation2

The setup was pretty easy, just create a subdomain and point it at the MaxCDN servers. And if a visitor for example wants to see a certain image, MaxCDN downloads it automatically from my main domain onto their servers and make it available on the subdomain. That's called mirroring and is super easy: I only have to update my blog without uploading stuff to my CDN. And why I used MaxCDN? They have a huge network of servers around the world, they're cheap, easy to implement and fast.

CloudFlare

A few weeks ago I took the next step by adding CloudFlare to the configuration:

situation3

They also have a simple setup: create an account, point your domains DNS to them and you're up and running. They do exactly the same as the CDN only specialized for HTML-pages in stead of files. They minify your source code, set the best caching headers, etc. So right now, if someone from the other side of the world (that would be Australia/New Zealand) hits my site it gets the HTML from a nearby CloudFlare server and the files from a nearby MaxCDN server.

The Results

I didn't want to write a post about all the configuration steps, perhaps somewhere in the future. But I do want to share the results:

newnumbers

Pretty awesome numbers right. Every single one of them improved. And have a look at the page load times buckets:

newnumbersbuckets

A lot of people get their pages served in under a second! And with CloudFlare being free the cost/benefit ratio is almost infinite ;)

Update

A few days later I was happy I implemented CloudFlare as I was DDOS'ed by someone. I didn't had the DDOS protection but I was able to identify that all requests had a common denominator in them, so I created a "page rule" and forwarded all those hits to google.com so they never reached my own server.

And an addition for people who use a webanalytics solution that thinks that all visits come from San Francisco (hometown CloudFlare). You should probably exclude that script (in my case it was Woopra). That can be done by adding an extra attribute to the tracking script:

<script data-cfasync="false">

And as of today Woopra is seeing my visitors coming from all over the world again.

Click to activate social bookmarks

 
  • http://pencoyd.com/clock/ John B. Roberts

    Nice writeup, with numbers.

    I work at CloudFlare, so there's no confusion.

    Curious: why not use CloudFlare for the static asset delivery, too? We are a CDN as well, and automatically cache and deliver images, CSS, and JS, etc., if those are going through our network. We don't cache HTML by default, although you may do so with Page Rules.

    • http://andrescholten.net/ André Scholten

      Good question, I wasn't looking for a CDN, but I like the idea. There's a problem though: you don't offer a mirroring subdomain? So that I can host some files on a subdomain like I do now with the newcdn subdomain.

      • http://pencoyd.com/clock/ John B. Roberts

        Not sure what you mean by a "mirroring subdomain"?

        More details via support.cloudflare.com would be great.

        • http://andrescholten.net/ André Scholten
        • Eddie

          Thanks, Andre. This is by far the best explanation I've found of the advantages and mechanics of using both services together.

          But I am not confused as to whether I should use CloudFlare alone or CloudFlare+MaxCDN. Have you ran those numbers again using only the former option?

          Additionally, have you looked at the possibility of a conflict similar to the one described here (though this is NetDNA not MaxCDN) ?http://support.netdna.com/howto/use-cdn-with-cloudflare/

        • http://andrescholten.net/ André Scholten

          The easiest way is to use CF alone, it will provide caching of your static assets just as MaxCDN does and 1 solution is better manageable.

        • http://Techderp.net/ Moscato SugarRush

          Not only is it more managable, it's also cheaper!

    • Willem-Siebe

      Hi André, John is telling that they don't cache HTML by default, what did you do to make it work and why you choose CloudFlare for this? I'm also curious where you have your sites hosted? I now have my own VPS at VPS.net, but that's actually to difficult for me.

      Kind regards,

      Willem

      • http://andrescholten.net/ André Scholten

        Hi Willem. You can create a page rule to turn HTML caching on. I decided to do that with a 'time-to-live' of 30 minutes. That way CloudFlare will download 1 fresh version per 30 minutes and serve it from their own servers which are faster and worldwide located. My own server is a dedicated server I hire with some friends.

  • http://www.lattimore.id.au/ Alistair Lattimore

    I can confirm that your site does actually feel fast from Australia. I haven't timed it but I think that pages are fully loaded in under 2 seconds and some of them would be closer to 1 second which is absolutely fantastic!

    • http://andrescholten.net/ André Scholten

      Alistair, it's always good to have some real user testing, thanks for that.

  • jskooij

    Do i still need a vps or dedicared server when i use cdn and cloudfront? Can i go back to a simple shared hosting.

    • http://andrescholten.net/ André Scholten

      It depends, Cloudflare doesn't cache your HTML pages by default. So your server must be able to handle the pageviews quickly. But if you implement caching software on your server (Varnish, W3 Total cache WordPress plugin) it doesn't need to generate new pages for all requests, it can simply send back the pregenerated HTML. This only works if your site is flat and not dynamic (with changing items like shopping baskets, etc).

      Because my site isn't really dynamic, I set up Cloudflare to also cache the HTML for 30 minutes, And in that case a shared hosting account would be enough.

  • dtigs

    Excellent post. I've done a similar setup w3tc, smushit, maxcdn but having a lot of resistance implementing cloudflare because it requires changing my name servers and might need to do some additional sensitive adjustments as well on my MAXcdn account. How did you implement cloduflare?

    • http://www.gadgetgoeroe.nl/ Roeland Mighawry

      I'm using Cloudflare with W3TC now and I achieve (much) better results now than with Maxcdn and W3TC. Perhaps due some settings but I've already spent hours in tweaking the setup so my goal is achieved :)

      • Riya Sengar

        Hi Roeland

        Could you please share your optimized settings for w3tc with cloudflare , I will verify with my site settings. Thanks

  • Mrdjhiphop23

    Yeah, good job! It loads lightning quick! almost as fast as i can blink haha

  • http://www.gadgetgoeroe.nl/ Roeland Mighawry

    Hi Andre,

    Interessant artikel en ik ben zelf aan de slag gegaan met beide partijen en de genoemde plugins. Ik krijg echter problemen met half geladen onderdelen op mijn site.

    Het zou ons denk ik erg helpen als je een how-to zou schrijven en ik ben ervan overtuigd dat die het heel goed zou doen! Wie wil nu niet dezelfde mooie statistieken als jij? :)

    gr
    Roeland

  • zox

    As far as i can see the load time for this very page is 0.8 sec. I bet it would be around 1.2 sec or even less with just W3TC and without any CDN.

  • http://www.stylishandtrendy.com/ Dev @ Women Magazine

    Well, your site seems fast as it loads under 4 seconds. Tested on webpagetest and pingdom both.

  • Kevin

    Just implemented. Waiting for nameservers to finnish up. Wondering about the results!

  • iTechnician

    Every time my developer works on our website I dont seem to see the update immediately on my end? There is always a few days delay...

    He recently developed a part of the site in AJAX however the AJAX system he developed works fine for him but doesnt seem to function on my end. I am reading online that other people have issues with AJAX and CloudFlare...

    I believe this to be a caching issue on CloudFlares side... Does anyone else have this problem? More importantly does anyone have a solution?

    • JamieLovelace

      You can go on to your account on CloudFlare and turn on developer mode under your website - this stops caching for 3 hours and then turns off :) you can easily turn it on again if you need to

  • http://AlainHernandez.net/ Alain Hernandez

    Awesome Post about the two services. May I ask in your opinion and experience. Which of the two is best CloudFlare or MAX CDN? Or PErhaps both?

    • http://andrescholten.net/ André Scholten

      Difficult to say because they both offer other solutions. The thing they have in common is the CDN part. And I haven't compared those two.

      • http://AlainHernandez.net/ Alain Hernandez

        I hard if we implement both services the performance is better so that what I will do

  • Piperis

    Great post. Would be great to see exactly the settings applied here so that we can get the two services playing nicely with eachother...

  • Erik

    Hi,

    I have implemented MaxCDN in addtion to Free Cloudflare plan.
    Now I am a bit lost.

    Looking at MaxCDN dashboard, I noticed that I have 0 cache hits. That means that MaxCDN is not serving files.

    I also have W3TC.
    What Am i missing?

  • Da Wit One

    I know this might be a quite old thread but I hope someone can help. Cloudfare seems to somehow affect my Adsense earnings and sometimes my search visiblity. Is it an illusion at my end or is there something I can do to beat this?

  • YouMotivation

    I just did this for my other website I'm currently launching, and yes, I believe it did help. I did an analysis of CF only, CF + MaxCDN, MaxCDN only, and I discovered that combining both does have extra benefits. I suggest you do your own tests/experiments to find out if this is true for you as well.

  • Smitherz

    Interesting post. One question: what would you do if you're to set up a network of 7 websites? What would be a good solution?