Content Delivery Network Tutorial – How To Setup a CDN for WordPress
Contents
What is a CDN?
A content delivery network (CDN) is a network of web servers located in different countries across the world.
The role of a Content Delivery Network is to speed up your site by delivering its static files from the closest web server to the location of your website visitors.
For your site to be accessible to other people, it needs a web hosting server to host and deliver its files (images, HTML code, CSS, etc.) to the web browsers of the people who visit your website.
The further the server that hosts your site’s files is from the location of a visitor; the longer it will take for these files to reach your visitor’s web browser.
So, what should I do if I want my website to load fast for all my visitors?
The obvious solution would to choose a web server located as close as possible to your visitors, right?
However, there is a problem.
That can only apply if all your traffic comes from the same location (let’s say the people in your country). But what if your site targets an international market and receives traffic from all over the world?
Well, here comes the role of a content delivery network.
A content delivery network is a network of interconnected servers spread all over the world that acts as a proxy and delivers your site’s static content from the server that is the closest to your visitors.
Do I still need web hosting if I use a CDN?
A content delivery network cannot replace a web hosting.
The CDN will pull and deliver only the static files from your web hosting server. However, the majority of the sites are not only created from static HTML files.
For instance, WordPress is built upon a coding language called PHP.
PHP is a server scripting language intended for making dynamic and interactive sites, and not static pages. Besides PHP, WordPress also needs a database where to store the site’s data and requires various other functions, which are only provided by your web hosting server.
Here are the most common file types served by a content delivery network: images, HTML files, CSS files, JavaScript files, fonts, and cached files (pages generated with a dynamic coding language and then converted into static files).
What are the benefits of a CDN?
The main benefit of a CDN network is that it speeds up the delivery of your site’s static content for all your visitors, regardless their location. However, there are also several other advantages of using a content delivery network.
Improves the speed of your site
The central role of a content delivery network is to make your website fast for all your site’s visitors. Regardless the distance between your web hosting server and the location of the people who visit your site, if it’s optimized well, your website should load very fast.
Improves SEO
An improved SEO is the direct result of the improved site speed.
The SEO experts say that Google uses the site speed as a ranking factor. That means that if your website is slow, it might not appear very good in the results of the search engines.
Better conversions and lower bounce rate
Even though this is not a certitude, the bounce rate it’s very likely to be another metrics used by Google’s algorithms to make a difference between the ranked sites in the search results.
Besides that, a site that loads fast will have a better conversion rate, and it will lose less traffic.
A study conducted in 2009 by Forrester Consulting on behalf of Akamai.com, has concluded that the most ecommerce users were expecting for a page to load in a maximum of 2 seconds.
Since this study is pretty old now, I assume that this average might be even lower in 2017 when everyone is in a constant rush.
Your site uses fewer resources of your web hosting plan
Because many of your site’s files will be delivered from the content delivery network, this will lead to a lower bandwidth consumption from your web hosting server. Therefore, you should save money on your hosting plan.
Improves security
A CDN also comes with various security features.
These features usually differ from company to company and from one plan to another.
A few common security feature that a content delivery include are DDoS protection, traffic blocking from bad bots and SSL certificate.
What is the best CDN?
There are many companies that provide services in this field. Three of the most popular companies are KeyCDN (this is what I use for my blog), MaxCDN, and Cloudflare.
I use KeyCDN for my blog because it’s one of the well-known providers, has some of the lowest prices in the industry, and I’ve only found excellent reviews about this company from its users.
At the time I write this post, almost a month has passed since I’ve become a customer. I’m very pleased with their services so far.
Something that I really love at KeyCDN is that you pay for what you consume.
All the other content delivery networks I know require you to pay a fixed monthly plan. This plan includes a certain amount of traffic, and if you exceed this amount, you will be required to upgrade to the next plan.
So, let’s say you pay $10 monthly for your current plan and your site is allowed to use up to 1TB of traffic.
Let’s assume that your website only consumes 1GB because it’s very new and had a very low volume of traffic. You are still required to pay $10 month after month even if your site only uses 1GB or 10MB of traffic.
That’s not the case with KeyCDN.
With KeyCDN, you only pay what your site consumes. Instead of having to pay a monthly fixed fee, you load your account with what how much you want (the minimum amount you can load your account with is $49) and you don’t have to pay anything until you use all that traffic.
I have only loaded my account once so far and I have now 1.46 TB of remaining traffic.
Unless my site traffic will suddenly explode, I estimate that this traffic is enough for at least one year.
KeyCDN also gives you a free 250GB (the equivalent of $10 in traffic credit) when you first create your account. This credit is valid for 30 days, and it’s perfect for making an impression about the quality of their services before loading your account.
Click here to create a KeyCDN account and claim your $10 credits.
How to Set Up KeyCDN
Because I use KeyCDN as the CDN for my blog, I’m going to teach you exactly how to set up this service and how to integrate KeyCDN with your WordPress site.
The first part of this tutorial is a general configuration, and it’s not dependent if your site is powered by WordPress or not.
1. Register a KeyCDN account
Register a KeyCDN account if you haven’t already (sign up using my link and receive $10 in credits).
Once you are on KeyCDN’s website, click the “TRY FOR FREE” button in the header, or the “Sign Up” button in the menu.
Next, fill up the registration fields and click the “Create Account” button.
Once you have registered an account, you should receive a confirmation email, and you have to click the activation link inside. If you don’t receive this email (I had this problem), just send an email to the support team and they will help you to activate your account.
2. Add a new Zone
After your account is active, the first thing you need to do is to go to “Zones” menu and you should be automatically taken to the “Add Zone” page.
On this page, you should see by default two sections and a list of options.
General Zone Settings
Set any name for the “Zone Name” (use only lower case letters).
Make sure the “Zone Status” option is set to “Active” so your new zone will become active immediately after you create it.
Set the “Zone Type” to “Pull” and check the “Show Advanced Features” setting next to this option.
Common Zone Settings
You don’t have to edit all the settings from this section. I have only changed a few.
Locate the “Expire (in minutes)” option and set its value at “43200.”
Set the “SSL” option to “letsencrypt“.
Set “Force SSL” option to “enabled“.
Pull Zone Settings
Enter the URL of your site in the “Origin URL (incl. http:// or https://)” field, including “http://” or “https://”.
Set the value for “Max Expire (in minutes)” option to “525949“, which is 1 year.
There’s no need to edit the other options on this page. Just leave everything else to the default value.
Click the “Save” button to save this new zone.
Your zone should be now created, and it will take a few minutes for it to be deployed.
Once the zone has been created and deployed, its status should turn to “Active“.
3. Add a CNAME
You must add a CNAME to your server’s DNS records to make your CDN accessible at cdn.yourdomain.com.
Since this step needs to be done in your web hosting management panel, you might have other options than what you see in my screenshots. In my previous tutorial about how to choose a web hosting, I have used Siteground as the hosting provider since this is the web hosting company I use and recommend. That’s also what I’ll use as a reference for this tutorial.
Many of the web hosting providers use cPanel for their hosting management interface and that’s also what Siteground uses.
So, log into your the web hosting management panel of your web hosting company (usually, you should be redirected to cPanel if you type “http://yourdomain.com/cpanel” in your web browser).
If you are a Siteground customer, and if you have logged in to your account from the main site, go to “My Accounts” menu to access the cPanel’s interface.
Once you see the options available in cPanel, look for the “Domains” section and click on “Advanced DNS Zone Editor
“.
On the next page, select your domain name from the domain dropdown list.
A list of options will now appear.
Into the “Name” field, add “cdn” and cPanel should autofill the rest of the URL based on your selected domain name.
Set the value of “TTL” to “300“.
For the “Type” option select “CNAME“.
In the “CNAME” field, enter the URL of your KeyCDN Zone. You can see this URL in your KeyCDN account, under the “Zones” menu.
Click the “Add Record” button to add the CNAME.
4. Add a Zone Alias
Next, we want to make our CDN’s address accessible at cdn.yourdomain.com.
To do that, we’ll need to add a zone alias.
Go to “Zonealiases” menu and click on “Add Zonealias“.
Enter the desired URL for your CDN (in my case cdn.antreno.com), select your Zone and click “Save“.
Now, you should see the new zone alias under the “Zonealiases” menu.
5. Add the Zone Referrers
Next, we need to add a few Zone referrers.
Adding these zone referrers will enable the KeyCDN hotlink protection.
For example, if someone wants to display an image hosted on your site on an external website, the image won’t be displayed. This will help you save valuable resources.
To add a new zone referrer, go to the “Zonereferrers” menu and click on “Add Zonereferrers“.
Enter the “Referrer” URL and select your “Zone“.
Repeat the operation until you have all the zone referrers listed below.
- cdn.antreno.com
- antreno.com
- *.antreno.com
- antreno-99e6.kxcdn.com
Replace “antreno.com” with your own domain name.
Replace “cdn.antreno.com” with the URL of your own zone alias.
Replace “antreno-99e6.kxcdn.com” with the URL of your own zone. You can see this URL under the “Zones” menu.
6. Add the CDN to WordPress
You have configured your KeyCDN account and added a CNAME to your web hosting management panel to get your static files from cdn.yourdomain.com.
The last step is to add the content delivery network to WordPress and configure WordPress to use the CDN for serving the images and all the other static files of your site.
To do that, you are going to use a plugin.
Here, you have more options.
You can use the WordPress CDN Integration plugin if you want to have all your site’s static files served from the content delivery network, or you can use a caching plugin that has an option for delivering the content from a CDN.
The advantage of using a caching plugin over the standard content delivery integration plugin from KeyCDN is that a caching plugin will also deliver your site’s cached files from the CDN, while the standard CDN plugin will only deliver the images, fonts, CSS, JavaScript, HTML, and all the other standard static files.
I use the W3 Total Cache plugin for my blog. This plugin handles the caching process but also gives me an option to include the cached files among the static files delivered from the content distribution network.
There are also a few other WordPress caching plugins that support the integration with a content delivery network. I won’t cover all of them, but the process is pretty similar.
For now, I will only teach you how to integrate the CDN with the W3 Total Cache and the CDN Enabler plugin. I will soon write a full configuration guide for the W3 Total Caching plugin.
A. Add a CDN to WordPress with the CDN Enabler plugin
Log into your WordPress dashboard and install the “CDN Enabler – WordPress CDN Plugin” by KeyCDN. If you’ve never installed a plugin, read my guide about how to install WordPress plugins.
Once the plugin is installed and active, under the “Settings” menu of WordPress, you should see a new submenu added by this plugin, called “CDN Enabler“.
Go to that page to access plugin’s options.
You should see the following options.
Enter the full URL of your CDN in the “CDN URL” field (without the trailing slash). In my case, that’s “https://cdn.antreno.com“.
Enable the “CDN HTTPS” option if you use SSL for your Zone.
Leave everything else to the default values.
That’s all.
B. Add a CDN to WordPress with the W3 Total Cache plugin
Log into your WordPress dashboard and install the “W3 Total Cache” plugin.
Once the plugin is installed and active, go to “Performance–>General Settings“.
Find the CDN section and enable the CDN option.
Set the “CDN Type” option to “Generic Mirror” and save the settings.
Next, go to “Performance–>CDN“.
Look for the “Configuration” section and set the following options.
Set the “SSL support” option to “Enabled (always use SSL)“.
For the option “Replace site’s hostname with“, enter the URL of your CDN (without https://). In my case, that’s “cdn.antreno.com“.
Click the “Test Mirror” button to test your CDN.
If you see a green “Test passed” message, click the “Save Settings & Purge Caches” button.
That’s all.
Your CDN should now pull your static files from your web host and deliver these files from the content delivery network.
Your images should now have a URL like https://cdn.yourdomain.com/wp-content/uploads/image.jpg.
Check if CDN works
To check if your images are delivered from KeyCDN, and if a cached version of a file has been served, you can follow the next steps.
Open a page of your website in your web browser and right-click on it.
Click on “Inspect” (or Inspect Element).
Go to “Network” menu, then look to “Headers” tab.
Reload the page with the developer console opened and select the URL of a loaded image, CSS or JavaScript file.
You should then see something similar to the screenshot below.
Under the “Response Header” section, you should see the following lines:
server: keycdn-engine
The server header confirmed that my blog uses KeyCDN as the content delivery network.
x-cache: HIT
The line above, with the “HIT” value, means that the image has been successfully served from the caches saved on one of KeyCDN’s servers.
If instead “HIT” you see “MISS,” it means that the CDN works, but the image hasn’t yet been saved in caches. When you reload the page, the value should change to “HIT.”
Conclusion
If you want your website to load fast for all the visitors, then a content delivery network is a must.
Besides speeding up your site, a content delivery network also gives your site extra security benefits, your site will consume fewer resources from your web hosting plan, and can improve your site’s SEO.
All these will result in improved conversion rates, a lower user bounce rate, and to happier visitors.
You know now the benefits of a CDN and how to add a CDN to your site.
Leave a Reply