An Event Apart: Interacting Responsibly (and Responsively!)

by Luke Wroblewski June 18, 2012

In his Interacting Responsibly (and Responsively!) talk at An Event Apart in Boston, MA 2012 Scott Jehl discussed ways we can improve Web performance by qualifying capabilities and being smart about how assets are loaded in browsers. He also shared a number of new tools he helped create that can help address these issues. Here's my notes from his talk:

  • Building Web products to be universally accessible requires empathy. We have to walk in people’s shoes. This includes a lot more than just people with disabilities – it includes slow network connections, less capable devices, and more.
  • Disgraceful degradation: a shockingly unacceptable user experience. We need to make performance a key part of our work. It’s crucial to even a decent Web experience for many people.

What Causes Poor Performance?

  • Extra features are being sent that are not needed by a device/browser.
  • Every http request we require is a gamble: a chance to fail.
  • Being over presumptuous about our users’ situations and capabilities.
  • Every user is a non-Javascript user while a page is loading. Act accordingly.
  • Most of poor performance is our fault: the average page in 2012 weighs over a megabyte. Much of this weight comes form blocking assets like Javascript and CSS that prevent the page from being displayed.
  • Javascript, on average, is 196KB per transfer. This comes from the libraries and code we choose to include. 196KB is equivalent to 6 times the amount of code used on the Apollo missions.
  • We need to stop building things for developer convenience and instead build them for user experience. We can create rich experiences that solve these problems. Limitations can fuel creativity. Don’t get tied to particular solutions, revisit things that we previously dismissed. South Street is an umbrella project form the Filament Group that addressed problems around qualified application of features & improving delivery mechanisms.

HTML & Source Order

  • HTML has an ever-increasing problem: we want to deliver more content across more devices.
  • Ways to slim down a page: reduce features & remove what is not needed OR prioritize loading of essential content and defer the rest.
  • Removing things isn’t always the answer but a tiered delivery of content could be.
  • We can enhance the content itself using a technique called Ajax-include. We start with a simple URL and add a data attribute that references an HTML fragment to the link’s mark-up. When Javascript is executed, the link will be replaced with a full set of content using Ajax.
  • This technique can change how you think about document construction but it comes with a cost: everywhere you use it requires an additional http request.
  • Sometimes HTML mark-up has to be in a specific part of the source order. In a responsive design, you might want to adjust where a set of code sits. You can use the AppendAround pattern to move code around using CSS.

Server Concatenation

  • Cutting down the number of http requests is the best way to improve performance.
  • QuickConcat is a tool that combines a number of files together on the server to reduce the number of http requests. It can combine Javascript files and HTML files into a single XML document that then gets parsed on client.

CSS Loading

  • CSS is a blocking element: browsers wait until it is all loaded before displaying a page. This prevents un-styled content from showing up.
  • The mobile-first CSS pattern works really well at enhancing content as devices get more capable. But we are sending additional CSS to devices that can’t use them.
  • Every browser downloads every CSS asset today –whether it needs it or not. While we want style sheets to be there when we need them, we don’t necessarily want them to be blocking page rendering.
  • eCSSential is a Javascript tool that decides which style sheets should load and when using media query statements. You can include a noscript tag to provide a good fallback experience.
  • When combined with a server-side solution like quickConcat, eCSSential can reduce blocking CSS requests to two.

Image Loading

  • Images are 63% of file size on Web pages.
  • Background images can be managed with media query cascades to only be loaded when needed so they can be managed. Inline images are another story.
  • Pretty much all responsive image solutions today break in one way or another. A picture element was proposed to address the issues in these solutions. It uses a series of image fallbacks with media query attributes to load the right image. This standard is evolving and in flux.
  • So what do we do now? Picturefill is a Javascript polyfill that brings similar support to a DIV-based solution. This prevents pre-fetching images that are not needed.
  • Should we load retina images for devices that can use them or should we give people a choice of what kind of image they want? After all, serving retina images by default really increases download size.
  • The picturefill solution can be used to load a standard definition image by default and then give people the option to load a high-resolution image if they choose on their retina device.

Javascript Loading

  • Javascript is the second largest part of our pages and it blocks page rendering until loaded.
  • Enhance.js is a Javascript pattern that loads only the scripts a particular device needs. Include it at the end of the page and then qualify a device to see if it can use enhancements. You can set the qualifier bar where it makes sense for your project.
  • If a device is qualified, you can add the Javascript you’ll need everywhere and specific files based on what each device can use. Quickconcat can pull all the requests into one document on the server.
  • It’s time to start writing Javascript like we craft CSS. Our default should not be to include large frameworks if we don’t need them. If we end up needing them, use them but be smart about it.
  • Wrap.js (coming soon) is a simple lightweight DOM utility that’s very light and fast (2KB) and qualified to only work on modern browsers.
  • Wrap works with AjaxInclude: which is commonly needed but does not require a complete library like JQuery.

We have the tools to create rich experience without excluding people. But we need to work responsibly to do so.