When was the last time you visited a website and you were blown away by its performance (i.e how fast you were able to do what you wanted to do)?

The newest iteration of CanIUse.com has that faster-than-a-speeding-bullet kind of feel to it. Not only does it serve up compatibility stats on bleeding-edge features and web technologies, it does it with heroic speed and performance.

This week, Maximiliano Firtman published a thought-rousing article for Smashing Magazine. As a front-end developer, it's a great reminder that the end goal is not a responsive website, but a fast, great experience that happens to be responsive. Not a new thought, but certainly a worthwhile one.

The ultimate goal for a website should be “happy users,” which will lead to more conversions, whatever a conversion might be, whether it’s getting a visitor to spread the word, providing information or making a sale. Users won’t be happy without a high-performing website. — "You May Be Losing Users If Responsive Web Design Is Your Only Mobile Strategy"

How New Responsive Redesigns Did It

Here are a few stats on exciting new sites that have launched in the last month. They're scattered across different interests (media, travel, technology, education) but all serve as an insightful snapshot for the current landscape.

New Yorker

The largest page size of the group, but not the longest load time, one of the New Yorker's goals is to serve up more free content on a device-agnostic experience, done well still preserving its classic Irvin typeface as a web font via Typekit.

Load time: 4.24 seconds

4.24 seconds Page size: 3.3MB

3.3MB Requests: 172

172 Grade: 67/100

Virgin America

This site has reinvented how travel sites will be built going forward (hopefully). Its attention to detail and stunning UX show how perceived speed and experience help it hone in on its goals:

Virgin’s key goals was increasing the number of flights booked on mobile devices and tablets. High-consideration purchases like airline bookings are still fairly rare on smartphones, in part because the websites are built on Web 1.0 technology stacks and comprised of UI elements that are a nightmare to navigate on small screens. And so Virgin invested in a responsive website rather than a website-plus-app strategy, on hopes that the ease for users would more than make up for the relatively small amount of ad dollars flowing through the page. — The Super Slick UX of Virgin America's New Booking Site

Load time: 5.31 seconds

5.31 seconds Page size: 1.5MB

1.5MB Requests: 91

91 Grade: 66/100

Adobe

30% of the page size of the home page comes from the large background image (261KB), the site still loads in under three seconds and is visually impressive.

Load time: 2.69 seconds

2.69 seconds Page size: 970.4KB

970.4KB Requests: 165

165 Grade: 75/100

Harvard Law Review

The fastest of the bunch, with a distinct advantage because articles published in the Harvard Law Review are never accompanied with images. The site is chock-full of long-form content that makes the biggest dent in the load time.

Load time: 1.29 seconds

1.29 seconds Page size: 2.2MB

2.2MB Requests: 67

67 Grade: 92/100

Speed It Up

Webpage weight is increasing and that’s a problem, but we shouldn’t confuse raw weight w/ how soon a page can be usable. Different concerns. — Scott Jehl (@scottjehl) July 2, 2014





Critical

A Gulp plugin that extracts and inlines critical-path (above-the-fold) CSS from HTML, optimizing the CSS that loads first.

https://github.com/addyosmani/critical

Pingdom

Test the load time of a page, analyze it and find bottlenecks. This is a great tool for finding trouble areas and improving upon them.

http://tools.pingdom.com/

Google PageSpeed

Google's tool to analyze your site and make it faster on all devices. Similar to Pingdom, but what I've found most useful about PageSpeed is its browser extension that integrates right into Chrome DevTools.

http://developers.google.com/speed/pagespeed/insights/

Smush.it and TinyPNG

Loseless image compression strips out unused bytes and serves up the same quality image. It's a huge performance-saver and simple to implement.

https://tinypng.com/

http://smushit.com

matchMedia()

A polyfill for testing whether or not a media query applies with Javascript, allowing you to conditionally load for different viewports.

Ex.

if (matchMedia('only screen and (max-width: 480px)').matches) { // smartphone/iphone... run some small-screen related scripting }

Making A Commitment To Performance

Bad performance stems from a lack of attention and commitment performance within an organization—not from whether or not the site is responsive. Saying responsive design is bad for performance is the same as saying optimizing for touch is bad for performance. It doesn’t make much sense because you can’t expect to do either in isolation and create a good overall experience. — Tim Kadlec, "RWD Is Bad for Performance" Is Good for Performance

Taking a look at responsive sites like CanIUse, The New Yorker, Virgin America, Adobe and Harvard Law Review allows us to think about the context of how and why these sites are being built (i.e. goals, reason for visiting, etc.). The fact that Virgin America takes five seconds to load doesn't stick with you the same way the overall experience a user gets when booking a flight on their new site. The key is an understanding that how you build what you are building matters and to find the best way to do that.