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
3. “The internet doesn’t change anything.
4. The internet changes everything.
9. Iran 3G connections are “…against human and moral standards.” http://bit.ly/1pKV0gH
10. performance as a weapon
11. Tomáš Randus Victor
 Cala Mladen
 Drmač Karel Knop Kim Conger
12. Dan Mall Matt Cook
13. 0 3000 6000 9000 12000 Iran Pakistan Belarus Azerbaijan Armenia Bosnia Macedonia Georgia Kazakhstan Serbia Ukraine Russia US Czech Republic
14. Our internet is not their internet.
15. 0 3000 6000 9000 12000 Iran Pakistan Belarus Azerbaijan Armenia Bosnia Macedonia Georgia Kazakhstan Serbia Ukraine Russia US Czech Republic
16. 0 3000 6000 9000 12000 Iran Pakistan Belarus Azerbaijan Armenia Bosnia Macedonia Georgia Kazakhstan Serbia Ukraine Russia US Czech Republic 9.4x
17. 0.1% 16.0% 3G Penetration Fixed Broadband
19. “The future is already here—it’s just not very evenly distributed. William Gibson
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.
21. performant by default
22. set a performance budget
24. Andy Davies @andydavies
27. 20% rule
28. visually complete <= 4000ms
29. https://flic.kr/p/61tcLS
37. http://bit.ly/1sgKKK3
41. humanize performance
42. https://flic.kr/p/8TzcGG
48. can’t risk performance
50. compress images grunt-contrib-imagemin
51. progressive JPEGs grunt-contrib-imagemin
52. ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! options: {! ! ! ! progressive: true! ! ! },! ! ! ! ! ! ! ! ! ! ! imagemin ! png ! ! ! ! ! ! ! },! ! ! ! ! ! {! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! }! ! ! ]! ! },! ! jpg ! ! ! ! ! ! ! ! {! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! }! ! ! ]! ! }! },
53. concatenate & minimize JS grunt-contrib-concat grunt-contrib-uglify
54. eliminate unused CSS grunt-uncss
55. inline critical CSS grunt-penthouse
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! ! },! ! . . .! },
57. SVG workflow grunt-svgmin
59. svgmin: {! ! options: {! ! ! plugins: [! ! ! ! {! ! ! ! ! cleanupNumericValues: {! ! ! ! ! ! floatPrecision: 1! ! ! ! ! }! ! ! ! }! ! ! ]! ! },! ! dist: {! ! ! files: [! ! ! ! {! ! ! ! ! expand: true,! ! ! ! ! cwd: 'source/images/',! ! ! ! ! src: ['**/*.svg'],! ! ! ! ! dest: 'source/images/'! ! ! ! }! ! ! ]! ! }! }
60. svgmin ! options ! ! ! ! ! ! ! ! ! },! ! dist ! ! ! ! ! {! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! }! ! ! ]! ! }! }
61. SVG workflow grunt-svgmin grunt-svgstore
62. <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-2z"/>! !</symbol>! !....! </svg>
63. <svg class="icon icon-add-to-list" aria- hidden="true">! <use xlink:href="#shape-add-to-list"></use>! </svg>
64. 20 icons = 2.5kb
65. 125 bytes
66. svgstore: {! !options: {! !!prefix: 'shape-', // this prefixes each symbol ID! !!svg: {! !!!'class': 'svgmap'! !!}! !},! !default: {! !!files: {! !!!'public/svg-icons.svg': ['source/images/svg- icons/*.svg'],! !!}! !}! },
67. set it. forget it.
68. raises the floor
69. https://flic.kr/p/8TzcGG
70. • No 3G • No Wi-Fi • Non-touch • 240 x 320 • 64MB internal
72. Older browsers Polyfills and frameworks for all the things Full-featured site
78. go vanilla https://flic.kr/p/5RTHdW
79. jQuery 2.1.1: 29,558 bytes Entire JS for RFE/RL: 11,787 bytes Total savings: 17,771 bytes (60%)
80. dynamic range
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
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
83. Large: 33 reqs, 781.5kb Small: 23 reqs, 418kb Core: 4 reqs, 22.2kb
85. x
86. performant by default
87. bridge the gap
88. The internet changes everything.
89. thank you September 16, 2014 at Velocity NY, 2014 ! Tim Kadlec
 @tkadlec tim@timkadlec.com