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. Goals Primer RWD !== Media Queries Common Buzzkills and Tips

    for faster loading RWD RWD Showcase Showdown Be kind, RWD.
  2. 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
  3. Ignore Mobile? “Mobile internet adoption has outpaced desktop internet adoption

    by eight times.” http://www.lukew.com/ff/entry.asp?993 Alternatives to RWD
  4. Use a Separate mdot Site Redirects are slow. Maintenance of

    UA-Parsing Server Side Content Strategy (Desktop Mode link) Alternatives to RWD
  5. 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
  6. Maintain UA-Parsing Server Side Code WURFL updates about once a

    month Use a separate mdot Site http://wurfl.sourceforge.net/
  7. “Get to a point with your web strategy where you

    don't crap your pants every time Apple has a keynote.”
  8. “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
  9. 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 <snob>Blurry</snob> Screens
  10. 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/
  11. JavaScript that Doesn’t Block <head> <!-­‐-­‐  Downloads  right  away  -­‐-­‐>

    <script  src  async></script> <!-­‐-­‐  Waits  to  download  -­‐-­‐> <script  src  defer></script> http://calendar.perfplanet.com/2010/the-truth-about-non-blocking-javascript/
  12. 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/
  13. 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/
  14. “Newer” WebKit <!-­‐-­‐  blocking  stylesheet,  nothing  renders  until  it  is

      downloaded  and  parsed  -­‐-­‐> <link  href="main.css"  rel="stylesheet"> <!-­‐-­‐  non-­‐blocking,  low  download  priority  because  of  the   evaluated  media  query  -­‐-­‐> <link  href="i-­‐want-­‐a-­‐monitor-­‐of-­‐this-­‐size.css"   rel="stylesheet"  media="(min-­‐width:  4000px)"> <!-­‐-­‐  print  stylesheet  is  non-­‐blocking  -­‐-­‐> <link  href="noop.css"  rel="stylesheet"  media="print"> http://www.igvita.com/2012/06/14/debunking-responsive-css-performance-myths/
  15. Everything Else* <!-­‐-­‐  blocking  stylesheet,  nothing  renders  until  it  is

      downloaded  and  parsed  (timeouts  may  vary)  -­‐-­‐>   <link  href="main.css"  rel="stylesheet"> <link  href="i-­‐want-­‐a-­‐monitor-­‐of-­‐this-­‐size.css"   rel="stylesheet"  media="(min-­‐width:  4000px)"> <link  href="noop.css"  rel="stylesheet"  media="print">
  16. Downloading CSS Firefox 16 Safari 6 Chrome 22 Opera 12

    Serial Download Bug was fixed: https://twitter.com/igrigorik/status/266667865644609536
  17. Solutions CSS is sacred. Choose minimal when possible. Separate <link>

    elements for each breakpoint Doesn’t scale if you have a lot of breakpoints. Good for WebKit, what about everything else?
  18. 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
  19. 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
  20. eCSSential <head>        <script>        <!-­‐-­‐

     Inline  eCSSential.min.js  -­‐-­‐>        eCSSential({                "all":  "css/all.css",                "(min-­‐width:  20em)":  "css/min-­‐20em.css",                "(min-­‐width:  37.5em)":  "css/min-­‐37.5em.css",                "(min-­‐width:  50em)":  "css/min-­‐50em.css",                "(min-­‐width:  62.5em)":  "css/min-­‐62.5em.css"        });        </script> </head>
  21. <img> hidden in CSS <div  id="test1">        <img

     src="images/test1.png"  alt=""  /> </div> @media  all  and  (max-­‐width:  600px)  {        #test1  {  display:none;  } } http://timkadlec.com/2012/04/media-query-asset-downloading-results/ Downloading Images
  22. <img> hidden in CSS <div  id="test1">        <img

     src="images/test1.png"  alt=""  /> </div> @media  all  and  (max-­‐width:  600px)  {        #test1  {  display:none;  } } http://timkadlec.com/2012/04/media-query-asset-downloading-results/ NOPE Downloading Images
  23. <div  id="test2"></div> #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
  24. <div  id="test2"></div> #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
  25. <div  id="test3">        <div></div> </div> #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
  26. <div  id="test3">        <div></div> </div> #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
  27. <div  id="test4"></div> #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
  28. <div  id="test4"></div> #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
  29. <div  id="test7"></div> #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
  30. <div  id="test7"></div> #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
  31. 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/
  32. Downloading <img> 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.
  33. Picturefill <div  data-­‐picture  data-­‐alt="A  giant  stone  face  at  The  Bayon

     temple  in  Angkor  Thom,   Cambodia">        <div  data-­‐src="external/imgs/small.jpg"></div>        <div  data-­‐src="external/imgs/medium.jpg"  data-­‐media="(min-­‐width:  400px)"></div>        <div  data-­‐src="external/imgs/large.jpg"  data-­‐media="(min-­‐width:  800px)"></div>        <div  data-­‐src="external/imgs/extralarge.jpg"  data-­‐media="(min-­‐width:   1000px)"></div>        <!-­‐-­‐  Fallback  content  for  non-­‐JS  browsers.  Same  img  src  as  the  initial,   unqualified  source  element.  -­‐-­‐>        <noscript><img  src="external/imgs/small.jpg"  alt="A  giant  stone  face  at  The   Bayon  temple  in  Angkor  Thom,  Cambodia"></noscript> </div> http://scottjehl.github.com/picturefill/
  34. Picturefill (HDPI) <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="small.jpg"                  data-­‐media="(min-­‐device-­‐pixel-­‐ratio:  2.0)"></div>        <div  data-­‐src="medium.jpg"                data-­‐media="(min-­‐width:  400px)"></div>        <div  data-­‐src="medium_x2.jpg"          data-­‐media="(min-­‐width:  400px)  and  (min-­‐device-­‐pixel-­‐ratio:  2.0)"></div>        <div  data-­‐src="large.jpg"                  data-­‐media="(min-­‐width:  800px)"></div>        <div  data-­‐src="large_x2.jpg"            data-­‐media="(min-­‐width:  800px)  and  (min-­‐device-­‐pixel-­‐ratio:  2.0)"></div>            <div  data-­‐src="extralarge.jpg"        data-­‐media="(min-­‐width:  1000px)"></div>        <div  data-­‐src="extralarge_x2.jpg"  data-­‐media="(min-­‐width:  1000px)  and  (min-­‐device-­‐pixel-­‐ratio:  2.0)"></div>          ... </div> http://scottjehl.github.com/picturefill/
  35. Compressive Images Pump up the size, pump up the JPEG

    compression Scale down in the browser http://filamentgroup.com/lab/ rwd_img_compression/
  36. Picturefill Simplifes to (HDPI) <div  data-­‐picture  data-­‐alt="A  giant  stone  face

     at  The  Bayon  temple  in  Angkor  Thom,   Cambodia">        <div  data-­‐src="small_compressive.jpg"></div>        <div  data-­‐src="medium_compressive.jpg"                data-­‐media="(min-­‐width:  400px)"></div>        <div  data-­‐src="large_compressive.jpg"                  data-­‐media="(min-­‐width:  800px)"></div>        <div  data-­‐src="extralarge_compressive.jpg"        data-­‐media="(min-­‐width:  1000px)"></div>        <!-­‐-­‐  TODO:  adjust  rendered  sizes  -­‐-­‐>        ... </div> Careful with Memory Consumption!
  37. 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');
  38. 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/
  39. 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
  40. 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
  41. 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
  42. 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
  43. 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.
  44. 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 ”