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.

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

A29a6c1d19522038ed28114c313d5fab?s=128

Erik Runyon

May 22, 2014
Tweet

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%
  7. None
  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
  13. None
  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.
  40. None
  41. III. Carousels - WVU

  42. www.WVU.edu

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

  44. News/Sports

  45. Entertainment

  46. Technology

  47. HigherEd

  48. None
  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/

  53. None
  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

  58. None
  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
  71. None
  72. None
  73. None
  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/

  98. None
  99. 2.something iPhone screens tall and 12% of the size

  100. None
  101. None
  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()) ;
  126. None
  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>
  130. None
  131. A Little Bit o’CSS ! .no-js .img-replace {display:none;}

  132. 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