Reaching Everyone, Fast at From the Front, 2015

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 From the Front, in Bologna, IT on September 17th, 2015.

Transcript

1. Reaching
   Everyone, Fast
   September 17, 2015 at From the Front
   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 &
   moral standards.”
   http://bit.ly/1pKV0gH
   

   View Slide

10. speed as a weapon
    

    View Slide

11. View Slide

12. Tomáš
    Randus
    Victor

    Cala
    Mladen

    Drmač
    Karel
    Knop
    Kim
    Conger
    

    View Slide

13. Dan Mall Matt Cook
    

    View Slide

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

    View Slide

15. Our internet is not
    their internet.
    

    View Slide

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

    View Slide

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

    View Slide

18. 2169kb
    

    View Slide

19. View Slide

20. Indonesia
    75% are on
    2G or GSM/EDGE
    http://bit.ly/1pKV0gH
    

    View Slide

21. 3G
    Penetration
    Fixed
    Broadband
    16.0%
    0.1%
    

    View Slide

22. View Slide

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

    View Slide

24. But we were the exception, not
    the rule.
    “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
    

    View Slide

25. performant by default
    

    View Slide

26. set a
    performance budget
    

    View Slide

27. View Slide

28. Andy Davies
    @andydavies
    

    View Slide

29. View Slide

30. View Slide

31. View Slide

32. 20% rule
    

    View Slide

33. visually complete
    <= 4000ms
    

    View Slide

34. Culture change
    doesn't happen all
    at once
    

    View Slide

35. https://speakerdeck.com/aemcknig/crafting-performance-alerting-tools
    

    View Slide

36. View Slide

37. View Slide

38. View Slide

39. View Slide

40. View Slide

41. View Slide

42. View Slide

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

    View Slide

44. View Slide

45. View Slide

46. View Slide

47. embrace the pain
    

    View Slide

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

    View Slide

49. View Slide

50. View Slide

51. View Slide

52. View Slide

53. View Slide

54. can’t risk
    performance
    

    View Slide

55. View Slide

56. compress images
    grunt-contrib-imagemin
    

    View Slide

57. progressive JPEGs
    grunt-contrib-imagemin
    

    View Slide

58. imagemin: {
    png: {
    options: {
    optimizationLevel: 7
    },
    files: [
    {
    expand: true,
    cwd: 'source/images/',
    src: ['**/*.png'],
    dest: 'source/images/',
    ext: '.png'
    }
    ]
    },
    jpg: {
    options: {
    progressive: true
    },
    files: [
    {
    expand: true,
    cwd: 'source/images/',
    src: ['**/*.jpg'],
    dest: 'source/images/',
    ext: '.jpg'
    }
    ]
    }
    

    View Slide

59. options: {
    progressive: true
    },
    imagemin: {
    png: {
    options: {
    optimizationLevel: 7
    },
    files: [
    {
    expand: true,
    cwd: 'source/images/',
    src: ['**/*.png'],
    dest: 'source/images/',
    ext: '.png'
    }
    ]
    },
    jpg: {
    options: {
    progressive: true
    },
    files: [
    {
    expand: true,
    cwd: 'source/images/',
    src: ['**/*.jpg'],
    dest: 'source/images/',
    ext: '.jpg'
    }
    ]
    }
    

    View Slide

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

    View Slide

61. eliminate unused CSS
    grunt-uncss
    

    View Slide

62. inline critical CSS
    grunt-penthouse
    

    View Slide

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

64. SVG workflow
    grunt-svgmin
    

    View Slide

65. h/t to @zachleat and @lara_hogan
    

    View Slide

66. Original SVG: 10,379 bytes
    1 Decimal Place: 7,990 bytes
    Total savings: 9,062 bytes
    (87%)
    Merged Paths: 5,813 bytes
    SVGO: 4,705 bytes
    GZip: 1,317 bytes
    

    View Slide

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

    View Slide

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

    View Slide

69. SVG workflow
    grunt-svgmin
    grunt-svgstore
    

    View Slide

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

    View Slide

71. aria-hidden="true">
    
    
    

    View Slide

72. 20 icons = 2.5kb
    

    View Slide

73. 125 bytes
    

    View Slide

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

75. set it.
    forget it.
    

    View Slide

76. raises the floor
    

    View Slide

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

    View Slide

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

    View Slide

79. View Slide

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

    View Slide

81. View Slide

82. <br/>var rfe = {};<br/>if ('querySelector' in document && 'localStorage' in window &&<br/>'addEventListener' in window) {<br/>} else {false};<br/>
    document.documentElement.className += ' mustard’;
    

    View Slide

83. rfe.cutsMustard = true;
    document.documentElement.className += ' mustard’;
    <br/>var rfe = {};<br/>if ('querySelector' in document && 'localStorage' in window &&<br/>'addEventListener' in window)<br/>} else {false};<br/>
    

    View Slide

84. loadCSS('../../css/fonts.css?1410230753');
    loadJS('../../js/main.js?1410230753');
    <br/>var rfe = {};<br/>if ('querySelector' in document && 'localStorage' in<br/>window &&<br/>'addEventListener' in window)<br/>document.documentElement.className += ' mustard’;<br/>} else {false};<br/>
    

    View Slide

85. View Slide

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

    View Slide

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

    View Slide

88. dynamic range
    

    View Slide

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

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

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

    View Slide

92. Large: 33 reqs, 781.5kb
    Small: 23 reqs, 418kb
    Core: 4 reqs, 22.2kb
    35x
    

    View Slide

93. “
    

    View Slide

94. 95%
    

    View Slide

95. We believe that Africa’s internet
    evolution story will be no different
    from the rest of the world. We
    listen to music. We watch movies.
    We play games online.
    “
    https:/
    /angani.co/blog/its-not-how-much-fibre-you-have-its-what-you-do-with-it/
    

    View Slide

96. the web is as fast as
    we choose to make it
    

    View Slide

97. performant
    by default
    

    View Slide

98. bridge the gap
    

    View Slide

99. performance
    dictates
    access
    

    View Slide

100. The internet
     changes everything.
     

     View Slide

101. thank you
     September 17, 2015 at From the Front
     Tim Kadlec

     @tkadlec
     tim@timkadlec.com
     

     View Slide