Going Live With Number Five

A Month (or so) Late

I have been planning to write this since before I launched this year’s Front-End Design Conference site. Instead of timing it with the launch of the site, I’m piggybacking on the launch of the app that I used to build it: Mixture.io

I got lucky and scored a copy of the alpha for the app and have been chatting and learning from Neil Kinnish as they have been building it.

Goals for this year’s site

I really dug the look of the ‘12 version, but felt pretty horrible about the markup and the performance. It was done in a rush and those things suffered.

For the ‘13 version I wanted to significantly reduce the HTTP requests, make better use of preprocessors, reduce page weight, reduce the amount of text and move away from Rails.

From Prototype to Production

I began using Mixture to prototype mainly for the ability to use some includes and fake some data (attendee profiles). I quickly learned that all of the front-end best practices were baked into the app: CSS minification, JS concatenation and minification, image optimization, S3 asset hosting and gzipping to mention a few.

Luckily, Neil offered to let me test using their pro option to host the site and I was no longer building a prototype!

I still have some loose ends and can do some more optimization, but here is how the new version is stacking up. Keep in mind I haven’t had to even think about minifiying, S3, etc. It was all done for me with Mixture.

Home Visual Comparison: 2012 vs. 2013

There is one major change that is kind of cheating the comparison. I realized it was pretty irresponsible to automatically load all of the attendee profiles.

Home Page Weight

2012 1.8 MB vs. 229 KB 2013

Home HTTP Requests:

2012 261 vs. 20 2013

Home Page Load Time:

2012 13.83 seconds vs. 1.67 seconds 2013

Prior Year Visual Comparison: 2012 vs. 2013

The page is actually a little heavier but that is because I added in 9 sponsor logos. Overall, I’m still happy with the improvement in reducing the requests and load time.

Prior Year (2011) Page Weight

2012 625 KB vs. 641 KB 2013

Prior Year (2011) HTTP Requests:

2012 54 vs. 39 2013

Prior Year (2011) Page Load Time:

2012 6.47 seconds vs. 2.28 seconds 2013

Wanna play?

It’s hard to explain how rad Mixture is without a video. If you want to play, download Mixture and grab the front-end-conf repo.