Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Performance Implications of Responsive Design

Performance Implications of Responsive Design

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

Jason Grigsby

June 26, 2012
Tweet

More Decks by Jason Grigsby

Other Decks in Technology

Transcript

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

    Why responsive design • Current performance • Ways improve performance • Unsolved challenges
  2. ere is no Android Snapshot of 500 Android screen sizes

    on EU site http://stephanierieger.com/the-trouble-with-android/
  3. 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
  4. 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.
  5. 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:
  6. 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/
  7. 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
  8. 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
  9. 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!
  10. /* 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.
  11. e absence of support for media queries is in fact

    the rst media query. —Bryan Rieger, Yiibu
  12. 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.
  13. <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
  14. <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)
  15. 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; } }
  16. Conditionally load JS based on screen size and capabilities #3

    http://www.flickr.com/photos/lyza/7382255242/
  17. <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.
  18. <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.
  19. 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.
  20. ings are still moving forward on a standards- based approach

    for responsive images. http://www.flickr.com/photos/johnlamb/2576062549/
  21. <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
  22. 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.
  23. Regardless of the img technique you choose: Plan to deprecate

    it when standards catch up with responsive images.
  24. 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/
  25. <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
  26. 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
  27. Or will we always end up with something that is

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

    crafted speci cally for a device. http://www.flickr.com/photos/quarenta/3256329577
  29. Flickr: Uploaded February 11, 2007 by hawridger For most projects,

    responsive design can be fast enough to make sense…
  30. 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/