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/

Erik Runyon
PRO

July 22, 2013
Tweet

More Decks by Erik Runyon

Other Decks in Technology

Transcript

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

    View Slide

  2. /about/
    Erik Runyon
    Director of Web Communications
    University of Notre Dame
    @erunyon
    weedygarden.net

    View Slide

  3. What We’ll Cover
    I. Why We Optimize
    II. Articles BBC News
    III. Carousels WVU
    IV. In Depth Notre Dame

    View Slide

  4. I. Why We Optimize

    View Slide

  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

    View Slide

  6. View Slide

  7. January 7, 2013
    BCS Bowl Game

    View Slide

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

    View Slide

  9. Developer Poll

    View Slide

  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

    View Slide

  11. http://www.flickr.com/photos/specialkrb/4045683750/
    Dial-up
    EDGE
    3G
    LTE
    56 Kbps
    384 Kbps
    1.2 Mbps
    16+ Mbps

    View Slide

  12. View Slide

  13. View Slide

  14. View Slide

  15. View Slide

  16. View Slide

  17. Erik’s personal
    Bermuda Triangle
    of AT&T suckage

    View Slide

  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)

    View Slide

  19. weedygarden.net

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  23. Dedicated Mobile vs. RWD
    48 schools
    Dedicated mobile 180 KB
    RWD 1.4 MB

    View Slide

  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

    View Slide

  25. II. Articles - BBC News

    View Slide

  26. m.bbc.co.uk/news

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  37. 8 requests
    34 KB
    59 requests
    224 KB

    View Slide




  38. width="640" data-height="360">




    ! ! ! Germany-Turkey diplomatic row erupts
    ! ! !


    21 June 2013




    Germany summons the Turkish ambassador in a row over Turkey's bid for membership of the European Union.











    Germany-Turkey diplomatic row erupts


    2 hours ago




    Germany summons the Turkish ambassador in a row over Turkey's bid for membership of the European Union.




    View Slide




  39. width="640" data-height="360">




    ! ! ! Germany-Turkey diplomatic row erupts
    ! ! !


    21 June 2013




    Germany summons the Turkish ambassador in a row over Turkey's bid for membership of the European Union.











    Germany-Turkey diplomatic row erupts


    2 hours ago




    Germany summons the Turkish ambassador in a row over Turkey's bid for membership of the European Union.




    View Slide



  40. !
    !! ! class="delayed-image-load"
    !
    !! ! data-src="http://path/to/image.jpg"
    !
    !! ! data-width="640" data-height="360">
    !
    !



    !
    !! ! src="http://path/to/image.jpg"
    !
    !! ! datasrc="http://original/path/to/image.jpg"
    !
    !! ! class="image-replace" alt="" width="640" height="360">

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  45. 240px wide
    670px wide
    970px wide
    86.7 KB
    113.9 KB
    134.6 KB

    View Slide

  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.

    View Slide

  47. View Slide

  48. III. Carousels - WVU

    View Slide

  49. www.WVU.edu

    View Slide

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

    View Slide

  51. News/Sports

    View Slide

  52. News/Sports

    View Slide

  53. News/Sports

    View Slide

  54. News/Sports

    View Slide

  55. News/Sports

    View Slide

  56. News/Sports

    View Slide

  57. Entertainment

    View Slide

  58. Entertainment

    View Slide

  59. Entertainment

    View Slide

  60. Entertainment

    View Slide

  61. Technology

    View Slide

  62. Technology

    View Slide

  63. Technology

    View Slide

  64. Technology

    View Slide

  65. HigherEd

    View Slide

  66. HigherEd

    View Slide

  67. HigherEd

    View Slide

  68. HigherEd

    View Slide

  69. HigherEd

    View Slide

  70. HigherEd

    View Slide

  71. HigherEd

    View Slide

  72. HigherEd

    View Slide

  73. HigherEd

    View Slide

  74. HigherEd

    View Slide

  75. HigherEd

    View Slide

  76. HigherEd

    View Slide

  77. HigherEd

    View Slide

  78. HigherEd

    View Slide

  79. HigherEd

    View Slide

  80. View Slide

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

    View Slide

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

    View Slide

  83. Notre Dame

    View Slide

  84. Notre Dame

    View Slide

  85. Notre Dame

    View Slide

  86. Notre Dame

    View Slide

  87. Notre Dame

    View Slide

  88. Notre Dame

    View Slide

  89. Notre Dame

    View Slide

  90. Notre Dame

    View Slide

  91. Notre Dame

    View Slide

  92. Notre Dame

    View Slide

  93. Notre Dame

    View Slide

  94. Notre Dame

    View Slide

  95. Notre Dame

    View Slide

  96. Notre Dame

    View Slide

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

    View Slide

  98. View Slide

  99. View Slide

  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

    View Slide

  101. RESS
    (responsive design + server-side components)
    www.lukew.com/ff/entry.asp?1392

    View Slide

  102. Wait, isn’t browser detection evil?

    View Slide

  103. wtfmobileweb.com

    View Slide

  104. wtfmobileweb.com

    View Slide

  105. wtfmobileweb.com

    View Slide

  106. wtfmobileweb.com

    View Slide

  107. wtfmobileweb.com

    View Slide

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

    View Slide

  109. http://www.flickr.com/photos/dipster1/1403240351/
    WURFL: wurfl.sourceforge.net
    51degrees: 51degrees.mobi
    Device Atlas: deviceatlas.com
    OpenDDR: openddr.org

    View Slide

  110. github.com/dmolsen/Detector

    View Slide

  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

    View Slide

  112. Completely different carousels
    Mobile: Flexslider
    www.woothemes.com/flexslider
    Desktop: Supersized
    buildinternet.com/project/supersized

    View Slide

  113. Code Differences

    View Slide

  114. CSS
    Mobile






    Desktop





    View Slide

  115. CSS
    Mobile






    Desktop





    View Slide

  116. JS
    Mobile




    Desktop





    View Slide

  117. JS
    Mobile




    Desktop





    View Slide

  118. Mobile


    class="flex-caption">… Read More
    class="flex-caption">… Read More
    class="flex-caption">… Read More
    class="flex-caption">… Read More
    class="flex-caption">… Read More


    HTML

    View Slide

  119. View Slide

  120. Desktop

    HTML
    <br/>jQuery(function($){<br/>$.supersized({<br/>slide_interval : 30000,<br/>transition : 1,<br/>transition_speed : 500,<br/>keyboard_nav : 0,<br/>slide_links : 'blank',<br/>slides : [<br/>{image : 'images/slideshow/69.jpg', title : "…", thumb : 'images/slideshow/thumbs/69.jpg'},<br/>{image : 'images/slideshow/64.jpg', title : "…", thumb : 'images/slideshow/thumbs/64.jpg'},<br/>{image : 'images/slideshow/71.jpg', title : "…", thumb : 'images/slideshow/thumbs/71.jpg'},<br/>{image : 'images/slideshow/70.jpg', title : "…", thumb : 'images/slideshow/thumbs/70.jpg'},<br/>{image : 'images/slideshow/72.jpg', title : "…", thumb : 'images/slideshow/thumbs/72.jpg'}<br/>]<br/>});<br/>});<br/>

    View Slide

  121. Images








    HTML

    View Slide

  122. View Slide

  123. HTML
    Controls
















    View Slide

  124. HTML
    Controls








    … Read More















    View Slide

  125. HTML
    Controls








    … Read More















    View Slide

  126. View Slide

  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

    View Slide

  128. github.com/dmolsen/lazyBlock

    View Slide

  129. gist.github.com/erunyon/5073909

    View Slide

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

    View Slide

  131. IV. In Depth - Notre Dame

    View Slide

  132. www.ND.edu

    View Slide

  133. Jan 2001 - Aug 2007

    View Slide

  134. Jan 2001 - Aug 2007

    View Slide

  135. August 2007 - July 2011

    View Slide

  136. August 2007 - July 2011

    View Slide

  137. August 2007 - July 2011

    View Slide

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

    View Slide

  139. 36 KB
    2.2 MB (1.7 MB Flash)

    View Slide

  140. July 2011 - Feb 2012

    View Slide

  141. Feb 2012 - March 2012

    View Slide

  142. April 2012 - Present

    View Slide

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

    View Slide

  144. Mobile
    Tablet
    Desktop

    View Slide

  145. Mobile
    Tablet
    Desktop
    Phablet

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  149. Long homepage
    is long

    View Slide

  150. Long homepage
    is long
    x9
    x11

    View Slide

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

    View Slide

  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/

    View Slide

  153. Long homepage
    is long

    View Slide

  154. Long homepage
    is long

    View Slide

  155. View Slide

  156. View Slide

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

    View Slide

  158. View Slide

  159. View Slide

  160. context features can dictate content

    View Slide

  161. 260 KB
    2.4 MB 405 KB

    View Slide

  162. But what if we didn’t?

    View Slide

  163. One small issue with RESS

    View Slide

  164. User-Agent: Amazon CloudFront

    View Slide

  165. Circling back to the desktop

    View Slide

  166. 25 requests
    260 KB

    View Slide

  167. 132 requests
    2.4 MB
    117 images

    View Slide

  168. The What

    View Slide

  169. Reduce the initial download
    for large screen visitors

    View Slide

  170. The Why

    View Slide

  171. 132 requests
    2.4 MB
    117 images

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  178. The How

    View Slide

  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/

    View Slide

  180. Approach #2:
    Doesn’t scale proportionally without javascript

    View Slide

  181. Our Solution
    Replace as many images as
    possible with solid PNG’s and
    load actual image when
    necessary.

    View Slide

  182. Set Image Properties
    fakeImage('/path/to/the/image.jpg',
    array(
    'alt'=>'Description',
    'width'=>420,
    'height'=>310,
    'resize'=>true
    )
    );

    View Slide

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

    View Slide

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

    View Slide

  185. View Slide

  186. Load Stuff
    Load images as user scrolls
    (or exposes the image in other ways)

    View Slide

  187. What if javascript is off?

    View Slide

  188. 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">

    class="img-noscript"
    src="/path/to/the/image.jpg"
    width="112"
    height="112"
    alt="Description of the image"
    title="Description of the image">

    View Slide

  189. View Slide

  190. A Little Bit o’CSS
    .no-js .img-replace {display:none;}

    View Slide

  191. View Slide

  192. The Result
    38 requests *
    393 KB *
    (down from 130 requests and 2.4 MB)
    * Varies by day and browser

    View Slide

  193. Load Time
    Before: 4.9s
    After: 2.6s
    * Results from webpagetest.org

    View Slide

  194. Initial Trade-Offs
    5.1 KB Larger HTML

    View Slide

  195. www.webpagetest.org
    0.4s
    Before

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  199. …and that makes me happy

    View Slide

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

    View Slide

  201. F
    There’s always room
    for improvement

    View Slide

  202. Keep experimenting

    View Slide

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

    View Slide

  204. erik runyon
    @erunyon
    weedygarden.net
    thank you

    View Slide