CloudFlare is one of the leading CDNs on the web right now. It has strategically located servers all across the globe that reduce the load times of your website by serving static files like images, videos, CSS and JavaScript from the data centers located closest to the website visitors. 

In this tutorial, you'll learn how to integrate CloudFlare with your WordPress site.

Speed and security are two of the most frequently discussed website performance parameters amongst developer and designers. Not only do they have direct implications on the end users, but they can also count heavily in Google's analysis when determining the search engine rankings of a particular website. Over the years, Google has clarified a number of times that page load time is one of the key factors in its overall website analysis and rankings. 

When you analyse your website's performance and speed in Google's Page Speed Insights tool, using a CDN or content delivery network is often one of its main recommendations if the performance is slow. Not sure what a CDN is? Keep reading!

In this tutorial, you'll be learning about one particular CDN, CloudFlare, in detail, and I'll also be explaining the basic concepts and benefits of a CDN so that you have no confusions on the topic.

What is a Content Delivery Network?

In simple terms, when you purchase a website domain and hosting, the web hosting company stores all your data in a particular data centre that is located in a particular city. When someone visits your website, a request is sent from the visitor's browser to your data centre from where your website files are then downloaded to the user's computer. The load speeds of your page will vary according the distance between the visitor’s location and the data centers carrying your website files. In most cases, this causes delays in page load times because different requests are continuously sent from the visitor's computer to your data centre.

A content delivery network (CDN) resolves this issue by placing copies of your website’s static data in multiple data centers located at different geographic locations. When someone visits your website, a CDN serves your website data from the data center that is located closest to the visitor. This naturally results in faster page speeds, reduced load times and reduced bounce rates.

The Benefits of a Content Delivery Network

The primary benefit of a CDN is that it increases page load speeds significantly. This single benefit results in several other advantages. Here's a brief look at some of them.

Increased Accessibility

For any single domain, browsers have a certain limit for the number of concurrent connections. For example, if a browser allows up to four concurrent connections to a particular domain, and a user is downloading four different files from that domain at the same time, then they'll need to wait for at least one of them to complete before he can start the fifth download. But, since CDN files are hosted on different domains, websites using a CDN can allow more concurrent connections to a single user.

Reduced Bounce Rates

Increase in speed, as a result of using a CDN, naturally results in reduced website bounce rates. Google uses the bounce rate as a relevancy indicator for websites. A lower bounce rate will help improve your search engine rankings.

Better Traffic Management

By using a CDN, your website will be better equipped to handle increased traffic. So even if there's a sudden traffic surge on your website or blog, in case one of your blog posts goes viral, your website would still remain online.

Better Website Security

CDNs also play a vital role in filtering out spammers, potential malware, and DDOS attacks. Most CDNs offer filtration systems that analyse your visitor data and over the course of time develop a list of banned or potentially harmful visitors and stops them from causing any harm to your website.

Reduced Website Costs

If you're using a limited bandwidth hosting service, a CDN can significantly reduce your website costs by serving all of your static files from its own servers. This would reduce the load on your website bandwidth and allow you to serve more data in the same costs.

What is CloudFlare CDN?

CloudFlare is one of the leading CDNs on the web right now. It has strategically located servers all across the globe that reduce the load times of your website by serving static files like images, videos, CSS, and JavaScript from the data centres located closest to the website visitors. Additionally, it optimises your page speeds by minifying any JavaScript in it.

The advantage with CloudFlare, apart from its strategically located servers, is the sheer volume of users all over the world using its services. Due to its strong community of users, CloudFlare has better and more advanced data regarding different online security threats as compared to other CDNs.

When a security threat is identified on the website of any CloudFlare user, it is immediately added to their central database from where all its servers are notified of the threat. This significantly reduces any potential threats for CloudFlare users.

Because of the versatile features, the quality of services and the number of users at CloudFlare, several leading web hosting companies, like Bluehost and HostGator, now offer it as a recommended service along with their standard hosting plans.

Configuring CloudFlare for Your WordPress Website

There are two ways of configuring CloudFlare for your website or WordPress blog. It doesn't matter what platform a website is based on, as long as you have the access to change its name servers. Here are the two methods.

Configuration via Web Hosting cPanel

As I said earlier, hosting services like Bluehost and HostGator, offer CloudFlare as an additional option in their web hosting cPanel.

Step 1

To begin your automatic installation, click on the CloudFlare icon in your cPanel. I'm using the web hosting service, HostMonster (sister company of Bluehost), for this tutorial. This is what you'll see when you click on the CloudFlare icon.

Here, you'll be asked to sign up for a free CloudFlare account. If you already have an account, sign in by entering your login details.

Step 2

Once you’re logged in, you'll be able to see a list of all the domain names associated with your hosting account.

I’ve removed the domain list intentionally for security reasons, though you can see the status in front of each domain name. Clouds in grey color indicate the domains where CloudFlare is still not active, while the orange clouds indicate the domains that are using CloudFlare CDN.

Step 3

To enable CloudFlare for any domain, just click on the Activate link in front of it. That's it - you don't need to do anything else! Your hosting service will change the name servers and other configuration on your behalf.

But remember, this activates the most basic free version of CloudFlare. To enable the premium version, you'll need to choose from the different CDN packages on CloudFlare's website.

Manual Configuration from CloudFlare’s Website

To configure CloudFlare for your website manually, you'll need to perform the following steps.

Step 1

Visit the CloudFlare website, and sign up for a free account.

Step 2

Add your website address, and wait for CloudFlare to search for its existing records. This usually takes around 50-60 seconds to complete.

Step 3

You'll then be shown a list of the domain records and their different subdomains, as well as the addresses they're being pointed to. Here, you have the option of keeping or removing different domain records on the CloudFlare servers.

Once again, active and inactive domains will be indicated using orange and grey clouds respectively. After verifying your records, and making the required changes (if any), you can continue to the next step.

Step 4

In this step, you'll be asked to choose a service package for your CloudFlare account. The three main settings here are pricing plan, performance plan and security plan.

In pricing you have the option to choose a Free Plan, a Pro Plan and a Business Plan. Here are some of their main features.

The performance plans include CDN only, CDN + basic optimisations, and CDN + full optimisations.

Finally, you have the security options.

Step 5

Once you've completed your package settings, you'll be forwarded to the final page where you'll be given your CloudFlare nameservers. You'll need to copy the CloudFlare nameservers to your domain's DNS settings and replace your current settings with the copied name servers. This process usually takes anywhere from 1 hour to 48 hours, as the servers need to propagate.

Additional CloudFlare Features

There are additional features and options that you can use to enhance your CloudFlare experience.

Apps

There are a number of free and paid apps that can be used to add new pages and functionality to your website. Each app needs to be set up separately.

Analytics

You can view detailed analytics for each of your domains on CloudFlare by clicking the Analytics link in the main website dashboard. CloudFlare offers comprehensive analytics that are gathered directly from your servers.

Threat Control

Here you can view lists of IP addresses from different regions that may be threatening your site's security. You're also shown the list of IP addresses that were challenged but failed. You can, however, choose to block them permanently, if you wish.

CloudFlare WordPress Plugin

CloudFlare also has a dedicated plugin for WordPress users. The basic purpose of this plugin is to ensure that the correct information and IP addresses appear on the comments posted on your website. It also allows you to report spammers directly to CloudFlare's servers, so they can be blocked across the board.

But before installing the plugin, you may be interested to read more about it on the product's homepage (versus the plugin's homepage).

CloudFlare’s free plugin for WordPress accelerates page load speeds, improves SEO, and protects against DDoS attacks and WordPress-specific vulnerabilities.

The page also discusses the topics of:

• one-click optimize WordPress settings,
• rulesets for a web application firewall,
• automatic cache purging on website updates.

Installing the WordPress plugin and the instructions are straightforward (though not immediately visible) on the WordPress.org repository page.

Straight from the vendors themselves, this is how you can install it with your copy of WordPress:

From your WordPress Dashboard

1. Visit “Plugins” > Add New
2. Search for Cloudflare
3. Activate Cloudflare from your Plugins page.

From WordPress.org

1. Download Cloudflare
2. Upload the “cloudflare” directory to your “/wp-content/plugins/” directory, using ftp, sftp, scp etc.
3. Activate Cloudflare from your Plugins page.

Once Activated

1. Go to cloudflare.com
2. Login with your cloudflare account. (If you don’t have a Cloudflare account first sign up for Cloudflare)
3. Press your account name on top right corner and select “My Settings”
4. Scroll down to “API Key” > “Global API Key” > View API Key
5. Copy the API key
6. Return back to WordPress Cloudflare Plugin page
7. Enter your email address and paste your API key
8. Press Login.

Finally, if you still have questions, CloudFlare has a tremendous support resource available for all users and customers that you can access.

In Summary

Using CloudFlare's CDN can significantly improve the overall performance and security of your website. It's currently the leading CDN on the web that offers comprehensive speed and security to its users.

For users with small-to-medium sized website and blogs, even the free version of CloudFlare is good enough to improve their overall performance. However, high traffic blogs and business websites should look to explore more comprehensive paid packages of CloudFlare since that would ensure maximum security and speed for their websites.

If you have any questions, please feel free to leave a comment below, and I'll get back to you as soon as I can!