You might have already heard about Cloudflare. It is a free CDN cum security and optimization suite for your website. Even if you are new to it, this article will guide you through everything you must know. You will also learn in step by step tutorial, how to activate Cloudflare on your WordPress blog effortlessly.
In this article you will learn:
- What is Cloudflare and how does it work
- Pro and cons of using Cloudflare
- What is free SSL certificate all about.
- How to setup and activate Cloudflare for a WordPress blog
- Issues & checking the improvement.
What is Cloudflare
Cloudflare Inc is a San Francisco based company that provides kind of all in one solution to website owners which includes measures to speed up browsing experience and improve security.
The features they provide are:
Faster loading of your website across the globe using a Content Delivery Network (CDN) of more than 100 nodes. Distributed network for fast resolving of Domain Name Servers (DNS). Website Optimization using several advanced and latest technologies including TLS 1.3 and HTTPS/2. Reduce the download time further by compressing the web pages, minifying the code and rendering browser caching and Accelerated Mobile Pages (AMP). Enabling latest version of SSL/TLS to encrypt the communication between server and client. Filtering the traffic for malicious attempts including bot spam and DDos attacks. Web Application Firewall (WAF) for protecting your servers from hacking attempts.
What is included in the free plan
- DNSSEC and Easy DNS Management including wildcard DNS support.
- Basic Security Features including limited DDos protection and spam filtering.
- Fast Website Performance with CDN, compression of files and caching.
- Always online feature (your website remains available even when your server crashes)
- Analytics of traffic and performance.
- Free addon apps with one click integration feature.
- Free shared SSL certificate (Limited Browsers) for everyone.
A list of all features and pricing is here.
How does it work
Cloudflare is primarily a Content Delivery Network. But you have to give them full control by changing your domain’s nameservers (or at least a CNAME record if you do not want to use their DNS service) to point to their servers. When you do so, each visitor who visits your URL is handled by a Cloudflare server and not your own hosting server (referred to as origin server thereafter) .
So, whenever a visitor clicks your URL:
- Your domain name resolves into one of the Cloudflare servers (node), whichever is nearest to the visitor.
- Cloudflare tries to filter out and block visitors judging by their geolocation IP, intent etc and matching it with their database.
- Once a good visitor is determined Cloudflare decides to present your content to them.
- It establishes a secured connection between the visitor and the Cloudflare node.
- A copy of the desired page, fetched from your origin server, optimized and stored in advance in the node is presented to the visitor.
Advantages of Cloudflare (free plan)
With Cloudflare you get pretty much everything you need for the best performance of your WordPress blog. Some of the important benefits include:
- Free forever SSL certificate and green padlock for your blog without any effort. Supports all webhosts.
- Your blog loads fast despite of the location of your visitor.
- You are protected from bots attempting to hack or inject malicious code (e.g. SQL injection and cross site scripting)
- Reduction in spam comments you receive.
- Protects your blog from scrape/email/image harvester bots.
- Your blog remains available for visitors even if your server crashes or gives errors.
- Install several free apps e.g. Viglink, Google Analytics & Pingdom by 1 click.
- No need to change even a line of code in your original web host.
- Saves tons of bandwidth and server load of your web host.
- Easy switch on/off anytime you need to disable one feature or all.
- Supports all hosts whether shared, vps or dedicated.
- All these benefits cost as low as FREE.
Disadvantages of Cloudflare (free plan)
- The free SSL is misleading. Read more below.
- Your DNS (and hence pretty much everything) is controlled by Cloudflare.
- If Cloudflare is facing issues your website can be down even if your origin web server is running fine.
- Some good visitors may be blocked because of their IP especially when security level is set to be medium or high.
- Some users complain issues in javascripts as Cloudflare injects its own code in your website.
- Despite all the claimed features our website Key2WP.com did not see any improvement in page load time.
- Cloudbleed issue in Feb 2017 earned a lot of bad name.
About free SSL from Cloudflare
Most people will switch to Cloudflare for its free of cost, easy to implement SSL certificate. But, it is important to understand how it implements SSL security on your website without installing anything on your server side.
Cloudflare acts as a reverse proxy, a middleman between your server and the visitor. So now your visitors do not interact with your origin server anymore. Instead, your visitors interact with Cloudflare, which in its turn interacts with your origin server.
In this process, it establishes a secured connection with visitor, using TLS1.3. An SSL/TLS secured connection. The one with green padlock. Nice. But the connection between your origin server and Cloudflare may not be secured depending on the SSL option you have chosen.
SSL Options
Read this short article about SSL options provided by them. In short if you can’t setup SSL on your web hosting, you should use flexible SSL (also called free universal SSL) option. If you can install at least a self signed SSL certificate on your server, you can choose full SSL option. And if you have a valid SSL certificate and you can install it on your server, you can choose either full SSL or full SSL (Strict) option.
Cloudfare also issues free SSL certificate for origin server for free plan users acting as a Certification Authority (CA). If you can install it on your server, you can choose full SSL options. But, if you do not want to go with the complexity, choose flexible option.
Flexible option is the simplest one to configure. No need to make any changes on your hosting/cpanel. But in this case there will always be an unsecured connection between your web server and Cloudflare. So with this option your website looks SSL secured, but actually it is not. Moreover if you opt to switch away from Cloudflare at any time, you will earn yourself more issues because now SSL version of your website which is indexed by default by Google, will give errors.
If you want to use your own certificate while using Cloudflare, you will need to upgrade to a paid plan.
How to setup and activate Cloudflare
Step 1: Creating Account
Go to cloudflare signup page. Put your email address and choose a password. Remember to use a hard and unique password (why) while registering. Tick “I agree” and then “Create Account”. You will be logged in immediately. Verify email address, if a verification email arrives.
Step 2 : Add a website
If you have not added any website to your Cloudflare account before, an add website screen will appear. Put your wordpress blog domain name here and click on “Scan DNS Records” button.
DNS records of your domain will be scanned. it takes some time, generally less than a minute. Wait for the scan to finish before proceeding.
Once the scanning is complete, click “Continue” to proceed.
Step 3: Checking/Modifying your DNS records
On the next page all your DNS records for this domain name will be shown. Since you are going to give your DNS control to them (in next step) from now on Cloudflare will be your new DNS manager. And you will need to visit this page whenever you need to view/delete/modify any DNS records.
In most cases there is no need to change anything here. By default all your DNS records (except few) are followed by a grey cloud icon. It means that these records will not be affected by Cloudflare. These records will keep on pointing to wherever they are pointing now even after activating Cloudflare. It is necessary to not change these records to keep services like mail, ftp, webdisk etc active as they are handled by your origin server not Cloudflare.
On the other hand records followed by an orange cloud icon will be changed by Cloudflare and will start pointing to Cloudflare after you change nameservers in next step. It is essential for functioning of Cloudflare service to keep them remain orange.
Do not activate all icons to orange.
The above two records (highlighted) ensure that both www and non www versions of my root domain key2wp.com will be pointing to Cloudflare once I activate their service. Nothing else. Note that “is an alias of example.com” here means “same as domain.com”
When you need to change?
If your blog URL is a subdomain. Or your website uses a few subdomains for sections like blog, forums, directory or shopping cart etc. And you want to activate cloudflare on those sections of your websites (subdomain) too. You need to change the color of grey cloud icon to orange by simply clicking on them for respective subdomains.
Also note that records saying “is an alias of key2wp.com” indirectly point to Cloudflare because they are an alias of key2wp.com record as shown below. So, even if the cloud icon is grey, these records will be pointing to Cloudflare servers because Key2wp.com will be doing so.
We can easily change this dependency by clicking the value part of the record and entering a new value there. In my case I will change the CNAME records namesly cpanel, ftp, and webmail as shown above from “is an alias of key2wp.com” to “points to 162.144.181.150”. If I do not do change them, once I activate Cloudflare, these subdomains will also point to Cloudflare which I do not desire.
Once you have ensured that all your DNS records are good to go click on “Continue” button. Do not worry much because you can manage your DNS records anytime you desire later by logging into your Cloudflare account.
Step 4: Select your plan
In this step you will select your Cloudflare plan. No brainer, you can choose the free plan. And I recommend too that you should first try the free plan and get used to their service. Then you can upgrade your plan anytime later by logging into your account if you need to do so.
This step is also an opportunity to browse, understand and compare the services you will get in your selected plan.
Click “continue” for the next step.
Step 5: Modify your Name Server (NS) records
In this step you will give Cloudflare full control over your DNS (and hence your website) by pointing your Name Server (NS) records to them.
On the next page Cloudflare will instruct you to change your Name Server records of your domain. It will also show you your current name servers which belong to your existing (origin) web host.
Note that the instructed name servers are in a format xxxxx.cloudflare.com. These can be different for different users, no issue in that. Just follow what nameservers are are instructed by them to use.
The procedure of changing the NS records varies vastly from registrar to registrar. So I can not cover all registrars in this blog post. But a tutorial for the most common registrars can be helpful for you. Just remember to use correct nameservers. Even if your registrar is not listed in the said article, you are search in Google “How to change Name Servers in xyzregistrar”. Replace xyzregistrar with the name of your domain registrar. You can also ask your registrars support for help in change of nameservers.
Once you have completed the change. Click “continue” to proceed.
Layover 1
The effect of change in name servers is the slowest thing remaining on the internet today. It may take from a few minutes to several hours for your nameserver change to fully propagate around the world. In this period your domain may resolve to your old nameservers in some parts of the world and new ones in the rest. But since content your visitors see will be same on both servers. Your website will not be down. The only problem you will face is that you will have to wait before proceeding to the next step. The median waiting time is less than one hour.
In the meanwhile you can retry to check the latest status of verification of nameservers by clicking on “Recheck Nameservers” button. You can only click it once in an hour though. Once the propagation is completed (good to their server location) you will see the new status as follows.
You will observe all options and features are now active. Youwill also observe that your website is now served to visitors though Cloudflare servers. All their services activate immediately except SSL which takes some time.
Step 6: Configuring Cloudflare plugin in WordPress
In this step you will need to install a plugin in your WordPress blog. This step is however totally optional for working of Cloudflare on your WordPress website, I highly recommend it because of its features:
Features of official Cloudflare plugin
- This plugin automatically changes the required settings in your Cloudflare account for best compatibility with WordPress. Saves you manual hardwork.
- Gives you an option to purge cache from within your WordPress dashboard. No need to login to Cloudflare.
- Automatically purges cache whenever you make changes in your blog or publish a new post.
- Since all comments in your blog will now come from a single IP, The cloudflare IP. Your spam fileters/plugins may act funnily. This plugin communicates between your blog and Cloudflare accounts and provides your blog the true IP of the blog comments.
- It also shares the comments spam data of your blog with Cloudflare to help them improve their database.
- Change security level, Always Online, and image optimization settings from WordPress dashboard.
- View analytics like total visitors, bandwidth saved, and threats blocked from your dashboard.
- Creates a ruleset in Cloudflare automatically to exclude your /Wp-Admin/ are from optimization.
- Enable I’am under attack mode if your websit is attacked by DDos attacks.
Getting your API key
In your Cloudflare dashboard, there is a link saying “Get your API key”. On clicking it a new page will open. Scroll down a bit to find API keys section.
Click on “View API key” button in first row “Global API key”. You will see a popup box containing your API key.
Copy your API key and save it temporarily in a notepad. You will need to copy paste this key only in your WordPress dashboard while activating the official Cloudflare plugin. Remember API key is like password, use it very carefully.
Installing the recommended plugin(s)
Now login to your WordPress dashboard and go to Plugins => Add New. Type “cloudflare” and search.
You will find the official plugin of Cloudflare (the left one, highlighted). Install it by clicking “Install Now” and then activate.
P.S. I highly recommend to also install another plugin called CloudFlare Flexible SSL (the right one, highlighted) by iControlWP at this stage, if you have chosen flexible SSL option. This plugin fixes the redirect loop issue we may face in WordPress if we choose Flexible SSL option. There is no plugin settings, just activating the plugin is enough. After activating Cloudflare I was locked out of WordPress dashboard because of this issue. I could not login because of infinite redirect loop. I had to disable Cloudflare for a while, clear the DNS cache and browser cache, login to WordPress dashboard and then install this plugin.
After activating the Cloudflare plugin, you will see a new menu option appear in your settings menu.
As soon as you open the plugin settings you will be prompted for your email address and API key.
You need to enter your email address associated with your Cloudflare account and API key here. Kindly note that if you have more than one domains in your Cloudflare account put key belonging to correct domain in this plugin. For each domain added in your account (called zone in CDN’s teminology) there will a different API key.
After copy pasting the API key (which you saved in your notepad) click on “Save API Credentials” button to proceed.
You will see very few options in this plugin settings area. i will walk you through them.
Plugin Settings
Click on the “Apply” button to apply recommended settings to your Cloudflare account. This single click saves you a lot of hardwork of setting up things manually. It will also change your SSL option to flexible. If you want to use full SSL option you need to change it again. This button has only to be used once.
The “Purge Cache” button immediately purges cache of all cloudflare nodes around the world. It means they delete the cached copy and grab a new copy of your website in their cache. It is useful whenever you change a thing in your website layout or content or add new.
But, third option, Automatic Cache Management makes it even easier. Just enable it and Cloudflare cache will be automatically purged when you update your website.
In setting option you can set security level. My recommendation is Medium or Low. Other options are meant only for paid plans.
In analytics option you can see your website analytics and how much server bandwidth is Cloudflare saving for you.
Step 7: Redirecting HTTP URLs to HTTPS
It is always a good idea to keep only one version of your website i.e. either HTTP or HTTPS and either WWW or without WWW. Because it raises duplicate content issue. Out of the two the WWW issue is handled good by default by WordPress. Redirection of http URLS to https now needs action.
This can be done by either modifying the .htaccess file (huge care needed) or by installing a plugin. But Cloudflare gives you an even simpler way to do that known as pagerules.
In your cloudflare dashboard. Click on the “Page Rules” icon.
On this page you will see one page rule already created. Don’t be alarmed. It has been created by the Cloudflare plugin you just installed.
Click on “Create Page Rule” button.
In the opened window, you will need to type a URL pattern and at least one settings for that URL pattern. For our desired result. We will simply type:
http://*example.com*
in the URL box. This pattern simply covers all possible URLs of this domain starting with http. Do not forget to use your own domain name instead of example.com.
Then in “Pick a Setting” dropdown box choose “Always Use HTTPS”.
Click on “Save and Deploy” button.
Layover 2
This is all you need to do. Your website is already using Cloudflare servers ever since you changed the DN records. But generation of your free SSL certificate takes some time. It may take between 1 hour to upto 24 hours before your SSL certificate is ready. You can always check the status of your SSL ceritificate in the Crypto tab of your dashboard. Simply click on the “Crypto” icon.
Once your SSL certificate is ready the status will change from “Initializing Certificate” to “Active Certificate”. In this tab you can also change the option of SSL to chose. You upgrade to “full SSL” or downgrade to “Off”.
Thats it! You’re live.
Your WordPress blog must be live, secured, optimized and accelerated by now. And the green padlock be the biggest eye candy.
Before SSL:
Here are examples of how your URL looks like in chrome browser without SSL.
- The normal case. An exclaimation mark appers clicking on which chrome warns that this website is not secured.
- When you try to type in https URL without any implementation. Chrome clearly marks it is not a secured page. Moreover a 404 error occurs.
- A normal http URL requiring asking for users personal information. e.g. WordPress login page. A black colored soft warning appears.
After SSL:
You should get not only a green padlock (second one) of trust. But also text “Secure” in green and emphasized https: in green before each of your URLS including the ones which require submission of personal information.
But in case you are not getting the green padlock, but your URLS are showing https:// though in grey, you have a mixed content issue. We have already installed a plugin (in step 6) which deals with this issue quite well. If for some reason this plugin is not working for you, there are other plugins for the same function, few examples are SSL Insecure Content Fixer and WordPress HTTPS (SSL).
There may be reasons beyond the scope of these plugins. e.g. if you have embedded an image or video or javascript hosted on another website which uses non secured http URLs, you have a mixed content on that page which plugins can not fix. To be certain check several URLs and see if all URLs have this issue.
More reasons are listed in this Cloudflare support article.
Conclusion
Configuring Cloudflare was easy. It takes only ten minutes of your time (excluding some waiting time) and gives you optimized, secure, spam free and accelerated website. That too with a free SSL certificate. My SSL certificate got activated without issues.
But in terms of page speed I was disappointed. Look at the results I get from Google Pagespeed tool without and with cloudflare.
Before using cloudflare:
After using Cloudflare:
I can see no improvement at all. The same results were confirmed using another tool as well. But I will say that it is OK to sacrifice a bit of speed for the sake of security. Moreover it is utmost important to mention that my blog already use a caching plugin so there is probably no room for improvement.
The post How To Setup Cloudflare For WordPress Step By Step (Free SSL & CDN) appeared first on Key2WP.com.
