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

Performance & Responsive Web Design

Nebraska JS
November 08, 2012

Performance & Responsive Web Design

There is a new version of this presentation. See https://speakerdeck.com/zachleat/performance-and-responsive-web-design

Nebraska JS talk on November 8, 2012 http://www.meetup.com/nebraskajs/events/74950422/

Correction to Slide #21 per @scottjehl: Use insertBefore instead of appendChild for IE8-: http://paulirish.com/2011/surefire-dom-element-insertion/

Nebraska JS

November 08, 2012
Tweet

More Decks by Nebraska JS

Other Decks in Programming

Transcript

  1. Housekeeping ✤ We need one or more volunteers to speak

    at January’s NebraskaJS. ✤ Tweet @nebraskajs with Topic Ideas even if you don’t want to speak. Thursday, November 8, 12
  2. Goals ✤ Primer ✤ RWD !== Media Queries ✤ 99

    Problems ✤ Buzzkills ✤ RWD Showcase Showdown ✤ Be kind, RWD. Thursday, November 8, 12
  3. RWD is ✤ A Flexible Grid (Fluid: % + Min

    Widths) ✤ Flexible Media (Images, Video) ✤ (Not Just) Media Queries http://unstoppablerobotninja.com/entry/on-being-responsive Thursday, November 8, 12
  4. RWD & performance ✤ Two alternatives to RWD: ✤ Do

    nothing ✤ Use a separate m.dot site ✤ Redirects are slow. ✤ Maintenance of UA-Parsing Server Side Redirects (WURFL updates ~monthly) ✤ Content Strategy (Desktop Mode link) http://en.m.wikipedia.org/?useformat=mobile#_ Thursday, November 8, 12
  5. Google recommends RWD ✤ “It keeps your desktop and mobile

    content on a single URL, which is easier for your users to interact with, share, and link to and for Google’s algorithms to assign the indexing properties to your content.” ✤ “Google can discover your content more efficiently as we wouldn't need to crawl a page with the different Googlebot user agents to retrieve and index all the content.” http://googlewebmastercentral.blogspot.com/2012/06/recommendations-for-building-smartphone.html Thursday, November 8, 12
  6. Content Strategy “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 Thursday, November 8, 12
  7. 99 Problems ✤ Browsers Download and Block Rendering on Unnecessary

    CSS ✤ Browsers Sometimes Download Unnecessary Images ✤ Big Images are Wasted on Small Screens ✤ Related: Retina Images are Wasted on <snob>Blurry</snob> Screens Thursday, November 8, 12
  8. 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/ Thursday, November 8, 12
  9. 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/ Thursday, November 8, 12
  10. JavaScript that Doesn’t Block var  script  =  document.createElement("script"); script.type  =

     "text/javascript"; script.src  =  "foo.js"; document.getElementsByTagName("head") [0].appendChild(script); http://calendar.perfplanet.com/2010/the-truth-about-non-blocking-javascript/ Thursday, November 8, 12
  11. 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” ✤ http://www.phpied.com/files/css-loading/mq.php?mq=all http://www.phpied.com/css-and-the-critical-path/ Thursday, November 8, 12
  12. 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/ Thursday, November 8, 12
  13. 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"> Thursday, November 8, 12
  14. Solutions ✤ CSS is sacred. Choose minimal when possible. ✤

    Separate <link> elements for each Media Query ✤ Doesn’t scale if you have a lot of breakpoints. ✤ Good for WebKit, what about everything else? ✤ eCSSential Thursday, November 8, 12
  15. 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 Thursday, November 8, 12
  16. 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 Thursday, November 8, 12
  17. matchMedia Polyfill: https://github.com/paulirish/matchMedia.js/ Careful with IE8-, the polyfill requires Media

    Query support http://caniuse.com/#feat=matchmedia Thursday, November 8, 12
  18. 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> Thursday, November 8, 12
  19. Images Don’t Block ✤ Doesn’t mean they get a free

    pass. 753KB Thursday, November 8, 12
  20. Downloading Images (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/ Thursday, November 8, 12
  21. Downloading Images (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 Thursday, November 8, 12
  22. Downloading Images (CSS) <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/ Thursday, November 8, 12
  23. Downloading Images (CSS) <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 Thursday, November 8, 12
  24. Downloading Images (CSS) <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/ Thursday, November 8, 12
  25. Downloading Images (CSS) <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 Thursday, November 8, 12
  26. Downloading Images (CSS) <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/ Thursday, November 8, 12
  27. Downloading Images (CSS) <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 Thursday, November 8, 12
  28. Downloading Images (CSS) <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/ Thursday, November 8, 12
  29. Downloading Images (CSS) <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 Thursday, November 8, 12
  30. Downloading Images (CSS) ✤ Coming to a browser near you:

    image-­‐set() ✤ http://blog.cloudfour.com/safari-6-and-chrome-21-add-image-set-to- support-retina-images/ Thursday, November 8, 12
  31. Downloading <img> ✤ RESPONSIVE IMAGES ✤ Whatever solution you pick,

    make sure it doesn’t make duplicate requests. Thursday, November 8, 12
  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. ✤ Side Note: Font icons are a great scalable alternative to PNG icons Thursday, November 8, 12
  33. Picturefill ✤ “A Responsive Images approach that you can use

    today” ✤ https://github.com/scottjehl/picturefill Thursday, November 8, 12
  34. 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/ Thursday, November 8, 12
  35. 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/ Thursday, November 8, 12
  36. Compressive Images ✤ Pump up the size, pump up the

    JPEG compression ✤ Scale down in the browser ✤ http://filamentgroup.com/lab/rwd_img_compression/ Thursday, November 8, 12
  37. 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! Thursday, November 8, 12
  38. Buzzkill #1: Advertising ✤ Pit of despair: full of document.write,

    iframes, blocking JavaScript (errors galore) and general badness. ✤ Inject advertising iframes using JavaScript (after onload) ✤ document.createElement(‘iframe’); Thursday, November 8, 12
  39. Buzzkill #2: Social Networking Widgets Network Requests Size (After GZIP)

    ShareThis 19 98.9KB Facebook 3 41.2KB Twitter 5 48KB Google+ 8 30.8KB Compare to jQuery 1.8.2: 32KB Thursday, November 8, 12
  40. SocialCount ✤ 4 KB CSS, 7KB JavaScript (unminified, ungzipped) ✤

    2 requests, optional +1 for Counts ✤ Non-Blocking ✤ Sharing still works without JavaScript ✤ Initializes Native Widgets on Hover / Tap for Inline +1 / Like and Tweet. ✤ In use on f2em.com Thursday, November 8, 12
  41. SocialCount ✤ 4 KB CSS, 7KB JavaScript (unminified, ungzipped) ✤

    2 requests, optional +1 for Counts ✤ Non-Blocking ✤ Sharing still works without JavaScript Coming Soon ✤ Initializes Native Widgets on Hover / Tap for Inline +1 / Like and Tweet. ✤ In use on f2em.com Thursday, November 8, 12
  42. RWD & Performance ✤ “The fastest web site is the

    one with nothing on it.” ✤ We’re in the problem solving business. ✤ Solutions often require Code. ✤ jQuery and Cross Browser DOM API Compatibility ✤ Solve more problems than you create. Thursday, November 8, 12