How to Setup Free Cloudflare CDN for Wordpress (Tutorial)?

dailydose

#1

Cloudflare is a web peformance and Internet security company, founded in 2009 by Matthew Prince, Lee Holloway and Michelle Zatlyn.
cloudflare-logo

Brands who are using Cloudflare

… to name a few.

How Cloudflare works with a website?

Cloudflare provides fastest DNS services powerd by Anycast network, provides Web Application firewall and reverse proxy which filter malicious traffic and seve static content (CSS, JS, Images, etc) in the optimized way.

anycase%20cloudflare%20network%20map
Credit: © Cloudflare

With 151 Datacenters around the world, Cloudflare accelerate website performance by serving cached and optimized content from its nearest Datacenter to the visitors.

Who can use?
It is suitable for all kind of website. Don’t feel afraid, it is not going to screw your backend or change any path or content. You will have proper control on it what to cache or not.

Is it Free or Paid?
They have free as well as premium plan for the advanced feature. I have been user of both and very good experience with their services.

It greatly save bandwidth, reduce server load and serve static content in optimized way. They offer on-the-fly optimization for CSS, JS, Images optimization according to its plan.

How can I setup Cloudflare?

Sign up > Enter Domain > Choose Plan > Update NS

  1. Just sign up at Cloudflare.com. It’s free.

  2. Enter your domain name and click Add site button.
    enter-your-domain-name

  3. It will start scanning DNS records. Wait for 30 seconds, click Next.

  4. Choose Cloudflare Free Plan > Click on Confirm Plan

  5. DNS is like phone-book. In last step Cloudflare scanned all possible DNS records for your domain. If you everything is on the place, just click on continue.


    Hint: Organge means: Using DNS and Cloudflare CDN. Grey means: Using only DNS, not Cloudflare Proxy

  6. Login to your Domain registrar and replace existing nameservers with Cloudflare nameservers. This process involves almost no downtime for HTTP website. However, if your website uses HTTPS/SSL, it may goes down for few hours until DNS propagation is not completed. Because, Cloudflare automated Flexible SSL installation requires domain to point to the Cloudflare IP. It’s nothing new in case of Cloudflare, just a normal process. You need to keep patience for few hours.


    Since, I am already using Cloudflare nameservers for DNS purpose, it is showing CF nameserves even in from field. This image is only for representation.

  7. Until DNS is not propagated, you may see “DNS modification pending” at Overview page.

  8. Go for walk, come back later. You will see Active sign. :slight_smile:

  9. Now, here are some important menus, where you need to do settings. I will guide step-by-step.

  10. Overview: Tells summary about Cloudflare Account status, summary, subscription, etc.

  11. Analytics: You can check how much bandwidth you are saving, DNS queries counts, etc.

  12. DNS: The advantage of Cloudflare is fast updating DNS records. Secret? It set TTL just for 5 min. :stuck_out_tongue: Well, you can override it up to 1 day to cache DNS queries for longer time. I do.

  13. Crypto: From here, all settings are very important. Please take in note carefully.

  14. SSL: Full Strict (Recommended). Please note, it requires SSL at origin. Else, keep Flexible.

  1. Always HTTPS


    If your website uses HTTPS, you must enable this. After then, you don’t need to use Force HTTPS rule in the .htaccess file or using any plugin for the same. This setting is sufficient to force HTTPS at DNS level. It works faster in comparision to origin way of forcing HTTPS.

  2. HTTP Strict Transport Security (HSTS): If you commit to maintain always SSL for your website, you can enable this option to enhance security and performance.

  3. TLS: Keep enabled+0-RTT

  4. Automatic HTTPS Rewrite


    This sound similar as last option “Always HTTPS” but this is a bit different thing. Enabling this feature will fix mixed content error by modifying HTTP link to HTTPS. Must enable this feature.

  5. Let’s move forward to Firewall tab.
    firewall

  6. Security Level: Low.

  7. Challenge Passage: 30 Minutes

  8. Access rules: You don’t need to do anything here now. In future, if you see attack, you can use this option to restrict a IP, range, country.


    Pro tip: Getting attack from any country? Add JavaScript challenge for it as well as you can block it using .htaccess rule.

  9. Skipping Access tab.

  10. Move to Speed tab

  11. Enable Minify for HTML, CSS and JS. Warning: If you are using WP Super Cache or AdSense, please avoid minifying HTML.

  12. Brotli


    Enable it to get better compression than GZIP in supported browser. Brotli is a new effective lossless compression algorithm than gzip and deflate.

  13. Rocket Loader: It’s a feature by Cloudflare to load JavaScripts after full page loading. It can make JS rendering super slow. It’s harmful feature for AdSense users. Please don’t enable.

  14. Caching: My favourite tab. :stuck_out_tongue: Welcome!

  15. Purge Cache: Using this option you can clear cache. This process may take up to 30 seconds. If your Cloudflare setup is correct, you may not need to touch this option in most cases.

  16. Cache Level: Keep Standard.

  17. Browser cache expiration: Change default 4 hours to 8 Days at least. If you have own custom rule at origin via plugin or something that you want to maintain same then, you may keep “Respect Existing header”.

  18. Always online: Keep this on. This is a great feature which won’t disappoint your visitor if your site goes down, Cloudflare may serve a cached copy of your web page that would be helpful for visitor to get a kind of satisfaction.

  19. Development Mode: Doing some special changes on your site? Enable this feature to bypass Cloudflare at all. This works for a specific time-period. Your site will go in the DNS only mode.

  20. Page rules: Using page rule, you can have custom caching rule to bypass at some page, custom settings specified as per particular URL. This is a really great feature. I recommend using this feature for enhancing WordPress Login page security.

Moving forward to last step

  1. Scrape Shield: There is Hotlink protection feature. However, I wouldn’t not recommend it. Please do not enable it. It may block loading images for some website.

That’s all sufficient for using Cloudflare. However, there are something you may to like to get answer. Here’s the FAQs.

FAQs

  • How can I use just DNS only?


    That’s an interesting question, if you have. The answer is simple - Keep Cloudflare status Paused at Overview page.

  • I just enabled Cloudflare, getting redirect loop
    It seems, you tried enabling HTTPS. Okay, to fix this problem, add below snippet in the wp-config.php file and save changes. See here for more details.


define('FORCE_SSL_ADMIN', true);
// in some setups HTTP_X_FORWARDED_PROTO might contain 
// a comma-separated list e.g. http,https
// so check for https existence
if (strpos($_SERVER['HTTP_X_FORWARDED_PROTO'], 'https') !== false)
       $_SERVER['HTTPS']='on';
  • I am noticing wrong IP address for the comment after enabling Cloudflare, how to fix?
    To fix, add below snippet in the wp-config.php file or theme functions.php

/** Correct IP in case of Cloudflare **/
if(array_key_exists('HTTP_CF_CONNECTING_IP', $_SERVER)){ 
	$_SERVER['REMOTE_ADDR'] = $_SERVER['HTTP_CF_CONNECTING_IP']; 
}
  • Do I need Cloudflare official plugin now?
    I don’t think. Above two common problem we already resolved.

  • Do you use Cloudflare CDN?
    I use only DNS of Cloudflare for some reason, and recently shifted to Sucuri Application Firewall for security. Apart from that, I use BunnyCDN which is a fastest as well as very-very affordable.

External helpful resources

I hope this helps. If you have any question you want me to answer it, please let me know.

#DailyDose

Thanks & Regards,
Gulshan


BunnyCDN - Review of Lightning fast CDN
How To Use cookie free domains Using Cloudflare..?
5 reasons we don’t need to combine CSS/JS files with HTTP/2
Should I use Cloudflare with BunnyCDN?
Anyother way of getting free SSL instead of Let's encypt and cloudflare?
How to use BunnyCDN with Cloudflare?
Cloudflare Host Error
Interlinking truly helps in faster indexing (Live proof)
Unable to index images in Google webmaster
5 reasons we don’t need to combine CSS/JS files with HTTP/2
Getting fake traffic on my site
How to Track Website Search Field Usage using Google Analytics
Fix SSL Handshake error
How to save yourself from plagiarism?
Does Jetpack Photon slows down the site?
[Guide] How to Setup WP Rocket Cache Plugin?
Interlinking truly helps in faster indexing (Live proof)
Wordfence vs Cloudflare?
Secure the WordPress Login Page by Limiting Access to Certain Country
Useful .htaccess code
Which security plugins are you guys using?
Which security plugins are you guys using?
[Guide] How to Setup W3 Total Cache Plugin?
Migrate WordPress from Cloudways to Vultr with ServerPilot (In 1 hour)
Redirect a domain to another domain?
Website Speed Issue with Vultr and Namecheap
Block all EU traffic
What is the Best CDN for the WordPress?
Site slowing down after auto ads
Need Review on Speed, Design & Ads
Trying to understand what is happening with this domain!
How to Revert Back from HTTPS to a Non-SSL HTTP Site
How to Fix Mixed Content/Insecure Content Warning in WordPress
Migrate HTTPS Enabled non-top TLD Domain to Cloudflare without Downtime
Is cloudflare pro worth it?
How To Block Spam Referral Traffic On Google Blogger Platform
The Right way to use Cloudflare Cache Everything with WordPress
Cloud flare vs cloud hosting?
Firsthand experience with Cloudflare Domain Registrar
Using HTTPS in WordPress without Really Simple SSL Plugin
How to Block Spam Traffic on Website?
How to use free https from cloudflare
Optimize Images on the Fly with Autoptimize via ShortPixel
Wix Website Speed Optimization
#2

Sorry if there is any typo. Going to sleep. :stuck_out_tongue:

Good night.


#3

This guide is awesome. :smiley:

And Good Night.


#4

this is very cool and awesome article :smiley: i bookmarked it already :slight_smile:


#5

Thanks dear @Saksham @Bingout


#6

If I force HTTPS in my server htaccess file, then I think we can let it default off. Is it so?

Since we tuned our site and already we do have zero mixed content error. Is it still necessary to turn this setting on?


#7
  1. Yes, you can keep it default off.
  2. You can leave it.

(In both cases, I still do :stuck_out_tongue: because it’s harmless.)


#8

I setup the cloudfare for my blog and now the speed of my blog is 289ms.


#9

After disabling Rocket Loader site’s page at gtmetrix showing more erros to fix for speed, also how it will be harmful for adsense?


#10

Problem: By default, the Rocket loader defer the execution of JavaScript “which I think may be little delay than expected”. Visitor will complete reading first paragraph then Ad may slowly appear. Hence, it would affect. Sometime at slow Internet connection, Ads may not appear.

Focusing on solution,
Fortunately, there is a way tackle this problem you can use data-cfasync=false for the AdSense script adsbygoogle.js file. That will prevent affecting.

Give a try!


#11

While using autoptimize + cache enabler can i skip minification on cloudflare?
Also as autoptimize and cache enabler deals with code like javascript, is there any negative effect on adsense?


#12

Autoptimize optimizes HTML, CSS, Fonts and JS.

Cache enabler does HTML page caching.

Both are different things. You shouldn’t enable minification on too many places at above both plugin.

Enabling at Cloudflare has no harm. Neither any impact on AdSense.


#13

Thanks :+1::grinning:


#14

A useful tip

Suddently enabling Cloudflare for a non top TLD domain can be frustrating experience due to long delay in SSL activation. If website uses HTTPS then due to broken SSL, site may be down. To prevent from this issue …

/* Here's the workaround */
  • Pause Cloudflare just after updating nameservers
  • Once SSL is active at Crypto
  • Then activate Cloudflare.
  • Hence, no downtime during this process.

#15

Wow gulshan bro tussi chhaa gaye :slight_smile:


#17

Always use HTTPS on CF is disabled.
Automatic HTTPS Rewrites feature on CF is disabled too.

There is no htaccess code (301 or anything else) . And I don’t have any plugin. I am using HSTS only.

But when I check to access my blog with http:// or http://www, It directly redirects https://example . How it is possible?


#18

Please share URL where problem you are facing


#19

It is fixed bro thanks :slight_smile:

Problem was related to HSTS.


#20

You’re welcome!


#22

Which one do you prefer?

  • Minifying CSS, JS and HTML via Cloudflare
  • Minifying CSS, JS and HTML via WP plugin

0 voters