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

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 full-size slide

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

    View full-size slide

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

    View full-size slide

  4. I. Why We Optimize

    View full-size 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 full-size slide

  6. January 7, 2013
    BCS Bowl Game

    View full-size slide

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

    View full-size slide

  8. Developer Poll

    View full-size slide

  9. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  12. 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 full-size slide

  13. weedygarden.net

    View full-size slide

  14. 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 full-size slide

  15. 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 full-size slide

  16. 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 full-size slide

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

    View full-size slide

  18. 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 full-size slide

  19. II. Articles - BBC News

    View full-size slide

  20. m.bbc.co.uk/news

    View full-size slide

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

    View full-size slide

  22. …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 full-size slide

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

    View full-size slide

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

    View full-size slide

  25. 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 full-size slide

  26. 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 full-size slide

  27. 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 full-size slide

  28. 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 full-size slide

  29. 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 full-size slide

  30. 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 full-size slide

  31. 8 requests
    34 KB
    59 requests
    224 KB

    View full-size slide




  32. 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 full-size slide




  33. 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 full-size slide



  34. !
    !! ! 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  38. “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 full-size slide

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

    View full-size slide

  40. 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 full-size slide

  41. III. Carousels - WVU

    View full-size slide

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

    View full-size slide

  43. Entertainment

    View full-size slide

  44. Entertainment

    View full-size slide

  45. Entertainment

    View full-size slide

  46. Entertainment

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  50. "…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 full-size slide

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

    View full-size slide

  52. Wait, isn’t browser detection evil?

    View full-size slide

  53. wtfmobileweb.com

    View full-size slide

  54. wtfmobileweb.com

    View full-size slide

  55. wtfmobileweb.com

    View full-size slide

  56. wtfmobileweb.com

    View full-size slide

  57. wtfmobileweb.com

    View full-size slide

  58. 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 full-size slide

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

    View full-size slide

  60. github.com/dmolsen/Detector

    View full-size slide

  61. "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 full-size slide

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

    View full-size slide

  63. Code Differences

    View full-size slide

  64. CSS
    Mobile






    Desktop





    View full-size slide

  65. CSS
    Mobile






    Desktop





    View full-size slide

  66. JS
    Mobile




    Desktop





    View full-size slide

  67. JS
    Mobile




    Desktop





    View full-size slide

  68. 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 full-size slide

  69. 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 full-size slide

  70. HTML
    Controls
















    View full-size slide

  71. HTML
    Controls








    … Read More















    View full-size slide

  72. HTML
    Controls








    … Read More















    View full-size slide

  73. 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 full-size slide

  74. github.com/dmolsen/lazyBlock

    View full-size slide

  75. gist.github.com/erunyon/5073909

    View full-size slide

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

    View full-size slide

  77. IV. In Depth - Notre Dame

    View full-size slide

  78. Jan 2001 - Aug 2007

    View full-size slide

  79. Jan 2001 - Aug 2007

    View full-size slide

  80. August 2007 - July 2011

    View full-size slide

  81. August 2007 - July 2011

    View full-size slide

  82. August 2007 - July 2011

    View full-size slide

  83. “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 full-size slide

  84. 36 KB
    2.2 MB (1.7 MB Flash)

    View full-size slide

  85. July 2011 - Feb 2012

    View full-size slide

  86. Feb 2012 - March 2012

    View full-size slide

  87. April 2012 - Present

    View full-size slide

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

    View full-size slide

  89. Mobile
    Tablet
    Desktop

    View full-size slide

  90. Mobile
    Tablet
    Desktop
    Phablet

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  94. Long homepage
    is long

    View full-size slide

  95. Long homepage
    is long
    x9
    x11

    View full-size slide

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

    View full-size slide

  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/

    View full-size slide

  98. Long homepage
    is long

    View full-size slide

  99. Long homepage
    is long

    View full-size slide

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

    View full-size slide

  101. context features can dictate content

    View full-size slide

  102. 260 KB
    2.4 MB 405 KB

    View full-size slide

  103. But what if we didn’t?

    View full-size slide

  104. One small issue with RESS

    View full-size slide

  105. User-Agent: Amazon CloudFront

    View full-size slide

  106. Circling back to the desktop

    View full-size slide

  107. 25 requests
    260 KB

    View full-size slide

  108. 132 requests
    2.4 MB
    117 images

    View full-size slide

  109. Reduce the initial download
    for large screen visitors

    View full-size slide

  110. 132 requests
    2.4 MB
    117 images

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  117. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  124. What if javascript is off?

    View full-size slide

  125. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  129. Initial Trade-Offs
    5.1 KB Larger HTML

    View full-size slide

  130. www.webpagetest.org
    0.4s
    Before

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  134. …and that makes me happy

    View full-size slide

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

    View full-size slide

  136. F
    There’s always room
    for improvement

    View full-size slide

  137. Keep experimenting

    View full-size slide

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

    View full-size slide

  139. erik runyon
    @erunyon
    weedygarden.net
    thank you

    View full-size slide