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