How to get the most out of CloudFlare

What are the benefits of using CloudFlare?

Quite a few things, all of them being free to use:

• your website is now using one of the fastest DNS servers
• your website is reachable via https://yourdomain.com
• your website is blazing-fast and cached on servers all over the world
• your website is resilient to DDoS-attacks and other spikes of traffic

Using CloudFlare: performance comparison before and after

Unfortunately blogs hosted by Blogger are designed in a way that makes it impossible for CloudFlare to fully optimize it: static resources (JavaScript, images, etc) are hosted on dozens of different domains, but CloudFlare can only optimize content hosted on your own domain. There's still a few things CloudFlare can do, most importantly: delaying JavaScript until the page is loaded, therefore speeding up the time it takes to see content on your website.

Here's the raw data:

before enabling CloudFare - WebPagetest

after enabling CloudFlare - WebPagetest

before enabling CloudFlare - PageSpeed Insights

after enabling CloudFlare - PageSpeed Insights

How to configure CloudFlare?

1. Sign up at cloudflare.com
2. Follow CloudFlare setup
1. Add your domain
2. Make sure they imported all DNS-entries for your domain (about half of them missing in my case). Also make sure the "Status" of each entry is an orange cloud-icon. That means that all traffic is going through CloudFlare's server. Only if you enable this you'll benefit from the features offered by CloudFlare - otherwise it's just a plain DNS server.
   
3. Change nameserver at your domain registrar
3. Configure cloudflare
1. Default settings are mostly fine, I turned down "Security Level" to "Low" because I want to avoid false positives where some of my visitors have to enter a captcha before reading my blog...
   
2. Turn on "Auto Minify" for HTML, JS and CSS. There's almost no risk of breaking something, unless you're doing funky stuff in your JavaScript (which you shouldn't do anyway if that's the case).
   
3. Wait for the DNS changes to kick in (1-2 days), see if everything still works fine and then give "Rocket Loader" a try. Set it to "Automatic", force-reload your website and see if everything works as expected.
4. Create a "Page Rule" for "yourdomain.com/*" (e.g. "tomtasche.at/*") and set "Custom Caching" to "Cache everything"