I’ve implemented a CDN on a few sites for clients, but never used it on any of my own sites. Recently I’ve been having some server issues over on my travel blog Traveling 9 to 5.
It’s hosted on a VPS along with a few other sites, and the server keeps crashing. The site gets a decent amount of traffic, but not so much that it should be crashing so often. I don’t know much about system administration, so I needed a stopgap to stop the site from crashing until I have the time to really determine what’s wrong with the server. MaxCDN* approached me about their CDN offerings and I figured this was the perfect time to change my caching setup and try a CDN.
The site is fairly image-heavy, and while we used to use Flickr as a poor-mans CDN it wasn’t a great workflow. Flickr doesn’t make it easy to get the correct download links for the image sizes you want and then having to manually insert the URL instead of drag and drop uploading, plus not having all your images saved to the media library. It wasn’t ideal, so once we switched to this VPS, we went back to uploading all images to the Media Library.
The server seemed to be crashing due to either high CPU or running out of memory and maybe if I could offload some of the static assets to a CDN, the server resources won’t spike as high and maybe even the site speed will improve a bit.
Implementing MaxCDN on the site was much easier than I thought.
- Create multiple subdomains for serving static assets (optional). This lets you serve your assets from static1.example.com and static2.example.com instead of using MaxCDN’s domains.
- Create a “pull zone” in MaxCDN.
- Add each of the subdomains as “custom domains”
- Change any settings. (I enabled “Ignore cookies in requests”)
That’s it for the MaxCDN side, but you still need to setup WordPress to serve your images through the CDN. The recommended way to do this is with the W3 Total Cache plugin. MaxCDN has a support article that walks through the entire process. After following those instructions, your site should now rewrite all static asset URLs to point to one of your custom domains and will be served via MaxCDN.
Here’s a speed test for the site prior to making any changes. (All speed tests were done using WebPagetest)
And here’s the results after making changes. I waited a few days to ensure the CDN was working correctly:
As you can see, the load time for the initial uncached view was reduced by 36%. This appears to be due to using multiple subdomains (static1, static2, static3, etc.) to allow browsers to download assets in parallel and the CDN servers being much better optimized than my VPS. WebPagetest still gives me a poor grade for effective use of CDN as only 69% of the assets on my site are running through it. I’ll continue to tweak and adjust the settings but I am very happy with these results, as it took only 20 minutes of my time to get this much of a speed improvement on the site.
This isn’t a scientific test, so there are multiple variables that could affect the speed. I was previously using a caching plugin on the site called Hyper Cache, and switching to W3 Total Cache may have had a large impact on the site speed as well. Looking at the waterfall charts on the speed test, I can definitely see the improvement in parallelization, especially since the site is so heavy on images. I can’t guarantee that your site speed will improve with MaxCDN, but I can highly recommend it due to its ease of setup and integration with WordPress.
*Thanks to MaxCDN for providing me with the CDN account.