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:
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!
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.
Bowe that’s wicked mate. Must try this out when I get my final server set up done!
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
@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: . 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
Just made a test account and this also works for me.. It’s a mystery! (hence the awesome Fringe avatar)
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…
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..
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???
Certainly would make me think about switching to MAX CDN… if so.
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://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!
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.
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
@Joseph: This is great to hear! Glad we got it all working for you
And thanks for the sign-up!
@David: Great! Thanks
Wondering if there would be any benefit to having MAXCDN deal with the compression and not W3TC… Thoughts?
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!
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
Is there a plugin like this that works with Dropbox (free) instead of MaxCDN?
There is no plugin available for that, but I’ve written an tutorial to achieve a something similar like this setup: https://bp-tricks.com/featured/dropbox-cdn-host-buddypress-wordpress-theme/
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?
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.
How do you setup the configuration for subdomains on a multisite network using maxcdn/w3-total/bp ?
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 ?
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!
Pacotes de Pandora, comprar pacotes de Pandora, pacotes Econômicos, pacotes de Pandora Pandora POR Atacado