One of the must-haves when it comes to website speed is a content delivery network (CDN). A CDN takes the load off your web server and speeds up content delivery to all site visitors. As a result, everything from your user experience to search engine potential improves! An excellent way to start learning about the subject is to activate a WordPress CDN.
In this article, we’ll explain the easiest ways to add a CDN to your WordPress site.
But before that, we outline the basic definition of a CDN, why you should be using one, and some extra benefits to expect. 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 site.
What Is a WordPress CDN?
CDN is short for Content Delivery Network. These are a network of servers (also known as POPs) located around the globe. They are designed to host and deliver copies of your WordPress site’s static (and sometimes dynamic) content, such as images, CSS, JavaScript, and video streams.
How a CDN Works
First off, you don’t want to get a CDN confused with your WordPress hosting company. These are entirely different 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 does a CDN work exactly? For example, when you host your website with Kinsta, you must choose a physical data center location, such as US Central, Europe, South America, 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 in Europe visit your website, it will take longer to load than 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 involved in data transmission over a network. The further the distance, the greater the latency.
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 called POPs (points of presence).
WordPress users are sometimes reluctant to look into content delivery networks because they sound too complicated. But a CDN’s functionality is relatively straightforward. Here’s how they work and can be implemented in three simple steps:
Step 1
You sign up for a hosting provider with a free CDN (like Kinsta CDN) or select a separate CDN provider and subscribe to their service. Third-party CDN providers often offer free and premium plans depending on data usage.
Step 2
You activate the CDN on your website. For Kinsta CDN, that’s done with the click of a button in the MyKinsta dashboard. You install a free plugin like CDN Enabler or WP Rocket for a third-party CDN 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.
Step 3
When people visit your website, it loads the content of your WordPress site from different servers around the globe. Visitors in Europe receive your site content from a server in Europe, while visitors in the United States get the same content from a server closer to them in the US.
How Do CDNs Achieve This?
CDNs typically use two technologies to route users to the correct location: IP Anycast + geolocation routing. They can automatically detect where user requests come from and route the requests to the nearest server.
However, choosing a strategic server location for your WordPress host is still vital. 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 35 data center locations from which you can host your WordPress site.
CDN Benefits
Here are 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 repeatedly that a faster loading site correlates with higher conversion rates, decreased bounce rates, and a longer average visitor duration–not to mention a better user experience all around.
When was the last time you clicked back in your browser because the website took too long to load? This is the last thing site owners want to happen. But don’t take our word for it. Here are some stats from industry leaders about the importance of site performance:
- A 1-second delay in page response can result in a 7% reduction in conversions. (Source: Kissmetrics)
- BBC has seen that 10% of users leave their site for every extra second it takes for the site to load. (Source: Creative Bloq)
- Conversion rates decrease by as much as 20% with every one-second delay in loading time. (Source: ThinkWithGoogle)
- Pinterest boosted signups by 15% after reducing its page load times by close to 40%. (Source: Pinterest Engineering on Medium)
Here are a few ways 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).
This measures how long the browser waits 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.
A common misconception is that TTFB is calculated after DNS lookup times. However, the original calculation of TTFB in networking always includes network latency. This involves a 3-step process, so delays and latency can occur anywhere in between, adding to your total TTFB.
High TTFB can be caused by several reasons, such as lousy code or misconfigured caching on your host server. But geographical distance is one concern.
We ran two tests to show the difference in TTFB with and without Kinsta CDN (powered by Cloudflare). We ran each test 5 times and then took the average.
Test 1: TTFB Without CDN
We first ran a Pingdom test with the Kinsta CDN disabled. Here are the results:
- The total load time was 1.45 s
- Average TTFB was around 136 ms
Test 2: TTFB With CDN
We then enabled the Kinsta CDN and ran the test again:
- Total load times dropped down to 788 ms
- Average TTFB improved to 37 ms
What a difference a CDN can make!
Another essential 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.
Faster Delivery With Caching
Similar to how you may use caching with your WordPress host or a plugin, CDNs also utilize caching. That is one way in which they can deliver files so fast.
Important: Once a CDN gets a copy of your media, it has to typically be requested once or twice by a visitor before it’s cached on the CDN. A CDN places an HTTP header on the requests called “X-Cache.” The file usually appears as a MISS on the first or second request, meaning it’s not yet cached.
On subsequent requests, it shows up as a HIT, which is now cached on your CDN. It will remain cached based on various factors such as ETag headers, expires headers, or manual purging of your CDN cache.
Using a CDN such as Kinsta CDN (Powered by Cloudflare), you can take caching to the next level by utilizing what’s referred to as full-page, reverse proxy caching. This involves caching everything on one primary URL instead of a secondary domain.
Huge Savings with GZIP Compression
WordPress CDNs also utilize GZIP, a file format and software application used for file compression and decompression. GZIP compression is enabled server-side (or on the CDN server/POP) and further reduces the size of your HTML, stylesheets, and JavaScript files.
It will not work on images as these are already compressed differently. Some have seen up to 70% reductions due to compression. It is one of the most straightforward optimizations you could make. And don’t worry, all reputable CDNs have this enabled by default.
HTTP/2
HTTP/2 is also one of the top features that all CDNs utilize to speed up the delivery of assets. The performance improvement is due to various reasons, such as the protocol being able to support better multiplexing, parallelism, HPACK compression with Huffman encoding, the ALPN extension, and server push.
2. Lower Bandwidth Costs
Another 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
- Decrease your overall bandwidth costs
- Eliminate fluctuations in bandwidth fees due to volatile traffic
The last thing you want is for something to go viral, and you’re left with a high-cost bill from your host or an overage charge.
Another way a CDN helps decrease costs is by providing easy ways to enable hotlink protection. This refers to restricting HTTP referrers and preventing others from embedding your assets (images – we have a tutorial on how to protect your images) on other websites.
Some of you may have heard of the Huffington Post fiasco. An author on the Huffington Post copied and pasted images from the Oatmeal’s website, which accrued a $1,000 bill from AWS that was sent to the Oatmeal’s site owner. The owner of the Oatmeal ended up replacing the images so that readers of the Huffington Post article could see them.
This is why it is always essential to enable hotlink protection. Otherwise, you might end up with an outrageous bill.
3. High Availability and Scalability
CDNs offer high availability and scalability. Since the replicated content is accessible across multiple POPs at different geographic locations, web traffic gets dynamically routed to another server if one goes down. And there is no need to worry about scalability because CDN providers are built with that in mind. A CDN could keep your website from crashing if you are utilizing a smaller shared host since it’s handling most of the load.
4. SEO Advantages
Google made site speed a ranking factor back in 2010, so it’s 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’s one of the more critical factors since it affects the user experience.
Brian Dean analyzed the top 1 million domains to look at the relationship between site speed and Google rankings and found a positive correlation. While these tests are almost impossible to prove, you can be assured that having a faster website will only help you in Google. To put it simply, Google rewards fast sites.
Besides the speed of your website’s pages, a CDN helps increase your media’s crawl rate, such as images, correlates to indexing in Google Image search.
5. Additional Security
Many CDNs provide additional security by allowing you to implement web application firewalls (WAF) and what some call Origin shields. These can help:
- Mitigate DDoS attacks of all forms and sizes, including those that target the UDP and ICMP protocols
- Block SYN/ACK, DNS amplification, and Layer 7 attacks
- Put your site behind a proxy, which hides your origin IP address, although it is not bulletproof
Check out our case study on how to stop a DDoS attack. We had a client with a small ecommerce 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 of hundred visitors per day. But the site instantly went to between 15-19 GB of data transfer a day out of the blue! That’s an increase of 4650%. And Google Analytics showed no additional traffic. That’s not good.
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 it’s a good investment and time saver if you run into issues like these.
CDNs also provide additional security features such as secure tokens, which allow you to generate secured links with an expiration time. After it has expired, users can no longer access that content.
CDN Speed Tests: With CDN vs Without CDN
Instead of just telling you the benefits of a WordPress CDN, let’s do some tests to 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 uses the free Kinsta CDN (powered by Cloudflare).
- The physical location of the server is in Iowa, USA.
Important: When you speed-test your CDN, you run it a few times so that the media is cached. As we described before regarding 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 that the CDN isn’t helping speed up your site when you didn’t build up the cache first.
Without CDN (Dallas, Texas, USA)
We first ran 5 Pingdom tests using a server in Dallas without a CDN. We then took the average.
Without CDN (Melbourne, Australia)
We then ran 5 Pingdom tests using a Melbourne, Australia, server without a CDN. The average was taken as well.
Without CDN (San Jose, California, USA)
We then ran 5 Pingdom tests without a CDN from San Jose, California, and took the average.
Without CDN (Stockholm, Sweden)
We ran 5 Pingdom tests without a CDN from Stockholm, Sweden, and took the average.
With CDN (Dallas, Texas, USA)
For comparison, we ran 5 Pingdom tests with the active Kinsta CDN from a Dallas, Texas server. The average was taken after.
With CDN (Melbourne, Australia)
We then ran 5 Pingdom tests with the Kinsta CDN from a Melbourne, Australia server, then took the average.
With CDN (San Jose, California, USA)
We also ran 5 Pingdom tests with a CDN using a San Jose, California server and took the average.
With CDN (Stockholm, Sweden)
We ran 5 Pingdom tests for a Stockholm server with an active CDN. The average was then taken.
The Results
Let’s look at the results to understand how much a CDN affects total load times.
- Dallas, Texas, USA: Decrease 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.
The CDN produced slightly faster page load times with both Dallas and San Jose sites. But if you 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.
The Kinsta test server is in Iowa, so the data doesn’t have that far to travel when loading without a CDN from Dallas and San Jose. But for Australia, the distance is what kills the load times.
When we enable the CDN, the content and media load from a Kinsta CDN POP in Sydney, Australia, which results in much faster download times. The same goes for Stockholm, Sweden.
Now, do you want to decrease your load times by over 50% in some cases? The answer should be yes!
Do You Need a CDN?
We get this question frequently. In our experience, it shouldn’t be a question since a CDN is beneficial in almost every scenario, regardless of your site’s size and traffic.
Just look at all the benefits we listed above. Price is usually no longer a factor as most CDN providers are very cheap, or free with Kinsta CDN. Not to mention, CDNs help improve SEO, site loading, user experience, and more!
The only time 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 run 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 where a CDN provider’s POPs are located.
If your web server host is located in Ontario, but you sign up for a CDN provider with only its nearest POP in the USA, it could slow your site down. In this scenario, which is very rare, it might benefit you not to use a CDN.
Popular CDN Providers
Although there are a lot of great CDN providers out there, Kinsta offers a CDN built into its hosting; it’s powered by Cloudflare, fast, easy to activate, and entirely free for Kinsta users. We recommend taking advantage of the free Cloudflare integration, but we understand that some site owners require an external CDN or proxy for specific reasons.
In that case, we encourage you to explore some other top CDNs, all of which are compatible with Kinsta hosting (click on the links to see Kinsta integration documentation for each one):
How To Install a CDN in WordPress
Each CDN provider has its integration method, but thankfully they all support WordPress and make it easy to integrate. Check their documentation or ask their support team if you have trouble.
Kinsta CDN
We partnered with Cloudflare, an HTTP/2 and IPv6-enabled content delivery network with 200+ locations, to turbocharge your assets and media around the globe. Currently served regions include America, South America, Europe, Africa, Asia, and Australia.
Check out how to enable the Kinsta CDN. It’s a simple one-click process from within the MyKinsta backend dashboard.
We also have amazing site analytics to see bandwidth usage, top files by requests, HTTP status codes, and more.
Within the MyKinsta dashboard, you can view analytics at a company level (aggregating data from all of your sites) and at a site-specific level.
Cloudflare
If you are using or interested in Cloudflare for a site not hosted on Kinsta, we have an in-depth tutorial on how to install Cloudflare on your WordPress site.
However, keep in mind that all Kinsta hosting users receive a free CDN powered by Cloudflare, so it’s easier to go with that method instead of installing it as a separate component.
As part of our Cloudflare integration, Edge Caching saves your Kinsta site/page cache to any of Cloudflare’s global network of 260+ data centers.
Edge Caching is included free with all Kinsta plans, doesn’t require a separate plugin, and cuts the time needed to serve cached WordPress HTML by an average of more than 50%!
Third-Party CDN
If you are looking into deploying a CDN yourself, we recommend using a subdomain for your media and assets instead of the provider’s random URL.
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 to link your assets quickly and automatically copy them to your CDN provider. View our list of recommended WordPress CDN plugins below.
Top CDN Plugins and Extensions
These CDN plugins don’t automatically activate a CDN on your WordPress website, but rather connect a third-party CDN provider (like Cloudflare, Fastly, or Sucuri) to your WordPress site, allowing the CDN to access site assets and deliver that content to visitors.
Overall, the best WordPress CDN plugins make the connection easy for you, providing a one-click solution instead of a complicated integration.
Here are the best WordPress CDN plugins:
- Cloudflare: This is the right choice if using Cloudflare as your CDN provider, especially since it offers a one-click installation, a web application firewall setting, and an automatic platform optimization tool, which speeds up sites dramatically with over 250 fast and reliable data centers. Alternatively, you can opt for Kinsta CDN, which is already powered by Cloudflare and doesn’t require the extra plugin!
- Bunny.net: Both a CDN provider and a WordPress CDN plugin, Bunny.net offers a quick integration to replace links and add them to your CDN. You gain quick performance improvements with automated HTTPS configuration, custom CDN hostnames, and the ability to exclude specific directories from getting served through your CDN.
- LiteSpeed Cache: Before anything else, this is a caching plugin. But it also comes with a free QUIC.cloud CDN cache, or you could link to any CDN provider. You can improve your site’s performance with a wide range of features along with minification, image optimization, and lazy loading.
- W3 Total Cache: Many caching plugins also double as CDN WordPress plugins, and W3 Total Cache is no different. Integrate with some of the most popular CDN providers to instantly boost your site performance without any complicated settings. This sends elements like media items and theme files to the CDN while also caching and compressing those files before use within the CDN.
- CDN Enabler: This plugin rewrites all of your URLs so that assets get served from your external CDN. You can link to a KeyCDN account and take advantage of cache purging, performance enhancements, and more.
Indexing Images with CDN
You want to ensure that Google still indexes your images 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 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.
However, Google Search Console has flaws and sometimes fails to report indexed images when they appear on Google. An excellent way to check if your images are indexed is to head over to Google Image Search and input the following: “site:https://yourdomain.com.”
Important: Don’t put in your CDN URL. Even though images are served from the CDN, they should still index on your root domain.
If your images appear in Google Image Search, they are indexed just fine.
Summary
Now you can see all the fantastic benefits you can get from using a WordPress CDN. It will ensure your media loads faster around the globe, 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 importantly, your visitors will have a much more excellent user experience.
Our HTTP/2 Kinsta CDN powers all of our hosting plans. Do you have any thoughts on using a CDN? We would love to hear your thoughts in the comments section.
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
So i have to add that code to my function.php file?
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 :)
Awesome graphics and info!