Performance and Responsive Web Design

E1899004c71c7043343196103e210be3?s=47 zachleat
January 15, 2015

Performance and Responsive Web Design

A 2015 version of my Performance RWD presentation, this time for NebraskaJS Lincoln.

Blog post: http://www.zachleat.com/web/rwd-perf-3/

E1899004c71c7043343196103e210be3?s=128

zachleat

January 15, 2015
Tweet

Transcript

  1. Performance WITH Responsive Web Design @zachleat

  2. Performance WITH Responsive Web Design @zachleat

  3. None
  4. @zachleat zachleat.com

  5. @zachleat zachleat.com

  6. None
  7. Goals Primer RWD !== Media Queries Assets Common Buzzkills and

    Tips for faster loading RWD RWD Showcase Showdown.
  8. Primer

  9. None
  10. RESPONSIVE WEB DESIGN 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
  11. LET’S ADD AN IPHONE BREAKPOINT

  12. LET’S ADD AN iPAD BREAKPOINT

  13. ADAPTIVE WEB DESIGN

  14. TWERKY WEB DESIGN

  15. None
  16. None
  17. http://opensignal.com/reports/fragmentation-2013/#frag_screens Android Viewport Sizes

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

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

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

  21. None
  22. The Web has Responsive Roots

  23. Alternatives to RWD Do nothing (ignore mobile) Use a separate

    m-dot site
  24. Ignore Mobile? “Mobile internet adoption has outpaced desktop internet adoption

    by eight times.” http://www.lukew.com/ff/entry.asp?993 Alternatives to RWD
  25. Ignore Mobile? Alternatives to RWD http://gs.statcounter.com/#desktop+mobile+tablet-comparison-ww-monthly-200901-201412

  26. Use a Separate mdot Site Redirects are slow. Maintenance of

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

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

    don't crap your pants every time Apple has a keynote.”
  30. http://en.m.wikipedia.org/ Content Strategy Use a separate mdot Site

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

  32. Content Strategy Use a separate mdot Site

  33. “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
  34. None
  35. CSS

  36. 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
  37. The “Average” Web Page http://httparchive.org/interesting.php#bytesperpage

  38. 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/
  39. JavaScript that Doesn’t Block <script  src></script>   </body> http://developer.yahoo.com/blogs/ydn/posts/2007/07/high_performanc_5/

  40. 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/
  41. 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/
  42. 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/
  43. Blink <!-­‐-­‐  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/
  44. 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">
  45. Downloading CSS http://scottjehl.github.com/CSS-Download-Tests/

  46. Downloading CSS Firefox 35 Opera 26 Chrome 39 Safari 8

  47. Solutions CSS is sacred. Choose minimal when possible. Separate <link>

    elements for each breakpoint Doesn’t scale. Good for WebKit, what about everything else? Separate out and inline your Critical CSS.
  48. THE FIRST 14KB

  49. Critical CSS https://github.com/filamentgroup/criticalCSS https://github.com/filamentgroup/grunt-criticalcss

  50. grunt.initConfig({          criticalcss:  {      

               custom:  {                          options:  {                                  url:  "http://localhost:4000",                                  width:  1200,                                  height:  900,                                  outputfile:  "dist/critical.css",                                  filename:  "/complete-­‐sheet.css"                          }                  }          },   });
  51. None
  52. <head>   …   <style>   /*  inline  critical.css  here

     */   </style>   <script>   //  loadCSS  utility  omitted  for  brevity   loadCSS(  "complete-­‐sheet.css"  );   </script>   …   </head>
  53. LOADCSS https://github.com/filamentgroup/loadCSS

  54. How we make RWD sites load fast as heck http://www.filamentgroup.com/lab/performance-rwd.html

  55. Images

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

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

    1,248 KB
  58. Taxonomy of Images CSS Background Images HTML <img> Responsive Images

  59. <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
  60. <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
  61. <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
  62. <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
  63. <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
  64. <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
  65. <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
  66. <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
  67. <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
  68. <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
  69. Downloading Images (CSS) 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;   }   Demo: http://cloudfour.com/examples/image-set/
  70. Downloading Images (CSS) image-­‐set()

  71. Downloading <img> Responsive Images Duplicate requests.

  72. Downloading <img> Vector First (SVG) Responsive images are only for

    lowly Bitmaps (PNG, JPEG, GIF)
  73. SRCSET

  74. <img  src="small.jpg"            srcset="large.jpg  2x,  small.jpg

     1x"            alt="A  rad  wolf">   <!-­‐-­‐  Device  Pixel  Ratio  -­‐-­‐>
  75. <img  src="small.jpg"            srcset="large.jpg  1024w,  medium.jpg

      640w,  small.jpg  320w"            alt="A  rad  wolf">   <!-­‐-­‐  w  is  the  width  of  the  file  (in  px)  -­‐-­‐>
  76. <img  src="small.jpg"            srcset="large.jpg  1024w,  medium.jpg

      640w,  small.jpg  320w"            sizes="(min-­‐width:  36em)  33.3vw,  100vw"            alt="A  rad  wolf">   <!-­‐-­‐  sizes  depict  the  size  of  the  image   relative  to  the  viewport  -­‐-­‐>
  77. <PICTURE>

  78. <picture> is for Art Direction

  79. Picturefill “A Responsive Images approach that you can use today”

    http://scottjehl.github.io/picturefill/
  80. Picturefill <picture>     <source  srcset="examples/images/extralarge.jpg"  media="(min-­‐ width:  1000px)">  

      <source  srcset="examples/images/large.jpg"  media="(min-­‐ width:  800px)">     <img  srcset="examples/images/medium.jpg"  alt="A  giant  stone   face  at  The  Bayon  temple  in  Angkor  Thom,  Cambodia">   </picture> http://scottjehl.github.io/picturefill/#examples
  81. Picturefill (HDPI) <picture>     <source  srcset="examples/images/large.jpg,  examples/ images/extralarge.jpg  2x"

     media="(min-­‐width:  800px)">     <img  srcset="examples/images/small.jpg,  examples/ images/medium.jpg  2x"  alt="A  giant  stone  face  at  The   Bayon  temple  in  Angkor  Thom,  Cambodia">   </picture> http://scottjehl.github.com/picturefill/
  82. Compressive Images Pump up the size, pump up the JPEG

    compression Scale down in the browser http://filamentgroup.com/lab/rwd_img_compression/
  83. Compressive Images Native Size 800x600

  84. Compressive Images Clientside Resize to 400x300

  85. COMPRESSIVe IMAGES Often a smaller file size than a scaled

    down (400x300) image Looks better on HDPI screens
  86. Fonts

  87. LOCAL FONT { @FONT-FACE {

  88. LOCAL FONT { @FONT-FACE {

  89. Flash of Invisible Text

  90. FOIT

  91. http://www.webpagetest.org/video/compare.php?tests=141205_VE_STK-r:1-c:0

  92. http://www.webpagetest.org/video/compare.php?tests=141205_VE_STK-r:1-c:0

  93. http://www.webpagetest.org/video/compare.php?tests=141209_AY_Z79-r:1-c:0

  94. http://www.webpagetest.org/video/compare.php?tests=141209_AY_Z79-r:1-c:0

  95. http://www.webpagetest.org/video/compare.php?tests=141209_AY_Z79-r:1-c:0

  96. @font-­‐face  {      font-­‐family:  Open  Sans;      src:

     url("data:application/x-­‐font-­‐ woff;charset=utf-­‐8;base64,...")  format("woff");      font-­‐weight:  400;      font-­‐style:  normal;   }   @font-­‐face  {      font-­‐family:  Open  Sans;      src:  url("data:application/x-­‐font-­‐ woff;charset=utf-­‐8;base64,...")  format("woff");      font-­‐weight:  700;  /*  Bold  */      font-­‐style:  normal;   }
  97. <script>   loadCSS(  "url/to/fonts-­‐woff.css"  );   </script>

  98. CSS Font Loading http://dev.w3.org/csswg/css-font-loading/

  99. var  doc  =  document,          docEl  =

     doc.documentElement;   doc.fonts.load("1em  Raleway")     .then(function()  {          //  The  font  has  loaded.       docEl.className  +=  "  raleway-­‐loaded";     });
  100. body  {      font-­‐family:  sans-­‐serif;   }   .raleway-­‐loaded

     body  {      font-­‐family:  Raleway,  sans-­‐serif;   }
  101. FONTFACEONLOAD github.com/zachleat/fontfaceonload (GZIP) 1.5KB JS USES THE CSS FONT LOADING

    API WHEN AVAILABLE.
  102. Buzzkills

  103. 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');
  104. Social Networking Widgets http://yslow.org/phantomjs/

  105. 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
  106. Showcase Showdown http://www.webpagetest.org/

  107. Boston Globe http://www.webpagetest.org/result/150115_KD_12MB/

  108. BOSTON GLOBE http://www.webpagetest.org/result/150115_KD_12MB/

  109. Smashing Magazine http://www.webpagetest.org/result/150115_3C_12VZ/

  110. Smashing Magazine

  111. Starbucks http://www.webpagetest.org/result/150115_5X_12WA/

  112. Time http://www.webpagetest.org/result/150115_1Z_12WC/

  113. Disney http://www.webpagetest.org/result/150115_CW_12WJ/

  114. FILAMENT GROUP http://www.webpagetest.org/result/150115_EV_130H/

  115. FILAMENT GROUP

  116. See more: https://twitter.com/rwd

  117. Tools solve problems Problem Solving requires Code

  118. Don’t Blame the Tools

  119. RWD Performance

  120. “The fastest web site is the one with nothing on

    it.”
  121. RESPONSIBLE RESPONSIVE DESIGN

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

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