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
3. “The internet doesn’t change anything.
4. The internet changes everything.
9. Iran 3G connections are “…against human & moral standards.” http://bit.ly/1pKV0gH
10. speed as a weapon
12. Tomáš Randus Victor
 Cala Mladen
 Drmač Karel Knop Kim Conger
13. Dan Mall Matt Cook
14. 0 3000 6000 9000 12000 Iran Pakistan Belarus Azerbaijan Armenia Bosnia Macedonia Georgia Kazakhstan Serbia Ukraine Russia US Czech Republic
15. Our internet is not their internet.
16. 0 3000 6000 9000 12000 Iran Pakistan Belarus Azerbaijan Armenia Bosnia Macedonia Georgia Kazakhstan Serbia Ukraine Russia US Czech Republic
17. 0 3000 6000 9000 12000 Iran Pakistan Belarus Azerbaijan Armenia Bosnia Macedonia Georgia Kazakhstan Serbia Ukraine Russia US Czech Republic 9.4x
18. 2169kb
20. Indonesia 75% are on 2G or GSM/EDGE http://bit.ly/1pKV0gH
21. 3G Penetration Fixed Broadband 16.0% 0.1%
23. “The future is already here —it’s just not very evenly distributed. William Gibson
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
25. performant by default
26. set a performance budget
28. Andy Davies @andydavies
32. 20% rule
33. visually complete <= 4000ms
34. Culture change doesn't happen all at once
35. https://speakerdeck.com/aemcknig/crafting-performance-alerting-tools
43. http://bit.ly/1sgKKK3
47. embrace the pain
48. https://flic.kr/p/8TzcGG
54. can’t risk performance
56. compress images grunt-contrib-imagemin
57. progressive JPEGs grunt-contrib-imagemin
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' } ] }
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' } ] }
60. concatenate & minimize JS grunt-contrib-concat grunt-contrib-uglify
61. eliminate unused CSS grunt-uncss
62. inline critical CSS grunt-penthouse
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 }, . . . },
64. SVG workflow grunt-svgmin
65. h/t to @zachleat and @lara_hogan
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
67. svgmin: { options: { plugins: [ { cleanupNumericValues: { floatPrecision: 1 } } ] }, dist: { files: [ { expand: true, cwd: 'source/images/', src: ['**/*.svg'], dest: 'source/images/' } ] } }
68. plugins: [ { cleanupNumericValues: { floatPrecision: 1 } } ] svgmin: { options: { plugins: [ { cleanupNumericValues: { floatPrecision: 1 } } ] }, dist: { files: [ { expand: true, cwd: 'source/images/', src: ['**/*.svg'], dest: 'source/images/' } ] } }
69. SVG workflow grunt-svgmin grunt-svgstore
70. <svg class="svgmap"> <symbol viewBox="0 0 16 17" id="shape- add-to-list"> <title>add-to-list</title> <path class=“add-to-list" d="M0 0h12v3H0zm12 7V5H0v3h10V7zm-5 6v-2h3v-1H0v3zm6-1V9h-2v3H8v2h3v3h2v-3h3v-2 z"/> </symbol> .... </svg>
71. <svg class="icon icon-add-to-list" aria-hidden="true"> <use xlink:href="#shape-add-to- list"></use> </svg>
72. 20 icons = 2.5kb
73. 125 bytes
74. svgstore: { options: { prefix: 'shape-', // this prefixes each symbol ID svg: { 'class': 'svgmap' } }, default: { files: { 'public/svg-icons.svg': ['source/images/ svg-icons/*.svg'], } } },
75. set it. forget it.
76. raises the floor
77. https://flic.kr/p/8TzcGG
78. • No 3G • No Wi-Fi • Non-touch • 240 x 320 • 64MB internal
80. Older browsers Polyfills and frameworks for all the things Full-featured site
82. <script> var rfe = {}; if ('querySelector' in document && 'localStorage' in window && 'addEventListener' in window) { } else {false}; </script> document.documentElement.className += ' mustard’;
83. rfe.cutsMustard = true; document.documentElement.className += ' mustard’; <script> var rfe = {}; if ('querySelector' in document && 'localStorage' in window && 'addEventListener' in window) } else {false}; </script>
84. loadCSS('../../css/fonts.css?1410230753'); loadJS('../../js/main.js?1410230753'); <script> var rfe = {}; if ('querySelector' in document && 'localStorage' in window && 'addEventListener' in window) document.documentElement.className += ' mustard’; } else {false}; </script>
86. go vanilla https://flic.kr/p/5RTHdW
87. jQuery 2.1.1: 29,558 bytes Entire JS for RFE/RL: 11,787 bytes Total savings: 17,771 bytes (60%)
88. dynamic range
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
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
91. Large: 33 reqs, 781.5kb Small: 23 reqs, 418kb Core: 4 reqs, 22.2kb
92. Large: 33 reqs, 781.5kb Small: 23 reqs, 418kb Core: 4 reqs, 22.2kb 35x
93. “
94. 95%
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/
96. the web is as fast as we choose to make it
97. performant by default
98. bridge the gap
99. performance dictates access
100. The internet changes everything.
101. thank you September 17, 2015 at From the Front Tim Kadlec
 @tkadlec tim@timkadlec.com