The blog is still very much in beta, any suggestions on improving it is greatly appreciated!

A comprehensive guide for connecting your WordPress powered site to a 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.

 

Where does WordPress stores most of its static content?.

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

 

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.

 

  • MaxCDN – It has no free plans, but is very popular and is supported by the W3 Total Cache plugin for implementation.
  • 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.
  • Akamai / Rackspace cloud files again supported by W3 Total Cache
  • 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.
  • 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.

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!

 

 

How to remove Firefox’s dotted outline on buttons and anchor tags with CSS

jQuery : Getting a selected element’s outer HTML