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.

Presented at High Ed Web MI regional conference (http://mi.highedweb.org/), May 22, 2014.

Transcript

1. Before the @mq Erik Runyon @erunyon HEWeb MI May 2014
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. Images BBC News III. Carousels WVU IV. In Depth Notre Dame
4. I. Why We Optimize
5. blogs.nd.edu/nddotedu
6. Mobile Traffic 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 2013 15.5% 27.4% 50.9%
8. January 7, 2013 BCS Bowl Game
9. January 7, 2013 BCS Bowl Game Usually around 5.5% each
10. commencement.ND.edu mobile traffic Average Month: 22-30% Commencement Weekend: 58%
11. http://www.webperformancetoday.com/2013/11/26/web-page-growth-151-percent/ The average top 1,000 web page is 1575 KB. ! Last spring, the average page was 1246 KB. This represents a 26% increase in total page size in just six months, and a 151% increase in three years.
12. http://www.flickr.com/photos/specialkrb/4045683750/ Dial-up
    EDGE 3G LTE 56 Kbps 384 Kbps 1.2 Mbps 16+ Mbps
14. Erik’s personal Bermuda Triangle of AT&T suckage Parents In-Laws
15. weedygarden.net
16. Sites used to generate these stats: http://bit.ly/highered-rwd averages for #highered RWD sites
    128 sites sample
    requests
    size 61 1.7 MB
17. 1-1.9 MB = 50 Sites used to generate these stats: http://bit.ly/highered-rwd averages for #highered RWD sites 128 sites sample
    2-2.9 MB = 15 3-3.9 MB = 11 > 4 MB = 6
18. Dedicated Mobile vs. RWD 48 schools Dedicated mobile 180 KB RWD 1.4 MB
19. 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
20. II. Images - BBC News
21. m.bbc.co.uk/news
22. www.bbc.co.uk/news m.bbc.co.uk/news
23. …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
24. http://www.slideshare.net/bradfrostweb/responsive-design-vs-separate-mobile-sites-presidential-smackdown-edition @brad_frost
25. http://www.slideshare.net/bradfrostweb/responsive-design-vs-separate-mobile-sites-presidential-smackdown-edition @brad_frost
26. 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
27. 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
28. 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
29. 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
30. 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
31. 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
32. 8 requests 34 KB 59 requests 224 KB No Mustard Mustard
33. <!-- 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>
34. <!-- 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>
35. 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.”
36. 96px 96px = 2 KB 200px = 5 KB 235px 200px = 3 KB 235px = 4 KB 590px = 29 KB x27 Viewport ~ 240px wide
37. “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
38. 240px wide
    670px wide
    970px wide 86.7 KB 113.9 KB 134.6 KB
39. 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.
41. III. Carousels - WVU
42. www.WVU.edu
43. http://bradfrostweb.com/blog/post/carousels/
44. News/Sports
45. Entertainment
46. Technology
47. HigherEd
49. weedygarden.net/2013/07/carousel-interaction-stats 1.07% of visitors clicked on a feature
50. Typical click-through rates of 1-3% weedygarden.net/2013/07/carousel-interaction-stats
51. Notre Dame
52. http://www.flickr.com/photos/errolyucel/4966109357/
54. "…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
55. RESS
    (responsive design + server-side components)
    www.lukew.com/ff/entry.asp?1392
56. Wait, isn’t browser detection evil?
57. GIF
59. wtfmobileweb.com
60. 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.”
61. http://www.flickr.com/photos/dipster1/1403240351/ WURFL: wurfl.sourceforge.net
    51degrees: 51degrees.mobi
    Device Atlas: deviceatlas.com
    OpenDDR: openddr.org
62. github.com/dmolsen/Detector
63. "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
64. Completely different carousels Mobile: Flexslider www.woothemes.com/flexslider ! Desktop: Supersized buildinternet.com/project/supersized
65. Code Differences
66. CSS Mobile ! <link rel="stylesheet" href="base.css"> <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"> <link rel="stylesheet" href="flexslider.css" media="screen"> ! Desktop ! <link rel="stylesheet" href="base.css"> <link rel="stylesheet" href="layout.css"> <link rel="stylesheet" href=“option-3.css"> <link rel="stylesheet" href="supersized.css" media="screen"> <link rel="stylesheet" href="supersized.shutter.css" media="screen">
67. CSS Mobile ! <link rel="stylesheet" href="base.css"> <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"> <link rel="stylesheet" href="flexslider.css" media="screen"> ! Desktop ! <link rel="stylesheet" href="base.css"> <link rel="stylesheet" href="layout.css"> <link rel="stylesheet" href=“option-3.css"> <link rel="stylesheet" href="supersized.css" media="screen"> <link rel="stylesheet" href="supersized.shutter.css" media="screen">
68. JS Mobile ! <script src="modernizr.custom.js"></script> <script src="navigation-option-6.js"></script> <script src="jquery.flexslider-min.js"></script> <script src=“bootstrap.min.js"></script> ! Desktop ! <script src="modernizr.custom.js"></script> <script src="navigation-option-6.js"></script> <script src="jquery.easing.min.js"></script> <script src="supersized.3.2.6.js"></script> <script src=“supersized.shutter.js"></script>
69. JS Mobile ! <script src="modernizr.custom.js"></script> <script src="navigation-option-6.js"></script> <script src="jquery.flexslider-min.js"></script> <script src=“bootstrap.min.js"></script> ! Desktop ! <script src="modernizr.custom.js"></script> <script src="navigation-option-6.js"></script> <script src="jquery.easing.min.js"></script> <script src="supersized.3.2.6.js"></script> <script src=“supersized.shutter.js"></script>
70. Mobile ! <img src="images/slideshow-mobile/100.jpg" alt="…" /> ! ! Desktop ! <img src="images/slideshow/100.jpg"> HTML
74. 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
75. github.com/dmolsen/lazyBlock
76. gist.github.com/erunyon/5073909
77. <li> <!--<a href="/the-link/"><img src="the-image.jpg" alt="Alt Text"></a>--> <noscript><img src="the-image.jpg" alt="Alt Text"></noscript> <div class="flex-caption"> <h3>The Title of the Slide</h3> <p>The reason why you should totally click on the slide.</p> <p><a href=“/the-link/" class="more">Read More</a></p> </div> </li>
78. One size does not fit all widths = [400, 800, 1200, 1600] <img data-src="fpo-1600.jpg" alt="Alt Text" src="fpo-1600.jpg"> <img data-src="fpo-1600.jpg" alt="Alt Text" src="fpo-800.jpg"> <img data-src="fpo-1600.jpg" alt="Alt Text" src="fpo-400.jpg">
79. http://www.flickr.com/photos/thomasstrosse/5803681875/
80. IV. In Depth - Notre Dame
81. www.ND.edu
82. Jan 2001 - Aug 2007
83. Jan 2001 - Aug 2007
84. August 2007 - July 2011
85. “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.”
86. 36 KB 2.2 MB (1.7 MB Flash)
87. July 2011 - Feb 2012
88. Feb 2012 - March 2012
89. April 2012 - Present
90. Create an “in-depth” experience that conveys the feeling of visiting campus
91. Mobile Tablet Desktop Phablet
92. UA-Parser
    github.com/tobie/ua-parser
93. $ua->isMobile $ua->isTablet $ua->isDesktop
94. Mobile-Detect
    github.com/serbanghita/Mobile-Detect
95. Long homepage is long x9 x11
96. Cached external feeds
    35 https://github.com/erunyon/FeedCache
97. www.nd.edu/news-and-events/ www.nd.edu/about/ www.nd.edu/academics/ www.nd.edu/admissions/ www.nd.edu/faith-and-service/
99. 2.something iPhone screens tall
    and 12% of the size
102. context features can dictate content
103. 260 KB 2.4 MB 405 KB
104. But what if we didn’t?
105. One small issue with RESS
106. User-Agent: Amazon CloudFront
107. Circling back to the desktop
108. 25 requests 260 KB
109. 132 requests 2.4 MB 117 images
110. The What
111. Reduce the initial download for large screen visitors
112. The Why
113. 132 requests 2.4 MB 117 images
114. News and Events
     24 Images (646.5 KB) Viewed by 21.4% of visitors
115. About
     6 Images (208.3 KB) Viewed by 8.9% of visitors
116. Academics
     14 Images (406.9 KB) Viewed by 6.5% of visitors
117. Admissions
     4 Images (140 KB) Viewed by 4.1% of visitors
118. Faith & Service
     9 Images (328.1 KB) Viewed by 3.5% of visitors
119. Tour Flyout
     26 Images (169 KB) Viewed by 0.25% of visitors
120. The How
121. 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/
122. Approach #2: <div> Doesn’t scale proportionally without javascript
123. Our Solution
     Replace as many images as possible with solid PNG’s and load actual image when necessary.
124. Set Image Properties
     ! fakeImage('/path/to/the/image.jpg', array( 'alt'=>'Description', 'width'=>420, 'height'=>310, 'resize'=>true
     ) );
125. ob_start(); imagepng(
     imagecreatetruecolor($width, $height),
     NULL, 9); $imgdata = 'data:image/png;base64,'.
     base64_encode(ob_get_clean())
     ;
127. Load Stuff
     Load images as user scrolls
     (or exposes the image in other ways)
128. What if javascript is off?
129. <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>
131. A Little Bit o’CSS
     ! .no-js .img-replace {display:none;}
133. The Result 38 requests * 495-639 KB * (down from 130 requests and 2.4 MB) * Varies by day, browser and feature image
134. Load Time Before: 4.9s After: 2.6s * Results from webpagetest.org
135. Initial Trade-Offs 5.1 KB Larger HTML
136. After 1.2s www.webpagetest.org 0.4s Before 0.3s
137. Load Time Before: 4.9s After: 2.6s 1.8s * Results from webpagetest.org
138. …and that makes me happy
139. No optimization 334 GB What was served 182 GB Current setup 114 GB
140. F There’s always room for improvement
141. Keep experimenting
142. Strive for an outstanding experience for all visitors, regardless of device
143. erik runyon
     @erunyon
     weedygarden.net thank you