Cloudflare CDN for Beginners


Updated: 3/20/2019

We use Cloudflare for almost every site we implement, in order to take advantage of the additional performance, security, reliability, and analytics it provides.

Cloudflare CDN Initial Setup

  1. Sign up for a Cloudflare account
  2. Enter your domain name in the Site field and click Add site
  3. Click Next, choose the free plan, click Confirm plan, and click Confirm
  4. After the scan completes, click Continue
  5. Open a new browser tab and log into your current DNS hosting account
  6. Edit your DNS settings for the same domain you’re currently adding to Cloudflare
  7. Compare the discovered DNS records on the Cloudflare side, to the DNS records on the DNS Hosting account side
  8. Add any missing DNS records on the Cloudflare side or just click Continue
  9. On the current DNS Hosting account side, change the Nameservers to match what Cloudflare provides and click Continue.  (Note:  Although it rarely does, it may take up to 24 hours for the DNS to propagate across the web. Once DNS has fully-propagated, Cloudflare will show Status: Active. Proceed on once the propagation has completed.)
  10. Cloudflare > Overview Advanced (link) > Pause Website  (Note: With the website still in development, we want to keep the optimization portion of Cloudflare turned OFF.)
  11. Cloudflare > DNS > Change the A records so that they point to website’s server IP address
  12. Cloudflare > Crypto SSL > Change the encryption level to Full (Note: When you go to implement a non-custom SSL certificate like the free Let’s Encrypt certificate, Full is the appropriate Crypto choice, compared to say Full Strict. This is because Full Strict has an additinal handshake that’s not required.)

SSL Certificate

Most reputable website hosting vendors provide a Let’s Encrypt SSL certificate that’s free and simple to set up. Assuming that you’re using one of these website hosting vendors, proceed with adding your SSL certificate. If your SSL certificate fails to install, this most likely means that DNS has not fully propagated. You can either give it more time and try again, or contact your website hosting vendor for assistance.

Cloudflare Optimization

We currently use the settings below, but we’re constantly testing for the best optimization, so please check back in every now and then to get the latest setting recommendations. If a setting is not specifically mentioned, assume we are just using the defaults.

Crypto

  • SSL: Full
  • Always use HTTPS: On
  • HTTP Strict Transport Security (HSTS): Enabled/Configured
    • Status: On
    • Max-Age: 6 months (Recommended)
    • Include subdomains: On
    • Preload: On
  • Automatic HTTPS Rewrites: On (Note: You may already have this enabled in your .htaccess file. We found a slightly better performance increase when using Cloudflare to rewrite HTTPS. In the end, just make sure not to duplicate rewriting.)

Speed

  • Auto Minify: All
  • Rocket Loader: Enabled (Note: This may cause issues with a website’s JavaScript. Be sure to throughly test your website and if any issues are discovered, work with the vendor (theme support, plugin support, etc. to find ways to exclude particular scripts from Rocket Loader.)

Caching

  • Caching Level: Standard
  • Browser Cache Expiration: Respect Existing Headers

Page Rules

Cloudflare’s free tier allows for up to 3 page rules, which can be used to further secure and/or optimize a website. Here are the page rules we use for any implementations on this tier.

  1. *yourwebsite[dot]com/<obscuretext>* (Note: We use the WPS Hide Login plugin to rename the WordPress login URL, making the wp-admin directory inaccessible, as well as the wp-login.php page. A side benefit to using this plugin is that it essentially combines wp-admin and wp-login, which allows us to use only one Page Rule to secure the WordPress login. When you set up this plugin, you will enter your own text that will replace the login URL, and this text will be used for the <obscuretext> entry shown in the Page Rule. For example, your rule could be *yourwebsite[dot]com/securelogin*.
    • Browser Integrity Check: On
    • Security Level: High
    • Cache Level: Bypass
    • Disable Apps
    • Disable Performance
  2. *yourwebsite[dot]com/wp-includes*
    • Browser Cache TTL: 4 Days
    • Cache Level: Cache Everything
    • Edge Cache TTL: 1 Month
  3. *yourwebsite[dot]com/wp-contents*
    • Browser Cache TTL: 4 Days
    • Cache Level: Cache Everything
    • Edge Cache TTL: 1 Month

Scrape Shield

  • Email Address Obfuscation: Enabled
  • Server-side Excludes: Enabled
  • Hotlink Protection: Enabled

Verify Cloudflare Caching

  1. Follow the GTmetrix section of our WordPress Optimization tutorial
  2. When the results come back, click on the Waterfall tab
  3. Expand the first item on the list which should be your domain name
  4. Click on the Response tab

If Cloudflare is caching this resource, you will see a result of CF-Cache-Status: HIT. (Note: For more information about the various Cloudflare caching codes (e.g. HIT, MISS, EXPIRED, etc.), you can view their support article.)

Let's empower others. Share the knowledge.

Share on twitter
Share on facebook
Share on linkedin