Performance Implications of Responsive Design

Performance Implications of Responsive Design

Discussion of how responsive design impacts performance and how to make it better.

Dac45089aeda3bca56193072601a49d4?s=128

Jason Grigsby

June 26, 2012
Tweet

Transcript

  1. e Performance Implications of Responsive Web Design http://www.flickr.com/photos/stuart-dootson/4024407198 Jason Grigsby

    • @grigs • cloudfour.com Slides: bit.ly/rwd-performance
  2. e web has always been a balancing act… http://www.flickr.com/photos/classblog/5136926303

  3. with many competing priorities. http://www.flickr.com/photos/tudor/4324056624/

  4. Finding that balance is more difficult… http://www.flickr.com/photos/superfantastic/50088733/

  5. as device diversity increases. http://www.flickr.com/photos/lyza/7382235106

  6. http://www.flickr.com/photos/darrentunnicliff/4232232092/ Responsive web design offers us for a sensible way

    to deal with device diversity.
  7. And yet the one question I frequently ask myself is…

  8. Can a one size ts all solution… http://www.flickr.com/photos/sldghmmr/6041481069

  9. compete with a tailored experience? http://www.flickr.com/photos/helloturkeytoe/4932748746/

  10. Important question from many perspectives:

  11. Important question from many perspectives: Context User experience Advertising

  12. Important question from many perspectives: Context User experience Advertising Search

    engine optimization
  13. And most importantly for those of us at Velocity:

  14. And most importantly for those of us at Velocity: Performance

  15. To answer this question, we’re going to look at: •

    Why responsive design • Current performance • Ways improve performance • Unsolved challenges
  16. Why concern ourselves with responsive web design?

  17. Upcoming Zombie Apocalypse of Devices http://www.flickr.com/photos/adactio/6301799843

  18. More devices every day

  19. ere is no Android Snapshot of 500 Android screen sizes

    on EU site http://stephanierieger.com/the-trouble-with-android/
  20. Short run problem is mobile phones

  21. Content & Services Car sketch: http://www.flickr.com/photos/cloppy/5081768461/ HTML HTML HTML HTML

    HTML HTML HTML HTML NATIVE NATIVE NATIVE Long run problem
  22. http://www.flickr.com/photos/localcelebrity/6023138435/

  23. None
  24. ree Main Pieces to Responsive Web Design Fluid Grids Flexible

    Images Media Queries
  25. e key from a performance perspective: same document regardless of

    client.
  26. None
  27. Original Resized K Saved % Saved Holmes 34.7K 8.1K 26.6K

    76.6% Watson 39.0K 8.4K 30.6K 78.4% Mycroft 30.5K 6.7K 23.8K 78.0% Moriarty 43.4K 8.2K 35.2K 81.1% Adler 26.0K 6.6K 19.4K 74.6% Winter 34.7K 7.8K 26.9K 77.5% Total 208.3K 45.8K 162.5K 78.0% Media Queries Hide Problems
  28. https://twitter.com/ldexterldesign/status/55229350299181057

  29. https://twitter.com/ldexterldesign/status/55229350299181057 Crap, that’s not what I was trying to do.

  30. e way in which CSS media queries have been promoted

    for mobile hides tough problems and gives developers a false promise of a simple solution for designing for multiple screens.
  31. e way in which CSS media queries have been promoted

    for mobile hides tough problems and gives developers a false promise of a simple solution for designing for multiple screens. What I meant to say:
  32. e resounding answer from the community: Mobile First Responsive Web

    Design
  33. http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/ Mobile First Responsive Web Design

  34. “Awesome. We’ll devote a chapter to Mobile First Responsive Web

    Design in our book.”
  35. “Awesome. We’ll devote a chapter to Mobile First Responsive Web

    Design in our book.” Famous last words.
  36. None
  37. 9% 4% 21% 38% 4% 25% Mobile is Larger Same

    Size Less than 10% Savings 11 to 50% Savings 51% to 100% Savings Greater than 100% Savings Where are the Mobile First RWDs? 106 sites from mediaqueri.es tested http://blog.cloudfour.com/where-are-the-mobile-first-responsive-web-designs/
  38. http://www.slideshare.net/guypod/performance-implications-of-mobile-design 3% 11% 86% Same size A bit smaller Much

    smaller Guy Podjarny repeated the experiment a year later. 347 sites from mediaqueri.es tested A bit smaller = 50%-90% the size Much smaller = <50% the size
  39. ankfully Guy took the tests further…

  40. 1600x1200 Big site, big waterfall http://www.slideshare.net/guypod/performance-implications-of-mobile-design

  41. 320x480 Small site, big waterfall http://www.slideshare.net/guypod/performance-implications-of-mobile-design

  42. 320x480 1600x1200 Simplicity not re ected in DOM 1402 elements

    3485 nodes 1398 elements 3491 nodes http://www.slideshare.net/guypod/performance-implications-of-mobile-design
  43. 320x480 1600x1200 Simplicity not re ected in DOM 1402 elements

    3485 nodes 1398 elements 3491 nodes http://www.slideshare.net/guypod/performance-implications-of-mobile-design ank you to Guy for letting me use his slides and data!
  44. Time to pen another fool’s gold post? http://www.flickr.com/photos/myklroventine/3400040943/

  45. No http://www.flickr.com/photos/myklroventine/3400040943/

  46. Five things web designers need to do to improve responsive

    web design performance.
  47. http://www.flickr.com/photos/auyongcheemeng/95769332/ Build Mobile First Responsive Designs #1

  48. /* Wider viewports/higher resolutions (e.g. desktop) */ @media screen and

    (min-width:481px) { [Desktop layout rules here] } /* Mobile/lower-resolution devices */ @media screen and (max-width:480px) { [Mobile layout rules here] } Move the mobile media query block above the desktop media query. By doing this, we’re making sure the cascading effect of CSS is consistent with our mobile first progressive enhancement approach. Reorder media queries so cascade goes from small to large screens Keep basic styles outside of media queries.
  49. e absence of support for media queries is in fact

    the rst media query. —Bryan Rieger, Yiibu
  50. Oh come on IE. No love? Because IE 8 and

    below don’t support media queries, IE isn’t getting the CSS rules that create columns.
  51. <link rel="stylesheet" type="text/css" href="taps.css" /> <link rel="stylesheet" type="text/css" href="layout.css" media="all

    and (min-width: 481px)"> <!--[if (lt IE 9)&(!IEMobile)]> <link rel="stylesheet" type="text/css" href="layout.css" media="all" /> <![endif]--> The conditional comment repeats the line above it ensuring desktop IE sees our layout.css file. IE conditional comments
  52. <link rel="stylesheet" type="text/css" href="taps.css" /> <link rel="stylesheet" type="text/css" href="layout.css" media="all

    and (min-width: 481px)"> <!--[if (lt IE 9)&(!IEMobile)]> <link rel="stylesheet" type="text/css" href="layout.css" media="all" /> <![endif]--> The conditional comment repeats the line above it ensuring desktop IE sees our layout.css file. IE conditional comments or use Respond.js (a media query poly ll for IE)
  53. http://www.flickr.com/photos/lintmachine/2306383943/ Keep CSS images in their place #2

  54. Put CSS images inside media queries to prevent extra downloads

    @media screen and (min-width:481px){ .header { background:URL('images/taps.jpg') repeat-x; height: 300px; } }
  55. http://timkadlec.com/2012/04/media-query-asset-downloading-results/

  56. Conditionally load JS based on screen size and capabilities #3

    http://www.flickr.com/photos/lyza/7382255242/
  57. <iframe id="map" width="300" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com..."></iframe> Extremely

    long URL abbreviated This single iframe causes 47 files to be downloaded! Look inside ontap.html to find this code. Hiding content with display:none does not prevent it from downloading.
  58. <iframe id="map" width="300" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com..."></iframe> Extremely

    long URL abbreviated This single iframe causes 47 files to be downloaded! Look inside ontap.html to find this code. @media screen and (max-width:480px) { . . . #map {display:none;} } taps.css There are many more rules in the css file. The iframe has an id of map. This rule hides the Google Maps iframe by setting the display to none. Hiding content with display:none does not prevent it from downloading.
  59. https://github.com/paulirish/matchMedia.js

  60. http://adactio.com/journal/5429/

  61. http://www.flickr.com/photos/kk/230544325/ Deliver different size <IMG>s at different screen sizes #4

  62. One SRC to rule all images <img src="brews_images/bensons_bubbler.jpg" alt="Bensons Bubbler">

    There are 16 beer labels on the On Tap Now page that use an img tag like this one for the Bensons Bubbler. Despite the need for multiple versions of this image depending on the screen size, HTML only allows one value for the src.
  63. None
  64. None
  65. ings are still moving forward on a standards- based approach

    for responsive images. http://www.flickr.com/photos/johnlamb/2576062549/
  66. ankfully Scott went on a trip around the world. http://www.flickr.com/photos/lyza/7382244260

  67. Picture ll JavaScript Library https://github.com/scottjehl/picturefill

  68. <div data-picture data-alt="A giant stone face at The Bayon temple

    in Angkor Thom, Cambodia"> <div data-src="small.jpg"></div> <div data-src="medium.jpg" data-media="(min-width: 400px)"></div> <div data-src="large.jpg" data-media="(min-width: 800px)"></div> <div data-src="extralarge.jpg" data-media="(min-width: 1000px)"></div> <!-- Fallback content for non-JS browsers. --> <noscript> <img src="small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"> </noscript> </div> Picture ll JavaScript Library https://github.com/scottjehl/picturefill
  69. Alternative: Use Sencha.io SRC or similar solution to resize images

    Set the first part of the src to http://src.sencha.io/ After the slash add the full URL of the image you want to have resized. Sencha.io SRC will resize the image to fit the size of the device screen. For example, if an iPhone visits the site, the image will be constrained to its screen size of 320 by 480 pixels. <img src="http://src.sencha.io/http://[DOMAIN]/[PATH]/brews_images/bensons_ bubbler.jpg" alt="Bensons Bubbler"> Replace with your domain and path to the images.
  70. Regardless of the img technique you choose: Plan to deprecate

    it when standards catch up with responsive images.
  71. Handle high-density images carefully #5

  72. Apple.com as an anti-pattern Downloads both standard and retina images

    e total size of the page goes from 502.90K to 2.13MB when the retina versions of images are downloaded. http://blog.cloudfour.com/how-apple-com-will-serve-retina-images-to-new-ipads/
  73. If possible, use CSS for now

  74. <style> #main { background-size: 400px 250px; } @media screen and

    (-webkit-device-pixel-ratio: 1) { /* Image for normal displays. */ #main { background-image: url(dog.jpg); } } @media screen and (-webkit-min-device-pixel-ratio: 2) { /* Image for high resolution displays. */ #main { background-image: (dog-hi-res.jpg); } } </style> If possible, use CSS for now
  75. CSS image-set new proposed spec

  76. div.dog { background-image: -webkit-image-set(url(dog.jpg) 1x, url(dog-hi-res.jpg) 2x); } CSS image-set

    new proposed spec
  77. None
  78. Picture ll User Preference Branch https://github.com/scottjehl/picturefill/tree/user-prefs

  79. SOUTH STREET ECSSENTIAL AJAXINCLUDE

  80. PICTUREFILL

  81. Enhance: a tiny JavaScript framework designed to help developers determine

    if a browser is capable of handling additional JavaScript and CSS enhancements, and load specific enhancements for that browser as fast and simply as possible. eCSSential: an experimental utility for making browsers load responsive CSS in a more responsible way. QuickConcat: a simple dynamic concatenator for html, css, and js files, written in PHP Wrap: a simple JavaScript utility for DOM manipulation and Ajax wrapped in a familiar API. (*not yet released) AjaxInclude: a plugin that is designed for modular content construction, that runs on Wrap (or jQuery) AppendAround: A JavaScript pattern for responsive, roving markup. Picturefill: a simple pattern for overhead-free responsive images today. Filament Group Southstreet https://github.com/filamentgroup/Southstreet
  82. We should start a collection to send Scott on another

    world tour.
  83. We should start a collection to send Scott on another

    world tour.
  84. Let’s revisit our original question.

  85. Can a one size ts all solution… http://www.flickr.com/photos/theyoungthousands/4025421438

  86. compete with a tailored experience? http://www.flickr.com/photos/fronx/2862975043

  87. Or will we always end up with something that is

    too big? http://www.flickr.com/photos/haddadi/5971508861
  88. Unlikely responsive design will ever be as fast as something

    crafted speci cally for a device. http://www.flickr.com/photos/quarenta/3256329577
  89. But web design is a balancing act. http://www.flickr.com/photos/kalexanderson/6266452817

  90. And performance is just one factor.

  91. Flickr: Uploaded February 11, 2007 by hawridger For most projects,

    responsive design can be fast enough to make sense…
  92. if we do the extra work to make responsive sites

    faster.
  93. Jason Grigsby @grigs • cloudfour.com Slides: bit.ly/rwd-performance ank You! Special

    thanks to Scott Jehl, Guy Podjarny, and all of the Flickr users sharing under creative commons. http://www.flickr.com/photos/sualk61/4083223760/