Avatar
Brenda Stokes Barron
. 2 Comments

Adding a CDN to a WordPress Website

Nowadays websites have become more dynamic and richer in content which can increase the initial load time for visitors from other parts of the world.

The average page size is more than 2MB – this is almost twice as much as 3 years ago.

But as you might know, slower sites are a big NO when it comes to overall user-experience, SEO and Google rankings.

As per Google, the ideal upload time for an average site is less than a second.

Implemented CDN
Our average loading time went from ~700ms to ~200ms when we switched to Cloudflare DNS.

Slower sites contribute to the less satisfying user experience which Google does not like at all and it’s worse on mobile devices. This is where a WordPress CDN (Content Delivery Network) service comes in handy.

In this article, we’ll talk about how a WordPress CDN service can help speed up your website and show different options for integrating a CDN service with your WordPress website. 

What Is CDN?

Content Delivery Network or CDN is used to deliver content instantly to the end-user. It takes a while for the web page to load if the server is pinged for every request especially if the server is located far away from the user.

This is also known as latency which CDN was built to overcome. Instead of pinging a web server for every request; CDN keeps a copy of the web page and delivers it to the end-user for every subsequent request from its nearest server.

what is CDN

Source: KeyCDN

The above image is taken from KeyCDN. It demonstrates how the CDN server caches the CSS file requested only once from the origin server and is delivered from the CDN server on subsequent requests.

How Does CDN Work?

To understand how CDN works, it is important to understand why CDN was needed in the first place. A website is hosted on a web server that has a single physical location. If the user is located near to this server location then the content delivered from the webserver will be faster as compared to the user browsing from the other side of the world.

For example, if the webserver is located in London, UK; user browsing from Germany or Spain will get a faster response as compared to the user browsing all the way from Russia.

CDN Servers Network

 

CDN servers delivering content to the users inside their domain

To avoid this latency in delivering the content; CDN makes a copy of these web pages and stores them in its servers spread all over the world. To ensure a faster delivery to every user, CDN makes use of its PoPs (points of presence) located in multiple locations around the world. These PoPs contain multiple servers that are responsible for delivering content to the user visiting the site inside its parameters. CDN delivers both static and dynamic content which includes media files, HTML, JavaScript, and CSS files.

Do I Need a CDN on a WordPress Site?

CDN is essential for every website which has a global audience. It does not matter if you are running a blog or an online store, Content Delivery Network (CDN) significantly improves the user experience and increases overall productivity.

CDN services are widely used and are getting popular among WordPress users who wish to offer better experiences to their users. The list of businesses using CDN services is huge – Digital Agencies; Entertainment; Health Care; E-Commerce; Education and Advertising to name a few.

There is one exception where CDN might not be the best option. If you are running a strictly localized business and the majority of your targeted audience belongs to your locality then using a CDN might actually make things worse. That’s because it will add an additional unnecessary layer of CDN servers which is not needed since the actual web server is within the reach and does not require another resource to deliver the content.

Popular CDN Providers & Setup Process (Step-by-Step)

There are many companies that offer CDN services and have different packages to choose from. We suggest doing your research before investing in a provider. You may consider the following to begin with.

  1. Cloudflare
  2. StackPath
  3. Sucuri
  4. KeyCDN

You can find more reliable CDN services in this comparison.

In the past, it used to be a bit of a challenge to integrate CDN to a WordPress site as it required to be configured in many places. Things have changed now with the advent of modern plugins; adding a CDN to WordPress site is only a matter of few steps.

1) Cloudflare CDN Setup Process

The next CDN we will be integrating to our WordPress site is Cloudflare. This CDN too is very popular among the WordPress users because of its performance, security and FREE subscription.

To get started with CloudFlare, visit their website and click on the Sign-up link in the top navigation. Then enter your email and password and click the Create Account button.

Getting started with cloudflare

Once the account is created, you will be asked to Add a Site.

Adding site to Cloudflare

Enter your website URL and click on the Add Site button to proceed.

On the next screen, select the subscription plan you would like to have with Cloudflare. In this article, we will be using the FREE version.

Selecting Cloudflare plan

After confirming the subscription plan, the website will scan your DNS record.

Click on Continue to receive new Nameservers.

Cloudflare DNS

Replace your existing Nameservers from the Nameservers provided by Cloudflare and click Continue. It can take around 24 hours to make the switch and once it’s done you will see the status activated and the content of your site will be delivered from Cloudflare servers.

To integrate any CDN to a WordPress site the processes are pretty much the same. However, it is important to analyze which CDN provider can serve you better before investing in it. The main objective might be the same but they all come with different features and pricing.

2) StackPath CDN Setup Process

StackPath (previously MaxCDN) is one of the best-known names in the CDN industry. They offer CDN plans as well as a combination of CDN and website firewall plans. Both plans offer a free month-long trial, which we’ll be using in this tutorial.

To get started, visit the website and navigate to Products > Edge Services > CDN. Then, scroll down on the page until you see the Get Started Today section, choose CDN only, and then click Get Started Button.

StackPath Getting Started

You can enter an email and password to create your account or you can sign up with an existing Google, Facebook or Github account.

Once you’ve created your account, select Website & Application Services.

Selecting Stackpath Service

Choose CDN on the next page and then configure your payment method and click Continue.

You’ll then need to create a site by entering your domain name.

Adding site origin StackPath

Click Continue and then enter the IP address of your hosting server. You can usually find this information in your cPanel.

Adding a site to Stackpath

The last step is to update your DNS settings and point them to the StackPath Network. You’ll need to create an A record and enter the information provided by StackPath. It will take up to 24 hours for the changes to take effect so don’t forget to check your site to make sure everything is working.

3) Sucuri CDN Setup Process

Sucuri is a popular security plugin that will harden your WordPress website and protect it from hackers. They have a pretty robust security platform that will not only secure your site and scan it for malware but it will also provide you with various speed optimizations.

They also offer a standalone firewall that includes a built-in CDN for your site. The plans start at $9.99/month and come with a 30-day money-back guarantee.

To get started with Sucuri’s CDN, visit their website and then choose Website Firewall from the Products dropdown menu. For this tutorial, we’ll sign up for the Basic plan.

Signing up for Sucuri account

Create your account and add your billing information.

Creating sucuri account

You’ll then be able to add your site by entering your domain name and selecting the option “I want to use the Sucuri’s DNS servers”.

Adding site to sucuri

The last step is to update your DNS information by adding an A record and pointing it to Sucuri’s DNS servers.

The DNS changes can take up to 48 hours to propagate although Sucuri says it can happen within 6 hours so make sure to check your site to ensure everything was set up correctly.

4) KeyCDN Setup Process

This is one is a high-performing and widely used CDN. You may try out their service by signing up for their trial version. For this article, we will be using their trial version as well.

KeyCDN Registration

Visit their official website and create an account. Once the account is created, a confirmation email will be sent to your email address. By confirming the email your account will be activated and you will be able to access the dashboard.

KeyCDN Dashboard

Navigate to Zones from the side menu to add a zone for your website and to generate CDN URL.

KeyCDN Zone

Click on the Save button to save the changes. It will take a few minutes to activate your zone and once it’s activated you will see the status as Active. The next step is to Purge from the Manage drop-down menu under Actions.

KeyCDN Zone URL

Copy the Zone URL and save it for the next step.

Installing a Plugin

In the step above we successfully generated CDN service for our WordPress site. Now we need to configure our WordPress site so it can work with CDN service properly.  To do so, we have to require one plugin to be installed on our WordPress site.

Log into your WordPress dashboard and Add New plugin from the Plugins option. Search for Breeze – WordPress Cache Plugin.

Breeze Plugin

After installation, activate the plugin and go to its settings. Click on the CDN tab and paste the Zone URL you have already copied from the KeyCDN dashboard.

Breeze Plugin Settings

Click on Save Changes to implement the CDN.

That’s it! You have successfully integrated CDN to your WordPress site. To confirm the integration, browse your site in any web browser and access its source code. If the integration was successful you will see the files are being downloaded via KeyCDN servers.

KeyCDN Test

Benefits of Having a CDN in WordPress

WordPress is a content management system that consumes a fair amount of both static and dynamic data. Typically a WordPress site is built on a template or theme and harnesses some of its functionalities through plugins. Content such as header, footer, banner images, and the menu does not change very often and can be cached by CDN service. Besides caching CDN offers other benefits as well.

CDN benefits

Saves Bandwidth

Since CDN caches the content and supplies its own copy without actually fetching from the web server, it will save you a lot of bandwidth. This may not sound big but it can save big bucks in server expenses for high traffic sites.

Security

Security is one of the highest issues for WordPress users but it can be addressed by using a CDN on a WordPress site. CDN hardens the security as it is optimized to identify notorious security threats like Distributed Denial of Service (DDoS) attack and spamming activities using bots and scripts.

Tackle High Traffic

Websites with high traffic volume can leverage the network of CDN servers. The cached content is readily available for the end-user even if the webserver is loaded with new requests.

Speed

It improves page loading speed significantly as it reduces the latency effect by supplying cached content stored in one of the many servers located around the world. This contributes to user experience and also reduces the bounce rate as users tend to spend more time on your website.

Higher SEO Rankings

We mentioned earlier that Google favors fast websites. With a CDN, your website’s performance will be improved dramatically so it’s only natural to expect that your website will rank better in search engines.

Better Availability

Finally, with a CDN, you don’t have to worry about your site going down because your server is suffering from downtime. Since a CDN serves cached content from multiple servers, if one server is unavailable, the CDN will simply deliver your site from a different server.

Final Thoughts

In this article, we discussed what a CDN is and how it works. We also looked at some of the popular CDN providers and investigated how to integrate a couple of them into a WordPress site. We also understood the benefits a CDN can bring to a website and the kind of businesses that are already using CDN on their sites for better user experience. Share your experience with your CDN provider.


Want to ask a question or leave a comment?


Ask me anything

  • Avatar
  • +

2 comments

Leave a Reply

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

*

    1. Avatar
      Nick Schäferhoff

      Yes, that is absolutely possible and it actually offers a bunch of benefits. There are also a number of services out there that offer this already. As with everything, I would recommend some testing before you commit. Thanks for the excellent question!