How To Configure CDN Support in WP Super Cache

by nycgadgetgirl on April 21, 2012

in web development

I recently started using CDN Support in WP Super Cache with CDN Sync Tool, Amazon S3, and Amazon CloudFront on my WordPress driven sites. I couldn’t find step-by-step configuration instructions for this combination of tools. I figured it out with only a few initial missteps, but it took longer than I would have liked. I’ve written these instructions in case they might be helpful to someone else in the future.

What Is A CDN and How Can It Help?

CDN stands for Content Delivery Network. By using services like Amazon’s S3 and CloudFront, you can significantly increase your website’s page speed. This is because Amazon has robust servers all over the world that can serve your content much faster than the single shared hosting server that your WordPress site is most likely installed on. When I decided to set up CDN Support, I went with Amazon as my provider because I already had an Amazon S3 account and was familiar with using it. There are other providers offering comparable Content Distribution Network services as well.

How To Implement CDN Support To Speed Up Your WordPress Site

This post assumes that you already have WP Super Cache installed, the latest version of WordPress (currently 3.3.2 while I’m writing this), and a basic understanding of WordPress and plugin configuration.

  1. If you don’t already have one, sign up for Amazon Web Services.
  2. Go to the AWS Console, click on the S3 tab, and then click the “Create Bucket” button.
  3. You can name the bucket anything you want, so long as no other S3 user has created a bucket with that name. I use the domain name of the site it is for. After choosing a name, hit the “create” button.
  4. Now, you need to get the content that you want hosted into your S3 bucket. One choice is to simply use the “Upload” button and put copies of your files into the bucket. For a totally static site, this could be fine, but for your dynamic WordPress site, you need an easy way to keep your changing files synced between your site and your S3 bucket. This is where the CDN Sync Tool plugin comes into play. Install and activate this plugin.
  5. Go to the settings page for CDN Sync Tool. First, choose what to sync. By default, it will upload everything in your wp-content/plugin, wp-content/themes, wp-content/uploads, wp-includes/css, wp-includes-images, and wp-includes/js folders and then keep it all synchronized*. If you have other directories, that need to be synced, add them to the “Sync Custom Directory To CDN” box. Be sure to enter the path relative to your WordPress site root. Hint: The CDN Sync Tool seems to sync the folders it expects in wp-content/uploads. If you have created extra folders here through FTP, you need to enter them into the custom directory box.
  6. Go to the CDN Options tab. Choose Amazon S3 in the dropdown. Go to your AWS Console. Click your name in the top right corner and choose “Security Credentials.” Scroll down the page to “Access Credentials.” You should have an access key there. Copy the Access Key ID and the Secret Access Key to your CDN Sync Tool options. Also enter the bucket name for the bucket you just created.
  7. On the JS and CSS tabs, I choose to combine my files and I use “wp-content/uploads/cdn” as the save path. Hint: This path will only work if you’ve already created the directory on your server.
  8. After saving all your options, go back to the Sync tab and click the “Sync” button. This may take some time, especially if you have a large site with a lot of images in your uploads folder. When the sync completes, you’ll see a list of files that were synced.
  9. At this point, clink through your newly populated S3 bucket to confirm that everything is there. (Click “refresh” if you don’t see the files in your bucket.) You may want to add more folders to the “Sync Custom Directory To CDN” box.” Hints: Confirm that your plugins folder was uploaded. I’ve noticed on two sites now that it wasn’t, even though “Plugin Files” was checked in the Sync tab. Also, I’ve noticed that on large sites, not everything copies over during the initial sync. A large number of my uploaded images didn’t sync on both of the sites I’ve done so far. This may be a problem with my host or something else, I’m not sure. I also got a few error messages that I couldn’t resolve on some random, older files. This may not have been the best solution, but I chose to use Amazon’s “Upload” button to upload those files to my S3 bucket instead of trying to sort out why the tool wasn’t getting them all.
  10. In your bucket, go to wp-content and right click on the uploads folder. Click “Make Public” in the pop-up menu.
  11. The next step is to create a distribution for your files in Amazon CloudFront. In the AWS Console, click the CloudFront tab and then click the “Create Distribution” button.
  12. Delivery Method should be Download. Choose Amazon S3 Origin and choose the appropriate bucket in the dropdown. Click continue. Leave everything on the Distribution Details step as is, unless you wish to create a CNAME (see #13 below). If you plan to create a CNAME, enter it here. Click “Continue” and then “Create Distribution.”
  13. It isn’t necessary for functionality, but I recommend creating a CNAME for your distribution to maintain cleaner links in your page source. Personally, I use a sub-domain of “cdn.” For example, the CNAME for the distribution I use for this site is cdn.nycgadgetgirl.com.
    • Enter the CNAME you wish to use, then click “Continue” and then “Create Distribution.”
    • Go to wherever you manage the DNS for your site, most likely your registrar’s website, and add a CNAME record for the CNAME you just used in your distribution setup. For the value, enter the domain name shown in the CloudFront distribution’s properties.

  14. The last step is to actually enable CDN Support in WP Super Cache! In your WordPress Dashboard. Go to the settings for WP Super Cache and click the CDN tab. Check the “Enable CDN Support” box. Enter the full URL of the CNAME you just created. For example, for this site, I entered http://cdn.nycgadgetgirl.com
  15. If you synced some directories to your S3 bucket that are outside of wp-includes or wp-content, you should enter them in the “Include directories” field. You can probably leave the other fields as they are. I check the “Skip https URLs to avoid ‘mixed content’ errors” box.
  16. Click the “Save Changes” button and you’re in business.
  17.  

    *Note: I don’t know yet if it really keeps everything synced as it claims to.

    I hope this post helps others configure CDN Support in WP Super Cache. I no longer maintain this site. If you have any questions, try the WordPress forum http://wordpress.org/support/plugin/cdn-sync-tool.

Previous post: