How To Speed Up Your Website With CloudFlare

What is Cloudflare?

Cloudflare is a web service that makes websites faster and more secure. It offers a CDN (content delivery network) service, combined with optimization, security & DNS record management features.

Why should I setup Cloudflare on my website?

Cloudflare will make your website load significantly faster for free!

How to setup Cloudflare

  1. Create a free Cloudflare account
  2. Add your website
    Add Website To Cloudflare
  3. Wait for Cloudflare to scan your DNS records
    Wait For Cloudflare To Scan Your Domain's Current DNS Records
  4. Continue Setup
    Continue Cloudflare Setup
  5. Make sure Cloudflare detected all of your current DNS records by checking them (mine were managed on Namecheap in this example), if not add the missing ones
    Current DNS Records on NameCheap
  6. Once you have verified all your DNS records are in Cloudflare, click I’ve added all missing records, continue
    Cloudflare Detected DNS Records
  7. Choose the Free plan (unless of course for some reason you need a premium plan), for Performance choose “CDN + full optimizations (bleeding edge speed)” and leave the other settings as is, like in the following screenshot:
    Continue Settings
  8. Click Continue
  9. Update your name servers to point to Cloudflare
    Update Your Name Servers To Point To Cloudflare
  10. In Namecheap I do this by clicking on “Transfer DNS to Webhost”, the entering Cloudflare’s name servers and clicking “Save Changes”
    NameCheap Transfer DNS to Webhost
  11. Now in Cloudflare click “I’ve updated my nameservers, continue”
  12. That’s it, you’re done! Now just make sure that when your site switches over to Cloudflare your site still functions properly. If it has any issues you tweak the performance settings until you get your site working properly again. You want to find the combination of settings that maximizes performance, but doesn’t cause any issues with your website’s functionality.

NOTE: Since your website is now using a CDN, you’ll need to click on “Purge cache” whenever you make updates to your images, CSS or JavaScript files if you want the updates to be reflected on your website right away. Cloudflare has an awesome feature called “Development Mode” which you can turn on and it will temporarily disable caching so you don’t have to constantly Purge the cache when you’re making a lot of changes to your website. It will even automatically switch off after three hours if you forget to turn it back off when you’re done working on your website.

Cloudflare Page cache & Development mode options

5 COMMENTS

    • I’ve found that you may want to disable the Rocket Loader feature. While it increases technical load time, on many sites utilizing a lot of JavaScript it slows down the user load time significantly, which isn’t worth the trade off.

  1. Thanks for the tip and the great step-by-step guide! I’ll give it a go. Have you found any other things to fine-tune since the last comment or discovered any cons (like privacy or google analytics issues)?

LEAVE A REPLY

Please enter your comment!
Please enter your name here