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

Performance and Responsive Web Design

Performance and Responsive Web Design

zachleat

April 03, 2013
Tweet

More Decks by zachleat

Other Decks in Programming

Transcript

  1. Performance
    and Responsive Web Design
    @zachleat

    View full-size slide

  2. @zachleat
    http://zachleat.com
    Filament Group

    View full-size slide

  3. My Projects
    BigText f2em.com

    View full-size slide

  4. http://nebraskajs.com
    @nebraskajs

    View full-size slide

  5. Goals
    Primer
    RWD !== Media Queries
    Common Buzzkills and Tips for
    faster loading RWD
    RWD Showcase Showdown
    Be kind, RWD.

    View full-size slide

  6. RWD is
    A Flexible Grid (Fluid: % + Min Widths)
    Flexible Media (Images, Video)
    img  {  max-­‐width:  100%;  }
    FitVids.js (http://fitvidsjs.com/)
    (Not Just)
    Media Queries
    @media  (min-­‐width:  20em)  {  /*  CSS  goes  here  */  }
    http://unstoppablerobotninja.com/entry/on-being-responsive

    View full-size slide

  7. http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html

    View full-size slide

  8. http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html

    View full-size slide

  9. http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html

    View full-size slide

  10. The Web has
    Responsive Roots

    View full-size slide

  11. Alternatives to RWD
    1. Do nothing (ignore mobile)
    2.Use a separate m-dot site

    View full-size slide

  12. Ignore Mobile?
    “Mobile internet adoption has outpaced
    desktop internet adoption by eight
    times.”
    http://www.lukew.com/ff/entry.asp?993
    Alternatives to RWD

    View full-size slide

  13. Ignore Mobile?
    Alternatives to RWD

    View full-size slide

  14. Use a Separate mdot Site
    Redirects are slow.
    Maintenance of UA-Parsing
    Server Side
    Content Strategy (Desktop Mode link)
    Alternatives to RWD

    View full-size slide

  15. Redirects are Slow
    “…redirects slow down the user experience. Inserting a
    redirect between the user and the HTML document delays
    everything in the page…”
    http://developer.yahoo.com/performance/rules.html#redirects
    “Minimizing HTTP redirects from one URL to another
    cuts out additional RTTs and wait time for users.”
    https://developers.google.com/speed/docs/best-practices/rtt#AvoidRedirects
    Use a separate mdot Site

    View full-size slide

  16. Maintain UA-Parsing
    Server Side Code
    WURFL updates
    about once a month
    Use a separate mdot Site
    http://wurfl.sourceforge.net/

    View full-size slide

  17. “Get to a point with your web
    strategy where you don't crap your
    pants every time Apple has a
    keynote.”

    View full-size slide

  18. http://en.m.wikipedia.org/
    Content Strategy
    Use a separate mdot Site

    View full-size slide

  19. Content Strategy
    http://en.wikipedia.org/
    Use a separate mdot Site

    View full-size slide

  20. Content Strategy
    Use a separate mdot Site

    View full-size slide

  21. “Mobile users want to see our menu,
    hours, and delivery number. Desktop
    users definitely want this 1mb png of
    someone smiling at a salad.”
    https://twitter.com/wilto/status/63284673723375616

    View full-size slide

  22. The Problems
    Browsers Download and Block Rendering
    on Unnecessary CSS
    Browsers Sometimes Download
    Unnecessary Images
    Big Images are Wasted on Small Screens
    Retina Images are Wasted on
    Blurry Screens

    View full-size slide

  23. The “Average” Web Page
    http://httparchive.org/interesting.php#bytesperpage

    View full-size slide

  24. JavaScript Can Block
    “With scripts, progressive rendering is
    blocked for all content below the script.”
    http://developer.yahoo.com/blogs/ydn/posts/2007/07/high_performanc_5/

    View full-size slide

  25. JavaScript that Doesn’t
    Block

    View full-size slide

  26. JavaScript that Doesn’t
    Block





    http://calendar.perfplanet.com/2010/the-truth-about-non-blocking-javascript/

    View full-size slide

  27. JavaScript that Doesn’t
    Block
    var  script  =  document.createElement("script");
    script.type  =  "text/javascript";
    script.src  =  "foo.js";
    var  ref  =  document.getElementsByTagName('script')[0];
    ref.parentNode.insertBefore(script,  ref);
    http://calendar.perfplanet.com/2010/the-truth-about-non-blocking-javascript/
    http://paulirish.com/2011/surefire-dom-element-insertion/

    View full-size slide

  28. Stylesheets Block
    “Browsers (except Opera) block rendering until all
    screen CSS arrives. With the worst possible
    experience: white page.”
    “Browsers download CSS they don't need, e.g. print, tv,
    device-ratio... And most browsers (except Opera and
    Webkit) block rendering because of these too”
    Demo:
    http://www.phpied.com/files/css-loading/mq.php?mq=all
    http://www.phpied.com/css-and-the-critical-path/

    View full-size slide

  29. “Newer” WebKit
    downloaded  and  parsed  -­‐-­‐>

    evaluated  media  query  -­‐-­‐>
    rel="stylesheet"  media="(min-­‐width:  4000px)">


    http://www.igvita.com/2012/06/14/debunking-responsive-css-performance-myths/

    View full-size slide

  30. Everything Else*
    downloaded  and  parsed  (timeouts  may  vary)  -­‐-­‐>  

    rel="stylesheet"  media="(min-­‐width:  4000px)">

    View full-size slide

  31. Downloading CSS
    http://scottjehl.github.com/CSS-Download-Tests/

    View full-size slide

  32. Downloading CSS
    Firefox 16
    Safari 6 Chrome 22
    Opera 12
    Serial Download Bug was fixed: https://twitter.com/igrigorik/status/266667865644609536

    View full-size slide

  33. Solutions
    CSS is sacred. Choose minimal when possible.
    Separate elements for each breakpoint
    Doesn’t scale if you have a lot of breakpoints.
    Good for WebKit, what about everything else?

    View full-size slide

  34. eCSSential
    “Making responsive CSS load the way it
    should.”
    Downloads Blocking CSS that matches
    media queries
    Downloads other CSS async, non-blocking
    https://github.com/filamentgroup/eCSSential

    View full-size slide

  35. matchMedia
    if  (window.matchMedia("(min-­‐width:  400px)").matches)  {
       /*  the  view  port  is  at  least  400  pixels  wide  */
    }  else  {
       /*  the  view  port  is  less  than  400  pixels  wide  */
    }
    https://developer.mozilla.org/en-US/docs/DOM/window.matchMedia

    View full-size slide

  36. matchMedia
    Polyfill: https://github.com/paulirish/matchMedia.js/
    Careful with IE8-, the polyfill requires Media Query support
    http://caniuse.com/#feat=matchmedia

    View full-size slide

  37. eCSSential

           <br/>        <!-­‐-­‐  Inline  eCSSential.min.js  -­‐-­‐><br/>        eCSSential({<br/>                "all":  "css/all.css",<br/>                "(min-­‐width:  20em)":  "css/min-­‐20em.css",<br/>                "(min-­‐width:  37.5em)":  "css/min-­‐37.5em.css",<br/>                "(min-­‐width:  50em)":  "css/min-­‐50em.css",<br/>                "(min-­‐width:  62.5em)":  "css/min-­‐62.5em.css"<br/>        });<br/>        

    View full-size slide

  38. Images Don’t Block
    Doesn’t mean they get a free pass.

    View full-size slide

  39. Images Don’t Block
    Doesn’t mean they get a free pass.
    753KB

    View full-size slide

  40. Taxonomy of Images
    CSS Background Images
    HTML
    ‘Responsive Images’

    View full-size slide

  41. hidden in CSS

           

    @media  all  and  (max-­‐width:  600px)  {
           #test1  {  display:none;  }
    }
    http://timkadlec.com/2012/04/media-query-asset-downloading-results/
    Downloading Images

    View full-size slide

  42. hidden in CSS

           

    @media  all  and  (max-­‐width:  600px)  {
           #test1  {  display:none;  }
    }
    http://timkadlec.com/2012/04/media-query-asset-downloading-results/
    NOPE
    Downloading Images

    View full-size slide


  43. #test2  {
           background-­‐image:url('images/test2.png');
           width:200px;
           height:75px;
    }
    @media  all  and  (max-­‐width:  600px)  {
           #test2  {display:none;}
    }
    http://timkadlec.com/2012/04/media-query-asset-downloading-results/
    CSS background image
    hidden in CSS
    Downloading Images

    View full-size slide


  44. #test2  {
           background-­‐image:url('images/test2.png');
           width:200px;
           height:75px;
    }
    @media  all  and  (max-­‐width:  600px)  {
           #test2  {display:none;}
    }
    http://timkadlec.com/2012/04/media-query-asset-downloading-results/
    NOPE
    CSS background image
    hidden in CSS
    Downloading Images

    View full-size slide


  45.        

    #test3  div  {
           background-­‐image:url('images/test3.png');
           width:200px;
           height:75px;
    }
    @media  all  and  (max-­‐width:  600px)  {
           #test3  {
                   display:none;
           }
    }
    http://timkadlec.com/2012/04/media-query-asset-downloading-results/
    CSS background image
    on child hidden in CSS
    Downloading Images

    View full-size slide


  46.        

    #test3  div  {
           background-­‐image:url('images/test3.png');
           width:200px;
           height:75px;
    }
    @media  all  and  (max-­‐width:  600px)  {
           #test3  {
                   display:none;
           }
    }
    http://timkadlec.com/2012/04/media-query-asset-downloading-results/
    OK
    CSS background image
    on child hidden in CSS
    Downloading Images

    View full-size slide


  47. #test4  {
           background-­‐image:url('images/test4-­‐desktop.png');
           width:200px;
           height:75px;
    }
    @media  all  and  (max-­‐width:  600px)  {
           #test4  {
                   background-­‐image:url('images/test4-­‐mobile.png');
           }
    }
    http://timkadlec.com/2012/04/media-query-asset-downloading-results/
    CSS background image
    replaced in CSS
    Downloading Images

    View full-size slide


  48. #test4  {
           background-­‐image:url('images/test4-­‐desktop.png');
           width:200px;
           height:75px;
    }
    @media  all  and  (max-­‐width:  600px)  {
           #test4  {
                   background-­‐image:url('images/test4-­‐mobile.png');
           }
    }
    http://timkadlec.com/2012/04/media-query-asset-downloading-results/
    ~OK
    CSS background image
    replaced in CSS
    Downloading Images

    View full-size slide


  49. #test7  {
           background-­‐image:url('images/test7-­‐lowres.png');
           width:200px;
           height:75px;
    }
    @media  only  screen  and  (-­‐webkit-­‐min-­‐device-­‐pixel-­‐ratio:  1.5),
    only  screen  and  (min-­‐-­‐moz-­‐device-­‐pixel-­‐ratio:  1.5),
    only  screen  and  (-­‐o-­‐min-­‐device-­‐pixel-­‐ratio:  3/2),
    only  screen  and  (min-­‐device-­‐pixel-­‐ratio:  1.5)  {
           #test7  {
                   background-­‐image:url('images/test7-­‐highres.png');
                   width:200px;
                   height:75px;
                   /*  Editors  note:  this  should  use  background-­‐size  */
           }
    }
    http://timkadlec.com/2012/04/media-query-asset-downloading-results/
    CSS background image
    replaced in CSS
    Downloading Images

    View full-size slide


  50. #test7  {
           background-­‐image:url('images/test7-­‐lowres.png');
           width:200px;
           height:75px;
    }
    @media  only  screen  and  (-­‐webkit-­‐min-­‐device-­‐pixel-­‐ratio:  1.5),
    only  screen  and  (min-­‐-­‐moz-­‐device-­‐pixel-­‐ratio:  1.5),
    only  screen  and  (-­‐o-­‐min-­‐device-­‐pixel-­‐ratio:  3/2),
    only  screen  and  (min-­‐device-­‐pixel-­‐ratio:  1.5)  {
           #test7  {
                   background-­‐image:url('images/test7-­‐highres.png');
                   width:200px;
                   height:75px;
                   /*  Editors  note:  this  should  use  background-­‐size  */
           }
    }
    http://timkadlec.com/2012/04/media-query-asset-downloading-results/
    OK
    CSS background image
    replaced in CSS
    Downloading Images

    View full-size slide

  51. Downloading Images
    (CSS)
    Maybe coming to a browser near you:
    image-­‐set()
    #test  {
       background-­‐image:  url(assets/no-­‐image-­‐set.png);  
       background-­‐image:  -­‐webkit-­‐image-­‐set(url(assets/test.png)  
    1x,  url(assets/test-­‐hires.png)  2x);
       width:200px;
       height:75px;
    }
    http://blog.cloudfour.com/safari-6-and-chrome-21-add-image-set-to-support-retina-images/

    View full-size slide

  52. Downloading
    Responsive Images
    Whatever solution you pick, make
    sure it doesn’t make duplicate
    requests.

    View full-size slide

  53. Downloading
    If possible, use Vectors (SVG) over
    Bitmaps (PNG). It’ll look great on
    HDPI screens.
    Vectors are a shortcut for
    Responsive Images.
    Note: Canvas content is bitmapped,
    but you can redraw at higher
    resolutions.

    View full-size slide

  54. Picturefill
    “A Responsive Images approach
    that you can use today”
    https://github.com/scottjehl/
    picturefill

    View full-size slide

  55. Picturefill
    Cambodia">
           
           
           
           1000px)">
           unqualified  source  element.  -­‐-­‐>
           Bayon  temple  in  Angkor  Thom,  Cambodia">

    http://scottjehl.github.com/picturefill/

    View full-size slide

  56. Picturefill
    data-­‐media="(min-­‐width:  400px)"
    Uses  matchMedia.
    No  duplicate  requests!

    View full-size slide

  57. Picturefill (HDPI)
    Cambodia">
           
           
           
           
           
               
           
             
           ...

    http://scottjehl.github.com/picturefill/

    View full-size slide

  58. Compressive Images
    Pump up the size, pump up the JPEG
    compression
    Scale down in the browser
    http://filamentgroup.com/lab/
    rwd_img_compression/

    View full-size slide

  59. Picturefill Simplifes to
    (HDPI)
    Cambodia">
           
           
           
           
           
           ...

    Careful with Memory Consumption!

    View full-size slide

  60. Advertising
    Full of document.write, iframes,
    blocking JavaScript (errors come
    for free) and general badness.
    Trick: Inject advertising iframes
    using JavaScript (after onload)
    document.createElement('iframe');

    View full-size slide

  61. Social Networking
    Widgets
    MacBook-­‐Amateur:~  zachleat$  yslow  http://fgte.st/SocialCount/examples/
    control-­‐test.html
    size:  237.7K  (237791  bytes)
    overall  score:  A  (91)
    url:  http://fgte.st/SocialCount/examples/control-­‐test.html
    #  of  requests:  12
    ruleset:  ydefault
    page  load  time:  834
    http://yslow.org/phantomjs/

    View full-size slide

  62. SocialCount
    Above sample: http://f2em.com/
    3.3KB (GZIP)
    1 JS request
    1 CSS request
    1 optional request for icons
    1 optional AJAX request for counts
    https://github.com/filamentgroup/SocialCount

    View full-size slide

  63. Showcase Showdown

    View full-size slide

  64. Boston Globe
    MacBook-­‐Amateur:~  zachleat$  yslow  http://www.bostonglobe.com/
    size:  927.8K  (927834  bytes)
    overall  score:  B  (85)
    url:  http://www.bostonglobe.com/
    #  of  requests:  76

    View full-size slide

  65. Smashing Magazine
    MacBook-­‐Amateur:~  zachleat$  yslow  http://www.smashingmagazine.com/
    size:  1061.3K  (1061339  bytes)
    overall  score:  C  (74)
    url:  http://www.smashingmagazine.com/
    #  of  requests:  77

    View full-size slide

  66. Starbucks
    MacBook-­‐Amateur:~  zachleat$  yslow  http://www.starbucks.com/
    size:  1122.8K  (1122848  bytes)
    overall  score:  C  (71)
    url:  http://www.starbucks.com/
    #  of  requests:  61

    View full-size slide

  67. Time
    MacBook-­‐Amateur:~  zachleat$  yslow  http://www.time.com/time/
    size:  942.6K  (942649  bytes)
    overall  score:  C  (75)
    url:  http://www.time.com/time/
    #  of  requests:  91

    View full-size slide

  68. Disney
    MacBook-­‐Amateur:~  zachleat$  yslow  http://disney.com/
    size:  4451.4K  (4451454  bytes)
    overall  score:  B  (82)
    url:  http://disney.com/
    #  of  requests:  79

    View full-size slide

  69. CONCLUDE
    !!Performance (Performance isn’t a
    boolean)
    Tools solve problems. Problem Solving
    requires Code.
    We used jQuery and gladly paid the
    performance penalty for browser
    compatibility.

    View full-size slide

  70. Don’t Blame the Tools
    “Desktop site 31MB. Separate mobile
    site 63MB. Conclusion: All mdot sites
    are bad for performance. Did I do
    that right? http://briefcakes.com/
    Gallery.php ”

    View full-size slide

  71. “The fastest web site is the
    one with nothing on it.”

    View full-size slide

  72. @zachleat
    http://www.zachleat.com

    View full-size slide