Cloudflare CDN scripts and caching

Quick short post – I have been using Cloudflare as my CDN front to my website for a few weeks now. Through this time, I’ve learned quite a bit about CDNs. And a couple of things about Cloudflare that I should point out to other developers/Cloudflare users so they won’t fall into the same trap as me.

Purge cache

Figure 1. Screenshot of Purge cache section of Purge cache page.

Always purge your Cloudflare cache after you make any changes to your website. I’m not sure when/how often the cache gets updated but I found it best to – after you’re happy with all the changes; turn off development mode if you have it turned on, then purge the cache. Otherwise, just purge the cache as a final step of the update process.

Disable Rocket Loader for specific scripts

Figure 2. Screenshot of HTML markup using data-cfasync attribute.

If you have rocket loader turned on and have script elements inside your body element. You will no doubt, notice that all these script elements get stripped away. Your first thought/guess would be html minification setting. Nope, that’s not the cause. It’s rocket loader’s nifty work. The work around is to add the following attribute to the script elements ‘data-cfasync=”false”‘. What this does is tell rocket loader to ignore the script element and leave it alone. This works for both script elements that are just links/references to external javascript files and script elements that contain in-line javascript code.