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

State of the Platforms: Web

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.

A29a6c1d19522038ed28114c313d5fab?s=128

Erik Runyon
PRO

October 11, 2013
Tweet

Transcript

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

    2013
  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%
  3. January 7, 2013 BCS Bowl Game

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

  5. blogs.nd.edu/nddotedu

  6. RWD is the default

  7. Disney.com

  8. Microsoft.com

  9. Starbucks.com

  10. USA.gov

  11. But it has to be done “right”

  12. Optimize

  13. 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
  14. moto.oakley.com • 85.4 MB page weight • 471 HTTP requests

    • 2 minutes 45 seconds until loading screen replaced with content
  15. 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
  16. 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
  17. 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
  18. Dedicated Mobile vs. RWD 48 schools Dedicated mobile 180 KB

    RWD 1.4 MB
  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
  20. Images are a huge issue

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

  22. Original Image <img src='http://www.nd.edu/large.jpg' alt='My large image' /> Optimized Image

    <img src='http://src.sencha.io/http://www.nd.edu/large.jpg' alt='My large image'/>
  23. Art Direction

  24. Possible Upcoming Solutions

  25. <img alt="The Banner Image" src="banner.jpg" srcset="banner-HD.jpg 2x, banner-phone.jpg 400w, banner-phone-HD.jpg

    400w 2x "> srcset
  26. <picture width="500" height="500"> <source media="(min-width: 45em)" src="large.jpg"> <source media="(min-width: 18em)"

    src="med.jpg"> <source src="small.jpg"> <img src="small.jpg" alt=""> <p>Accessible text</p> </picture> <picture> <picture width="500" height="500"> <source media="(min-width: 45em)" srcset="large-1.jpg 1x, large-2.jpg 2x"> <source media="(min-width: 18em)" srcset="med-1.jpg 1x, med-2.jpg 2x"> <source srcset="small-1.jpg 1x, small-2.jpg 2x"> <img src="small-1.jpg" alt=""> <p>Accessible text</p> </picture>
  27. Customizing Content

  28. Server-side Detection

  29. 260 KB 2.4 MB 405 KB

  30. 25 requests 260 KB

  31. 132 requests 2.4 MB 117 images

  32. News and Events 24 Images (646.5 KB) Viewed by 21.4%

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

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

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

  36. Faith & Service 9 Images (328.1 KB) Viewed by 3.5%

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

    visitors
  38. July 2013 Implement lazy-loading and partial caching

  39. Load Images as user scrolls (or exposes the image in

    other ways)
  40. The Result 38 requests * 376 KB * (down from

    130 requests and 2.4 MB) * Varies by day and browser
  41. 250 KB 376 KB 396 KB

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

  43. www.webpagetest.org Before After

  44. Use RWD but do so responsibly

  45. #mobileND