A comprehensive guide for connecting your WordPress powered site to a CDN.

wordpress+cdn

I get asked a lot whether it is a good investment to use a CDN with a WordPress site, if you have a high traffic website or a blog, and if most of your traffic is NOT concentrated on a particular geographic region, then yes, a CDN is a worthy investment, next question is often, how do I integrate or implement a CDN with WordPress, it is a rather detailed process, and I have explained it below.

In response to

  1. How to implement a CDN using a plugin ?
  2. How to implement a CDN using W3 Total Cache ?
  3. How to integrate a CDN with WordPress via FTP ?
  4. How to mirror a WordPress site ?
  5. How to change Google Analytics domain to work with WordPress ?

This guide is intended for the following user groups:

  1. If you are a web-master who maintains a WordPress powered site and is looking to speed up the site by using a CDN.
  2. If you are a WordPress developer trying to familiarize yourself with the concept of CDN and its implementation.
  3. If you are someone who is already familiar with the concepts of CDN but doesn’t know how to integrate it with WordPress.

I have tried to make this guide as simple as possible for the average user, but it is essential that you understand how a CDN works. WPBeginner has done a nice infographic explaining the working of a CDN, which I suggest that you read first. I strongly recommend that you backup your files and database prior to attempting any of this, better safe than sorry. Use any of the several plugins available for WordPress to perform the backup.

Before I step into the actual implementation, you need to remember two basic things.

  1. WordPress is a Content Management System (CMS, from here on) and this means that the pages are generated dynamically by loading the content from the database on request. Hence the complete generated pages are almost always dynamic, but the content used by those pages, like images, videos, CSS and JavaScript files, are static.
  2. A CDN can host only static content, dynamic content must be generated by your server. When using a CDN with WordPress, you are only serving the static content via CDN and page generation and database are still the responsibility of your own hosting server.

The basic overview of integrating WordPress with your CDN

Each CDN provider is different, and the most popular among them do support WordPress natively, in this guide we will be discussing four methods for integrating WordPress with a CDN and they are. It is essential that you attempt your own CDN integration in the order mentioned below.

  1. Use a plugin provided or recommended by the CDN provider – CDNs natively supporting WordPress usually do it with a plugin that is available for download from their website or from the WordPress plugin repository. This is the easiest way to implement a CDN. An example is Windows Azure CDN which integrates well with WordPress with their open source Windows Azures Storage plugin available for download free from the WordPress repository.
  2. Use a generic plugin – If your CDN provider does not have their own CDN plugin, then you can use a generic plugin like W3 Total Cache WordPress plugin, a detailed implementation using W3 Total Cache is described below. If it is not supported by W3 Total Cache, then there are a few other generic plugins that could do the job, those are listed and described in detail as well.
  3. Uploading files via FTP – On the off chance that your CDN is not supported by any of the WordPress plugins, but it supports uploading files via FTP, then you can still use W3 Total Cache with its FTP implementation, a detailed process of doing this, is also explained below.
  4. Individually uploading static content – If none of the above methods work, then you will have to do this the old fashioned way, manually, by individually uploading static content, that is. I do not recommend that you attempt this if you are a WordPress novice, because of its complexity and if you are not sure what you are doing, then a lot of things can go wrong and chances are that you won’t have to do this, but I have discussed this anyway for those who might need this particular setup.

Other things that I will be discussing will include setting up a CNAME entry in your DNS for your CDN and configuring it to work with WordPress.

Where does WordPress stores most of its static content?.

Now that we know only static content can be effectively hosted by a CDN, let us look more into this. Depending on the configuration of your WordPress blog, most of the static content, like images and videos, are stored in the wp-content/uploads folder.

Some of the files under the WordPress core are also static files; they are stored in wp-includes/files

Other static elements, like css, js, and images linked by the stylesheets, etc. are stored in the wp-content/themes/<your-theme-folder>

Along with this, more static content in the form of design elements, css and js may be found in the plugins folder as well, located at wp-content/plugins/<your-plugin-folders>

How does a CDN work with WordPress uploaded files?

We are giving a brief outline of the procedure of implementing a CDN with WordPress – the reason why I am giving you this outline first, is so that you will have an idea as to what is wrong when you find yourself in a need to troubleshoot. And more importantly, what is the process going on behind various plugins for WordPress that we will be using later on.

Let us consider an uploaded media file. When you usually upload a file, the files goes in the wp-content/uploads folder, without using a CDN, a visitor visiting your site will get the file delivered to them from your own webhost from this directory, for e.g.

The slider image in the home page of one of my websites is located in the url

http://www.aghoshb.com/wp-content/uploads/2011/11/slider11.jpg

Without using a CDN, this file is served to an end user visiting my website via the BlueHost server in which my file is hosted.

After using a CDN, this file will be moved to the servers provided by my CDN partner, let us say that examplecdn.com is my CDN partner, and once my files are moved to their servers after I setup the CDN, then to an end user, the files will be served in the following fashion.

http://aghoshb-com.examplecdn.com/wp-content/uploads/2011/11/slider11.jpg

See how the URL has changed after using a CDN? We cannot leave it like this, instead we will change our DNS settings to match cdn.aghoshb.com to aghoshb-com.examplecdn.com

So, eventually, the file will be requested via

 http://cdn.aghoshb.com/wp-content/uploads/2011/11/slider11.jpg

So when your browser requests the file located at cdn.aghoshb.com, it will get the message that this is an alias for aghoshb-com.examplecdn.com and the examplecdn.com will serve the files from the nearest server to the requesting user. This will involve having to do a few extra DNS queries, which arguably slows things down, but we will make up for this time and then some, as we use the closest servers of a CDN . To understand how this works, refer to the workings of CDN and DNS. Robert Accettura has written a nice article in his blog depicting the workings of this exact case.

Getting your hands dirty – Integrating a CDN

Now that you have familiarized yourself with the concepts of CDN and its working with WordPress, we will actually implement this. Luckily, at this point, we don’t have to do a whole lot of programming or setups to get this working, because there are a lot of plugins that will take care of most of the job for us. We will be exploring a few of these plugins, various options provided by them, etc later on.

First step in implementing a CDN is to know who your CDN partner is, there are a lot of options out there, a lot of companies are providing CDN offers, we have a listed a few here, you can choose the one that best fit your needs and budget. You can also use sites like cdnfinder.com to compare the CDNs available to your need.

  1. MaxCDN – It has no free plans, but is very popular and is supported by the W3 Total Cache plugin for implementation.
  2. Amazon Cloudfront – Another popular CDN provider, has a very nice control panel which is pretty much self explanatory, and it can be configured easily via Amazon S3 and Cloudfront plugin.
  3. Akamai / Rackspace cloud files again supported by W3 Total Cache
  4. Windows Azure is a product from the Microsoft Family, and has its own plugin to support the operation with WordPress and is available for free from the plugins repository.
  5. EdgeCast can currently be configured via CDN Speed Cache plugin

I. Configuring CDN using native plugin.

As we discussed before, if a CDN supports WordPress integration via its own plugin, then that is the best way to do it, an example is the Amazon Cloudfront CDN, from Amazon, it supports implementation via Amazon S3 and Cloudfront WordPress plugin. Iwill be using this as an example to show you the procedure, but if your CDN partner is anyone else, and they have their own WordPress plugin, the procedure is pretty much the same.  Simply download and install the respective plugins from the WordPress repository, if you are unsure as to how to do this, please refer to this official documentation.

Once you install the plugin, you will need to configure it, the plugin will generate a settings page, here is an example of the settings page created by Amazon S3 and Cloudfront plugin.

connecting-wordpress-to-cdn-aghoshb

These options are pretty much self explanatory and can be availed from the Amazon site where you setup your CDN account.

The process is pretty much similar for every other plugins as well, download the plugin, install, configure the settings to match the settings in your CDN site, and save – couldn’t make this any easier!

Configuring CDN using W3 Total Cache

If your CDN does not have its own plugin, or if it recommends that you use W3 Total Cache (W3TC from here on) which is a very popular performance enhancement plugin for WordPress and it’s been around for a while now and is completely free. It is so effective and easy to use that many popular hosting services recommend the use of W3TC in your WordPress installation, but our interest with W3TC here is limited to its ability to support a wide variety of CDN.

wordpress-cdn-plugin

After you install W3TC from the WordPress repository, it will show a new tab in your admin panel, called “Performance” – Under this tab; first you have to go to “General Settings

Once you scroll down that page, you will see the option to set your CDN. As it can be seen from this window, W3TC supports a lot of CDNs, with each option you select (After you save your settings),to the advanced configuration page for your CDN. It can be accessed by clicking the sub-menu page under the “Performance” tab you just clicked.  you have to provide certain credentials to verify your accounts with the CDN, etc. Sometimes with the likes of RackSpace, and MaxCDN, you will have to provide an API key, this key can be generated from your account with your respective CDN, for more information on this, please refer to the documentation provided by your specific CDN partner.

To configure your CDN further, you have to navigate to the “CDN” page, under “Performance”.

content-delivery-network-for-wordpress

A good majority of these options are already configured for you – and most of these are self explanatory, or already been discussed in this article, for e.g. you will see options in this tab to host your wp-include files, theme files and plugin files. Uploads folder will be automatically handled too.

Some options are however, specific to the CDN you are using. The one below is specific for Amazon CloudFront configured via W3TC.

wordpress-cdn-implementation

One special case of interest here, is the Self Hosted or FTP Supported CDN – This is relevant to a large degree, because this will be option you will use, if your CDN is not supported by W3TC natively.

III. Self Hosted or FTP Supported CDN

Now, most CDN providers will give you more than one method of uploading files, the primary method is usually through a web interface, there will be an alternative method to do it using side-loading, which requires an API key or other credentials for a script to work and this is what is used by plugins that we will be discussing in a short while. The third method is of interest to us, which is using FTP.

If you are a web master or someone who maintains websites a lot, you know how FTP works, for those of you who don’t, it stands for File Transfer Protocol and it is  a very simple protocol used to upload (and download) files from a server. The procedure requires knowing three variables, FTP host, FTP Username and FTP password, and sometimes FTP security protocol (TLS, SSL, SSL (implicit) and sFTP).

When using W3TC, if your CDN is not natively supported but it has FTP access, you can use this option to configure it. To set this up, select the last option in the drop down menu under the section “CDN” in the “General Settings” tab, under the “Performance” menu, in the WordPress admin backend (See screenshot).

use-cdn-ftp-with-wordpress

After this we need to configure the advanced FTP settings to make it work, which can be configured from the “CDN” page under “Performance”.

Filling up this page is pretty much self explanatory; you would have received the FTP settings from your CDN partner in their sign up email. If not, contact them or it will be available on your CDN management dashboard located at your CDN account.

implementing-cdn-with-ftp

Now, if your particular CDN is not listed here or if it doesn’t support upload via FTP, no need to worry, there are several other generic WordPress plugins that can take care of the job for you, we will now list a few of them here, and their salient features, but what you need to remember is that each CDN provider is different and they might have their own methods of implementing WordPress, and there is a very good chance that if you are using a popular CDN, a plugin is already out there for it, on the off-chance that there isn’t one, you can upload via FTP using W3TC like we explained. If FTP is not supported, then you will have to manually upload your files (a brief discussion about this will happen shortly.), We recommend that you do not go for such a CDN, for the money you are paying, you should be able to do it automatically without having to do it with every single post!

IV. Manually uploading and configuring WordPress.

This is perhaps the most complex methods to integrate a CDN with WordPress. Follow through this guide only if you are advanced user and know what you are doing. We strongly recommend that you backup your WordPress installation, including all files, and database before you proceed.

In this method of integrating a CDN with WordPress, the following things have to be done, and in order.

  1. Upload all the necessary files to a CDN. This includes your uploads folder and any other static content from your includes folder, theme folder and plugin folders. We have discussed this at the beginning of the article.
  2. Configure WordPress to look for these files from the CDN instead of the hosting server. This is achieved by changing the links of all referenced files to a sub-domian like files.example.com or cdn.example.com
  3. Configure your cPanel (or whatever hosting control panel that you are using) to add a CNAME record in your DNS to map the sub-domain with the CDN url, e.g. you will configure cdn.example.com as an alias for yoursite.cdnsite.com
  4. Optionally change the uploads folder to a sub-domain, as well.
  5. Change the cookie domain in WordPress.
  6. If you are using Google Analytics, set your main domain parameter.

You will be using your CDN interface to upload all the required files to the CDN, based on the provider you are using, you will be presented with different web interfaces to do this. You should maintain the path while uploading the files, for e.g. if you are uploading your uploads folder, then you must create a folder called wp-content and then put the uploads folder inside it.

This way, a referenced file will be referenced as

/wp-content/uploads/path-to-file

in both CDN and WordPress, only the domain will change. That is,

www.yoursite.com/wp-content/uploads/path-to-file

will become

www.yoursite.cdnsite.com/wp-content/uploads/path-to-file

Now you need to configure WordPress to look for these files from the CDN server instead of the hosting server, for this, there are two methods for doing this, I personally prefer using W3 Total Cache. That is only because I am already using the plugin for several other optimizations, you can also use WordPress CDN Rewrite.

We will be discussing the method using both plugins here. Using W3 Total Cache, go to “General Settings”, under “Performance” under the “CDN” settings, set the CDN to “Mirror” or “Generic Mirror” depending on the version of W3TC you have. (See screenshots).

wordpress-cdn-generic-mirror

Once this is done, you will need to configure this CDN further, for this, go to the “CDN” page under “Performance”

cdn-rewrite-wordpress

Follow the instructions as shown in the screenshot, add CNAMES as you require, I just went in order cdn1, cdn2, etc. – you can add whatever name you want, we will be pointing these names to your CDN provider shortly. You can’t test your mirror till we have done this.

 Adding CNAME records

What we’re doing here, basically is creating an alias for the cdn names you created in the previous names, I created cdn1.aghoshb.com  to cdn5.aghoshb.com, now I need to link these to my CDN provider.

To do this, go to your hosting control panel, I use cPanel with my hosting; you might be having an alternate setup, but procedures are more or less the same in principle.

  1. Login to your control panel.
  2. Locate the option to  add CNAME records or edit DNS.
  3. Change the DNS records

dns-editing-for-cdn

Add CNAME records as shown in the screenshot – the host record is the subdomain you defined before, in my case, it is cdn1 first, the “points to” field must be set to the address of your CDN partner, mine is cloudfront, so I set it to cloudfront subdomain linked to my account.

You must continue this procedure for all the sub-domains that was created before,  same way, point them to the same CDN address, it wouldn’t matter. The DNS changes can take up to 24 hours, depending on the server, in mine, it says 4 hours, but the time can vary from server to server, but sometimes it will also happen instantaneously.

Once you have done this, you can go back to W3 Total Cache plugin window, and test your mirrors to see if they are working.

Couple of other things that you would want to do along with this setup, remember that these are optional and is not required for working of the CDN but are highly recommended for better performance.

Change Google Analytics Domain.

If you are a serious web-master, you would be using Google Analytics in your website, to avoid confusion between the CDN domain and your domain, we will explicitly specify which is your domain, in the code, the process is fairly simple, go to the place where you have added your Analytics code – most WordPress themes have this in the theme options, if you are a developer, you probably added this in your footer.php, I did that, so I am going to edit my code accordingly to match my domain.

You add the following code to your tracking script, as shown in the screenshot, where example.com is your domain name.

['_setDomainName', 'www.example.com']

Change the Cookie Domain in WordPress

Google Analytics and WordPress set cookies in the visitor’s browser in each session. It is important to prevent setting the cookies in sub-domain created for CDN, for this we will define the cookie domain in WordPress. To do this, you need to edit the wp-config.php file, located in the root directory of your WordPress installation, you can do this via FTP or via the File Manager in the cPanel we discussed earlier, if your hosting does not have cPanel, the available control panel will surely have an option to edit files with it.

Once you have opened up your wp-config.php in your favourite text editor, add the following lines, where example.com is your domain name.

define('COOKIE_DOMAIN', 'www.example.com');

This concludes the guide to integrating and implementing a CDN with WordPress – I have tried my best to cover all the possible scenarios, but if you find yourself in a position where none of this works for you, or if you have any doubts about implementing this, or if you run into some errors implementing a certain section, please feel free to post your queries in comments. I will try to keep this guide as updated as possible, but if you have a solution that works better for you, please let me know so that we can include it in this article.