Lessons Learned from Mega-Success: Optimize

Incase you have been living under a rock, Charlie Sheen has been running amok through all types of media since being dropped by CBS. Given his state of mind, there have been a few rambling and incoherent interviews over the weeks. It has been sort of like watching a real-time train-wreck and the general public is eating it up.

Given the media buzz, our friend, Jarrett Moffatt over at Velocity Branding, along with his good friend Chris Meisner in New York, had the idea to create a single serving website that delivered some choice quotes from Charlie Sheen. You may have heard of a little site called livethesheendream.com recently.

livethesheendream.com screenshot

The site itself is simple. Jarrett and Chris wanted to keep it clean, light and easy for people to get new quotes out of. Now neither of them are hardened web programmers, but for what they wanted to create, they didn't need to be. They figured that the site would get a little bit of buzz from their social media friends on Twitter and Facebook. It got more than a little buzz.

On the third day of being live, livethesheendream.com had popped up on Perez Hilton and Fred Durst's Twitter feeds. From there, traffic to the site jumped from a few hundred visitors over the first couple of days to millions. As a social media experiment, the awesome power of the internet was in full effect.

With all the traffic to the site, came the obvious load issues that high volume traffic brings. Given that Chris and Jarrett had just hacked together a little PHP code and some HTML to make the site, it was not optimized or ready for high volume traffic. On the end of the first day of being stampeded, Jarrett and I where discussing things, and we offered to help optimize the site to try and keep things running smoothly.

The following morning, traffic was through the roof with over 75,000 visitors an hour. We jumped into the code and identified the following things immediately:

  • each time a visitor wanted a new quote, the entire page would reload
  • the reload of the page was serving up all elements of the site, because caching was not being specifically instructed
  • the image of Charlie Sheen was 30KB

We looked for the fastest items we could address in order to speed the site up. We didn't want to miss any visitors if we could help it. Here is what we did:

  • compressed the image of Charlie Sheen to 8KB. It still looked good and saved 22KB per page load. Do the math on 22KB * 600,000 visitors on the peak day. That alone saved 1.25 GBs of data from being served up. We deployed this change immediately to help keep the server up, although it was under heavy load and it was not serving pages to all visitors.
  • we then moved all of the page requests for new quotes onto the visitor's browser. We took the array of quotes and loaded them all into a Javascript array the first time a visitor loaded up the site. We then applied an event to the "get a new quote" functionality that leverage Javascript rather than PHP. When looking at the Analytics data for the site, the average visitor was reading through 10-12 quotes, which was previously triggering 11 additional complete page loads for each visitor. With 600,000 visitors * 10 extra page loads, we removed 6,000,000 requests to the server.
  • within the actual HTML of the site, we did a little clean up, added a doctype, removed some extra tags and tidied up the CSS. We saved about 15KB total. 15KB doesn't sound like much, but it really adds up given the amount of traffic they were getting. 600,000 visitors X 15 KB means we saved 8.5 GBs of additional data with a little less than sixty minutes of programming.
  • on the server, we wrote a little .htaccess file that specifically instructed visiting web browsers to cache the picture of Charlie Sheen and the CSS files for a long period of time. Even if they reloaded the page, rather than clicking the floating head, their browser would pull the image and CSS files from their local hard drive if they existed. We can't calculate specifically how much bandwidth this saved, but it certainly didn't hurt.

Once all that was in place, we had to reboot the server. Jarrett and Chris had used MediaTemple and livethesheendream.com had been placed on a 500MB DV. Once the reboot finished, the traffic stampede continued, but this time the server load was not even peaking over 1.5. Previously it had been steadily in the 45-50 range, which the server was unable to sustain.

All told, we spent about 4 hours between three of us to make a huge difference in the code. It was fun being involved in an internet sensation. Jarrett and Chris had an amazing little idea that hit on a popular culture wave of interest.

The moral of this entire article is: CODE MATTERS. Never discount the possibility that lightning might strike your idea for a little web project. If lightning does strike, it is great to be prepared. Congratulations on your amazing success Jarrett and Chris!

to blog