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.

Transcript

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

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

3. January 7, 2013
   BCS Bowl Game
   

   View Slide

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

   View Slide

5. blogs.nd.edu/nddotedu
   

   View Slide

6. RWD is the default
   

   View Slide

7. Disney.com
   

   View Slide

8. Microsoft.com
   

   View Slide

9. Starbucks.com
   

   View Slide

10. USA.gov
    

    View Slide

11. But it has to be done “right”
    

    View Slide

12. Optimize
    

    View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    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. Images are a huge issue
    

    View Slide

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

    View Slide

22. Original Image
    
    Optimized Image
    
    

    View Slide

23. Art Direction
    

    View Slide

24. Possible
    Upcoming Solutions
    

    View Slide

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

    View Slide

26. 
    
    
    
    
    Accessible text
    
    
    
    
    
    
    
    Accessible text
    
    

    View Slide

27. Customizing Content
    

    View Slide

28. Server-side Detection
    

    View Slide

29. 260 KB
    2.4 MB 405 KB
    

    View Slide

30. 25 requests
    260 KB
    

    View Slide

31. 132 requests
    2.4 MB
    117 images
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

38. July 2013
    Implement lazy-loading
    and partial caching
    

    View Slide

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

    View Slide

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

    View Slide

41. 250 KB
    376 KB 396 KB
    

    View Slide

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

    View Slide

43. www.webpagetest.org
    Before
    After
    

    View Slide

44. Use RWD
    but do so responsibly
    

    View Slide

45. #mobileND
    

    View Slide