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.
- 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.
- 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.
- Cutting down the number of http requests is the best way to improve performance.
- 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.
- When combined with a server-side solution like quickConcat, eCSSential can reduce blocking CSS requests to two.
- 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.
- 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.
- 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.