Over the last year responsive web design has been going strong, many new ideas and tools have been popping up and there were (and still are) many lessons to be learned.
(Note: This post was originally written by Holger Bartel, and published to his blog on January 30th, 2013. It is republished here, in full, with his permission. -K.)
One of the big challenges with responsive design lies within its performance. At SmashingConf in September 2012, Brad Frost mentioned the term “Performance is Design” in his talk and it made total sense. Now, he sparked this conversation anew, with his recent article Performance as Design. There’s also a very good follow up article on this topic by Tim Kadlec: Setting a Performance Budget.
Previously there have been articles about Performance Implications, Bad news for site owners and mobile users and Trends. But from a short discussion on Twitter it seems that there were no numbers on average pagesize and load times of responsive sites available.
Kurt Elster (@kurtinc) took the initiative and started creating a list of responsive sites and their sizes. I contributed to that list and now we do have some numbers for 34(+4) responsive websites, which at least gives somewhat of an indication on the size trend.
Interesting is that numbers sometimes vary quite a bit between the used test tools in which cases Web Inspector or YSlow show much larger numbers than Pingdom. Also might the load times differ depending on location etc. We haven’t tested these sites with Webpagetest, but it seems that these results would also differ slightly.
The results from the findings in short:
Average Requests:
Pingdom 54
Chrome Web Inspector 54
YSlow 64
Average Size:
Pingdom 1337K
Web Inspector 1429K
YSlow 1235K
Average Loadtime:
Pingdom 2.41 sec
Web Inspector 14.73 sec
YSlow n/a
See the complete Responsive Performance Benchmark Comparison on Google Docs
Better Performance for Today’s Web
It’s nothing new that responsive websites tend to be quite heavy. Considering the rise of mobile, sites should actually be smaller and faster again.
If you’re working in a web project, devote the same amount of attention to your site’s performance as you would to its clear structure, visual appearance or quality of code. Because Performance is Design. And it does matter.