Reaching Everyone, Fast at Velocity NY, 2014

Mobile subscriptions continue to increase at an incredible rate, with most of that growth coming from emerging economies such as Africa and Southeast Asia. These areas are dominated by slow, intermittent connectivity and low-end devices. If companies aren’t already taking steps to ensure they are able to reach these new audiences, they soon will be.

Presented at Velocity NY, in New York City, NY on September 16th, 2014.

Transcript

1. Reaching
   Everyone, Fast
   September 16, 2014 at Velocity NY, 2014
   !
   Tim Kadlec

   @tkadlec
   tim@timkadlec.com
   

   View Slide

2. View Slide

3. “The internet doesn’t change
   anything.
   

   View Slide

4. The internet changes
   everything.
   

   View Slide

5. View Slide

6. View Slide

7. View Slide

8. View Slide

9. Iran
   3G connections are
   “…against human and
   moral standards.”
   http://bit.ly/1pKV0gH
   

   View Slide

10. performance as a weapon
    

    View Slide

11. Tomáš
    Randus
    Victor

    Cala
    Mladen

    Drmač
    Karel
    Knop
    Kim
    Conger
    

    View Slide

12. Dan Mall Matt Cook
    

    View Slide

13. 0
    3000
    6000
    9000
    12000
    Iran
    Pakistan
    Belarus
    Azerbaijan
    Armenia
    Bosnia
    Macedonia
    Georgia
    Kazakhstan
    Serbia
    Ukraine
    Russia
    US
    Czech Republic
    

    View Slide

14. Our internet is not
    their internet.
    

    View Slide

15. 0
    3000
    6000
    9000
    12000
    Iran
    Pakistan
    Belarus
    Azerbaijan
    Armenia
    Bosnia
    Macedonia
    Georgia
    Kazakhstan
    Serbia
    Ukraine
    Russia
    US
    Czech Republic
    

    View Slide

16. 0
    3000
    6000
    9000
    12000
    Iran
    Pakistan
    Belarus
    Azerbaijan
    Armenia
    Bosnia
    Macedonia
    Georgia
    Kazakhstan
    Serbia
    Ukraine
    Russia
    US
    Czech Republic
    9.4x
    

    View Slide

17. 0.1% 16.0%
    3G
    Penetration
    Fixed
    Broadband
    

    View Slide

18. View Slide

19. “The future is already here—it’s
    just not very evenly distributed.
    William Gibson
    

    View Slide

20. “That was a pretty harsh experience for
    us. We’d been building an app for users
    like us.
    !
    But we were the exception, not the rule
    Ragavan Srinivasan
    Facebook’s Android project manager
    But we were the exception, not the rule.
    

    View Slide

21. performant by default
    

    View Slide

22. set a
    performance budget
    

    View Slide

23. View Slide

24. Andy Davies
    @andydavies
    

    View Slide

25. View Slide

26. View Slide

27. 20% rule
    

    View Slide

28. visually complete <= 4000ms
    

    View Slide

29. https://flic.kr/p/61tcLS
    

    View Slide

30. View Slide

31. View Slide

32. View Slide

33. View Slide

34. View Slide

35. View Slide

36. View Slide

37. http://bit.ly/1sgKKK3
    

    View Slide

38. View Slide

39. View Slide

40. View Slide

41. humanize
    performance
    

    View Slide

42. https://flic.kr/p/8TzcGG
    

    View Slide

43. View Slide

44. View Slide

45. View Slide

46. View Slide

47. View Slide

48. can’t risk
    performance
    

    View Slide

49. View Slide

50. compress images
    grunt-contrib-imagemin
    

    View Slide

51. progressive JPEGs
    grunt-contrib-imagemin
    

    View Slide

52. !
    !
    !
    !
    !
    !
    !
    !
    !
    !
    !
    !
    !
    !
    !
    !
    ! ! options: {!
    ! ! ! progressive: true!
    ! ! },!
    !
    !
    !
    !
    !
    !
    !
    !
    !
    !
    imagemin
    ! png
    ! !
    ! ! !
    ! ! },!
    ! !
    ! ! ! {!
    ! ! ! !
    ! ! ! !
    ! ! ! !
    ! ! ! !
    ! ! ! !
    ! ! ! }!
    ! ! ]!
    ! },!
    ! jpg
    !
    !
    !
    ! !
    ! ! ! {!
    ! ! ! !
    ! ! ! !
    ! ! ! !
    ! ! ! !
    ! ! ! !
    ! ! ! }!
    ! ! ]!
    ! }!
    },
    

    View Slide

53. concatenate & minimize JS
    grunt-contrib-concat
    grunt-contrib-uglify
    

    View Slide

54. eliminate unused CSS
    grunt-uncss
    

    View Slide

55. inline critical CSS
    grunt-penthouse
    

    View Slide

56. penthouse: {!
    ! home : {!
    ! ! outfile : 'public/css/critical-home.css',!
    ! ! css : 'public/css/style.css',!
    ! ! url : ‘http://rfe.dev/public/patterns/04-pages-00-homepage/!
    ! ! ! ! ! ! ! 04-pages-00-homepage.html?pl=false',!
    ! ! width : 1300,!
    ! ! height : 900!
    ! },!
    ! article : {!
    ! ! outfile : 'public/css/critical-article.css',!
    ! ! css : 'public/css/style.css',!
    ! ! url : ‘http://rfe.dev/public/patterns/04-pages-02-article/04-!
    ! ! ! ! ! ! ! pages-02-article.html?pl=false',!
    ! ! width : 1300,!
    ! ! height : 900!
    ! },!
    ! . . .!
    },
    

    View Slide

57. SVG workflow
    grunt-svgmin
    

    View Slide

58. View Slide

59. svgmin: {!
    ! options: {!
    ! ! plugins: [!
    ! ! ! {!
    ! ! ! ! cleanupNumericValues: {!
    ! ! ! ! ! floatPrecision: 1!
    ! ! ! ! }!
    ! ! ! }!
    ! ! ]!
    ! },!
    ! dist: {!
    ! ! files: [!
    ! ! ! {!
    ! ! ! ! expand: true,!
    ! ! ! ! cwd: 'source/images/',!
    ! ! ! ! src: ['**/*.svg'],!
    ! ! ! ! dest: 'source/images/'!
    ! ! ! }!
    ! ! ]!
    ! }!
    }
    

    View Slide

60. svgmin
    ! options
    ! !
    !
    !
    !
    !
    !
    !
    ! },!
    ! dist
    ! !
    ! ! ! {!
    ! ! ! !
    ! ! ! !
    ! ! ! !
    ! ! ! !
    ! ! ! }!
    ! ! ]!
    ! }!
    }
    

    View Slide

61. SVG workflow
    grunt-svgmin
    grunt-svgstore
    

    View Slide

62. !
    !!
    !!add-to-list!
    !!!!!!!!!d="M0 0h12v3H0zm12 7V5H0v3h10V7zm-5
    6v-2h3v-1H0v3zm6-1V9h-2v3H8v2h3v3h2v-3h3v-2z"/>!
    !!
    !....!
    
    

    View Slide

63. hidden="true">!
    !
    
    

    View Slide

64. 20 icons = 2.5kb
    

    View Slide

65. 125 bytes
    

    View Slide

66. svgstore: {!
    !options: {!
    !!prefix: 'shape-', // this prefixes each symbol ID!
    !!svg: {!
    !!!'class': 'svgmap'!
    !!}!
    !},!
    !default: {!
    !!files: {!
    !!!'public/svg-icons.svg': ['source/images/svg-
    icons/*.svg'],!
    !!}!
    !}!
    },
    

    View Slide

67. set it.
    forget it.
    

    View Slide

68. raises the floor
    

    View Slide

69. https://flic.kr/p/8TzcGG
    

    View Slide

70. • No 3G
    • No Wi-Fi
    • Non-touch
    • 240 x 320
    • 64MB internal
    

    View Slide

71. View Slide

72. Older browsers
    Polyfills and frameworks for all the things
    Full-featured site
    

    View Slide

73. View Slide

74. View Slide

75. View Slide

76. View Slide

77. View Slide

78. go vanilla
    https://flic.kr/p/5RTHdW
    

    View Slide

79. jQuery 2.1.1: 29,558 bytes
    Entire JS for RFE/RL: 11,787 bytes
    Total savings: 17,771 bytes
    (60%)
    

    View Slide

80. dynamic range
    

    View Slide

81. http://bit.ly/1slPLVt
    Site Dynamic Range Smallest Size (KB) Largest Size (KB)
    google.com 40 8 305
    facebook.com 34 7 241
    youtube.com 21 24 517
    yahoo.com 13 34 444
    baidu.com 9 8 68
    wikipedia.org 1 100 100
    live.com 55 5 271
    qq.com 5 478 2,271
    amazon.com 154 14 2,131
    taobao.com 37 40 1,474
    

    View Slide

82. http://bit.ly/1slPLVt
    Site Dynamic Range Smallest Size (KB) Largest Size (KB)
    google.com 40 8 305
    facebook.com 34 7 241
    youtube.com 21 24 517
    yahoo.com 13 34 444
    baidu.com 9 8 68
    wikipedia.org 1 100 100
    live.com 55 5 271
    qq.com 5 478 2,271
    amazon.com 154 14 2,131
    taobao.com 37 40 1,474
    27.5x
    

    View Slide

83. Large: 33 reqs, 781.5kb
    Small: 23 reqs, 418kb
    Core: 4 reqs, 22.2kb
    

    View Slide

84. View Slide

85. x
    

    View Slide

86. performant by default
    

    View Slide

87. bridge the gap
    

    View Slide

88. The internet changes
    everything.
    

    View Slide

89. thank you
    September 16, 2014 at Velocity NY, 2014
    !
    Tim Kadlec

    @tkadlec
    tim@timkadlec.com
    

    View Slide