Yikes! This post is over a year old!
If you think it deserves a rewrite please get in touch or leave a comment.
— Thanks, Ash.
Content delivery networks (CDNs) are most useful when we want to serve static files to our users like CSS, JS, HTML, or any image files.
Why use a CDN?
Content delivery networks host static content like CSS, JS, HTML etc.
By offloading the HTTP requests of these resources to a dedicated provider, we can improve the page-load performance of a website and at the same time reduce the burden on lower-spec web servers by only requesting specific resources that aren’t otherwise available on a CDN.
WordPress
A common use case for a CDN is to offload the media in the WordPress Media Library to reduce the amount of disk space required on the webserver and at the same time affording longer and more robust caching.
Offloading media to a 3rd party is also a great way of reducing the footprint of the WordPress site, providing us with an easy way to scale up the number of web servers as we no longer need to ensure that the uploads folder remains synchronised between each of them.
Plugins
There are lots of plugins in the WordPress Plugin Library for adding support for well-known CDNs such as DigitalOcean Spaces, Amazon S3, and Google Cloud Storage but very few of them support the Rackspace Cloud Files CDN.
At the time of writing the only plugin that seems to support Rackspace Cloud Files is W3 Total Cache. Whilst the plugin itself does a million times more than what we need, the focus of this guide is the CDN portion of the Plugin.
Set up a Rackspace Cloud Files container
In order to create a Rackspace Cloud Files container, you must have CREATE permissions assigned to your Rackspace account.
If you are unable to access this part of Rackspace, you should follow the instructions for how to complete these steps “Without Rackspace Permissions”.
If you are going to be configuring a server for Rackspace Auto Scale that may host multiple WordPress websites, each website must have its own Cloud Files container and be configured independently.
With Rackspace Permissions
Log into Rackspace Cloud Control Panel (https://mycloud.rackspace.com) and click on Storage > Files.
Create a new Rackspace Cloud Files Container and call it “<domain>-uploads” and set the container to Public (Enabled CDN).
Without Rackspace Permissions
Create a new Rackspace support ticket with the following macro.
| Category | Change |
| Product | Storage |
| Subject | Create new Cloud Files Container |
| Body | Hello, Can you please create a Cloud Files container called “<domain>-uploads” and ensure it is CDN Enabled. Thanks. |
Configure the website
On a local copy of the website, install the latest W3 Total Cache plugin and activate it.
Once the plugin is activated, in the left sidebar click on Performance, then General Settings.
In the horizontal nav, click on “CDN”.
Click on the dropdown next to CDN Type and select Rackspace Cloud Files
Note: If this option is greyed out it is likely that you are in a WordPress Multisite configuration. In the top right corner of the panel box, there should be a button for “Use specific settings”. Click that and you will switch to defining W3 Total Cache settings on a per sub-site basis rather than a single set of settings for the whole network.
Click “Save all settings”, and then once the page has reloaded, in the sidebar under ‘Performance’ click on ‘CDN’.
You will now see the configuration options for the CDN. Please ensure you follow the below:
- Host attachments should be CHECKED
- Host wp-includes/files should be UNCHECKED
- Host theme files should be UNCHECKED
- Host custom files should be CHECKED
Click ‘Save all settings’, then scroll down and click the ‘Authorize’ button.
Add a username and password to a Rackspace Account that has CREATE permissions for Rackspace Cloud Files and continue.
Select your Cloud Files container you made earlier and then ‘Save all settings’.
Scroll down to the “Advanced” Options and ensure “Export changed files automatically” is CHECKED. Change the Auto upload interval to 300 seconds and the Re-transfer cycle interval to 60 seconds.
If the website you are configuring uses the plugin Fly Dynamic Image Resizer you will need to include the path to the image folder within the Custom file list textarea further down the screen.
Substitute /content/ with the path to your WordPress Content folder if yours is different.
/content/uploads/fly-images/*
If the website you are configuring uses LearnDash and/or the UncannyOwl Tin Canny Reporting plugins you will need to include those in the Custom file list textarea.
/content/uploads/uncanny-snc/*
/content/uploads/learndash/*
/content/uploads/assignments/*
/content/uploads/essays/*
NOTE: If you are using WordPress Multisite you should adjust the upload path according to the blog ID.
E.g
/content/uploads/sites/3/learndash/*
Click ‘Save all settings’. Your configuration is now complete and it’s time to commit and push the w3tc-config and cache folders that have been created to Github.
Now is the best time to ensure that your current environment is up-to-date with the production environment. You want to ensure that the Media Library has all the recent attachments.
Log into the WordPress admin and activate the W3 Total Cache plugin. In the sidebar click on “Performance” then “CDN”. Now it’s time to start uploading the site’s media to the Cloud Files Container.
Click on ‘Upload Attachments’. A new window will appear which will track the progress of the upload. You must keep the window open until the upload is complete.
Once the Media Library Export is complete, you may want to Upload custom files. You may skip this step if you are not using any of the previously mentioned plugins.
Once you’re happy that the media has been uploaded, Go to “Performance”, then “General Settings”, then in the horizontal nav, “CDN”.
Check the ‘Enable CDN’ box and click Save All Settings.
Now you should commit and push the changes to your W3 Total Cache config to Github.
All that is left is to deploy to production! Once you have deployed to production, you should activate the W3 Total Cache plugin. Your previous settings will be automatically loaded and your front-end assets will immediately start using the CDN!