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

max_cdn_buddypress

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!

BuddyPress Hosting Guide Looking for quality BuddyPress hosting? We will guide you through all the available hosting options and help you find the best webhost for your next BuddyPress project!

Something about bowe

BuddyPress fanatic, WordPress Theme designer and MultiSite community builder. Proud co-founder of PressCrew. Loves to use awesome in every sentence. Often described as a Dutch Treehugging Hippie.

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

  1. Ross Grant March 28, 2011 at 11:55 pm #

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

  2. J. Pisano March 29, 2011 at 12:00 am #

    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

  3. bowe March 29, 2011 at 12:13 am #

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

  4. Frans Bouterse March 29, 2011 at 12:16 am #

    Just made a test account and this also works for me.. It’s a mystery! (hence the awesome Fringe avatar)

  5. J. Pisano March 29, 2011 at 12:56 am #

    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…

    • Joseph Pisano Test March 29, 2011 at 1:05 am #

      When I signed up, you don’t have the default crop stuff enabled here… it just pulled my gravatar… going to try to change it now here..

  6. Joseph Pisano Test March 29, 2011 at 1:09 am #

    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???

    • Joseph Pisano Test March 29, 2011 at 1:10 am #

      Certainly would make me think about switching to MAX CDN… if so.

  7. bowe March 29, 2011 at 1:17 am #

    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!

  8. Joseph Pisano Test March 29, 2011 at 2:26 am #

    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.

  9. David Goodall March 29, 2011 at 2:59 am #

    Thanks for this! Very nice!

    If anyone has any questions about MaxCDN or our Enterprise platform, NetDNA please feel free to email. Especially if you are consuming a lot of Bandwidth or have special requirements, we will be able to work something out… [email protected]

    Cheers!
    David

  10. bowe March 29, 2011 at 9:44 am #

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

    @David: Great! Thanks :)

  11. J. Pisano March 29, 2011 at 2:32 pm #

    Wondering if there would be any benefit to having MAXCDN deal with the compression and not W3TC… Thoughts?

    • Bowe Frankema March 29, 2011 at 3:00 pm #

      From what I’ve understood about CDN compression is that it should only be enabled when your server does not support it. If you’re running a proper setup + W3 Total Cache it should be working properly. You can do the compression test here: http://www.whatsmyip.org/http_compression/ to see if it’s working on your server!

      • pisanojm March 29, 2011 at 7:42 pm #

        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.

        • Bowe Frankema March 30, 2011 at 10:21 am #

          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 :)

  12. Bobby April 2, 2011 at 3:58 pm #

    Is there a plugin like this that works with Dropbox (free) instead of MaxCDN?

  13. Greg Fielding May 18, 2011 at 8:25 pm #

    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.

    • bowe May 18, 2011 at 10:52 pm #

      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?

      • Greg Fielding May 18, 2011 at 11:12 pm #

        Yeah – the Supercache and buddypress are playing well together for me. I’ll go through my setup and see if I can put together the instructions.

  14. nahummadrid May 27, 2011 at 1:48 am #

    How do you setup the configuration for subdomains on a multisite network using maxcdn/w3-total/bp ?

  15. Acouphene October 15, 2011 at 6:08 pm #

    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 ?

  16. Magnus June 25, 2012 at 1:37 pm #

    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!

  17. icinicktrac June 26, 2012 at 12:35 pm #

    Pacotes de Pandora, comprar pacotes de Pandora, pacotes Econômicos, pacotes de Pandora Pandora POR Atacado

  18. Daniel Schulz-Jackson August 15, 2012 at 4:41 am #

    +1 to what @Magnus said. Always looking for some helps to get it straightened out (BuddyPress + W3 Total Cache)

  19. IanMac February 7, 2014 at 8:39 am #

    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

Trackbacks/Pingbacks

  1. WordPress Community Links: Akismet the dog edition | WPCandy - April 3, 2011

    [...] showing how to create content for members only within a WordPress install.The BP Tricks blog has a guide to setting up BuddyPress with MaxCDN and W3 Total Cache.Wes Bos put together a tutorial showing how [...]

  2. WordPress Community Links: Akismet the dog edition | Technology Story - April 9, 2011

    [...] BP Tricks blog has a guide to setting up BuddyPress with MaxCDN and W3 Total [...]

  3. Useful Tidbits June 1, 2011 | Shelley Keith - June 2, 2011

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

Leave a Reply