Chat with us, powered by LiveChat

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.

WordPress CDN: A Definitive Guide to Boost Your Global Visibility

June 10, 2019

13 Min Read
wordpress cdn guide
Reading Time: 13 minutes

Anybody who serves the web on daily basis understands the importance of fast loading websites. Over the years websites have become richer in content and functionalities. This evolution was necessary to accommodate the demand of the modern web where user interactivity has gone to a whole new level. However, many website owners still find it challenging to deliver their content at a faster speed to the end-users located around the world.

To address this issue, many websites have started to use WordPress CDN (Content Delivery Network) which helps in delivering the website content faster to every user despite their location. If you are wondering what is a CDN? then this detailed guide can answer your questions.

1.  What Is a CDN (Content Delivery Network)?

If we break the full term we get Content Delivery and Network. Now we can establish that it has something to do with delivering the content. But which content? Well, it delivers both the static, streaming and dynamic content of your WordPress site which includes media files, CSS and JavaScript files.

The other part, i.e., Network is the essence of this delivery system. The content we discussed earlier is hosted on this network of servers spread over the world and when the user sends a request from its browser, it is handled by the nearest server to avoid latency.

Fact: 1 second delay in page load time can cause a 7% loss in conversion, 11% fewer page views, and a 16% decrease in customer satisfaction.

For example, you have launched a server on Cloudways WordPress managed hosting and chose the data center in London, UK. This is where your WordPress site is physically hosted and all the requests are handled from here. Your site will be lightning-fast if browsed by the users located in Europe but it can load a bit slower for the users browsing from Tokyo or Manila. That’s because the distance between Tokyo and London is further than Paris and London.

Best CDN for WordPress lessen this distance by delivering content to the user from the nearest server. In order to reduce the distance between the user and the web content, CDN keeps a cached copy of the content in multiple servers located worldwide.

2. Who Needs WordPress CDN?

Almost all WordPress sites need a CDN and the number of sites using CDN is increasing exponentially. Businesses that are operating in multiple geographical locations are relying on these CDN services for the same reasons (discussed earlier in this article). However, if you are running a site that only targets users from the same location as your web hosting then using a CDN is not ideal. In fact, it can cause bad user experience as users might have to face delays due to an unnecessary interference of extra connections between the user and hosting.

Let’s see which popular businesses use CDN for WordPress to speed up their WordPress sites.

  • Ecommerce
  • Blogs
  • Advertising agencies
  • Media and Entertainment
  • Streaming Sites
  • Online Gaming Sites
  • Online Education
  • Healthcare

3. Why Is CDN Important for WordPress?

Over time, the Content Delivery Network (CDN) has improved a lot. Having a WordPress CDN on the WordPress site has many advantages that cannot be ignored. Let’s see them in detail!

  • Faster Load Times: It reduces page loading times as content is readily available from the network of CDN servers.
  • High Traffic Handling: Since the content is being delivered from multiple sources, a site using a CDN for WordPress barely faces downtime or low performance even when experiencing higher traffic volume.
  • Saves Bandwidth: CDN also reduces bandwidth consumption as it limits the direct flow of requests from users to web hosting by delivering the content itself.
  • Security: The CDN network is scattered and is able to withstand low to mild DDoS attacks. A few CDN providers also have an active mechanism installed to identify these attacks, spammers, and bots. It adds an extra layer of security especially for those WordPress sites where customers pay using their credit card information.
  • Better SEO Ranking: There is no secret that Google ranks faster sites which is why they made it one of the ranking factors back in 2010. It is difficult to determine how much the speed can hurt the SEO ranking, but it is obvious that it affects the user experience which is not something Google encourages.
  • Enhanced User Experience: WordPress CDN on WordPress site does not only enhance user experience on the desktop but also on mobile devices by loading the web pages faster. A large number of people have started using their mobile phones to surf the Internet. Google has also started a mobile-friendly search initiative which means that sites that are mobile-optimized will have an edge in search results.

Fact: Revenue increased by 1% for every 100 ms of decrements in page load times.

WordPress CDN Speed Test

Let’s see CDN in action by testing it on a WordPress site hosted on Cloudways. Our server is located in Fremont, USA. We tested the speed from multiple locations before and after integrating CloudwaysCDN.

San Jose, California, USA

Before

San Jose Before

After

San Jose Before

New York City, New York, USA

Before

New York Before

After

New York After

Stockholm, Sweden

Before

Stockholm Before

After

Stockholm After

Melbourne, Australia

Before

Melbourne Before

After

Melbourne After

The above test results show that without CDN the speed is slower in the regions which are further away from the actual server location but after integrating CDN on WordPress site, it showed improvements in load speed.

4. Top WordPress CDN Providers

WordPress CDN providers are available in every budget range. On top of this, many CDN providers offer a trial account that offers you a taste of the services.

To help Cloudways users, I have compiled the following list of CDN providers that can be easily integrated with Cloudways managed servers.

Note: StackPath (aka CloudaysCDN) can be integrated easily within the platform.

CloudwaysCDN (StackPath)

CloudwaysCDN is powered by StackPath, one of the best CDN providers for WordPress with a large global server network.

Popular features include protection against DDoS attacks, blocking features with load balancing. All plans also offer firewall protection which also contributes to improving the page load time of your website.

If you are a Cloudways user, you can also use this CDN option with ‘Breeze’, the default caching plugin.

Pricing: $1 per 25GB

KeyCDN

KeyCDN offers several useful features that optimize content delivery across various locations from around the world. KeyCDN is a popular WordPress CDN option with a reputation for speed and 24/7 customer support.

KeyCDN also offers DDoS protection, free and custom SSL certificates, HTTP/2 support and RESTful API for third-party integrations.

Pricing: The pricing model is pay-as-you-go, starting from $0.04/GB, with a minimum yearly invoice of $40.

Cloudflare

Cloudflare is one of the most popular CDN for WordPress mainly because it’s easy to set up and has a huge global server network.

Cloudflare also offers a free plan, with limited security against DDoS attacks and other vulnerabilities. Other features include load balancing, web optimization, DNS management, and SSL certificates.

Pricing: Pro plan starts from $20/month.

CloudFront

CloudFront by Amazon is a fast and secure CDN for WordPress which offers industry-standard security against DDoS and similar threats. It can easily be integrated using Amazon management console, CLI and SDKs.

Pricing: on-demand

Incapsula

Incapsula is another popular CDN for WordPress with servers located across the globe. It can easily be integrated with WordPress and is compatible with all popular caching plugins.

Incapsula offers features like SSL certificates, 24/7 support, DDoS protection, Firewall, attack analytics, threat intelligence, and data protection.

Pricing: Starts from $59/month

CDN77

CDN77 is considered as one of the fastest CDN for WordPress websites. Highlighted features include SSL/TLS Certificates, DDoS Protection, Hotlink Protection, and Web Firewall.

CDN77 also offers analytical tools for tracking traffic and bandwidth usage and CDN logs which contains useful information and crash reports.

Pricing:  Starts from $199/month

While selecting the right CDN for your business, it is also important to consider the cost and services along with performance since it plays a major role in speeding up your site and if it’s being provided in a competitive price tag, then it’s the best bet.

5. WordPress CDN Benchmarking

There are many WordPress CDN providers to choose from, but it is a challenge to determine which one will offer the best performance in real-world scenarios.

The only way to resolve this issue was to benchmark those CDNs and for that, we selected three widely used popular CDN providers:

  1. CloudwaysCDN (Partnered with StackPath formerly known as MaxCDN)
  2. Cloudflare
  3. KeyCDN

The Process of CDN Benchmarking

I launched default WordPress on Cloudways DigitalOcean server of 1GB RAM, 25GB SSD, and 1 Core CPU.

For the benchmarking test, the tool we used is an open-source Node.js CDN benchmark CLI. To establish an in-depth understanding of how fast a WordPress CDN delivers content, sufficient data entries over the course of a few hours is required.

In our CDN benchmarking, we downloaded three image files from our WordPress site hosted on Cloudways (Small: 78.6KB, Medium: 747KB, Large: 1.28MB) for 3.5 hours with 5 minutes intervals. These files are taken from a WordPress site hosted on Cloudways.

The Results of CDN Benchmarking

After the benchmarking test, we compiled the final data into a graphical representation for easy comparison. The data was generated after running the test for straight 3.5 hours. The test gives you a hint of which CDN works better on which file size.

Small Image

small image

Cloudflare started normally but could not maintain the same pace while downloading the small size image. In the first 40 minutes of the test, it went as high as 22 milliseconds whereas CloudwaysCDN and KeyCDN were just lying straight on the horizontal axis showing a constant speed of approximately 2-3 milliseconds. There is a spike from 75-85 minutes in KeyCDN where it went as high as 9 ms. CloudwaysCDN was quite smooth throughout the test. It started and ended the test with the maximum downloading speed without any surprises.

Medium Image

medium image

Things did not get better for CloudFlare when downloading a medium size image as well. It had huge spikes from 20-40 minutes of approximately 128 ms. Another smaller spike from 75-85 minutes. On the other hand, CloudwaysCDN maintained its top position in the comparison with KeyCDN which showed some disturbance towards the end of the test as seen in the above graph.

Large Image

large image

While downloading the large image (1.28MB), Cloudflare downloading speed was approximately 40 ms while its counterparts had comparatively a good start. KeyCDN was almost steady throughout the test except for a few bumps at the start and towards the end of the test. CoudwaysCDN again did an amazing job by staying as close as possible to X-axis showing the fast and steady downloading speed throughout the test.

We also calculated the average download speed of each CDN on three image sizes.

Average Score

average

The results from the above graph are pretty straightforward. CloudwaysCDN had the highest downloading speed in all three categories of files. KeyCDN came second with an average score. Cloudflare got the third position with the lowest score due to huge spikes in the initial stages of all three tests. It performed pretty well in the midst and end of the tests.

6. How to Use CDN in WordPress?

6a. Add CloudwaysCDN to WordPress

Cloudways customers can activate and integrate CloudwaysCDN with WordPress in just a single click. Here are a few steps involved in the process. Log in to the Cloudways account, navigate to Applications and then get into the WordPress applications where you want to install CloudwaysCDN.

From the left pane, navigate to the CloudwaysCDN tab and then enter the URL of your WordPress site. Click on the CREATE button.

activate cdn

It will enable the CloudwaysCDN for this application and provide you a few details like CDN URL, bandwidth usage, Purge cache and Remove the CloudwaysCDN entirely, like the image below.

To integrate it into a WordPress site, simply click on the Apply button.

P.S: The single-click applies only for Breeze – a free WordPress cache plugin by Cloudways. If you are using any other caching plugin, get the CDN URL from the CloudwaysCDN tab and configure the CDN accordingly.

cloudways cdn platform

Log in to the admin panel of your WordPress site and then click on Breeze under Settings:

breeze setting

Go to the CDN tab of Breeze Cache Plugin and here you will see that Activate CDN option is marked as checked, and the CDN URL is set in the CDN CNAME field.

Now it’s time to verify that CDN is successfully applied. Open your site, press CTRL+U and search for StackPath. You will get a few results which mean that CDN is integrated successfully.

 

CDN Verfication

Looks like Site is Broken?

No worries, Cloudways uses Varnish to optimize the WordPress sites. Make sure to purge all cache, and then revisit the site. Hurrah! You have integrated the CloudwaysCDN in just a few clicks.

Want to know more about CloudwaysCDN? Have a look at here.

6b. Add CloudFront to WordPress

CloudFront by Amazon is perhaps the most popular CDN option for WordPress websites. Once connected, CloudFront serves the content of a WordPress site directly from its servers instead of requesting the hosting server. This reduces the number of requests that burdens the hosting server.

Get CDN URL by Creating Web Distribution in CloudFront CDN

I assume, you already have an account on Amazon Web Services (AWS), if not, sign up and navigate to CloudFront Console. Then, click on Get Started under Web section.

Content network delivery method

It will take you to the full-page options where you can choose from a number of options. To make it simple, I will be using the default settings set by CloudFront itself.

  • Origin Domain Name: The URL of my website (wpcommunity.org)
  • Origin Path: Enter the specific path for assets, if you have any. (I left it blank.)
  • Origin ID: Enter a simple description of what this service is about.

CDN origin settings

All the other settings are left untouched. If you want to configure any further, here is the complete guide describing what all those options are. Scroll down and click on Create Distribution.

It will take a few minutes to deploy, depending on the content of your site. Once the process is completed, it will take you to the screen from where you will find Domain Name (CloudFront URL).

Copy the URL in Domain Name and navigate to the CDN tab of Breeze and paste in the CDN Root URL text field.

CDN WordPress configuration with breeze dashboard

  • Activate CDN: Mark this if you want to activate the CDN.
  • CDN Root URL: The URL of the created distribution. Don’t forget to add HTTP / HTTPS to the URL.
  • CDN Content: The directories of the content that you want to be served by a CDN.
  • Exclude Content: If you want to exclude a few file extensions, or directories not to be served by the CDN, enter them here.
  • Relative Path: It is always recommended to enable the relative path to keep the structure of files and folders.

Let’s Test it!

Visit your site URL, view the source code and search for CloudFront. You will see all the assets, such as CSS, JS, and images are served by the CloudFront CDN.

WordPress CloudFlare CDN

6c. Add KeyCDN to WordPress

KeyCDN is one of the leading WordPress CDN providers in the market. I suggest that you try out their services at your website (through the free trial period) before opting for a full account.

In this article, I will demonstrate how to connect KeyCDn with the Breeze cache plugin so that all the content is served via CDN.

First thing first, I need to sign up for a KeyCDN account by filling out the few required details. In the very first field, enter the website URL that you want to connect with KeyCDN and fill other details such as email and user credentials.

start free trial CDN

After clicking on the Create Account button, you will get a verification email. Once verified, you will see the KeyCDN dashboard:

keycdn dashboard settings

Get CDN URL by Adding Zone in KeyCDN

My WordPress site has been added to my account. Now, I need to Add Zone with respect to the URL of my site. From the left pane, navigate to the Zones tab and you will be asked to configure the zone.

CDN WordPress general zone settings

  • Zone Name: KeyCDN provides a special URL with default format: http://xxx-yyy.kxcdn.com. Where XXXX is the name that you entered in the Zone Name field. In my example, it will be   wp-yyy.kxcdn.com because I have entered wp.
  • Zone Status: Since my site will be publicly accessible, I will add the status as Active.
  • Zone Type: There are two types of Zone, either pull or push. Besides the Zone type, you can see the Show Advanced Features check box. Expand and configure it, if you are confident enough of what you are doing. Otherwise, leave it as default.
  • Origin URL: Enter the URL of the website that you want to connect with this Zone.

After setting up the zone, you will be redirected to the Zone tab and there you will see a newly created Zone like the image below. The status of my Zone is currently set as Deploying that means, it is setting up and linking everything between KeyCDN’s Zone and the website.

keycdn dashboard

The process may take a few minutes, once it is done, the status will be changed to Active. You can purge the cache by going to the Manage button like the image below.

WordPress CDN Configuration

Configure KeyCDN with Breeze

Okay so, I have set up KeyCDN, created a Zone and got the Zone URL.

Copy it and navigate to CDN tab on Breeze WordPress cache plugin and paste in the CDN Root URL field.

breeze keycdn

Test the Site

At this point, I have properly set up the KeyCDN and connected it with the Breeze. Let’s check whether the CDN is serving the website. For this visit your website and view the source of the page by pressing CTRL+U (Chrome). Search for kxcdn, you can see, the CSS, JS, and Images are served via KeyCDN.

testing keycdn

Breeze is not limited to them, any asset-based CDN can easily be configured with Breeze. You just have to get the WordPress CDN URL and paste it into the CDN tab of Breeze. That’s it!

Wrapping up!

We saw how speed plays a major part in overall conversion as well as the SEO ranking of your site. Investing in a good WordPress CDN is not a bad idea after all. To encourage our customers to use CDN on their site, we made the whole process easier and economical. Cloudways users can easily integrate CloudwaysCDN from their dashboard and they are charged only $1 for 25GB per application and additional consumption costs $0.04 per GB only.

Share your opinion in the comment section. COMMENT NOW

Share This Article

Start Growing with Cloudways Today!

We never compromise on performance, security, and support.

Ibad Ur Rehman

Ibad Ur Rehman is a WordPress Community Manager at Cloudways. He likes to explore the latest open-source technologies and to interact with different communities. In his free time, he likes to read, watch a series or fly his favorite Cessna 172SP in X Plane 11 flight simulator.

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

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!

BFCM 2019