WordPress CDN – Why You Should Be Using One

Updated on November 30, 2017

As a performance hosting company we really like to research and share ways to make your WordPress site faster. One of the no brainers when it comes to speed nowadays is to utilize a content delivery network (CDN). They take the load off of your web server while speeding up the delivery of content to your visitors thus making their experience better! Today we want to explain to you in layman’s terms how a WordPress CDN works, why you should be using one, and some of the extra benefits that accompany them. We’ll also share some speed tests so you can better judge just how much of a performance boost you could expect to see on your own site.

40 percent of visitors abandon a website if it takes over three seconds to load. ⏱ Click to Tweet

What is a WordPress CDN?

A CDN is simply short for content delivery network.  These are a network of servers located around the globe which are designed to host your WordPress site’s static (and sometimes dynamic) content such as images, CSS, JavaScript, and video streams. Now when we say host, don’t get this confused though with your WordPress host. These are completely separate services. A CDN isn’t a replacement for your hosting provider, but rather an additional way to increase the speed of your site. While our hosting here at Kinsta is blazing fast, a CDN can make your site even faster.

How a CDN Works

How does a CDN work exactly? Well, for example, when you host your website with Kinsta you have to choose a physical data center location, such as US Central, Europe, or Asia. Let’s say you choose US Central. This means your website is physically located on a “host server” in Council Bluffs, Iowa. When people over in Europe visit your website it is going to take longer for it to load verses someone visiting it from say Dallas, TX. Why? Because the data has to travel a further distance. This is what is known as latency. Latency refers to the time and or delay that is involved in the transmission of data over a network. The further the distance the greater the latency.

It also takes several networking hops (communication instances between intermediate networking devices) to serve data requests from browsers to hosting servers and the requested content from hosting servers back to web browsers. And that is where a CDN comes into play. It helps to reduce that latency by loading your site’s content from servers closer to them. These CDN servers are sometimes also referred to as POPs (points of presence).

A CDN reduces latency

A CDN reduces latency

WordPress users can sometimes be reluctant to look into content delivery networks as it can be a little overwhelming at first. So here’s how they work and can be implemented, in layman’s terms, in three simple steps:

Step 1

You select a CDN provider and subscribe to their service. These are typically billed on monthly basis or by data usage. Most providers will have a calculator to estimate your costs.

Step 2

You utilize free plugin like CDN Enabler or WP Rocket to integrate it. These plugins automatically link up your assets to the CDN. There is no work needed on your part to get your content on the CDN, this is all hands-off! Deploying a CDN is a lot easier than it used to be a few years ago.

Step 3

When people visit your website, it is now loading the content of your WordPress site from different CDNs around the globe. So for those visitors in Europe visiting your site located in Iowa, your content is now loading from a POP in Europe. How do they do this? CDNs typically use two different types of technologies to route users to the correct location, and that is IP Anycast + geolocation routing. They can automatically detect where user requests come from and route the requests to the nearest POP.

It is still important however to choose a strategic server location for your WordPress host. Because even though a CDN helps distribute your media and content, a single request still has to be made to the hosting provider when your website is loaded. Unless you are utilizing full page caching on a proxy server, which we will go into later. Kinsta now has 13 data center locations from which you can host your WordPress site.

CDN Benefits

Below are just a few of the many benefits of using a CDN on your WordPress site.

1. Performance Boost

A performance increase is one of the biggest reasons to use a CDN. It has been proven time and time again that a faster loading site directly correlates with higher conversion rates, decreased bounce rates, and a longer average visitor duration. And that’s not to mention a simply better user experience all around. When was the last time you clicked back in your browser because the website was taking too long to load? This is the last thing you want to happen. But don’t take our word for it, here are some quick stats for you from some of the top industry leaders:

  • A 1-second delay in page response can result in a 7% reduction in conversions. (Source: Kissmetrics)
  • BBC has seen that they lose an additional 10% of users for every additional second it takes for their site to load. (Source: Creative Bloq)
  • 53% of visits to mobile sites are abandoned after 3 seconds according to research from Google’s DoubleClick. (Source: DoubleClick)
  • AliExpress reduced load time by 36% and saw a 10.5% increase in orders and a 27% increase in conversion for new customers. (Source: Akamai)

Here are a few ways that a CDN can help improve the performance of your WordPress site.

Reduces TTFB

We already covered above that a WordPress CDN can help decrease latency by shortening the physical distance required for the data to travel. But it can also help lower your time to first byte (TTFB). To put it simply, this is a measurement of how long the browser has to wait before receiving its first byte of data from the server. The longer it takes to get that data, the longer it takes to display your page.

CDN can help reduce TTFB

A CDN can help reduce TTFB

A common misconception is that this is calculated after DNS lookup times, however, the original calculation of TTFB in networking always includes network latency. This involves a 3 step process and delays and latency can occur anywhere in between, adding up to your total TTFB. High TTFB can be caused by a number of reasons, such as bad code or misconfigured caching on your host server. But geographical distance is definitely one actor. We ran a little test to show the difference with our Kinsta CDN (powered by KeyCDN). Each test was run 5 times and the average was taken.

TTFB Without CDN

We first ran a test with our CDN disabled and as you can see our total load time was 1.45 s and our average TTFB on an asset was around 136 ms.

ttfb before cdn
TTFB before adding a CDN

TTFB With CDN

We then enabled our CDN and ran the test again. As you can see our total load times dropped down to 788 ms and our average TTFB is now 37 ms! What a difference a CDN can make. Another important thing to note is that we chose the Stockholm location to perform this test. Why? Because we wanted to show you the real improvement that can be had by decreasing the physical distance. There is a CDN POP located in Stockholm, so our content is being served from Stockholm.

ttfb after cdn
TTFB after adding a CDN

Note: If you are utilizing Cloudflare, you might have a slightly higher TTFB. This is most likely due to the additional overhead and complexity of having the fully proxy service running. Remember that Cloudflare has additional firewalls and other features that some CDN providers don’t have. So you would need to make up your own mind which might benefit you more. If your entire site is not properly optimized, taking the hit on the slightly higher TTFB might be worth the trade-off.

However, you might also want to check out WP Bullet’s guide on using Cloudflare page caching to lower TTFB. This could require some additional setup and testing. Make sure to run your own tests as each environment is different. Cloudflare’s new Argo service has also been shown in some instances to help lower TTFB.

Faster Delivery With Caching

Just like you utilize caching with your WordPress host or a plugin, CDNs also utilize caching. That is one way in which they can deliver files so fast. One important thing to be aware of is how caching works though. Once a CDN gets a copy of your media, it has to typically be requested once or twice by a visitor before it is actually cached on the CDN. A CDN places an HTTP header on the requests called “X-Cache.” On the first or second request, the file will typically show up as a MISS, meaning it’s not yet cached.

CDN not cached (MISS)

CDN not cached (MISS)

On subsequent requests it will then show up as a HIT, meaning it is now cached on your CDN. It will remain cached based on a various number of factors such as ETag headers, expires headers, or you manually purging your CDN cache.

CDN cached (HIT)

CDN cached (HIT)

If you are using a full proxy CDN such as Cloudflare, you can also take caching to the next level by utilizing what they refer to as full page caching. This involves caching everything on a URL. However, for WordPress sites this can sometimes by tricky as you will need to implement workarounds for dynamic parts of your site.

Huge Savings with GZIP Compression

WordPress CDNs also utilize GZIP, a file format and a software application used for file compression and decompression. GZIP compression is enabled server-side (or rather on the CDN server/POP) , and allows for further reduction in the size of your HTML, stylesheets, and JavaScript files. It will not work on images as these are already compressed in a different way. Some have seen up to 70% reductions due to compression. It is probably one of the easiest optimizations you could make. And don’t worry, all major CDNs have this enabled by default.

You can see use a tool like Check GZIP Compression or Chrome DevTools to see the huge difference that compression makes. For example, below you can see that on our jquery.js file served from a CDN, GZIP compression decreased the size from 94.9 KB down to 33.6 KB. That is a savings of 64.59% on just one file. Add this up across all of your assets and media and you will see why compression is essential!

GZIP savings on a CDN

GZIP savings on a CDN

Brotli Takes Compression to Next Level

Brotli is a newer compression algorithm developed by Google which has been shown to reduce file sizes up to 26 percent over existing solutions, including GZIP. The adoption rate for Brotli is growing at a fairly rapid pace. As of June 20, Google is now even compressing Display Ads with Brotli compression.

Brotli compression savings

Brotli compression savings (src: SamSaffron)

However, since Brotli is still new, it isn’t yet available on all CDN providers yet. But there are a few such as KeyCDN and CDN77 which now support it. In most cases, your origin server (hosting server) must also have Brotli enabled for this to work. And browser support for Brotli is also catching up. If setup correctly, servers that have Brotli enabled but are loaded in a browser that don’t support it, will simply fallback to GZIP.

HTTP/2

HTTP/2 is also one of the biggest features that all CDNs now utilize to speed up delivery of assets. HTTP/2 requires HTTPS because of browser support. The improvement in performance is due to a variety of reasons such as the protocol being able to support better multiplexing, parallelism, HPACK compression with Huffman encoding, the ALPN extension, and server push. There used to be quite a bit of TLS overhead when using HTTPS, but thanks to HTTP/2, this is now a thing of the past.

2. Lower Bandwidth Costs

Another big benefit of a CDN is that it can help offload CPU and resources from your hosting server (origin server). This helps prevent traffic spikes from overwhelming your host. It can also help decrease your bandwidth costs. The last thing you want is for something to go viral and your left with a whopping bill from your host, or an overage charge. For example, below is a site using Cloudflare, and as you can see it helped offload 69% of the bandwidth requests.

Cloudflare bandwidth saved

Cloudflare bandwidth saved

Just how much can you save? Well, in the example above it would mean the difference between needing a Kinsta Business 3 plan and a Kinsta Business 4 plan. This is savings of $100/month, and Cloudflare is free. So not only can you save money, but visitors around the globe will also see performance improvements.

Here is another example of a high-traffic Kinsta client that was using well over 1 TB of bandwidth per day. That’s a lot! They added a CDN and due to the amount of offloading, are now saving thousands of dollars per month.

Reduced bandwidth with CDN

Reduced bandwidth with CDN

Another way a CDN helps decrease costs is by providing easy ways to enable hotlink protection. This basically refers to restricting HTTP referrers and preventing others from embedding your assets (images) on other websites. Some of you may have heard of the Huffington Post fiasco. An author on the Huffington Post copy and pasted images from the Oatmeal’s website, which in turn accrued him a bill of over $1,000 from AWS. The owner of the Oatmeal ended up replacing the images so that readers of the Huffington Post article would see it. But this is why it is always important to enable hotlink protection, otherwise, you might end up with an outrageous bill.

Hotlink protection

Hotlink protection

3. High Availability and Scalability

CDNs also offer high-availability and scalability. Since the replicated content is available across multiple POPs at different geographic locations, web traffic is dynamically routed to another server if one goes down. And there is no need to worry about scalability as CDN providers are built with that in mind. If you are utilizing a smaller shared host, a CDN could actually keep your website from crashing since it is handling most of the load.

4. SEO Advantages

Google made site speed a ranking factor back in 2010, so it is no secret that a faster website could result in higher rankings. While there is no way to know how much weight is placed on speed, you can safely assume it is one of the more important ones, as it affects the user experience. Brian Dean analyzed the top 1 million domains to look at the correlation between site speed and Google rankings and the results were very positive. While these tests are almost impossible to prove conclusively, you can be assured that having a faster website is only going to help you in Google. To put it simply, Google rewards fast sites.

Site speed - Google rankings

Site speed – Google rankings

Besides the speed of your website’s pages, a CDN can also help increase the crawl rate of your media such as images, which correlate to indexing in Google Image search.

5. Additional Security

A lot of CDN providers provide additional security by allowing you to implement web application firewalls (WAF) and what some call Origin shields. These can help mitigate DDoS attacks on your WordPress site of all forms and sizes including those that target the UDP and ICMP protocols, as well as SYN/ACK, DNS amplification, and Layer 7 attacks. Other benefits include putting you behind a proxy which helps to hide your origin IP address, although it is not bulletproof.

Make sure to check out our case study on how to stop a DDoS attack. We had a client with a small e-commerce site running Easy Digital Downloads which got over 5 million requests to a single page within 7 days. The site typically only generated between 30-40 MB a day in bandwidth and a couple hundred visitors per day. But out of the blue, the site instantly went to between 15-19 GB of data transfer a day! That’s an increase of 4650%. And Google Analytics showed no additional traffic. That’s not good.

DDoS attack

DDoS attack

The client implemented Sucuri’s web application firewall on their site and all of the bandwidth and requests instantly dropped on the site (as seen below) and there hasn’t been a single issue since. So definitely a good investment and time saver if you are running into issues like these.

After adding Sucuri's WAF

After adding Sucuri’s WAF

CDN’s also provide additional features such as secure token, which allows you to generate secured links with an expiration time. After it has expired people can no longer access that content.

CDN Speed Tests

So instead of just telling you how beneficial a WordPress CDN can be, let’s do some tests to actually show you the results. We ran 5 tests from 4 different testing locations with a CDN enabled and then without a CDN. The site is hosted with Kinsta and is using the Kinsta CDN (powered by KeyCDN). The physical location of the server is in Iowa, USA.

Make sure when you are speed testing your CDN that you run it a couple times so that the media is cached. As we described further above in regards to CDN caching, the X-Cache HTTP header will show a “HIT” once it is cached. If it isn’t cached it will show a “MISS.” If you don’t do this properly it might appear as though the CDN isn’t helping speed up your site, when really you simply didn’t build up the cache first.

Without CDN (Dallas, Texas, USA)

We first ran 5 tests without a CDN in Pingdom from Dallas, Texas and took the average.

Without CDN test Dallas

Without CDN test Dallas (source: Pingdom)

Without CDN (Melbourne, Australia)

We then ran 5 tests without a CDN in Pingdom from Melbourne, Australia and took the average.

Without CDN test Australia

Without CDN test Australia (source: Pingdom)

Without CDN (San Jose, California, USA)

We then ran 5 tests without a CDN in Pingdom from San Jose, California and took the average.

Without CDN test San Jose

Without CDN test San Jose (source: Pingdom)

Without CDN (Stockholm, Sweden)

We then ran 5 tests without a CDN in Pingdom from Stockholm, Sweden and took the average.

Without CDN test Sweden

Without CDN test Sweden (source: Pingdom)

With CDN (Dallas, Texas, USA)

We then ran 5 tests with a CDN in Pingdom from Dallas, Texas and took the average.

With CDN test Dallas

With CDN test Dallas (source: Pingdom)

With CDN (Melbourne, Australia)

We then ran 5 tests with a CDN in Pingdom from Melbourne, Australia and took the average.

With CDN test Australia

With CDN test Australia (source: Pingdom)

With CDN (San Jose, California, USA)

We then ran 5 tests with a CDN in Pingdom from San Jose, California and took the average.

With CDN test San Jose

With CDN test San Jose (source: Pingdom)

With CDN (Stockholm, Sweden)

We then ran 5 tests with a CDN in Pingdom from Stockholm and took the average.

With CDN test Sweden

With CDN test Sweden (source: Pingdom)

The Results

Now let’s take a look at the results to understand just how much a CDN affects your total load times.

CDN speed test comparison

CDN speed test comparison

  • Dallas, Texas, USA: Decrease of 8.11% in total load time with a CDN.
  • San Jose, California, USA: Decrease of 33.02% in total load time with a CDN
  • Melbourne, Australia: Decrease of 54.19% in total load time with a CDN.
  • Stockholm, Sweden: Decrease of 54.7% in total load time with a CDN.

As you can see, in both Dallas and San Jose, with a CDN was slightly faster. And if you take a look at the Australia tests, you can see a huge difference in load times. This is because of the geographical location of the test server. Our server is in Iowa and so loading from Dallas and San Jose the data doesn’t have that far to travel. But for Australia, the distance is what kills the load times. When we enable the CDN, the content and media are loading from a Kinsta CDN POP in Sydney Australia, which results in much faster download times. The same goes for Stockholm, Sweden.

Now the question is, do you want to decrease your load times by over 50% in some cases? The answer should be yes!

Do You Need a CDN?

A question we get asked a lot here at Kinsta is whether or not a CDN is needed for a particular website. In our experience, a CDN can be beneficial in almost every scenario. Just look at all the benefits we listed above. Price is usually no longer a factor as most CDN providers are very cheap, some charging as low as $0.04/GB. And then Cloudflare is even free. The only times when you might want to do some further testing is if you are only serving content to visitors in a specific geographical location.

Let’s say for example you are a small shop with a website in Ontario, Canada. Perhaps you don’t care as much about customers located elsewhere. You will want to research to see where a CDN provider’s POPs are located. If for example your web server host is located in Ontario, but you sign up for a CDN provider which only has a nearest POP in the USA, it could actually slow your site down. In this scenario, which is very rare, it might be more beneficial not to use a CDN.

Popular CDN Providers

There are a lot of great CDN providers out there to choose from. Most of them have free trials, so we recommend trying a few out to see which one works the best for your site. We have a free CDN integration here at Kinsta for all clients, which is powered by KeyCDN. Here are some other third-party providers you should check out:

How to Install a CDN

Each CDN provider has their own integration method, but thankfully they all support WordPress and make it very easy to integrate. Make sure to check their documentation or ask their support team if you have trouble.

Kinsta CDN

We partnered up with KeyCDN, an HTTP/2 content delivery network with 28+ locations, to turbocharge your assets and media around the globe. Check out how to enable the Kinsta CDN. It’s a simple one-click process from within the MyKinsta dashboard.

Add CDN zone

Add CDN zone

Cloudflare

If you are using or interested in Cloudflare, we have an in-depth tutorial on how to install Cloudflare on your WordPress site.

Third-Party CDN

If are looking into deploying KeyCDN yourself, we recommend reading this article on CDN for dummies.

One thing we do advise is to utilize a subdomain for your media and assets instead of the random URL given to you by the provider. Example: cdn.yourdomain.com. This will ensure better branding for your site as well as fewer hassles when it comes to indexing issues. After setting up your CDN at the provider, you can utilize a free WordPress plugin like CDN enabler to easily link your assets and have them automatically copied to your CDN provider.

CDN enabler

CDN enabler

Other plugins such as WP Rocket or W3 Total Cache also have similar integration methods.

CDN in WP Rocket

CDN in WP Rocket

It is important to load as many resources from your WordPress site as you can. This ensures for faster delivery to visitors and utilizing a single HTTP/2 connection. You can run your website through a tool like Pingdom to see where your media is loading from. Sometimes themes or certain plugins might take a little tweaking or investigating as to why they aren’t loading from your CDN even after finishing the integration.

And finally, you want to ensure that your images still index with Google when moving to a CDN. For users of the Yoast SEO plugin, you will want to add the following code to the bottom of your functions.php file. Replace of course the domain and CDN domain with your own.

function wpseo_cdn_filter( $uri ) {
return str_replace( 'http://yourdomain.com', 'http://cdn.yourdomain.com', $uri );
}
add_filter( 'wpseo_xml_sitemap_img_src', 'wpseo_cdn_filter' );

If you don’t do this, it could result in your images getting de-indexed (as seen below). You can always check this yourself in Google Search Console.

Images not indexing

Images not indexing

Summary

Hopefully, now you can see all the amazing benefits you can get from using a WordPress CDN. It will ensure your media loads faster around the globe, it reduces your TTFB, and dramatically decreases your bandwidth costs and server load. Not only that, but you could see better rankings due to faster page load times. And most important, your visitors will have a much better user experience.

Don’t forget, our HTTP/2 Kinsta CDN is now included for all of our hosting clients. Do you have any thoughts on using a CDN? We would love to hear your thoughts below.

This article was written by Brian Jackson

Brian focuses on our inbound marketing efforts; everything from developing new online growth strategies, content creation, technical SEO, and outreach within the WordPress community. He has a huge passion for WordPress, has been using it for 8+ years, and even develops a couple premium plugins. Brian enjoys blogging, movies, bike rides, and flipping websites.

Hand-picked related articles

  1. Gravatar for this comment's author
    Adeel Sami July 31, 2017 at 10:11 am

    Hello, Brian!

    Sucuri WAF’s the love!

    And CDN as well the best addition. I have seen many of my blogging friends switching to the CDN recently and reported the best results.

    I have only tested CDN from CloudFlare which is the free one and can happily record it was the good switch.

    If the free one can do wonders, imagine the perks the premium ones can throw in front of us?

    So, I will look back into the CDN again! :)

    Thank you for the detailed and comprehensive post on this most-important topic of CDN!

    ~ Adeel

    1. Gravatar for this comment's author
      Brian Jackson August 1, 2017 at 11:29 pm

      Glad to hear it Adeel! Thanks for the comment.

  2. Gravatar for this comment's author
    Kingsley Felix July 31, 2017 at 11:55 pm

    So i have to add that code to my function.php file?

    1. Gravatar for this comment's author
      Brian Jackson August 1, 2017 at 10:21 am

      Hey Kingsley, I would check your Google Search Console account. If you are using yoast SEO,have a CDN enabled and your images aren’t indexed. Then yes, add that to your functions.php and it should fix it :)

      1. Gravatar for this comment's author
        Kingsley Felix August 1, 2017 at 11:49 am

        alright, i have 3 cnames for my CDN (3 zones keycdn) how do i do it?

        1. Gravatar for this comment's author
          Brian Jackson August 1, 2017 at 11:28 pm

          Just use your main one in the Yoast SEO function from above. Your other CDN zones might have a copy of your images, but you can’t index all of them, otherwise it would be duplicate content. So just use one in the function.

          1. Gravatar for this comment's author
            Kingsley Felix August 1, 2017 at 11:58 pm

            alright, i use wp-rocket so i set image, css, js to 1 zone in the plugin i hope this functions correctly. but why do you guys not include a search box in this blog?

          2. Gravatar for this comment's author
            Brian Jackson August 2, 2017 at 12:01 am

            Yes, you might have to wait a few days for Google to start indexing. There is a search here: https://kinsta.com/blog/ But we are redesigning our site and we’ll get another one added on each post :)

          3. Gravatar for this comment's author
            Kingsley Felix August 2, 2017 at 12:02 am

            alright thanks

          4. Gravatar for this comment's author
            Kingsley Felix August 2, 2017 at 12:41 am

            added thanks

          5. Gravatar for this comment's author
            Kingsley Felix August 2, 2017 at 12:42 am

            also do you think its good to use a separate sitemap plugin for images?

          6. Gravatar for this comment's author
            Brian Jackson August 7, 2017 at 9:34 am

            Unless you have a complex setup I wouldn’t bother doing a separate sitemap for images. One sitemap typically works fine, even for very large sites.

          7. Gravatar for this comment's author
            Kingsley Felix August 7, 2017 at 8:55 pm

            alright thanks.

  3. Gravatar for this comment's author
    Lech Dutkiewicz August 7, 2017 at 6:52 am

    Hello Brian, thanks for such in depth post, I’ll definitely use this knowledge.

  4. Gravatar for this comment's author
    Visualmodo WordPress Themes October 19, 2017 at 5:48 am

    Awesome graphics and info!

Leave a Reply to Kingsley Felix Cancel reply

Use WordPress?

Join 20,000+ others who get our FREE weekly newsletter with WordPress tips on how to drive more traffic and revenue to your business!

You have Successfully Subscribed!

Send this to a friend