Last Updated 23 Jul 2024
|

How To Use Cloudflare With WordPress – Complete Guide to CDNs

Quick Summary ↪ This article explains Cloudflare, its features and benefits, and how to set it up with WordPress, including advanced options and settings. Read on for Cloudflare tips to improve your website performance and protect it from downtime.

Using Cloudflare with WordPress

Cloudflare can not only improve the overall loading speed of your website but also add many security and performance benefits.

In this post you’ll learn how to setup Cloudflare and what it is. By the end, you’ll have a comprehensive idea of how to use Cloudflare with WordPress.

But first, let’s kick this off by going over some basic questions to give an idea of what is Cloudflare and how it can benefit you.

What Is Cloudflare and How Does It Work?

Cloudflare is a Content Delivery Network (CDN) made up of a globally distributed network of proxy servers. In fact, Cloudflare is one of the largest and most popular CDNs on the planet. Their network spans more than 200 cities covering over 90 countries and the number is just increasing.

So now, the next question becomes — what is a CDN and how does it work?

As you know, your website is hosted by a server with a specific geographical location. Therefore, if a user trying to access your website is nearer to the server location, he/she will experience faster loading speeds compared to users located on the opposite end of the globe.

This discrimination with loading speeds can cause problems with your global audience. However, by using Cloudflare with WordPress you can easily mitigate this problem.

Once you sign-up, Cloudflare will store all the static files of your website. These are files that can be delivered to the user and that don’t need to be generated, modified, or processed on the go. Some examples include your website images, JavaScript and CSS files, videos, and so on.

Now, when a user tries to access your website, Cloudflare will deliver the static files from one of its servers located nearest the user’s location. This will help boost loading speeds and improve the overall user experience.

a map showing how cloudflare cdn works
Source: cloudflare.com

However, this is just the basics. You will find plenty more awesome features and functionalities while using Cloudflare with WordPress.

Cloudflare Features and Benefits

Now that you have a clear idea of what is Cloudflare and how it works, let’s quickly go over its different features and functionalities.

Your Website is Always Online

Most hosting provider promises 99.99% uptime. However, if and when that server crashes and the 0.01% does happen, you can rest assured that Cloudflare will be there to save the day.

Users trying to visit your website will be served a cached version of your website from one of the many Cloudflare servers so that your content can still be accessed.

Faster Loading Times

By leveraging the vast network of globally distributed servers, Cloudflare will deliver responses to your users/visitors following an optimized pathway to ensure maximum speed. This technique, dubbed Argo Smart Routing, helps improve performance by an average of 30%.

Built-In Firewall

While using Cloudflare with WordPress, your site will be protected with a built-in firewall. It is designed to not only block traffic from blacklisted IP addresses but also helps to prevent access by unauthorized web applications.

DDoS Protection

Distributed Denial of Service (DDoS) attacks are used to disrupt the normal incoming traffic to a server or network. It overwhelms the target by flooding it with redundant incoming traffic, making it unresponsive. You can imagine it like a traffic jam that clogs up the road, making it impossible for regular traffic to get in.

Now, Cloudflare comes with dedicated options to help safeguard your website from DDoS attacks.

Image Optimization

It comes with a built-in feature called Polish that can help you automatically optimize and compress your images including WebP files. Lower image sizes mean lesser time to load which helps to improve loading speeds.

Miscellaneous

Here are some other advanced features available with Cloudflare:

  • Fastest managed Domain Name Server (DNS) provider in the world.
  • Load balancing to help optimize and enhance performance and availability.
  • Railgun Compression.
  • Cloudflare Stream – a feature to make streaming high-quality videos easier, affordable, and scalable.
  • Follows Domain Name System Security Extensions (DNSSEC) specifications.
  • Rate Limiting.
  • Gives you access to SSL (Secure Sockets Layer)/TLS (Transport Layer Security) encryption certificates.
  • Spectrum security integration.

And much more.

Does Cloudflare Affect SEO?

Since Cloudflare operates by serving cached versions of your website, one might think whether or not it has a negative effect on SEO. However, Cloudflare has directly co-operated with search engines to make sure that that isn’t the case.

Web crawlers will still be able to properly crawl your website content and index them to search engines and make sure you don’t face any SEO backlash.

Cloudflare: Is Their Free Version Enough?

For using Cloudflare with WordPress, you’ll get access to four pricing options — Free, Pro, Business, and Enterprise.

The free version is equipped with only the basic features and is ideal for users who run a personal website or blog. Businesses are recommended to go with their paid options. However, everything boils down to the functionality you require.

As such, here is a quick run-down of the different features available with each plan:

cloudlfare pricing scheme

Free: Here you will get access to unmetered protection from DDoS attacks along with access to its Global CDN, shared SSL certifications, and 3-page rules which you can set up to configure custom rules on how Cloudflare should operate for specific pages. Even if you are on the free plan, there is no limit on bandwidth or the number of users visiting your website.

Pro: The Pro plan is priced at $20/month per website and builds on the free plan with additional features like a Web Application Firewall (WAF), access to Polish – their image optimization tool, mobile acceleration with Mirage, access to over 20-page rules, and a dedicated “I’m Under Attack” mode which will activate their dedicated DDoS protection.

Business: Priced at $200/month per website, this is their premium offering with access to all the top-notch features and functionalities.

Apart from all the previously discussed options available with the Pro version, you get access to Railgun which can help you with accelerated delivery of your dynamic content. You also get access to 50-page rules and a dedicated option to bypass Cache on Cookies.

Enterprise: Remove all limitations and get access to all the Cloudflare features that you need. It’s a custom-tuned pack designed to ensure maximum performance for your website. However, there isn’t any preset quote and you will need to get in touch with their sales team.

How to Add Cloudflare to Your Website

Now that you have a clear idea of what is Cloudflare and how it works, here is our in-depth step-by-step tutorial on how to use Cloudflare with WordPress.

Step 1: Create a Cloudflare Account

sign up with cloudflare with top right button

Before using Cloudflare with WordPress, the first thing you will need to do is create a Cloudflare account. For this, head on over to the Cloudflare website, and hit the Sign-Up button. All you need to do is enter your email address, and provide a password, and your registration will be complete.

Step 2: Add Your WordPress Website to Cloudflare

Once you have created your Cloudflare Account, it will ask you to “+ add site” to its network. Simply enter your website URL in the provided area and hit the Add Site button.

adding a site on cloudflare

Once done, Cloudflare will start querying your website’s DNS records. It will do its work in the background. Click on Next to continue with the rest of the setup.

Note: Make sure your website URL is properly spelled out or else your setup won’t work.

Step 3: Pick a Plan

Next, you will need to Select a Plan for the website you added to Cloudflare.

Picking a plan on Cloudflare

We went over all the different features and functionalities of the paid plans as well as the free plans earlier. Pick one that fits your budget and requirement, and hit Confirm.

Step 4: Configure Your DNS Records

Here you will be presented with all the DNS information of your domain. You will need to enable/disable Cloudflare for the different subdomains. Simply click on the orange cloud beside each DNS record to toggle Cloudflare on and off.

Configuring DNS records on Cloudflare

We recommend that you keep Cloudflare enabled for the naked domain name as well as the WWW subdomain. That way, Cloudflare will be active for users trying to visit both the www and non-www versions of your website.

Once done, click on Continue.

Step 5: Configure Your Nameserver

Next, Cloudflare will generate two new nameservers. You will need to change your existing nameservers to the new ones.

Changing nameservers

To do this, you will need to head on over to your domain registrar. For the sake of this tutorial, we are using GoDaddy. If you are using a different domain registrar, the steps will be mostly similar, but the options might be placed under different menu sections.

With GoDaddy, you will need to log-in to your account, click on the profile button, and then click on the Manage Domains options located under the Quick Links section.

Managing domains with GoDaddy

Here you will find a list of all the registered domain names.  Click on the one that you are integrating with Cloudflare to open the Domain Settings panel. From here, scroll down and you will notice the Manage DNS option.

Manage DNS Settings

Here you will find your existing Nameservers. Click on the Change button and replace the existing nameservers with the ones provided by Cloudflare and click Save.

Setting up DNS management on GoDaddy

Make sure there are no accidental spaces before the nameservers or else they won’t work.

Once done, head back over to Cloudflare and click on Next. The following screen will prompt you to “Complete your nameserver setup.” As you have already changed your nameservers, now it is time to wait.

Scroll down, and you will notice a message telling you that it may take up to 24 hours for the process to complete. It generally doesn’t take that long and in most cases, will prompt the message “… Cloudflare is now protecting your site” within one hour.

Cloudflare Confirmation

Once you get that message, it is finally time to head to your WordPress website.

Step 6: Install and Activate the Cloudflare WordPress Plugin

For using Cloudflare with WordPress, there is a dedicated plugin to help you out. To install it on your website, you will need to login to your WordPress backend.

Now, from the left-hand sidebar, click on Plugins > Add New and search for “Cloudflare” in the provided area.

Install and activate the Cloudflare plugin as shown in the image below.

Adding Cloudflare plugin

Once activated, navigate to Settings from the left-hand sidebar and click on Cloudflare. It will ask you to either create a new Cloudflare account or sign-in with your existing one.

Cloudlfare sign in option in settings

Click on the sign-in button, and it will ask for your email address as well as the API key.

Getting API key for Cloudflare

To obtain your API key, use the link provided on the page.

A new pop-up window will appear. Click on the API Tokens option on the top menu, select View for the Global API Key option, enter your Cloudflare password. Now simply copy and paste the provided alphanumeric string.

API tokens on cloudflare

After providing your email address and API key, hit enter and you would have successfully activated Cloudflare on your WordPress website.

Step 7: Enable Optimize Cloudflare for WordPress

To make things more convenient for using Cloudflare with WordPress, you will notice a dedicated option – Optimize Cloudflare for WordPress. It is a one-click solution to properly implement all recommended Cloudflare settings so you can start taking advantage of its global network system.

And voila! You have successfully integrated Cloudflare with WordPress. However, to get the most out of Cloudflare, especially to use its several security and performance enhancement tools, you still have more to do.

Advanced Options and Settings Available with Cloudflare

Cloudflare boasts tons of settings and options. Here we will go over some of the most important features which you need to set up to enjoy better security and performance.

Cloudflare SSL

First, let’s learn how to use Cloudflare SSL with WordPress.

Cloudflare gives you access to a free SSL certificate which you can use to protect your website and switch it from HTTP to HTTPS.

To activate an SSL certificate for your website, head back to your Cloudflare dashboard and click on Crypto from the menu. Next, select the type of SSL certificate you want.

cloudflare ssl

Cloudflare provides you with four options:

  • Off – Select this option if you don’t want any SSL certificate active. This is not recommended.
  • Flexible – This option secures the traffic between your visitor and Cloudflare, but not between Cloudflare and your server.
  • Full – Get a completely secured connection between Cloudflare and your visitors, as well as Cloudflare and your server.
  • Full (strict) – This option also gives you a completely secured connection with the added benefits of authentication.

If you are using the free version of Cloudflare, you are only permitted to use the Flexible SSL certificate. Paying users will have access to Full and Full (strict).

Once you have selected your SSL certificate scroll down to access all the different SSL options available. We recommend that you keep “Always Use HTTPS” and “Automatic HTTPS Rewrites” enabled, if disabled by default.

Force HTTPS and Page-Specific Rules

Cloudflare also comes with additional settings that let you exclude certain pages on your website from Cloudflare as well as force HTTPS on all your pages and content.

For free, you will be able to use up to three-page rules. However, if you want to create additional page rules, then you can pay an additional $5/month to get access to 5 rules.

Now, to set up these page rules, you will need to head over to your Cloudflare dashboard and click on Page Rules.

page rules

From here, click on the “Create Page Rule” option and the following pop-up will appear on the screen.

creating page rule

Simply enter the URL for the page or post on which you wish to apply the page rule with an asterisk (*) before and after the URL. Once done, select the “+ Add a Settings” option.

A drop-down menu will appear with the following options.

selecting page rule

Select the page rule you want and hit “Save and Deploy” and the page rule will be active.

We recommend that you use one of the three page-rules the following way to ensure optimized security.

Under the URL space enter – HTTP://*yourdomain.com/* and choose option – Always Use HTTPS. This configuration will make sure that all your pages, posts, and subdomains, operating under this domain, will always use HTTPS.

Cache Management Options

To access the Cache management options, you need to head back over to your WordPress dashboard, then navigate to Settings > Cloudflare.

From here, you need to enable Automatic Cache Management. The option will automatically clear all Cloudflare cache the moment you edit or switch your theme. Also, after you make tweaks or adjustments to your WordPress content or design, you should activate the Purge Cache option. The setting will forcefully clear all the cached content on your site.

Two simple setups will help you clear the outdated cache and improve the overall speed and performance of your website.

Conclusion

Having a CDN is crucial, especially if your WordPress website receives a global audience, and Cloudflare is one of the best CDN services on the market. Not only will it make sure that all your visitors get access to optimal loading speeds, but also help improve performance and security.

We hope this Cloudflare setup guide helped you in using Cloudflare with WordPress. However, if you face any issues during the installation procedure, then don’t hesitate to share your problems in the comments below.

With that being said, we also encourage our more experienced readers to share some of their cool Cloudflare tips and tricks. We would love to hear your insights and it might even help out one of your fellow readers.

Article by
Pratik Chaskar

LinkedInTwitter

Pratik Chaskar holds the pivotal role of CTO at Brainstorm Force, serving as the backbone of the company. Renowned for his organizational skills, strategic thinking, problem-solving attitude, and expertise in leading and executing plans, Pratik plays a crucial role in the BSF’s technological landscape.

Disclosure: This blog may contain affiliate links. If you make a purchase through one of these links, we may receive a small commission. Read disclosure. Rest assured that we only recommend products that we have personally used and believe will add value to our readers. Thanks for your support!

12 comments
  1. Markus Kämmerer Profile Pic

    I’m using Cloudflare and WordPress for a while. With Elementor Pagebuilder, you need an Page Rule, otherwise elementor will not work anymore, if Performance options are enabled in Cloudflare.

  2. Adrian Profile Pic

    I find cloudflare slows my site down. I use woocommerce to run a simple portfolio site and believe it’s because of that. Unfortunately it’s almost an extra 3 to 5 seconds slower.

    1. Team Astra Profile Pic

      Hello Adrian,

      While Cloudflare should speed up your website, for some users it doesn’t, depending on a number of factors.

      Including your server location and performance, other optimizations on your website, and more.

      A 3-5 second increase in load times is very considerable and certainly doesn’t sound correct.

      We’d recommend reaching out to the Cloudflare support team to see if they can help figure out what’s wrong here”.

  3. Leonardo Profile Pic

    Hello, I use Astra theme and when I activate Cloudflare I lose all my CSS (added from astra customization), I can’t find a solution

    1. Team Astra Profile Pic

      Hello Leonardo,

      There’s a possibility that the files are not rendering correctly. If you have reached out to our support portal, we could help you in the best way possible.

  4. Thomas Conrad Profile Pic

    I have Basic Cloudflare and never knew I needed to add the plugin. I use Cloudways for hosting and have Astra and Elementor Pro. If I upgrade from Basic to Pro, will I have to change any setup functions? When I upgrade to pro and then install the WP plugin, will it mess up my current Cloudflare function. Bottom line can i upgrade from Basic to Pro with little to no hassle? is there a service I can purchase that makes sure everything is working properly. Thanks

Leave a Comment

Your email address will not be published. Required fields are marked *

Join 1,653,898+ Happy Site Owners Using Astra

Whether you are a beginner, small business owner, or professional web developer, Astra provides all the tools you need to easily build your beautiful WordPress website.

Download is Just A Click Away!

Membership Retention Checklist Download

REWIND

YEAR IN REVIEW

Download is Just A Click Away!

Enter your email address and be the first to learn about updates and new features.

Download Free Astra Theme - Modal Popup Form
Scroll to Top