For a website that serves an audience globally, adding CDN is extremely recommended. And when it comes to CDN, Cloudflare is the first name to pop in mind. In this post, I will show you how to add Cloudflare CDN to your WordPress. Step by step.
Before you step even further, make sure to check if Cloudflare is already available on your hosting service because some hosting services already offer Cloudflare as one of its features. Be it as an add-on or as a core feature.
If Cloudflare is already available on your hosting service, then you can enable it from your hosting panel.
In this post, I will cover two methods of how to add Cloudflare to a WordPress site: manually and via the hosting panel.
Shortcuts ⤵️
- What is Cloudflare?
- Adding Cloudflare to a site
- Checking if Cloudflare is already installed
- Summary 📝
What is Cloudflare and How Does it Work?
Cloudflare is arguably the most popular CDN service on the planet. Many websites, from small websites to enterprise websites, use Cloudflare because it has massive data centers spread in more than 150 countries.
The CDN servers of Cloudflare are spread in 330 data center locations worldwide.
Especially for small websites, one of the reasons why they use Cloudflare is that Cloudflare offers a free plan so that they can add CDN to their website at no cost.
Apart from CDN as its main service, Cloudflare also offers security features like firewall, SSL, and DDoS protection.
The CDN service of Cloudflare powers the CDN feature on popular hosting services like Cloudways, Kinsta and Rocket.net.
How Does Cloudways Work?
Cloudflare functions primarily as a CDN service.
CDN itself is a collection of distributed servers aimed primarily at delivering content to users/site visitors. The servers store static content generated by the origin server on the initial request to a page.
When new requests are made to the same page, visitors will be served by a CDN server nearest to their location in which the static content is already available.
This will reduce the burden of the origin server, especially on a high traffic site, because the job of handling requests is shared with the CDN servers. As a result, CPU load will be relatively low.
So, if a website has a CDN installed, visitors are not served directly by the origin server (unless for newly published content). Instead, they are served by the nearest CDN server which requires lower round-trip times (RTT) for a faster load.
How to Add Cloudflare CDN to a WordPress Site
There are at least two ways to add Cloudflare CDN to your WordPress website. If your hosting service comes pre-integrated with Cloudflare, you can enable it from the hosting panel. If it is not, you can use the manual method.
As mentioned, I will cover both methods in this post.
Let’s start with the manual method.
Adding Cloudflare to WordPress Manually
Step 1: Create a Cloudflare Account
Before you can add Cloudflare CDN to your WordPress website, you need to create a Cloudways account first.
To create one, visit the Cloudflare website and click the Start for free button. This will take you to the login page of Cloudflare.
On the login page, you can click the Sign up link beneath the login form to create your account.
You will be presented with a registration form after clicking the link above. You can pick a registration method of your choice. Whether via Google, via Apple or via GitHub.
Or, you can also create your account via email.
After successfully registering an account, you will be directed to the Cloudflare dashboard.
Step 2: Connect Your Domain to Cloudflare
Once your account is created, the next step is to connect your domain to Cloudflare to use its CDN service.
For your information, there are three options to connect your domain to Cloudways:
- Quick scan for DNS records
- Manually enter DNS records
- Upload a DNS zone file
In this post, I will use the first option because it is the easiest one.
Start by entering your domain to the available field and click the Continue button. If you want, you can also select which pages to be excluded from AI training bots access.
You will be presented with a pricing table after clicking the above button. If you want to use the free version of Cloudflare, you can simply select the Free plan. Click the Select plan button to use the plan.
On the next screen, you will see two nameservers from Cloudflare that you need to replace your current nameservers with. Copy them to the clipboard.
Next, login to the website where you bought the domain from (Hover, GoDaddy, Namecheap, etc.). Select a domain that you want to connect to Cloudflare and find a menu to edit the nameserver.
For instance, if you use Hover, you can find the menu on the left column.
Delete the current nameservers and replace them with the nameservers from Cloudflare you have just copied. Don’t forget to save the changes.
Go back to Cloudflare tab and click the Check nameservers now button.
After you click the button above, Cloudflare will check your nameservers periodically and send you an email once they are active.
Until here, the core steps are done. If you want it, you can add some rules to instruct how Cloudflare should work to protect your website. The free version can add the maximum of 3 rules.
To add a rule, you can go to the Rules menu on the left panel and select Page Rules.
Enter the URL you want to apply the rule to and pick a rule (you can add multiple rules). End by clicking the Save and Deploy Page Rule to apply the rule.
Adding Cloudflare to WordPress via Hosting Panel
There are tons of WordPress hosting services that offer CDN as its feature. Cloudways is one of which. The CDN feature of Cloudways is powered by Cloudflare.
In Cloudways, CDN is available as an add-on, not a core feature. You can enable the add-on for $4.99 per month per domain with the bandwidth of 100 GB per month.
Cloudways uses the Enterprise version of Cloudflare which not only functions as CDN but also as a security feature.
Here are the features you will get after enabling Cloudflare in Cloudways:
- CDN
- WAF (Web Application Firewall)
- DDoS Protection
- Image optimization
- Mobile Optimization
- Edge Caching
🚨 You can get a 10% discount for three months on Cloudways using the following promo code. Use the code ASAP before it expires.
Promo code: WPBDEAL
use promo code
Enabling Cloudflare CDN in Cloudways
Unlike the first method, you don’t need to create a Cloudflare account to add CDN to your WordPress site if you use Cloudways because the Cloudways service is pre-integrated with Cloudflare.
But again, Cloudflare integration is a paid feature in Cloudways so make sure to enable it when you really need it.
To enable Cloudflare in Cloudways, first, login to the Cloudways dashboard with your account. Select an application/website you want to enable Cloudways on to access its panel.
On the application panel, click the Cloudflare menu on the left panel. Enter your domain and click the Enable button.
Wait a moment while the Cloudflare integration is enabled.
Once enabled, the next step is to point your domain to Cloudflare. To do so, you need to remove the existing A or CNAME record on your CDN settings that directly points to the Cloudways server and replace it with new CNAME records.
You can click the View CNAME Records button to get the CNAME records of Cloudways.
There are two CNAME records provided by Cloudways for the Cloudflare integration as you can see on the following screenshot.
To add the CNAME records above, login to your domain registrar. Select the domain you want to add Cloudflare to and edit its DNS (make sure to select the same domain as the one you added in Cloudways).
If you use Hover, you can find the DNS settings under the DNS tab. Click the ADD A RECORD button to add a new record.
🎁 If you already have an existing A record or CNAME record pointed to Cloudways, make sure to remove it first.
On the appearing dialog, set the record to CNAME and paste the value provided by Cloudways.
Repeat the above steps to add another CNAME record.
And that’s it. You have successfully enabled Cloudflare to your website hosted on Cloudways.
To view the usage stats of your Cloudflare CDN, you can go to the Analytics tab on the Cloudflare menu.
From the Settings tab, you can make the necessary settings like image compression method, caching features and so on.
How to Know If Cloudlare is Already Installed on Your Website
You have just added Cloudflare CDN to your website. The question is, how to know if it is already installed because it’s something invisible?
There are two options to check if CDN is already installed on your website. First, you can use CDN Finder by CDN Planet.
Simply visit this page and add your domain to the available field and then click the Run CDN Finder button.
If you see Cloudflare on the CDN column, it means that Cloudflare is already installed on your website.
Another option to check if Cloudflare is already installed on your website is by using the built-in Developer Tools of your web browser.
First, visit your website. Once loaded, right-click and select Inspect to launch Developer Tools.
Go to the Network tab on the Developer Tools window and reload the page.
Click your domain and take a look at the Server line on the Header tab. If you see “cloudflare“, it means that you are served by Cloudflare when accessing your website. In other words, the Cloudflare CDN is already installed on your website.
I have a separate article if you want to learn more about how to check the CDN service a website is using.
Summary 📝
Many website owners rely on Cloudflare to make their website faster. It makes sense enough because Cloudflare is the most popular and reliable CDN service with over 300 CDN server locations.
Some WordPress hosting services come pre-integrated with Cloudflare to make it easy for you to add Cloudflare CDN to your website. If you are on a hosting service that offers this feature, you can add Cloudflare via your hosting panel.
If your hosting service doesn’t offer Cloudflare integration, then you can manually add Cloudflare in which the process is not that hard.
Cloudflare itself is not just a CDN service. It also adds extra security layers to your website by providing firewall and DDoS protection.
