12 websites that prove RWD and performance CAN play well together

Yesterday on Twitter, I posted a link to this Internet Retailer article about the results of a recent Keynote mobile index report. The report found that only two out of the 30 sites in the index use responsive design, and both those sites took 17+ seconds to load on mobile devices.

My Twitter post (sorry, I just can’t say “tweet”) generated some discussion about the challenges of making fast responsive pages, with some folks taking the stance that RWD and performance don’t play well together. This isn’t a new opinion, and it’s sparked a lot of debate in the past. (See this post from Tim Kadlec and this one from Guy Podjarny for excellent examples.)

What many people, including myself, agree on is that while RWD presents performance challenges, these challenges aren’t insurmountable and shouldn’t be used as an excuse for poor performance.

Debate is awesome, but how about some examples?

A Google search for lists of high-performance responsive sites came up empty, so I decided to create one.

My approach

  1. While there are no “best of” lists for fast responsive sites, there are many “best of” lists for responsive sites in general (based on, I’m assuming, criteria such as design and usability, but excluding speed). I found several of these lists and selected 60 sites, including a mix of well-known and lesser-known ecommerce, media, technology, and B2B sites.
  2. Using WebPagetest, I tested the home page of each site as it would render in Chrome over a DSL connection via WebPagetest’s Dulles, VA, test server. I’ve linked to the individual test results below. Why focus on desktop performance? Because if you can’t make your page load fast on the desktop, there’s no way you’re going to rise to the challenge of mobile. (Anecdotally, I did check out the faster sites on my iPhone over wifi, and found performance to be more or less commensurate with desktop performance.)
  3. I focused on load time, start render time, and page size. I didn’t graph the results, but if I had, it would have been a fairly classic curve, with load times ranging from 3.5 seconds to almost 30 seconds. I defined “fast” by looking at the sites at the front of the curve, which loaded in 7 seconds or less. I looked at page size because a clear pattern emerged about the relationship between size and speed.

My goal isn’t to embarrass the 48 companies whose sites didn’t perform well. From my perspective, those companies are fairly typical of most of the web. Instead, I want to focus on the sites that did perform well. Each of these sites is something of an outlier, but each one proves that RWD and performance can play well together.

And by all means, if you know of any other fast responsive sites, please let me know. I’d love to make this list longer!

1. Dell

Dell

Load time: 3.580s
Start render: 1.992s
Page size: 320 KB

2. Mitsubishi Motors Australia

Mitsubishi

Load time: 3.941s
Start render: 1.552s
Page size: 765 KB

3. Indochino

Indochino

Load time: 4.048s
Start render: 2.552s
Page size: 514 KB

4. Mobify

Mobify

Load time: 4.946s
Start render: 2.797s
Page size: 731 KB

5. Apple

Apple

Load time: 5.058s
Start render: 1.988s
Page size: 792 KB

6. Salesforce

Salesforce

Load time: 5.708s
Start render: 3.595s
Page size: 721 KB

7. Capital One

CapitalOne

Load time: 5.830s
Start render: 3.065s
Page size: 562 KB

8. Nokia

Nokia

Load time: 5.926s
Start render: 4.392s
Page size: 878 KB

9. Microsoft

microsoft

Load time: 6.009s
Start render: 6.292s
Page size: 833 KB

10. Skinnyties

SkinnyTies

Load time: 6.067s
Start render: 3.187s
Page size: 865 KB

11. TechCrunch

TechCrunch

Load time: 6.665s
Start render: 4.291s
Page size: 986 KB

12. State Farm

StateFarm

Load time: 6.850s
Start render: 2.995s
Page size: 935 KB

Observations

If you were to ask me what’s the single greatest indicator of performance for responsive pages, I’d say this: faster pages are always less than 1 MB in size. Show me a fat page, and I’ll show you a slow page. Of the 60 pages I looked at, many were 3 or 4 or even 5 MB in size. These pages were consistently much slower than the rest of the pack. And performance aside, think of what just a few of these 5 MB pages could do to your mobile data plan. Ouch.

When it comes to images and RWD, you can have your cake and eat it, too. The Apple and Mitsubishi home pages are good examples of pages that use big images that render quickly.

There’s still room for improvement. Many of these responsive pages aren’t perfect. Several them are slow to start rendering for a variety of reasons, from needlessly massive hero images to poky custom fonts. (Note to designers: Run a WebPagetest of your pages and look at the waterfall chart. If you’re seeing long red bars like this, you’ve got a font problem.)

red-bars

Even media sites can be fast. Most media sites are infamously sluggish, thanks to images and third-party scripts, so no one was more shocked than I was to see a media site make this list. I tested a handful of sites that have recently announced their switch to RWD, and TechCrunch was the only one that rendered in fewer than 7 seconds. The fact that it was able to do this is a testament to the fact that it can be done.

Conclusion

Building pages that are both responsive and fast is hard. (Again, see this post and this post.) But as this list of sites demonstrates, it’s do-able. No excuses.