Upgrade to Pro — share decks privately, control downloads, hide ads and more …

State of the Platforms: Web

Erik Runyon
October 11, 2013

State of the Platforms: Web

Part of a series for the fall 2013 ND Mobile Summit (http://mobile.nd.edu/summits/fall-2013/) about the state of mobile platforms.

Erik Runyon

October 11, 2013
Tweet

More Decks by Erik Runyon

Other Decks in Education

Transcript

  1. State of the Platforms
    Web
    Erik Runyon
    @erunyon
    #mobileND
    October 2013

    View full-size slide

  2. 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
    2013
    15.5%
    27.4%
    50.9%

    View full-size slide

  3. January 7, 2013
    BCS Bowl Game

    View full-size slide

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

    View full-size slide

  5. blogs.nd.edu/nddotedu

    View full-size slide

  6. RWD is the default

    View full-size slide

  7. Microsoft.com

    View full-size slide

  8. Starbucks.com

    View full-size slide

  9. But it has to be done “right”

    View full-size slide

  10. Disney.com
    Microsoft.com
    Starbucks.com
    USA.gov
    5 MB / 5 MB
    790 KB / 909 KB
    2.8 MB / 2.8 MB
    471 KB / 462 KB
    Mobile / Desktop

    View full-size slide

  11. moto.oakley.com
    • 85.4 MB page weight
    • 471 HTTP requests
    • 2 minutes 45 seconds until loading screen
    replaced with content

    View full-size slide

  12. moto.oakley.com
    • 85.4 MB page weight
    • 471 HTTP requests
    • 2 minutes 45 seconds until loading screen
    replaced with content
    13.6 MB page weight
    285 HTTP requests

    View full-size slide

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

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

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

    View full-size slide

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

  17. Images are a huge issue

    View full-size slide

  18. Third Party Options
    src.sencha.io
    www.resrc.it

    View full-size slide

  19. Original Image

    Optimized Image

    View full-size slide

  20. Art Direction

    View full-size slide

  21. Possible
    Upcoming Solutions

    View full-size slide

  22. src="banner.jpg"
    srcset="banner-HD.jpg 2x,
    banner-phone.jpg 400w,
    banner-phone-HD.jpg 400w 2x
    ">
    srcset

    View full-size slide






  23. Accessible text







    Accessible text

    View full-size slide

  24. Customizing Content

    View full-size slide

  25. Server-side Detection

    View full-size slide

  26. 260 KB
    2.4 MB 405 KB

    View full-size slide

  27. 25 requests
    260 KB

    View full-size slide

  28. 132 requests
    2.4 MB
    117 images

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  35. July 2013
    Implement lazy-loading
    and partial caching

    View full-size slide

  36. Load Images
    as user scrolls
    (or exposes the image in other ways)

    View full-size slide

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

    View full-size slide

  38. 250 KB
    376 KB 396 KB

    View full-size slide

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

    View full-size slide

  40. www.webpagetest.org
    Before
    After

    View full-size slide

  41. Use RWD
    but do so responsibly

    View full-size slide