This website uses cookies

Our website, platform and/or any sub domains use cookies to understand how you use our services, and to improve both your experience and our marketing relevance.

How to Install Cloudflare CDN on WordPress

September 27, 2021

8 Min Read
cloudflare wordpress

Speed and security are two of the most important requirements of a WordPress website. That’s why we’ve spent countless days and nights (and eaten yet more countless donuts) in building the most impressive managed cloud platform for hosting WordPress sites.

However, hosting is not the only factor involved in improving the speed of your WordPress site. One other way to do so is through a CDN, which stands for the content delivery network. In this article, I’ll show you how to easily install and configure Cloudflare CDN for your WordPress website.

In this article, I will show you how to configure Cloudflare CDN on WordPress. Before embarking on the setup process, let’s understand what Cloudflare CDN is, and how it helps you optimize your Core Web Vitals.

What is Cloudflare CDN?

Cloudflare CDN is one of the most popular CDNs available out there with a network covering more than 200 cities. It serves the web content of websites based on geographic distance of visitors on the site.

It delivers static, dynamic and media content, along with other services such as security, optimization and SSL. Websites using a Cloudflare CDN service minimize latency at the user’s end, as their content is cached and delivered from the nearest server.

Let’s take a look at the features that Cloudflare CDN provides.

Some Prominent Features of Cloudflare CDN

  • Smart Routing
  • Stream Delivery
  • Load Balancing
  • Caching
  • Optimizations
  • Accelerated Mobile Pages

Cloudflare CDN is a renowned CDN provider with servers spread all over the globe to serve the content of your website to every corner of the world. Cloudflare offers multiple features depending on the plan.

Smart Routing

This is a smart way of routing traffic through the fastest network available, with an algorithm that utilizes real-time network intelligence to decide the fastest path.

Stream Delivery

Media streaming can be time-consuming to load if accessed from the other corner of the region. To solve this problem, Cloudflare CDN offers a special caching mechanism to deliver stream files instantly.

Load Balancing

Cloudflare offers a subscription-based load balancing feature that starts from $5 per month. It’s a DNS-based load balancing that helps applications to improve performance and site availability.

Caching

Cloudflare on WordPress offers an advanced caching mechanism that automatically saves the static content, cache purging, and tiered caching.

We have seen that a typical website uses both dynamic and static content. Cloudflare can save you on both CPU and the bandwidth juice of your web hosting by using its own servers for content. Cloudflare on WordPress can reduce the latency of the end-user and enhance the overall user experience.

Read More: How To Use Cloudflare CDN with W3 Total Cache Plugin

Optimizations

At times we need to integrate third-party tools and APIs for specific functionality. These resources are not in our control, and if not configured properly, can cause lags.

Cloudflare is designed to deliver a fast web experience and optimize the order of page resources.

Large or non-optimized images can cause performance issues. The Cloudflare Image Optimization algorithm optimizes the web page automatically by minimizing the number of network connections and making image delivery seamless. This prevents third-party resources from slowing down the web page.

Accelerated Mobile Pages

Accelerated Mobile Pages is a technique to load web pages faster on mobile devices when searched from Google’s mobile search engine. More and more users are using their mobile devices to browse the internet.

Cloudflare CDN accelerated mobile links are powered by AMP, and load AMP-enabled web pages inside the viewing window three times faster than the standard mobile pages.

Cloudflare provides several options like CDN, optimization of ads, DDoS security, analytics, and much more. They also offer a free plan that you can use before purchasing a paid plan.

Setting Up Cloudflare CDN in WordPress

Cloudflare provides many options like CDN, optimization of ads, DDoS security, analytics, and more. Besides free plans, they offer multiple premium plans where you will have more powerful features.

MaxCDN and Cloudflare are two widely used CDN providers by WordPress users. In this tutorial, I will be sharing how you can install Cloudflare on a WordPress website hosted on Cloudways.

Step 1: Signing Up for Cloudflare

First, you need to create an account on Cloudflare. If you already have it in place then you can skip this step.

signing up cloudflare screen

Step 2: Adding Site URL

Once you sign up on Cloudflare, a new screen will pop up where you will have to provide your domain and click Add site.

add site url

Step 3: Select Your Cloudflare Plan

Once you add the site URL, Cloudflare will ask about the plan that you want to avail. For this tutorial, I’m going with the FREE plan.

select cloudflare plan

Step 4: Review DNS Records

The next step is to review your DNS records and check whether they are configured correctly or not. Here, Cloudflare will fetch all the DNS configuration from your domain registrar, and in my case, there are only two DNS records (Type A). Review your records and simply click Continue.

dns records

Step 5: Change Your NameServer

As you can see in the image below, you need to change your domain registrar’s nameservers and replace them with the ones Cloudflare has provided.

change your name server

Step 6: Change your NameServer from Domain Registrar

Now, open your domain registrar and change the name servers. My domain is with Freenom, and I’ve successfully changed the nameservers.

change name server from domain registrar

Step 7: Cloudflare Quick Start Guide

Once you change the nameservers, go back to the Cloudflare CDN Settings tab, click Done, and check nameservers. You’ll see a Quick Start Guide screen popup.

cloudflare start guide

Next, simply click Get Started and configure the domain settings to improve your security and performance. The first setting section is Improve Security and it has 2 sub-sections; Automatic HTTPS Rewrites and Always use HTTPS. I will go with the default security configurations and click on the Save button.

cloudflare security

Next in the process is Optimize Performance, and it also has two sub-sections; Auto Minify and Brotli. The Auto Minify section is the HTML, JS, and CSS minification section that will help you speed up your WordPress site. I’m selecting all the options for Auto Minify, and for Brotli, I’m going with the default setup.

Note: If you select minification on Cloudflare, then avoid it on Breeze or any other Cache plugin. Why? Enabling minification on both ends will cause issues, and it’s recommended to use one at a time.

cloudflare minify

The last section is Summary, where you will see your security and performance configurations. Once you are satisfied with the settings, click Finish.

finish cloudflare setup

You will receive the following notification in your Cloudflare dashboard “Great news! Cloudflare is now protecting your site”. The status will change to “Active,” and you can avail of various options in the top panel to configure various security and performance-related tasks.

cloudflare installed

To take full advantage of Cloudflare on the WordPress website, it is recommended that you install their plugin on your website.

Step 8: Check Cloudflare CDN Status

If you want to check whether your Cloudflare CDN is working or not, open your WordPress site on any browser > press “Ctrl + Shift + i” > Network. Then refresh your page where you will see your site’s requests. Click one of the requests and check for “cd-cache-status”. If it’s HIT, then your CDN is working fine.

check cloudflare cdn status

Adding Let’s Encrypt Certificates to Cloudflare

With Cloudways, you can create an SSL certificate for your WordPress site using Let’s Encrypt. It cannot be created while Cloudflare is activated on your domain. In order to activate the Let’s Encrypt certificate, follow the steps below:

Step 1: Log in to your Cloudflare dashboard and under the DNS tab, disable both www and yourdomain.com options by changing the proxy status to DNS only. A grey cloud means that the service is disabled.

Adding Let’s Encrypt

Step 2: Go to your Cloudways Application Management Panel, SSL Certificate Enter your Email Address > Domain Name, and Click Install Certificate.

cloudways ssl

Step 3: Now, go to your Server Management Panel > Settings and Packages > Advanced tab, and under WAF Module, choose Cloudflare.

cloudways waf module

Step 4: Go back to Cloudflare dashboard and enable the option we disabled in step 1.

Go back to Cloudflare

Step 5: Next, click on the SSL/TLS tab at the top and turn SSL to Flexible. It can take up to 24 hours for Cloudflare to activate the certificate. However, if you already have used the same domain before, it will get activated instantly.

cloudflare flexible ssl

That’s all! You get a whole bunch of options after you have configured Cloudflare on your WordPress site. Most of the options are for paid plans, but if it helps, we recommend upgrading your plans and taking full advantage of it!

Final Thoughts

Cloudflare on WordPress improves the experience of users visiting your site and saves your web server’s valuable CPU and bandwidth resources. It is a highly optimized CDN that can completely take away the worry of latency and boost your WordPress site speed.

Frequently Ask Questions (FAQs)

Is Cloudflare a hosting provider?

No, CloudFlare CDN is a content delivery network provider which offers CDN services. Websites using their services have access to their huge network of servers through which it serves the static and dynamic content of the site minimizing latency at the user end.

What Is The Difference Between MaxCDN and Cloudflare?

Cloudflare comes with an option of a free plan, while MaxCDN does not. Cloudflare is easy to set up and offers website security. MaxCDN can be set up using the W3 Total Cache plugin and is used by renowned businesses.

Share your opinion in the comment section. COMMENT NOW

Share This Article

Customer Review at

“Beautifully optimized hosting for WordPress and Magento”

Arda Burak [Agency Owner]

Farhan Ayub

Farhan is a community manager at Cloudways. He loves to work with WordPress and has a passion for web development. Mostly, he spends his time interacting with the people in the WordPress community. Apart from his work life, Farhan spends his time gaming and playing sports. Feel free to contact him at [email protected]

×

Get Our Newsletter
Be the first to get the latest updates and tutorials.

Thankyou for Subscribing Us!

×

Webinar: How to Get 100% Scores on Core Web Vitals

Join Joe Williams & Aleksandar Savkovic on 29th of March, 2021.

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!

x

For 4 Months

Promo: BFCM2021
  • 28

days

  • 28

Hours

  • 28

Mins

  • 28

Secs