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.

Advice: Set up your CDN first and make sure it’s working, before you mess around with the caching options. If I where you I would disable all the caching functions in W3 Total Cache and just follow the steps in this Trick first. When the CDN is working export your configuration settings (under general settings) and then mess around with the rest of the plugin

First go to General Settings and enable the CDN functionality with the following settings:

CDN Total Cache 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!

30 thoughts on “The perfect CDN setup for BuddyPress using MaxCDN and W3 Total Cache

Author gravatar

823

Bowe that’s wicked mate. Must try this out when I get my final server set up done!

Author gravatar

0

@Ross: Thanks mate! It’s a great setup and will improve performance quite a bit!

@J.Pisano: I did not realize this was an issue actually! I just changed my avatar here on BP-Tricks, and everything is working fine, including the uploading and changing of the avatar and serving the new avatar through the CDN. Here’s my updated avatar just uploaded through my profile page: http://tricks.cfcommunity.netdna-cdn.com/wp-content/uploads/avatars/1/4f92a82b8bfb2bfd128fade75269e4e8-bpfull.jpg. Are you using MaxCDN as a CDN provider or do another one?

Or maybe this only happens when a new user signs up? I’ve used a CDN on other project before, and never experienced any issues with it to be honest. I’ll keep testing and if needed update the trick 🙂

Author gravatar

0

Like I said.. it’s lightning fast.. and it works 🙂 It is indeed a mirror when you set it up with MaxCDN :-). Check out the 3rd screenshot in this article.

I just created an affiliate account with them, so if you decide you want to use the service, it would be great if you did it through this link: https://wefoster.co/go/max-cdn/ (if you’d rather not, that’s perfectly fine as well. But I have no problem with “promoting” the services that I love and use 🙂

Good luck!

Author gravatar

0

@Joseph: This is great to hear! Glad we got it all working for you 🙂 And thanks for the sign-up!

@David: Great! Thanks 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *