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/

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
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
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.
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
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/
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
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
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>
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
157. 2.something iPhone screens tall and 12% of the size
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()) ;
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>
190. A Little Bit o’CSS .no-js .img-replace {display: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