Improving Performance with MaxCDN

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

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.

Results

Here’s a speed test for the site prior to making any changes. (All speed tests were done using WebPagetest)

Traveling 9 to 5 speed test before

And here’s the results after making changes. I waited a few days to ensure the CDN was working correctly:

Traveling 9 to 5 speed test after

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.

Learning JavaScript & jQuery

It’s been on my list for a long time to get better at JavaScript and jQuery. I use both of these every day (mainly jQuery) but have never really felt comfortable with them. I’ve been collecting some learning resources (both free and paid) and thought I’d share them with you.

30 Days to Learn jQuery

A fantastic (free) video series from Jeffrey Way, of Laracasts, and previously with Envato. I thought I knew jQuery pretty well, but learned a ton of new things, and best practices even in the first few videos. I would highly recommend this series even if you think you already know jQuery.

30 Days to Learn jQuery – tuts+ – free with signup

Eloquent JavaScript

A great overview of JavaScript, also written as an introductory programming text. It seems odd to recommend an introductory book, but I really enjoy these, even after programming for several years. I always seem to pick up something new. If you’ve never been exposed to object-oriented programming or functional programming, you will definitely pick up a few things from this excellent book while learning JavaScript.

Eloquent JavaScript – free to read online

JavaScript: The Good Parts

Probably the most recommended JavaScript text available, but it’s not for beginners. However, Secrets of the JavaScript Ninja lists this book as a good intro text, so I’ll finish this one before diving into the next. It’s written by the developer of JSLint and JSMin, who also popularized JSON. by Douglas Crockford

JavaScript: The Good Parts – Kindle Edition ~$9 at Amazon

Secrets of the JavaScript Ninja

Written by the creator of jQuery, I’ll read this book last after finishing everything above. I’m normally not a fan of anything with “ninja” in the name, but this book appears to cover about as much advanced JavaScript as I could care to know and I’m looking forward to going through it. by John Resig and Bear Bibeault

Secrets of the JavaScript Ninja – Paperback (+ ebook) ~$25 at Amazon

Bonus Material:

Options to go through after completing everything above:

JavaScript The Right Way

A list of many free resources for learning all the JavaScript things.

JavaScript The Right Way

Mozilla Developer Network (MDN)

The best reference out there for JavaScript and CSS.

MDN: JavaScript

Developing Backbone.js Applications

After gaining a better understanding of JavaScript and jQuery, I’d also like to look into Backbone.js and other JS frameworks, particularly since WordPress core is using Backbone for many new things in the admin. by Addy Osmani

Developing Backbone.js Applications

How to Easily Increase Memory on your Vagrant Virtual Machine

This assumes you are using VirtualBox as your provider, which you are if you’re using a pre-built vagrant configuration like I am with VVV.

I was running out of RAM and crashing my VM while trying to import a 9MB WXR file into a WordPress install.

First, I tried adding a swapfile so I could get some virtual memory. I was able to do that with these instructions from Digital Ocean, but I wasn’t sure how to make it persistent after a vagrant destroy and didn’t want to have to set this up every time I booted up the VM.

Finally, I found this thread in the issues for VVV with the answer.

Create a Customfile in the same directory as your Vagrantfile, and add the contents below, changing 2048 to be whatever value you want to increase your VM’s RAM to.

config.vm.provider :virtualbox do |v|
  v.customize ["modifyvm", :id, "--memory", 2048]
end

Save the file, and then do a vagrant reload and you should be able to verify with top or free -m that you now have some additional memory in the VM.

I went with 2GB. There has been some discussion of increasing the default in VVV from 512MB, however I think that would be an issue for people on laptops, especially running MacBook Air’s with only 4GB of RAM.

Useful OS X Tools: Glui

One thing I rarely go a day without doing, is taking a screenshot.

glui-screenshot

It’s not something you’d immediately associate as a developer tool, but I use it constantly. How many times have you gone back and forth with a client trying to describe an issue, when all could be resolved with a simple screenshot?

OS X has screenshot capabilities built right in, but I find the easy annotation features well worth the price. Explaining UI issues is much easier to do with annotations than just trying to describe what’s happening.

Along with the annotations, you can hold down the option key to drag the image into any app that support drag and drop uploads, or click to upload directly to Dropbox and share publicly.

I used to use a free app called Skitch. They were bought by Evernote and then once Skitch was integrated with Evernote it became unusably slow and clunky. Then Glui came along and brought back all of the best parts of Skitch and none of the crap.

The app costs $6.99, but is well worth the price for something I use constantly.

$6.99 | Buy from the Mac App Store

WordCamp Miami 2014: Intro to Theming with Sass

Back in May, I had the honor of speaking at WordCamp Miami about Sass.

Josh Eaton speaking at WCMIA 2014

The goal of the talk was to introduce CSS preprocessors, and Sass in particular and give some examples as to how Sass can be useful for WordPress theme developers.

Presentation Slides

This was only the second WordCamp I’ve ever attended–WordCamp San Francisco 2013 being the first–and my first time presenting. I hope I never see the video. :) It was a great experience and I’m looking forward to my next chance to help spread some WordPress knowledge.

I’m hoping there will be a WordCamp Indy in the near future…

Useful OS X Tools: Gas Mask

Gas Mask is a free and open-source hosts file manager for OS X. This is a small, yet very useful utility for web developers.

Gas Mask Editor

Normally, you’d have to manually edit your hosts file each time you need to make a change, and then flush your local DNS cache, to force the change, by running:

dscacheutil --flushcache

Now it’s as simple as picking from a dropdown in your menubar to switch between hosts file setups for different sites. Gas Mask handles the DNS cache flush for you, and the switch is instantaneous.

Gas mask menu bar

I initially started using this app when I would run local servers using the same domain as the live site. This made swapping WordPress databases between local and production much easier as I wouldn’t have to deal with find/replace on serialized data. Since that time, I’ve started using newer tools like WP Migrate DB Pro and Interconnect/it’s Search and Replace script which make migrating databases much easier and running a local server on the live domain is less important. I still use this to manage my hosts file when switching between sites running on MAMP Pro.

A few things to watch out for

In the screenshot above, you’ll see I have my computer’s hostname Joshs-MacBook-Air listed after the initial localhost declaration. The default hosts file content in Gas Mask won’t include this, but I found that I had trouble using hosts files without my machine’s hostname included there. Also, the editor could use some work, as some of the standard OS X keyboard shortcuts don’t function the same. The project is open source, so anyone who knows Objective-C can hop in and make changes, or make a donation to fund a feature for the project.

Price: Free (open source, donationware)

Download from GitHub | Donate

Responsible Holiday Snow

The WordPress Jetpack plugin includes a feature that will show falling snow on your site during the holiday month(s).

Snowy homepage
Snowy homepage

What seems like a fun little feature for your site can actually have harmful side effects for certain users, causing seizures and migranes.

This is no good, so I built a plugin for Jetpack that will disable this by default and allow your users to opt-in to the snow. You can see it in action on this site, just click the snowflake at the top of the screen to turn on the snow.

2013-12-09 at 9.20 AM

Download Jetpack Holiday Snow Opt-In

Now, this was mainly an excuse for me to build a small plugin to solve a problem that bothered me. It will only be useful if people install it, and let’s face it, they probably aren’t going to. So I also built a Chrome Extension Block Holiday Snow that any user can install (if you use Chrome) which will prevent the snowstorm.js file from being requested by any site. This is a better solution if you are prone to seizures or migraines and want to ensure that no snow will fall on the sites you visit.

The easiest way to install this extension is to download the .crx file from the build directory and drag that into your Extensions page in Chrome (until I can figure out how to submit it to the Chrome Web Store.)

Download Block Holiday Snow

I hope this is useful for someone!

A Blog

After years of neglect, I’ve built a new site here on my own domain.

I’ve had a blog, along with my beautiful wife, about around the world travel for the past year and a half. She does most of the writing and I edit. But there’s a lot that I do that no one hears about. Maybe it will be interesting. If it is, I’ll write about it here. It could be about travel, WordPress, or making coffee.

Or, this post might still be the only one 3 years from now. Stay tuned?