CDNs and Cloudflare in WordPress – A Definitive Guide

A CDN, or Content Delivery Network, is a system of globally distributed servers that deliver content on behalf of other servers. CDNs cache data from the origin server, allowing users to access the data from a server near them, thus improving performance and reducing latency.

CDNs are an essential part of our modern world. The content that you view on any website or app―whether through a desktop, laptop, tablet, or smartphone―is very likely to have been delivered using a content delivery network.

In this article, we’re going to do a deep dive into content delivery networks, honing in on exactly what it is they do, and how. We’ll also look at a handful of the most used CDNs, and then zoom in on Cloudflare in particular, sharing our thoughts on what sets it apart. Rounding this out will be some tutorials on the different ways you can get Cloudflare up and running. Spoiler: it’s easy peasy.

Continue reading, or jump ahead using these links:

• What is a CDN, and Why Do You Need it?
• A Sphere of CDNs
  • CDN and DNS
• What is Cloudflare, & What Makes it So Special?
• Cloudflare Setup
  • Creating a Cloudflare Account
  • Setting Things Up Through Cloudflare’s Website
  • Setting Up Cloudflare via cPanel
  • Using the Cloudflare WordPress Plugin
• Optimizing Cloudflare in Hummingbird
• On Cloud(flare) 9

And away we go!

What is a CDN, and Why Do You Need it?

CDNs came into existence in the late 1990s as a means for alleviating the performance bottlenecks of the internet. Since then, they have grown to serve a huge portion of internet content, including web objects (text, graphics, scripts), downloadable objects (media files, software, documents), applications (e-commerce, portals), and media (live streaming, on-demand, & social media).

Without effective CDNs, most of what you view in today’s online world, in particular content that is accessed from a distance or simultaneously with a slew of other users, would take forever to load, have regular delivery interruptions (buffering, glitching, freezing), or completely immobilize websites.

There are many positives to utilizing a CDN. In addition to increased speed, they also amp up site security, lower costs, allow for higher scalability, and deliver a better user experience.

Content origin servers are at a much greater risk of failure without a CDN. Since they must respond to every individual end-user request, large spikes in traffic or persistent loads pose a high likelihood of risk.

By responding to end-user requests with a server that is closer in both physical and network proximity than the origin, a CDN offloads traffic from content servers and improves the web experience, benefitting both the content provider and its end-users.

If your website is hosted in close geographical positioning to a user trying to access your content, they will see your content in fractions of a second. But for those who are further away, that distance creates issues, because the browser has to fetch content from the server in your region, then display it to someone who is thousands of miles away.

Additionally, if users from other countries are requesting the same content simultaneously, the server becomes laden with those requests, increasing the time it takes to load and serve the content. This in turn will impact the speed of content delivery to the user.

A content delivery network offers the solution to this scenario. Since CDNs are broad networks of servers deployed around the world, storing and caching your website’s assets on them provides vastly improved speeds to the end user. Users at a significant distance from you get cached content fetched and delivered to them from a much closer server when using a CDN.

A Sphere of CDNs

Like most tools in the world of WordPress, there are many content delivery networks out there.

Here are a handful of the most well-known CDNs:

• Amazon CloudFront
• Microsoft Azure CDN
• KeyCDN
• StackPath
• Akamai
• Sucuri
• CacheFly
• Imperva/Incapsula
• Cloudflare

Those are just a portion of the companies available. Without going too far in depth, we’ll do a quick roundup of these most popular ones.

Amazon CloudFront is one of the branches under business titan Jeff Bezos. Amazon Web Services (aka AWS, the world’s most comprehensive and broadly adopted cloud platform), is built for high performance, security, and developer convenience. CloudFront securely delivers content with low latency and high transfer speeds, delivering data through 310+ globally dispersed Points of Presence (PoPs) with automated network mapping and intelligent routing.

To use it, you need to create a CloudFront distribution with the AWS for WordPress plugin, or create a secure static website.

Microsoft Azure CDN is an branch of tech magnate Bill Gates’ Windows software company. It provides secure, reliable content delivery, with global coverage and massive scalability. Azure lets you reduce load times, save bandwidth, and speed responsiveness—whether you are developing or managing websites or mobile apps, encoding & distributing streaming media, gaming software, firmware updates, or IoT endpoints.

KeyCDN is a budget-friendly CDN that offers a wide variety of options to improve the performance of websites. Some of the tools include unlimited SSL certificates, low latency, aggressive Gzip compression, rapid HTTP/2 delivery, traffic restriction settings, hotlink protection, and two-factor authentication. Pricing includes unlimited HTTP & HTTPS requests, and a low minimum usage charge (per month), based on the combined total account traffic volume and other services used.

StackPath has comprehensive built-in capabilities, including content protection and asset optimization. Stackpath CDN offers high speed performance (worldwide edge locations, redundant Tier-1 carrier connections, global Anycast, private network backbone between all locations), increased security (delivery control, DDoS attack mitigation, SSL), full visibility (built-in analytics & reporting, RESTful API, customization options), and lower total costs (reduce total bandwidth consumption, reduce downtime, and increase accessibility).

Akamai is one of the oldest content delivery network companies in existence. Purportedly the world’s largest edge platform, Akamai’s tagline is to “keep your digital experiences closer to users, and threats farther away”. They have fast, engaging app & API performance (enhanced by robust data and automation), and consistent delivery of streaming experiences to the largest audiences, on any device. Note: Akamai does not publish specifics on how large their CDN network is or where the POPs are.

Sucuri CDN caches your website on its edges automatically, speeding it up by 70%. Sucuri offers multiple caching options, reliable website uptime, and high availability and redundancy. They also fine-tuned settings to give maximum performance and protection, with custom options available. You can choose what best fits your needs, or get an assist from them. Their Global Anycast Network has 10 SuperPOPs in the USA, Europe, Asia, and 2 CDN POPs in Australia and Brazil.

CacheFly specializes in fast delivery of media files, promising video delivery with less than 1s latency. Aside from ultra-low latency video streaming (delivering video to more than a million uses concurrently), CacheFly also provides lightning-fast gaming (with industry-leading throughput speeds), mobile content optimization (automatic and simple), and multi-CDN (for redundancy and failover). From these specs, you can see CacheFly is particularly suited to streaming and gaming customers (though not exclusive to them).

Imperva (formerly, Incapsula) brings content caching, load balancing, and failover natively built into a comprehensive Web Application and API Protection (WAAP) platform, so your applications are securely delivered across the globe. DDoS protection and Secure CDN are combined to provide complete edge security. Imperva’s website/network defense makes it ideal for corporations that handle confidential information, such as banks and insurance agencies.

Cloudflare is a global CDN designed to make all of your internet connections secure, private, and fast. This flexible and programmable global network was built to serve companies and organizations of all sizes, from individual developers to large corporations, providing services to everyone that were once only available to internet giants. Cloudflare is robust, reliable, and smooth.

CDN and DNS

Some CDNs, such as Amazon CloudFront, require you to perform the initial server load, then use the CDNs URL when referencing the asset. The CDN will then determine which server to use to actually handle the request.

Other CDNs, such as Cloudflare, operate further upstream at the DNS level. Effectively, all of your traffic is routed through Cloudflare (by changing your nameservers to their nameservers). It then analyzes each request, serves those it has an asset for (grabbing them in an initial scan), and passes the others through to your site (mostly your dynamic content, such as posts and pages).

The DNS approach has several distinct advantages:

• Quick and effortless – it’s just a matter of changing your nameservers
• Easily reversed – simply change your nameservers back to your hosting provider
• Improved security – Cloudflare looks at every single request and automatically filters out those that are from known suspicious IP addresses
• There a no changes to the publishing process

Add to that list the fact that Cloudflare has a free tier in its product list, and using Cloudflare for your WordPress site is pretty compelling. And the reason why it’s our top choice for a CDN.

What is Cloudflare, & What Makes it So Special?

Cloudflare is a powerful CDN, who’s architecture gives you an integrated set of network services, designed to run every service on every server in every data center across their global network, all accessible from a single dashboard.

It’s secure. Built into every component of the network, Cloudflare’s 100 TBPS network blocks an average of 70 billion threats per day, including some of the largest DDoS attacks ever recorded.

It’s private. Cloudflare complies with local regulations for data locality and storage, and doesn’t generate revenue from advertising (no collection and retention of personal data processed on behalf of the customer).

It’s fast. It has connections to all major cloud providers, and interconnections with nearly every service provider around the world. Plus data centers in over 250 cities that deliver sub-50-millisecond latency to 95% of the internet users in the world.

It’s hassle-free. Cloudflare is designed with maximum ease in mind:

• setup takes less than 5 minutes
• anyone with a website and their own domain can use CF (regardless of platform)
• no additional hardware or software is required
• no code changes are needed
• you can keep your current hosting provider (or choose any one you prefer)

Cloudflare also lays claim to an amazing feature that is unique to them—APO, or Automatic Platform Optimization. The effects of using APO are similar to hosting static files on a CDN, but without the need to manage a complicated tech stack.

In addition to caching your static assets (images, JavaScript, CSS), APO caches the actual content on your site (the HTML) using Cloudflare’s massive edge network.

With your entire site being served from cache, your visitors will get near instant load times. Cloudflare reports that its testing shows APO delivers consistent load times of under 400ms for HTML Time to First Byte (TTFB).

Content creators retain the ability to create dynamic websites, without any changes to their workflow for the sake of performance.

If you’re currently using Cloudflare’s free plan, you can get the APO add-on for a low (single-digit) monthly fee. If you’re on their Professional, Business, or Enterprise plans, APO is already included in your subscription.

The plans and prices listed on Cloudflare’s website are under the top menu header Application Services > Overview. The APO feature is under Application Services > Add-ons.

Now that we have a clear picture of what Cloudflare can do, let’s move on to implementing it.

Cloudflare Setup

As mentioned prior, setting up Cloudflare in a simple process. There are multiple options for implementation, and we’ll do a walk-through for each one.

The first step required is…

Creating a Cloudflare Account

Whether you are going to use their free service or purchase a plan, you will need to have a Cloudflare account.

If you already have a Cloudflare account, you must login first to add a site.

If you don’t already have one, you need to create a Cloudflare account:

1. Go to CloudFlare’s sign up page.
2. Enter your Email address and Password.
3. Click Create Account.

That’s all there is to account setup. Next we’ll look into putting Cloudflare in motion using three different methods.

Setting Things Up Through Cloudflare’s Website

Once you have created an account and/or logged in, Cloudflare asks you to add a site. You can also add multiple sites at once with CF’s automation, if you’re so inclined.

Let’s add a single site now.

Adding a Site to Your Cloudflare Account

1. Once you’re logged in on your account page, click Add a site from the top right of the Home page/dashboard.
2. Enter your website’s root domain, then click Add Site below. Example: if your website is www.mysite.com, type mysite.com.

   

3. Select one of the plans, then click Continue at bottom.

   

4. Cloudflare does a quick scan for existing DNS records, then loads the page Review your DNS records.

   

5. Verify that DNS records in the query results are configured correctly. (These records will take effect in Cloudflare after you update your nameservers.)For a free account, your status will be Proxied: Accelerates and protects traffic, which is indicated by the orange cloud icon.
6. Adjust records as needed, or click Continue.

Click here if you need to manually add missing DNS records.

Click here if you need help regarding which subdomains are compatible with CF’s proxy.

To finish setup and activate your domain on Cloudflare, your nameservers must point to them. Which brings us to the next section.

Changing Your Domain Nameservers to Cloudflare

You can point nameservers from any registrar to Cloudflare through your account settings.

Cloudflare does have its own registry service, meaning you can purchase a domain directly from them, if you like. (Cloudflare’s domain registry service currently supports common TLDs (top level domains) only.)

1. Login & navigate to Cloudflare’s dashboard, then click on your newly added domain.

   

2. Cloudflare will take you to their Overview > Complete your nameserver setup page. Copy (or memorize) both nameserver 1 & 2 under Replace with Cloudflare’s nameservers.

   

3. Log into the administrator account for your domain registrar. If you are unsure who your domain registrar is, you can go to ICANN to find out.

   

4. Replace the current nameserver records in your registrar account with the information you copied from Cloudflare.

Presto, change-o, you’ve repointed your nameservers.

Here is a handy list of detailed instructions & links for the most common registrars.

5. Wait for your registrar to update your nameservers; this can take from a few minutes up to 24 hours.
6. Confirm your site activation by logging into the Cloudflare dashboard.

• If you no longer see Complete your nameserver setup, you have successfully updated your nameservers and your domain is active at Cloudflare.
• If Complete your nameserver setup still appears, ensure the nameserver output correctly spells the Cloudflare nameservers, and confirm Cloudflare’s nameservers are the only nameservers listed.
• If the nameserver output is correct, select Re-check now.

You should now see—or will soon see—the green check mark on this domain in your Cloudflare account. You will also receive a confirmation email from Cloudflare once your nameservers are active on their site.

Click here for additional help changing your domain nameservers to Cloudflare.

For DNS records proxied to Cloudflare, Cloudflare’s IP addresses are returned in DNS queries instead of your original server IP address. This allows Cloudflare to optimize, cache, and protect all requests for your website.

Verifying Your Traffic is Routed Through Cloudflare

Though not required, you can check that your domain nameservers are now pointing to Cloudflare through other means. There are a couple of different methods for doing this.

Note that most DNS tools online use cached query results, therefore it may take longer for them to show the updated nameservers.

Method 1: Use the following text in the operating system command line/prompt.

On Linux/Unix:
dig domain_name +trace @1.1.1.1
dig domain_name +trace @8.8.8.8

On Windows:
nslookup domain_name 1.1.1.1
nslookup domain_name 8.8.8.8

Be sure to replace the generic “domain_name” with your actual domain name.)

FYI, 8.8.8.8 is a Google DNS server, while 1.1.1.1 is a DNS resolver operated by Cloudflare.

Method 2: Use an online tool, such as this DNS Propagation Checker.

If the nameservers returned here are not the ones provided and expected by Cloudflare, you’ll need to check with your Registrar.

If you run into issues, here are some things you can do:

• Check that no DS records are present; if any are, remove them at your Registrar.
• Check that only the Cloudflare nameservers are present; if there are others, remove them in Registrar configuration.
• Check that the Cloudflare nameservers are spelled correctly in your Registrar configuration.

Click here for additional Cloudflare DNS FAQs.

Confirm Traffic is Proxied to Cloudflare

Some online tools such as GTmetrix don’t recognize Cloudflare as a Content Delivery Network, due to the fact that Cloudflare doesn’t operate like a traditional CDN.

To confirm your domain traffic actively proxies through Cloudflare:

1. Copy this URL >> https://www.mysite.com/cdn-cgi/trace, then replace the “www.mysite.com” portion with the domain proxied to Cloudflare.
2. Paste the edited code into your browser, and enter to load the page.

If proxied to Cloudflare, output similar to the image below will appear in your browser:

If you don’t observe similar output:

• Confirm your DNS record has the orange cloud icon in its row.
• Enter your domain at ICANN to confirm the nameservers only list Cloudflare nameservers for your domain.

For any unresolved issues or questions, check out Cloudflare’s full troubleshooting guide.

Now we’ll look at our second scenario, which is…

Setting Up Cloudflare via cPanel

In this section, we’re going to look at how to activate Cloudflare through the cPanel customer interface.

Many hosting providers have support for Cloudflare built into cPanel, so installing Cloudflare is as simple as filling in a short form. Depending on how your hosting provider handles cPanel, this may look slightly different, but should follow the same basic steps.

1. After the Cloudflare plugin is installed, you should see a Cloudflare icon in cPanel. Double-click to open the application.

   

2. Login to your Cloudflare account through the login screen. (If you skipped over the account creation part of this article and don’t yet have an account, click on Sign up.)
3. Your Cloudflare account will likely be configured for you, again dependent upon your hosting provider. However, you should be able to select which sites you want to use Cloudflare with.

Now on to our final method…

Using the Cloudflare WordPress Plugin

Cloudflare has their own plugin on the WordPress repository.

Use of the plugin is not necessary by any means, whether or not you have already set up Cloudflare. It simply serves as another point of access to some of Cloudflare settings, allowing you to view or adjust them from within WordPress. Not all options are accessible under the free plan, rather require a Pro/paid plan.

Let’s do a quick walkthrough of how the plugin installs and works.

1. Go to the WordPress repository, and search for Cloudflare (or, do it directly from within the WordPress dashboard, via Plugins > Add new).
2. Install and activate the plugin, then click Create Your Free Account, or Sign in here.

   

3. Enter your Cloudflare account email address and API key; click on Save API Credentials.

   

After sign-in, you’ll be taken to the Cloudflare plugin’s Home page. There are two other pages you can access here, which you’ll see identified by blue icons at the top—Setting, & Analytics.

Home and Settings will keep you in the plugin, while Analytics connects you to the Cloudflare.com website.

Here’s a short video of what the plugin options offer on each page, once you are signed in.

Options available through the Cloudflare plugin for free and paid plans.

Options available through the Cloudflare plugin for free and paid plans.

Now that we’ve looked into setting up Cloudflare in a variety of ways, I’d like to show you how to boost it even further by…

Optimizing Cloudflare in Hummingbird

Hummingbird, if you’re unfamiliar, is our WordPress speed optimization plugin—and it’s completely free.

If you use WPMU DEV’s hosting, or have one of our memberships, Hummingbird Pro is automatically included in the package of services & products we provide (along with our other premium plugins).

Hummingbird is a full performance suite, with world-class caching, one-click minification, and a slew of other premium optimization tools.

Hummingbird also has an integration for Cloudflare’s APO, built right in!

Cloudflare’s APO for WordPress is a paid feature. (See prior section, “What Makes Cloudflare So Special”, for more information on features, plans, and pricing.)

However, you can still integrate Cloudflare in Hummingbird on their free plan, with no paid add-ons. The benefit you would gain is the ability to clear Cloudflare’s browser cache from within Hummingbird.

In the end, it’s a personal choice whether or not to get APO, but it is a robust feature, well worth investing in for the small fee it requires.

Let’s look at how to set up Cloudflare integration in Hummingbird.

1. Navigate to Cloudflare.com, and make sure you’re logged in.
2. From your main account page, choose the domain you are using for this, then click on it. On the resultant page load, scroll to the bottom, and click on Get your API token.
   Though you can use your Global API Key or API Token from Cloudflare for the Hummingbird integration, the API token is recommended, because it’s isolated per zone. The Global API key gives admin access to your account, which isn’t really required.

   

3. From the API Tokens section, click on Create Token.
   

   

4. Scroll down to WordPress in the list of API token templates, then click on Use template.

   

5. Now we have to create a zone for this token. Scroll down to Zone Resources, then click the dropdown menu under All Zones, and select Specific zone.
   A new selection menu will pop up on the right. We need to pick the specific zone from this dropdown, which will be the domain we’re going to connect through WordPress and Hummingbird. Click Continue to summary.

   

6. Cloudflare will display a summary displayed in tiered format. Click on Create Token below it.

   

7. The API Token Key has been created. Click on the Copy button to copy to clipboard.
   

   

   You can view the tokens associated with your domains on Cloudflare any time. The list under each domain will show you what tokens are active.
   Just click on the ellipses “…” to see the options for View summary, Edit, Roll, and Delete. This makes it quick and easy to revoke a token if you ever desire to do so.

   

   The Roll option is what you’d choose if your API token (Cloudflare calls this “the secret”) is lost or believed to be compromised. Rolling your secret key into a new one will invalidate the previous one, but the access and permissions will be the same as the previous key.

   Now that we’ve got our token, we can head back over to the Hummingbird plugin in our WordPress website.

8. From the dashboard, navigate to Hummingbird > Caching.

   

9. From Integrations, click the blue plus + button on the right of the Cloudflare row, and the Hummingbird popup wizard appears.
   Make sure the email associated with your Cloudflare account is in the email field, then click API Token. Paste the key you copied into the Cloudflare API token field, then click Connect.

   

   Hummingbird presents a message, indicating you need to activate a zone.

10. From the dropdown menu for Select zone, choose the domain we just got the API token for on Cloudflare, then click Enable Cloudflare.

    

Tada! You’ve now successfully integrated Cloudflare with Hummingbird.

One last bit of housekeeping to take care of—if you subscribe to Cloudflare’s APO feature.

Scroll down to the bottom of the page and toggle the button for Enable APO. And there you go!

If you don’t pay for Cloudflare’s APO service, this toggle button will be grayed out, but a link is provided to purchase it from Cloudflare’s site for your convenience (if you’re interested).

Once enabled, you can also select an additional option inside to cache content according to the device types used by your site visitors. Cache by device type ensures that only needed assets are cached and delivered to the user’s browser depending on the device type used: mobile, tablet or desktop.

Hummingbird and Cloudflare will now work in tandem to give you an incredible amount of speed and protection.

On Cloud(flare) 9

In today’s world, almost all websites and applications rely on a CDN to help serve content to their users. Which makes sense, given that CDNs have proven their many benefits, including these top four: better performance, increased reliability, cost savings, and resilience against cyber attacks.

There are many options for choosing a CDN, so if you don’t like one you tried previously, don’t give up! Cloudflare in particular is such a good choice, especially due to their amazing and proprietary APO feature.

As you’ve seen in this article, setting up Cloudflare in WordPress can be done in a number of different ways (none of which are difficult), and afterward you will continue to reap its rewards.

Considering the power and prevention that CDN and Cloudflare bring, there seems little reason not to give them the old college try.