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

Before the @mq

Before the @mq

Three case studies focusing on images and how to improve performance and download size. Provides examples of both client-side and server-side solutions.

Video available at http://weedygarden.net/2013/07/bdconf-2013/

A29a6c1d19522038ed28114c313d5fab?s=128

Erik Runyon
PRO

July 22, 2013
Tweet

Transcript

  1. Before the @mq Erik Runyon @erunyon @BDConf July 2013

  2. /about/ Erik Runyon Director of Web Communications University of Notre

    Dame @erunyon weedygarden.net
  3. What We’ll Cover I. Why We Optimize II. Articles BBC

    News III. Carousels WVU IV. In Depth Notre Dame
  4. I. Why We Optimize

  5. 2010 2.6% 3.6% 7.2% 2011 4.4% 8.8% 26.1% 2012 13.3%

    17.7% 44.9% ND.edu Admissions Game Day Mobile Traffic
  6. None
  7. January 7, 2013 BCS Bowl Game

  8. January 7, 2013 BCS Bowl Game Usually 5.5% each

  9. Developer Poll

  10. news.cnet.com/2100-1038_3-5172107.html nytimes.com/2005/06/21/technology/21iht-broad.html flickr.com/photos/foolswisdom/108953458/lightbox Broadband began to overtake dial-up in 2004*

    * In major U.S. Cities
  11. http://www.flickr.com/photos/specialkrb/4045683750/ Dial-up EDGE 3G LTE 56 Kbps 384 Kbps 1.2

    Mbps 16+ Mbps
  12. None
  13. None
  14. None
  15. None
  16. None
  17. Erik’s personal Bermuda Triangle of AT&T suckage

  18. http://www.websiteoptimization.com/speed/tweak/average-web-page/ http://www.webperformancetoday.com/2012/05/24/average-web-page-size-1-mb/ “The size of the average web page of

    the top 1000 websites has more than tripled since 2008. In the past five years from 2008 to late 2012 the average web page grew from 312K to 1114K, over 3.5 times larger” – websiteoptimization.com (Nov 11, 2012) “In the past 18 months, the average web page has grown by 50% — from 702 KB in November 2010 to 1042 KB on May 1, 2012. At this rate, the average page will hit 2MB by 2015.” – webperformancetoday.com (May 24, 2012)
  19. weedygarden.net

  20. Sites used to generate these stats: http://bit.ly/highered-rwd averages for #highered

    RWD sites 128 sites sampled at full size requests size 61 1.7 MB
  21. Sites used to generate these stats: http://bit.ly/highered-rwd averages for #highered

    RWD sites 128 sites sampled with iPhone UA and narrow screen (to simulate mobile) requests size 57 1.6 MB
  22. 1-1.9 MB = 50 Sites used to generate these stats:

    http://bit.ly/highered-rwd averages for #highered RWD sites 128 sites sampled with iPhone UA and narrow screen (to simulate mobile) 2-2.9 MB = 15 3-3.9 MB = 11 > 4 MB = 6
  23. Dedicated Mobile vs. RWD 48 schools Dedicated mobile 180 KB

    RWD 1.4 MB
  24. js css images Sites used to generate these stats: http://bit.ly/highered-rwd

    averages for #highered RWD sites 128 sites sampled with iPhone UA and narrow screen (to simulate mobile) 12 files / 227 KB 7 files / 99 KB 32 files / 1 MB 73% of page size
  25. II. Articles - BBC News

  26. m.bbc.co.uk/news

  27. www.bbc.co.uk/news m.bbc.co.uk/news

  28. …build a BBC News website that fits the needs of

    the maximum of users 3 years in the future. At the moment we have a mobile only responsive website. But eventually it will take over the desktop site. @tmaslen
  29. http://www.slideshare.net/bradfrostweb/responsive-design-vs-separate-mobile-sites-presidential-smackdown-edition @brad_frost

  30. http://www.slideshare.net/bradfrostweb/responsive-design-vs-separate-mobile-sites-presidential-smackdown-edition @brad_frost

  31. requests size css js images www.bbc.co.uk/news Launched 1997 m.bbc.co.uk/news Launched

    2012 196 1.4 MB 10 files / 64.4 KB 71 files / 419 KB 114 files / 823 KB DESKTOP requests size css js images 8 34 KB 3 files / 16.4 KB — 4 files / 4.9 KB BASIC only one content image requests size css js images 59 224 KB 5 files / 37.6 KB 8 files / 70.2 KB 41 files / 84.1 KB SMARTPHONE
  32. HTML5 browsers IE9+ Firefox 3.5+ Opera 9+ and probably further

    back Safari 4+ Chrome 1+ (I think) iPhone and iPad iOS1+ Android phone and tablets 2.1+ Blackberry OS6+ Windows 7.5+ new Mango version Mobile Firefox all the versions we tested Opera Mobile all the versions we tested HTML4 browsers IE8- Blackberry OS5- Nokia S60 v6- Nokia S40 all versions All other Symbian variants Windows 7 phone pre-Mango …and many more that are too numerous to mention. http://responsivenews.co.uk/post/18948466399/cutting-the-mustard
  33. if('querySelector' in document && 'localStorage' in window && 'addEventListener' in

    window) { // bootstrap the application } “Cutting the Mustard” http://responsivenews.co.uk/post/18948466399/cutting-the-mustard
  34. A large part of any JS library is its DOM

    selector. If the browser has native CSS selecting then it removes the need for a DOM selector. QuerySelector has been available in Firefox since 3.5 at least and has been working in webkit for ages. It also works in IE9. document.querySelector http://responsivenews.co.uk/post/18948466399/cutting-the-mustard
  35. Although we are not using it yet, we are planning

    on making considerable use of it. Imagine that if you first came to the mobile site we downloaded all the stories straight away and stored them in localStorage. They’d then be available to use while you are going through an areas of sketchy bandwidth. window.localStorage http://responsivenews.co.uk/post/18948466399/cutting-the-mustard
  36. Another large part of any JS library is event support.

    Every browser made in the last 6 years (except IE8) supports DOM level 2 events. If the browser supports this then we know it has better standards support than IE8. window.addEventListener http://responsivenews.co.uk/post/18948466399/cutting-the-mustard
  37. 8 requests 34 KB 59 requests 224 KB

  38. <!-- Original Article --> <div class="unit unit--regular unit--has-media"> <div class="unit__media">

    <div class="delayed-image-load" data-src="http://ichef.bbci.co.uk/news/200/media/images/68302000/jpg/_68302997_gerturkmerkelafp.jpg" data- width="640" data-height="360"></div> </div> <div class="unit__body"> <div class="unit__header"> <h3 class="unit__title"> ! ! ! <a href="/news/world-europe-23000319" class="unit__link-wrapper"><span class="cta">Germany-Turkey diplomatic row erupts</span></a> ! ! ! </h3> <div class="unit__meta"> <div class="date" data-seconds="1371819374" data-datetime="21 June 2013"> 21 June 2013 </div> </div> </div> <div class="unit__summary"> <p class="summary">Germany summons the Turkish ambassador in a row over Turkey's bid for membership of the European Union.</p> </div> </div> </div> <!-- Enhanced Article --> <div class="unit unit--regular unit--has-media"> <a href="/news/world-europe-23000319" class="unit__link-wrapper"> <div class="unit__media"> <img src="http://ichef.bbci.co.uk/news/96/media/images/68302000/jpg/_68302997_gerturkmerkelafp.jpg" datasrc="http://ichef.bbci.co.uk/news/200/ media/images/68302000/jpg/_68302997_gerturkmerkelafp.jpg" class="image-replace" alt="" width="640" height="360"> </div> <div class="unit__body"> <div class="unit__header"> <h3 class="unit__title"><span class="cta"> Germany-Turkey diplomatic row erupts </span> </h3> <div class="unit__meta"> <div class="date relative-time" data-seconds="1371819374" data-datetime="21 June 2013" data-timestamp-inserted="true"> 2 hours ago </div> </div> </div> <div class="unit__summary"> <p class="summary">Germany summons the Turkish ambassador in a row over Turkey's bid for membership of the European Union.</p> </div> </div> </a> </div>
  39. <!-- Original Article --> <div class="unit unit--regular unit--has-media"> <div class="unit__media">

    <div class="delayed-image-load" data-src="http://ichef.bbci.co.uk/news/200/media/images/68302000/jpg/_68302997_gerturkmerkelafp.jpg" data- width="640" data-height="360"></div> </div> <div class="unit__body"> <div class="unit__header"> <h3 class="unit__title"> ! ! ! <a href="/news/world-europe-23000319" class="unit__link-wrapper"><span class="cta">Germany-Turkey diplomatic row erupts</span></a> ! ! ! </h3> <div class="unit__meta"> <div class="date" data-seconds="1371819374" data-datetime="21 June 2013"> 21 June 2013 </div> </div> </div> <div class="unit__summary"> <p class="summary">Germany summons the Turkish ambassador in a row over Turkey's bid for membership of the European Union.</p> </div> </div> </div> <!-- Enhanced Article --> <div class="unit unit--regular unit--has-media"> <a href="/news/world-europe-23000319" class="unit__link-wrapper"> <div class="unit__media"> <img src="http://ichef.bbci.co.uk/news/96/media/images/68302000/jpg/_68302997_gerturkmerkelafp.jpg" datasrc="http://ichef.bbci.co.uk/news/200/ media/images/68302000/jpg/_68302997_gerturkmerkelafp.jpg" class="image-replace" alt="" width="640" height="360"> </div> <div class="unit__body"> <div class="unit__header"> <h3 class="unit__title"><span class="cta"> Germany-Turkey diplomatic row erupts </span> </h3> <div class="unit__meta"> <div class="date relative-time" data-seconds="1371819374" data-datetime="21 June 2013" data-timestamp-inserted="true"> 2 hours ago </div> </div> </div> <div class="unit__summary"> <p class="summary">Germany summons the Turkish ambassador in a row over Turkey's bid for membership of the European Union.</p> </div> </div> </a> </div>
  40. <!-- Initial markup --> <div class="unit__media"> <div ! !! !

    class="delayed-image-load" ! !! ! data-src="http://path/to/image.jpg" ! !! ! data-width="640" data-height="360"> ! ! </div> </div> <!-- Post mustard cutting --> <div class="unit__media"> <img ! !! ! src="http://path/to/image.jpg" ! !! ! datasrc="http://original/path/to/image.jpg" ! !! ! class="image-replace" alt="" width="640" height="360"> </div>
  41. widths = [96, 130, 165, 200, 235, 270, 304, 340,

    375, 410, 445, 485, 520, 555, 590, 625, 660, 695, 736] http://responsivenews.co.uk/post/50092458307/images “We made an arbitary decision to add a breakpoint every 30px from 96px up to 736px… informed more by the image sizes that fit into the old grid system available in BBC’s GEL layout guide.”
  42. 96px 96px = 2 KB 200px = 5 KB 235px

    200px = 3 KB 235px = 4 KB 590px = 29 KB Viewport ~ 240px wide
  43. 96px 96px = 2 KB 200px = 5 KB 235px

    200px = 3 KB 235px = 4 KB 590px = 29 KB x27 Viewport ~ 240px wide
  44. “At the moment making the choice based on element size

    is the best fit for us, as element widths do not correlate to viewport widths. We use images in many different contexts, stretched across columns, left aligned, etc, so we have to use element width.” http://responsivenews.co.uk/post/50092458307/images
  45. 240px wide 670px wide 970px wide 86.7 KB 113.9 KB

    134.6 KB
  46. The site records around 40 million unique users a week

    https://en.wikipedia.org/wiki/BBC_News_Online http://www.digitalspy.com/media/news/a437075/us-election-brings-bbc-news-website-traffic-high.html Coverage of the (2012 U.S.) election… brought 16.4 million unique browsers across the BBC website and mobile services on November 7.
  47. None
  48. III. Carousels - WVU

  49. www.WVU.edu

  50. http://bradfrostweb.com/blog/post/carousels/

  51. News/Sports

  52. News/Sports

  53. News/Sports

  54. News/Sports

  55. News/Sports

  56. News/Sports

  57. Entertainment

  58. Entertainment

  59. Entertainment

  60. Entertainment

  61. Technology

  62. Technology

  63. Technology

  64. Technology

  65. HigherEd

  66. HigherEd

  67. HigherEd

  68. HigherEd

  69. HigherEd

  70. HigherEd

  71. HigherEd

  72. HigherEd

  73. HigherEd

  74. HigherEd

  75. HigherEd

  76. HigherEd

  77. HigherEd

  78. HigherEd

  79. HigherEd

  80. None
  81. weedygarden.net/2013/07/carousel-interaction-stats 1.07% of visitors clicked on a feature

  82. Typical click-through rates of 1-3% weedygarden.net/2013/07/carousel-interaction-stats

  83. Notre Dame

  84. Notre Dame

  85. Notre Dame

  86. Notre Dame

  87. Notre Dame

  88. Notre Dame

  89. Notre Dame

  90. Notre Dame

  91. Notre Dame

  92. Notre Dame

  93. Notre Dame

  94. Notre Dame

  95. Notre Dame

  96. Notre Dame

  97. http://www.flickr.com/photos/errolyucel/4966109357/

  98. None
  99. None
  100. "…keeping the designer focused on achievable solutions at specific screen

    sizes by not trying to optimize one code base for everything and leveraging server-side solutions rather than force templating logic onto the front-end." @dmolsen
  101. RESS (responsive design + server-side components) www.lukew.com/ff/entry.asp?1392

  102. Wait, isn’t browser detection evil?

  103. wtfmobileweb.com

  104. wtfmobileweb.com

  105. wtfmobileweb.com

  106. wtfmobileweb.com

  107. wtfmobileweb.com

  108. http://xkcd.com/1174/ “If I click 'no', I've probably given up on

    everything, so don't bother taking me to the page I was trying to go to. Just drop me on the homepage. Thanks.”
  109. http://www.flickr.com/photos/dipster1/1403240351/ WURFL: wurfl.sourceforge.net 51degrees: 51degrees.mobi Device Atlas: deviceatlas.com OpenDDR: openddr.org

  110. github.com/dmolsen/Detector

  111. "The basic premise being that 90% of the mark-up and

    styles are the same on all browsers but some get just a little tweak here and there based on their browser's UA and supported properties. The primary images that we tweak are the carousel images. They're by far our biggest resource hog. By looking for mobile UAs we serve much smaller width/height imagery." @dmolsen
  112. Completely different carousels Mobile: Flexslider www.woothemes.com/flexslider Desktop: Supersized buildinternet.com/project/supersized

  113. Code Differences

  114. CSS Mobile <link rel="stylesheet" href="base.css"> <link rel="stylesheet" href="flexslider.css" media="screen"> <link

    rel="stylesheet" href="layout.css"> <link rel="stylesheet" href="option-3.css"> <link rel="stylesheet" href="bootstrap.css"> <link rel="stylesheet" href="mobile-advanced.css"> Desktop <link rel="stylesheet" href="base.css"> <link rel="stylesheet" href="supersized.css" media="screen"> <link rel="stylesheet" href="supersized.shutter.css" media="screen"> <link rel="stylesheet" href="layout.css"> <link rel="stylesheet" href="option-3.css">
  115. CSS Mobile <link rel="stylesheet" href="base.css"> <link rel="stylesheet" href="flexslider.css" media="screen"> <link

    rel="stylesheet" href="layout.css"> <link rel="stylesheet" href="option-3.css"> <link rel="stylesheet" href="bootstrap.css"> <link rel="stylesheet" href="mobile-advanced.css"> Desktop <link rel="stylesheet" href="base.css"> <link rel="stylesheet" href="supersized.css" media="screen"> <link rel="stylesheet" href="supersized.shutter.css" media="screen"> <link rel="stylesheet" href="layout.css"> <link rel="stylesheet" href="option-3.css">
  116. JS Mobile <script src="jquery.flexslider-min.js"></script> <script src="modernizr.custom.js"></script> <script src="bootstrap.min.js"></script> <script src="navigation-option-6.js"></script>

    Desktop <script src="modernizr.custom.js"></script> <script src="jquery.easing.min.js"></script> <script src="supersized.3.2.6.js"></script> <script src="supersized.shutter.js"></script> <script src="navigation-option-6.js"></script>
  117. JS Mobile <script src="jquery.flexslider-min.js"></script> <script src="modernizr.custom.js"></script> <script src="bootstrap.min.js"></script> <script src="navigation-option-6.js"></script>

    Desktop <script src="modernizr.custom.js"></script> <script src="jquery.easing.min.js"></script> <script src="supersized.3.2.6.js"></script> <script src="supersized.shutter.js"></script> <script src="navigation-option-6.js"></script>
  118. Mobile <div class="flexslider"> <ul class="slides"> <li><img src="images/slideshow-mobile/69.jpg" alt="…" /><p class="flex-caption">…

    <a href='http://link'>Read More</a></p></li> <li><img src="images/slideshow-mobile/64.jpg" alt="…" /><p class="flex-caption">… <a href='http://link'>Read More</a></p></li> <li><img src="images/slideshow-mobile/71.jpg" alt="…" /><p class="flex-caption">… <a href='http://link'>Read More</a></p></li> <li><img src="images/slideshow-mobile/70.jpg" alt="…" /><p class="flex-caption">… <a href='http://link'>Read More</a></p></li> <li><img src="images/slideshow-mobile/54.jpg" alt="…" /><p class="flex-caption">… <a href='http://link'>Read More</a></p></li> </ul> </div> HTML
  119. None
  120. Desktop <ul id="supersized"></ul> HTML <script type="text/javascript"> jQuery(function($){ $.supersized({ slide_interval :

    30000, transition : 1, transition_speed : 500, keyboard_nav : 0, slide_links : 'blank', slides : [ {image : 'images/slideshow/69.jpg', title : "…", thumb : 'images/slideshow/thumbs/69.jpg'}, {image : 'images/slideshow/64.jpg', title : "…", thumb : 'images/slideshow/thumbs/64.jpg'}, {image : 'images/slideshow/71.jpg', title : "…", thumb : 'images/slideshow/thumbs/71.jpg'}, {image : 'images/slideshow/70.jpg', title : "…", thumb : 'images/slideshow/thumbs/70.jpg'}, {image : 'images/slideshow/72.jpg', title : "…", thumb : 'images/slideshow/thumbs/72.jpg'} ] }); }); </script>
  121. Images <!-- Large Images--> <ul id="supersized" class="quality" style="visibility: visible;"> <li

    class="slide-0"><a><img src="images/slideshow/69.jpg"></a></li> <li class="slide-1"><a><img src="images/slideshow/64.jpg"></a></li> <li class="slide-2"><a><img src="images/slideshow/71.jpg"></a></li> <li class="slide-3"><a><img src="images/slideshow/70.jpg"></a></li> <li class="slide-4"><a><img src="images/slideshow/54.jpg"></a></li> </ul> HTML
  122. None
  123. HTML Controls <!-- Navigation--> <div id="thumb-control"> <div id="prevthumb"></div> <div id="nextthumb"></div>

    <!--Control Bar--> <div id="controls-wrapper" class="load-item"> <div id="controls"> <!--Slide captions displayed here--> <div id="slidecaption"></div> <!--Arrow Navigation--> <a id="prevslide" class="load-item"></a> <a id="nextslide" class="load-item"></a> </div> </div> <div id="thumb-tray" class="load-item five-items"></div> </div>
  124. HTML Controls <!-- Navigation--> <div id="thumb-control"> <div id="prevthumb"></div> <div id="nextthumb"></div>

    <!--Control Bar--> <div id="controls-wrapper" class="load-item"> <div id="controls"> <!--Slide captions displayed here--> <div id="slidecaption">… <a href="http://link/to/story">Read More</a></div> <!--Arrow Navigation--> <a id="prevslide" class="load-item"></a> <a id="nextslide" class="load-item"></a> </div> </div> <div id="thumb-tray" class="load-item five-items"> <ul id="thumb-list"> <li class="thumb0"><img src="images/slideshow/thumbs/69.jpg"></li> <li class="thumb1"><img src="images/slideshow/thumbs/64.jpg"></li> <li class="thumb2"><img src="images/slideshow/thumbs/71.jpg"></li> <li class="thumb3"><img src="images/slideshow/thumbs/70.jpg"></li> <li class="thumb4"><img src="images/slideshow/thumbs/72.jpg"></li> </ul> </div> </div>
  125. HTML Controls <!-- Navigation--> <div id="thumb-control"> <div id="prevthumb"></div> <div id="nextthumb"></div>

    <!--Control Bar--> <div id="controls-wrapper" class="load-item"> <div id="controls"> <!--Slide captions displayed here--> <div id="slidecaption">… <a href="http://link/to/story">Read More</a></div> <!--Arrow Navigation--> <a id="prevslide" class="load-item"></a> <a id="nextslide" class="load-item"></a> </div> </div> <div id="thumb-tray" class="load-item five-items"> <ul id="thumb-list"> <li class="thumb0"><img src="images/slideshow/thumbs/69.jpg"></li> <li class="thumb1"><img src="images/slideshow/thumbs/64.jpg"></li> <li class="thumb2"><img src="images/slideshow/thumbs/71.jpg"></li> <li class="thumb3"><img src="images/slideshow/thumbs/70.jpg"></li> <li class="thumb4"><img src="images/slideshow/thumbs/72.jpg"></li> </ul> </div> </div>
  126. None
  127. requests transferred css js images 25 400 KB 1 files

    / 21 KB 5 files / 63.4 KB 18 files / 309 KB requests transferred css js images 37 994 KB 1 files / 14 KB 5 files / 68 KB 30 files / 903 KB MOBILE DESKTOP
  128. github.com/dmolsen/lazyBlock

  129. gist.github.com/erunyon/5073909

  130. http://www.flickr.com/photos/thomasstrosse/5803681875/

  131. IV. In Depth - Notre Dame

  132. www.ND.edu

  133. Jan 2001 - Aug 2007

  134. Jan 2001 - Aug 2007

  135. August 2007 - July 2011

  136. August 2007 - July 2011

  137. August 2007 - July 2011

  138. “I wanted to share my opinion of the new ND

    web site with you - in a word, it's awful. Quite frankly, I am unable to find anything about the site that is positive. It is not clear why the change was made but the individual that came up with the idea should be fired along with the individual(s) that approved the change. Contrary to the old site - I make every effort to avoid using the new site.”
  139. 36 KB 2.2 MB (1.7 MB Flash)

  140. July 2011 - Feb 2012

  141. Feb 2012 - March 2012

  142. April 2012 - Present

  143. Create an “in-depth” experience that conveys the feeling of visiting

    campus
  144. Mobile Tablet Desktop

  145. Mobile Tablet Desktop Phablet

  146. UA-Parser github.com/tobie/ua-parser

  147. $ua->isMobile $ua->isTablet $ua->isDesktop

  148. Mobile-Detect github.com/serbanghita/Mobile-Detect

  149. Long homepage is long

  150. Long homepage is long x9 x11

  151. Cached external feeds 35 https://github.com/erunyon/FeedCache

  152. www.nd.edu/news-and-events/ www.nd.edu/about/ www.nd.edu/academics/ www.nd.edu/admissions/ www.nd.edu/faith-and-service/

  153. Long homepage is long

  154. Long homepage is long

  155. None
  156. None
  157. 2.something iPhone screens tall and 12% of the size

  158. None
  159. None
  160. context features can dictate content

  161. 260 KB 2.4 MB 405 KB

  162. But what if we didn’t?

  163. One small issue with RESS

  164. User-Agent: Amazon CloudFront

  165. Circling back to the desktop

  166. 25 requests 260 KB

  167. 132 requests 2.4 MB 117 images

  168. The What

  169. Reduce the initial download for large screen visitors

  170. The Why

  171. 132 requests 2.4 MB 117 images

  172. News and Events 24 Images (646.5 KB) Viewed by 21.4%

    of visitors
  173. About 6 Images (208.3 KB) Viewed by 8.9% of visitors

  174. Academics 14 Images (406.9 KB) Viewed by 6.5% of visitors

  175. Admissions 4 Images (140 KB) Viewed by 4.1% of visitors

  176. Faith & Service 9 Images (328.1 KB) Viewed by 3.5%

    of visitors
  177. Tour Flyout 26 Images (169 KB) Viewed by 0.25% of

    visitors
  178. The How

  179. Approach #1: 1x1 gif Doesn’t scale proportionally without javascript If

    width/height is set to “auto” in CSS, reverts to 1x1 http://codepen.io/erunyon/pen/uqypx http://www.456bereastreet.com/archive/201306/how_to_proportionally_scale_images_that_have_dimension_attributes/
  180. Approach #2: <div> Doesn’t scale proportionally without javascript

  181. Our Solution Replace as many images as possible with solid

    PNG’s and load actual image when necessary.
  182. Set Image Properties fakeImage('/path/to/the/image.jpg', array( 'alt'=>'Description', 'width'=>420, 'height'=>310, 'resize'=>true )

    );
  183. Create the PNG $img = ($attr['resize'] === true) ? "http://src.sencha.io/{$prepend}{$img}"

    : $img ;
  184. ob_start(); imagepng( imagecreatetruecolor($width, $height), NULL, 9); $imgdata = 'data:image/png;base64,'. base64_encode(ob_get_clean())

    ;
  185. None
  186. Load Stuff Load images as user scrolls (or exposes the

    image in other ways)
  187. What if javascript is off?

  188. <img class="img-replace" src="data:image/png;base64,LongStringOfDataWithTheSameDimensionsAsTheImage" width="112" height="112" alt="Description of the image" title="Description

    of the image" data-image="/path/to/the/image.jpg" data-width="112" data-height="112"> <noscript> <img class="img-noscript" src="/path/to/the/image.jpg" width="112" height="112" alt="Description of the image" title="Description of the image"> </noscript>
  189. None
  190. A Little Bit o’CSS .no-js .img-replace {display:none;}

  191. None
  192. The Result 38 requests * 393 KB * (down from

    130 requests and 2.4 MB) * Varies by day and browser
  193. Load Time Before: 4.9s After: 2.6s * Results from webpagetest.org

  194. Initial Trade-Offs 5.1 KB Larger HTML

  195. www.webpagetest.org 0.4s Before

  196. After 1.2s www.webpagetest.org 0.4s Before

  197. After 1.2s www.webpagetest.org 0.4s Before 0.3s

  198. Load Time Before: 4.9s After: 2.6s 1.8s * Results from

    webpagetest.org
  199. …and that makes me happy

  200. No optimization 334 GB What was served 182 GB Current

    setup 114 GB
  201. F There’s always room for improvement

  202. Keep experimenting

  203. Strive for an outstanding experience for all visitors, regardless of

    device
  204. erik runyon @erunyon weedygarden.net thank you