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.

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

Erik Runyon

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

    View full-size slide

  4. I. Why We Optimize

    View full-size slide

  5. blogs.nd.edu/nddotedu

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

  7. January 7, 2013
    BCS Bowl Game

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

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

    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 sample
    requests
    size
    61
    1.7 MB

    View full-size slide

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

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

    View full-size slide

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

  18. II. Images - BBC News

    View full-size slide

  19. m.bbc.co.uk/news

    View full-size slide

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

    View full-size slide

  21. …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

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

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

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

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

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

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

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

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

    View full-size slide




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



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

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

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

  35. “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

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

    View full-size slide

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

  38. III. Carousels - WVU

    View full-size slide

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

    View full-size slide

  40. Entertainment

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  44. "…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

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

    View full-size slide

  46. Wait, isn’t browser detection evil?

    View full-size slide

  47. wtfmobileweb.com

    View full-size slide

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

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

  50. github.com/dmolsen/Detector

    View full-size slide

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

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

    View full-size slide

  53. Code Differences

    View full-size slide

  54. CSS
    Mobile
    !






    !
    Desktop
    !





    View full-size slide

  55. CSS
    Mobile
    !






    !
    Desktop
    !





    View full-size slide

  56. JS
    Mobile
    !




    !
    Desktop
    !





    View full-size slide

  57. JS
    Mobile
    !




    !
    Desktop
    !





    View full-size slide

  58. Mobile
    !

    !
    !
    Desktop
    !

    HTML

    View full-size slide

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

  60. github.com/dmolsen/lazyBlock

    View full-size slide

  61. gist.github.com/erunyon/5073909

    View full-size slide





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


    View full-size slide

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



    View full-size slide

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

    View full-size slide

  65. IV. In Depth - Notre Dame

    View full-size slide

  66. Jan 2001 - Aug 2007

    View full-size slide

  67. Jan 2001 - Aug 2007

    View full-size slide

  68. August 2007 - July 2011

    View full-size slide

  69. “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

  70. 36 KB
    2.2 MB (1.7 MB Flash)

    View full-size slide

  71. July 2011 - Feb 2012

    View full-size slide

  72. Feb 2012 - March 2012

    View full-size slide

  73. April 2012 - Present

    View full-size slide

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

    View full-size slide

  75. Mobile
    Tablet
    Desktop
    Phablet

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  79. Long homepage
    is long
    x9
    x11

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

  83. context features can dictate content

    View full-size slide

  84. 260 KB
    2.4 MB 405 KB

    View full-size slide

  85. But what if we didn’t?

    View full-size slide

  86. One small issue with RESS

    View full-size slide

  87. User-Agent: Amazon CloudFront

    View full-size slide

  88. Circling back to the desktop

    View full-size slide

  89. 25 requests
    260 KB

    View full-size slide

  90. 132 requests
    2.4 MB
    117 images

    View full-size slide

  91. Reduce the initial download
    for large screen visitors

    View full-size slide

  92. 132 requests
    2.4 MB
    117 images

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  105. What if javascript is off?

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  110. Initial Trade-Offs
    5.1 KB Larger HTML

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  113. …and that makes me happy

    View full-size slide

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

    View full-size slide

  115. F
    There’s always room
    for improvement

    View full-size slide

  116. Keep experimenting

    View full-size slide

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

    View full-size slide

  118. erik runyon
    @erunyon
    weedygarden.net
    thank you

    View full-size slide