$30 off During Our Annual Pro Sale. View Details »

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.

Erik Runyon
PRO

May 22, 2014
Tweet

More Decks by Erik Runyon

Other Decks in Technology

Transcript

  1. Before the @mq
    Erik Runyon
    @erunyon
    HEWeb MI
    May 2014

    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. Images BBC News
    III. Carousels WVU
    IV. In Depth Notre Dame

    View Slide

  4. I. Why We Optimize

    View Slide

  5. blogs.nd.edu/nddotedu

    View Slide

  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%

    View Slide

  7. View Slide

  8. January 7, 2013
    BCS Bowl Game

    View Slide

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

    View Slide

  10. commencement.ND.edu
    mobile traffic
    Average Month: 22-30%
    Commencement Weekend: 58%

    View Slide

  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.

    View Slide

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

    View Slide

  13. View Slide

  14. Erik’s personal
    Bermuda Triangle
    of AT&T suckage
    Parents
    In-Laws

    View Slide

  15. weedygarden.net

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

  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

    View Slide

  20. II. Images - BBC News

    View Slide

  21. m.bbc.co.uk/news

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  32. 8 requests
    34 KB
    59 requests
    224 KB
    No Mustard Mustard

    View 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 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 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 Slide

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

    View Slide

  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

    View Slide

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

    View Slide

  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.

    View Slide

  40. View Slide

  41. III. Carousels - WVU

    View Slide

  42. www.WVU.edu

    View Slide

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

    View Slide

  44. News/Sports

    View Slide

  45. Entertainment

    View Slide

  46. Technology

    View Slide

  47. HigherEd

    View Slide

  48. View Slide

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

    View Slide

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

    View Slide

  51. Notre Dame

    View Slide

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

    View Slide

  53. View Slide

  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

    View Slide

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

    View Slide

  56. Wait, isn’t browser detection evil?

    View Slide

  57. GIF

    View Slide

  58. View Slide

  59. wtfmobileweb.com

    View Slide

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

    View Slide

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

    View Slide

  62. github.com/dmolsen/Detector

    View Slide

  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

    View Slide

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

    View Slide

  65. Code Differences

    View Slide

  66. CSS
    Mobile
    !






    !
    Desktop
    !





    View Slide

  67. CSS
    Mobile
    !






    !
    Desktop
    !





    View Slide

  68. JS
    Mobile
    !




    !
    Desktop
    !





    View Slide

  69. JS
    Mobile
    !




    !
    Desktop
    !





    View Slide

  70. Mobile
    !

    !
    !
    Desktop
    !

    HTML

    View Slide

  71. View Slide

  72. View Slide

  73. View Slide

  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

    View Slide

  75. github.com/dmolsen/lazyBlock

    View Slide

  76. gist.github.com/erunyon/5073909

    View Slide





  77. The Title of the Slide
    The reason why you should totally click on the slide.
    Read More


    View Slide

  78. One size does not fit all
    widths = [400, 800, 1200, 1600]



    View Slide

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

    View Slide

  80. IV. In Depth - Notre Dame

    View Slide

  81. www.ND.edu

    View Slide

  82. Jan 2001 - Aug 2007

    View Slide

  83. Jan 2001 - Aug 2007

    View Slide

  84. August 2007 - July 2011

    View Slide

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

    View Slide

  86. 36 KB
    2.2 MB (1.7 MB Flash)

    View Slide

  87. July 2011 - Feb 2012

    View Slide

  88. Feb 2012 - March 2012

    View Slide

  89. April 2012 - Present

    View Slide

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

    View Slide

  91. Mobile
    Tablet
    Desktop
    Phablet

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  95. Long homepage
    is long
    x9
    x11

    View Slide

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

    View 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 Slide

  98. View Slide

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

    View Slide

  100. View Slide

  101. View Slide

  102. context features can dictate content

    View Slide

  103. 260 KB
    2.4 MB 405 KB

    View Slide

  104. But what if we didn’t?

    View Slide

  105. One small issue with RESS

    View Slide

  106. User-Agent: Amazon CloudFront

    View Slide

  107. Circling back to the desktop

    View Slide

  108. 25 requests
    260 KB

    View Slide

  109. 132 requests
    2.4 MB
    117 images

    View Slide

  110. The What

    View Slide

  111. Reduce the initial download
    for large screen visitors

    View Slide

  112. The Why

    View Slide

  113. 132 requests
    2.4 MB
    117 images

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  120. The How

    View Slide

  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/

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  126. View Slide

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

    View Slide

  128. What if javascript is off?

    View Slide

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

  130. View Slide

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

    View Slide

  132. View Slide

  133. The Result
    38 requests *
    495-639 KB *
    (down from 130 requests and 2.4 MB)
    * Varies by day, browser and feature image

    View Slide

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

    View Slide

  135. Initial Trade-Offs
    5.1 KB Larger HTML

    View Slide

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

    View Slide

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

    View Slide

  138. …and that makes me happy

    View Slide

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

    View Slide

  140. F
    There’s always room
    for improvement

    View Slide

  141. Keep experimenting

    View Slide

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

    View Slide

  143. erik runyon
    @erunyon
    weedygarden.net
    thank you

    View Slide