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/

1. Performance
   WITH Responsive Web Design @zachleat
2. Performance
   WITH Responsive Web Design @zachleat
4. @zachleat zachleat.com
5. @zachleat zachleat.com
7. Goals Primer RWD !== Media Queries Assets Common Buzzkills and Tips for faster loading RWD RWD Showcase Showdown.
8. Primer
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
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
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
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"                          }                  }          },   });
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