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.
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
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