Breaking Development: Before the Media Query

by July 22, 2013

In his presentation at Breaking Development in San Diego CA Erik Runyon outlined the importance of performance in responsive Web design and some approaches to improving download speeds online. Here's my notes from his talk on Before the @mq: Making the decisons that make a site responsive.

  • The average size of higher education responsive Web designs is 1.7MB. At small screen sizes the average remains 1.6MB. So there's not a lot of optimization being done in most cases.
  • Separate mobile sites for higher education, on the other hand, average only 180KB. This is an issue when higher education is selling responsive design as a solution for mobile. We need to care more about mobile optimization and performance -its critical to good experiences.
  • The BBC mobile site uses only 8 requests and 34KB. For smartphones they move to 59 requests and 224KB. They make use of a Javascript test to determine which assets to serve. If a Web browser cuts the mustard of this Javascript test, the site replaces a basic image with one of nearly a dozen different image sizes based on the usage (context) of that image in the page. This has tremendous impact on the performance of Web pages at the scale of BBC's traffic (millions of browsers a day).
  • Carousels: all clients want them but developers hate to implement them. The typical click-through rate of a carousel is 1-3% and most are on the first image. You'd think that would convince clients to not add them everywhere but they still want them. So we need to figure out how to optimize carousels.
  • RESS: using server-side detection to optimize components allows you to manage the weight of elements on a Web page built with RWD. Use RESS sparing in small bits to serve custom code to specific device classes.
  • Isn't browser detection evil? Any technology can be abused or used well. If done right, RESS can help manage asset file sizes like images, CSS, and JS.
  • WVU uses RESS to optimize their carousel images. For small screens they use less HMTL, Javascript, and smaller images. As a result, their mobile experience is half the size of the desktop experience.
  • You can also defer image loading. Lazy Block is a tool that allows you to stop images from downloading unless people interact with them.
  • One small issue with RESS. Notre Dame moved from their servers to Amazon Cloud Front, which uses a User-Agent of Amazon Cloud Front. So if the first device that hits your site is a mobile site, everyone gets a mobile image from that point one. You need to manage caching per device not CDN network.
  • Though Notre Dame sped up their mobile experience substantially, their desktop site was 2.4MB and 132 requests. Desktop visitors need a fast experience too.
  • Few people scrolled all the way down the Notre Dame page but all the images for the full page were downloaded regardless of whether they saw the full page or not. This was an opportunity to improve performance.
  • To not load images further down the page, they set single color PNGs using data URLs everywhere there is an image then replace them with actual images when someone scrolls down the page.
  • Non-Javascript solution is to put the actual image in a no-script tag and use CSS to hide the PNG. This way everyone sees all the images and the page loads much faster. The end result was dropping from 1.4MB to 398KB on initial page load.
  • There's always room for improvement. Go back and find ways to squeeze more performance out of your Web site. Keep experimenting.
  • Device types are going away so optimize for everything.