max_cdn_buddypress
Coding

The perfect CDN setup for BuddyPress using MaxCDN and W3 Total Cache

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:

Screen shot 2011 03 28 at 11.17.21 PM The perfect CDN setup for BuddyPress using MaxCDN and W3 Total Cache

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.

Screen shot 2011 03 28 at 11.50.04 PM The perfect CDN setup for BuddyPress using MaxCDN and W3 Total Cache

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:

Screen shot 2011 03 28 at 11.29.13 PM The perfect CDN setup for BuddyPress using MaxCDN and W3 Total Cache

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:

Screen shot 2011 03 28 at 11.58.35 PM The perfect CDN setup for BuddyPress using MaxCDN and W3 Total Cache

Do the NetDNA test and see if the test is passed. I’m pretty sure it will icon smile The perfect CDN setup for BuddyPress using MaxCDN and W3 Total Cache

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:

Screen shot 2011 03 28 at 11.59.07 PM The perfect CDN setup for BuddyPress using MaxCDN and W3 Total Cache

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!

About Bowe Frankema

 The perfect CDN setup for BuddyPress using MaxCDN and W3 Total Cache Building communities on BuddyPress is something I’m very passionate about. The decision to focus exclusively on BuddyPress projects over the last few years inspired me to share back some of the things I've learned here on BP-Tricks! You can find me on WordCamps & BuddyCamps across the globe and on Twitter! Follow me on Twitter

I'm constantly updating my BuddyPress Hosting Guide and SiteGround and WPEngine
have proven to be a great fit for hosting your BuddyPress community.

Need some help finding the perfect host? Check out my in-depth BuddyPress Hosting guide!

Discussion

30 responses to ‘The perfect CDN setup for BuddyPress using MaxCDN and W3 Total Cache

  1. Bowe,

    Thanks for posting this and it is WELL done…, but I still don’t see how this solves the avatar upload/changing issues… i.e. when you choose to have avatars on the CDN by uploading them through the custom file list of WTC3 and when someone uploads to change an existing one… when you get to the avatar customization/crop screen the avatar graphic “breaks” because BuddyPress assumes it is on the CDN, which it isn’t YET…

    In addition, until the auto-load feature of W3TC completes its task of getting the new avatars actually to the CDN, the broken graphic is shown for both group-avatars and personal ones…

    Also, if somebody decides to upload a new avatar, they won’t be able to crop it correctly because BuddyPress will always be pulling the old one from the CDN… as far as I can tell…

    Maybe this is something that needs to be changed in BuddyPress itself… a temporary working directory for avatar upload/changing that can be excluded from the CDN for those purposes and a note that your avatar won’t appear updated until X time as passed?

    As it stand now, I have to exclude all personal avatars to make this work…

    Check out this discussion here:
    http://wordpress.org/support/topic/plugin-w3-total-cache-cdn-support-for-user-avatars?replies=14

  2. @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 :)

  3. I’m using S3…

    Are you sure they are pulling uploads or gravatars? I see some of the avatars are using netdna-cdn.com and others are pulling gravatars here, so that must be Max CDN… I’ll try here a little later, this is definite problem on my site…

  4. As soon as I changed my avatar to the V, it appeared… as

    It this your CDN? That was really fast… how did it upload to CDN so quick using MAX CDN without waiting for the auto-upload interval in W3TC? Maybe because it’s a mirror???

  5. 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: http://bp-tricks.com/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!

  6. Bowe, Rock-on! I signed up through your affiliate above, all seems to be working so far… I will def. be back to let you know how this goes this week…

    Seems like the issue was indeed the older Amazon S3 technology.

      • Bowe,

        I have gzip/deflate working… I was just wondering if there was any benefit in letting MAXCDN handle it over W3TC or our own sites… Since browser’s uncompress the files and now the servers, the difference is probably negligible… don’t know.

        • When everything is all set up on your server enabled compression on the CDN will only slow down your load time from what I’ve understood. Can’t find a source for that statement, but I’ll look into it :)

  7. MaxCDN is great – and it’s worth mentioning that you can use MaxCDN with wp-supercache as well, which I use on my buddypress site. There isn’t a tutorial on their website, but the support over there was able to walk me through it and it works great.

    • It would be really great if you could write down how you did it.. SuperCache is easier to use, and for some project W3 Total Cache is way too much. It’s a great plugin, but it would be even better to have a choice! If you decide to write it down, I’d be happy to publish it! Any does SuperCache work with BuddyPress as well?

  8. My custom files are not automatically uploaded : for examle, each time I’ve got a new member, I’ve go to upload all custom files again…
    Any idea to solve this problem ?

  9. Hi Bowe!

    You write under “Step 3″ that “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.”.

    Did you ever find the time to do this? That would be increadibly useful for those of us who are just getting started with a new BuddyPress site since page speed is becoming more and more important for users and search engines. Thanks!

  10. Do any of you know how best to combine BP-Gallery and the W3 Total Cache CDN feature? Ideally I would like user uploads to be stored and available on the CDN – however if someone uploads, edits/deletes an image from the Gallery it should respond the same as if the images were hosted on the local (non CDN) server

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>