Responsive Performance Benchmark Comparison Permalink: Responsive Performance Benchmark Comparison Bookmark Icon

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.

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.

All replies to this tweet

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:

<td>
  54
</td>
<td>
  54
</td>
<td>
  64
</td>
Pingdom
Chrome Web Inspector
YSlow

Average Size:

<td>
  1337K
</td>
<td>
  1429K
</td>
<td>
  1235K
</td>
Pingdom
Chrome Web Inspector
YSlow

Average Loadtime:

<td>
  2.41 sec
</td>
<td>
  14.73 sec
</td>
<td>
  n/a
</td>
Pingdom
Chrome Web Inspector
YSlow

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.


Leave a comment

Replied on your own website? Send a webmention!