The Best Configurations for CloudFlare CDN

Amazon CloudFlare is one of the most popular CDNs, or content delivery networks. As of the time of the writing CloudFlare offers a free plan which is more than enough for most webmasters.

I am using CloudFlare for one of my websites: www.mensfashionforless.com. I don't update this website very often. Therefore I decided to cache my content in the CDN for a year. When I do an update I'll simply invalidate the cache in the CDN.

I'd like to share with you my CloudFlare settings so you'll get an idea of what settings you should use for your website.

If you use Google PageSpeed Service read my post on The Best Settings For Using Google PageSpeed Service.
Step 1: Make sure your web server is responding with the correct headers
I am using NGINX as my web server. In the Nginx server configuration file I include a line 'expires 1y;' which basically injects the following HTTP headers in the response:

Cache-Control:max-age=31536000 # in seconds
Expires:Fri, 02 May 2014 03:33:38 GMT # one year from the current time
If adding 'expires 1y;' does not work read my post on Why is Nginx Expires Directive Not Working?
If you use Apache 2.2.21 you can put the following lines in your httpd.conf:

LoadModule headers_module modules/mod_headers.so
Header set Cache-Control "max-age=31536000"
Header set Expires "Fri, 02 May 2014 03:33:38 GMT"
Header unset Pragma
Questions?

Step 2: Add a page rule in CloudFlare
By default CloudFlare only caches static resources including images, CSS, Javascript. I'd like to add a page rule specifying exactly what to cache. I created a page rule with URL pattern set to the following:

http://*.mensfashionforless.com/*
And I set the rules to be the following:

Custom caching -> Cache everything
Edge cache expire TTL -> Respect all existing headers
Browser cache expire TTL -> 30 minutes
Always Online -> On
Apps -> On
Performance -> On
Rocket Loader -> Off
Security -> On
Since we set 'Edge cache expire TTL' to 'Respect all existing headers' CloudFlare will cache my pages for one year.

On the other hand, when you use a browser to navigate to any of those pages you'll see 'Cache-Control:max-age=1800' in the response HTTP header.

Let's say the browser's cache expires. The browser will attempt to grab the latest copy of the page and CloudFlare will immediately return the copy in its own cache unless its own cache is expired, in which case CloudFlare will grab the latest copy of the page from your origin server.

If you think about this behavior you'd know this is to your advantage. Client browser has a small TTL which means it almost always grabs fresh content from CloudFlare, and CloudFlare will not disturb your origin server unless its cache is expired.

This essentially means you are putting the workload on the CDN which is what a CDN is good for.
If I update my site I'll simply invalidate the caches at CloudFlare.

If you have any questions let me know and I will do my best to help you!