For the last year or so the term CDN has been thrown around in almost every single discussion about speeding up websites. It seems like all the cool kids use one, and for a good reason.
a CDN is a network of servers that delivers cached static content from websites and applications to an end user based on the geographic locations of: the user, the origin of the static content, and a content delivery edge server.
Stated a little more simply: the closer the CDN server is to where the user is, the faster the user gets the content.
- Quote taken from the MaxCDN website
Sounds pretty awesome right? A Content Distribution Network is a pretty cheap way to speed up your website, and it’s pretty darn easy to set up. This trick will tell you exactly how to do so, using the popular W3 Total Cache plugin.
It took me a while to find a good CDN which was cheap, easy to set up and works great out of the box with WordPress. I ended up with MaxCDN here on BP-Tricks and I’m very pleased with their services.
There’s another reason I’m being pretty specific about using MaxCDN in combination with W3 Total Cache. The two go really well together;
W3 Total Cache, created by Frederick Townes and a long time MaxCDN customer, created his popular WordPress plugin to allow direct content delivery into any WordPress installation without any special knowledge or programming required.
Enough with the background info, let’s do this!
Step 1: Sign up for a CDN account with MaxCDN
Go to the MaxCDN website and sign up for an account. Usually they have some pretty good sign up offers (1000 GB of traffic through the CDN for $39,95 currently) and this amount of data traffic takes a long time to reach (On BP-Tricks I’ve only used about 40 GB of my 1000GB in 4 months).
After you’ve signed up you’ll be able to access the control panel of MaxCDN, which brings us to our next step.
Step 2: Create a “pull zone” from your MaxCDN control panel
After you’ve logged in, go to “Manage Zones” and on your left click on “Create Pull Zone”. You’ll see a new screen where some basic info should be filled in. You’ll be guided every step, but here’s an example of how I use it here on BP-Tricks:
You do not need to enable Gzip compression, because that stuff can be handled by W3 Total Cache. Press the Create button and on the next screen you’ll be looking at your Push Zone details.
Copy the Temporary URL and save it somewhere, because you’ll be needing it soon. The temporary url does not look as fancy as your custom domain CDN url, but that stuff can be pimped out later and requires you to add a CNAME to your DNS settings with your host. Sounds complicated? No worries, you can skip that step and keep using the temporary url without any problems.
Step 3: Installing and Configuring W3 Total Cache for CDN usage
Use the plugin browser to install W3 Total Cache and activate it. In the near future I’ll be posting an extensive guide for a more complete setup of W3 Total Cache, but due to the nature of BuddyPress that is a pretty complicated process.
First go to General Settings and enable the CDN functionality with the following settings:
Now browse to the “CDN” page in W3 Total Cache. This is where it’s getting fun. The default settings are great for WordPress, but we are going to tweak some settings to make it really beneficial for BuddyPress specific stuff! But let’s start at the top:
General Settings: Tick all of the boxes except “Host Minified CSS/JS” (probably disabled) and “Import external media library attachments” is optional. It’s a matter of preference.
Configuration: It could not be easier.. Leave everything as is, and simply fill in the Temporary URL that you got when creating the pull zone:
Do the NetDNA test and see if the test is passed. I’m pretty sure it will
Advanced: This is where the real fun starts. Once again keep all the default settings intact, and move to the custom file list straight away. This is where we can do some great things that can greatly improve page loading speeds. Be sure to add the following lines to the custom files list:
wp-content/uploads/avatars/* wp-content/uploads/group-avatars/* wp-content/plugins/buddypress/bp-core/js/* wp-content/plugins/buddypress/bp-themes/bp-default/_inc/*
Guess what? Now all your user avatars, group avatars and BuddyPress CSS/JS files will be loaded through the CDN!
The last line is assuming that you are using a Child Theme of BP-Default, and thus you need to specify these folders to be hosted by your CDN manually. If you’re using BP-Default you can remove this line, because Total Cache will handle the CDN setup of your currently active theme automatically.
Are you using a lot of plugins for BuddyPress? You can fill in the paths to the location of their CSS/JS files as well, to further speed up your site. Here’s a screenshot of all my CDN hosted files:
Step 4: Check out the results of all your efforts
Save your settings. Go to your homepage. Do a hard refresh of your browser. Witness the power of your awesome CDN. Check out the location of your CSS and JS files with FireBug. Or upload a new (group)avatar. Check out the url of the image. You did it. I’m proud of you! And your community and web host will love you for the increased performance, reduced traffic to your server and a better browsing experience. Be proud! Enjoy!