Integrating CloudFlare With WordPress

By -

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 adresses 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.

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 the 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!

Comments

Post a Comment

Popular posts from this blog

How to Create a Yoga Goddess Illustration in Adobe Illustrator

By -
Image
As the music begins to play, a soft breeze fills the space with the undeniable smell of magnolia blossoms. She gracefully enters and begins a “tree pose” with her hands in Namaste form. Our female figure is inspired by the Indian culture for its gorgeous use of color and the grace of its yoga formations. I hope you’ll enjoy the journey as we retrace, step by step to enlightenment.  1. Becoming Flesh and Blood Step 1 Our first step will be to bring in our sketch. I've scanned her in at 300 dpi to catch as much of the detail as possible. I'm not as picky about my choice of initial drawing tools, and this particular project was completed with a mechanical pencil. We'll be working with a clean line quality from Adobe Photoshop and now we can begin to work. I'm working in Adobe Illustrator at a size of 8.5 x 11 inches for this specific project. When I'm ready to start my layers, I'll label my first layer as "Sketch" and lock the layer to make su...
Read more

How to Create an Icon Set using Adobe Photoshop

By -
Image
In this tutorial, we are going to design a set of icons in Adobe Photoshop. An icon set needs to have the same background and theme. For learning purposes, we are going to design a sun icon, an ice flake icon, and an RSS icon. Let's get started. 1. Preparing the Canvas Step 1 Start by making a new file with size 350 px × 350 px . Click the small box next to the  Background Contents  option to change the new canvas color. Step 2 In the Color Picker dialog box, select grey ( #e0e0e2 ) for the canvas background color. Step 3 It is always a good idea to keep your work structured from the start. Make a new layer group and name it  sun . This is where we will place all layers used in the sun icon. 2. Designing the Icon Base Step 1 Use the  Rounded Rectangle Tool  to draw a rectangle with size  83 px × 64 px and  8 px  radius. To get accurate results, use the  Properties  panel. In this panel, you can simply enter the exact siz...
Read more

Android Essentials: Using the Contact Picker

By -
Image
This tutorial will not only show you how to launch the contact picker and get results, but also how to use those results in Android SDK 2.0 and above. Getting Started This tutorial will start out simple, but then we’ll get in to some of the technical details of using Contacts with the ContactsContract class, which was introduced in API Level 5. Make sure you have your Android development environment installed and configured correctly. You’re free to build upon any application you have, start a new one from scratch, or follow along using the InviteActivity code in our open source project . We’ll then be adding functionality to allow a user to choose one of their existing contacts and send a canned message to them. We’re going to dive right in, so have all of your code and tools ready. Finally, make sure your device or emulator has some contacts configured (with names and emails) within the Contacts application. Step 1: Creating Your Layout There are two essential form control...
Read more