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.

← Home