Reaching Everyone, Fast at From the Front, 2015

A9a379f2e92c7ded4564190c5b286b78?s=47 Tim Kadlec
September 17, 2015

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.

A9a379f2e92c7ded4564190c5b286b78?s=128

Tim Kadlec

September 17, 2015
Tweet

Transcript

  1. Reaching Everyone, Fast September 17, 2015 at From the Front

    Tim Kadlec
 @tkadlec tim@timkadlec.com
  2. None
  3. “The internet doesn’t change anything.

  4. The internet changes everything.

  5. None
  6. None
  7. None
  8. None
  9. Iran 3G connections are “…against human & moral standards.” http://bit.ly/1pKV0gH

  10. speed as a weapon

  11. None
  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

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

  21. 3G Penetration Fixed Broadband 16.0% 0.1%

  22. None
  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

  27. None
  28. Andy Davies @andydavies

  29. None
  30. None
  31. None
  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

  36. None
  37. None
  38. None
  39. None
  40. None
  41. None
  42. None
  43. http://bit.ly/1sgKKK3

  44. None
  45. None
  46. None
  47. embrace the pain

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

  49. None
  50. None
  51. None
  52. None
  53. None
  54. can’t risk performance

  55. None
  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
  79. None
  80. Older browsers Polyfills and frameworks for all the things Full-featured

    site
  81. None
  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>
  85. None
  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. 95%

  94. 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/
  95. the web is as fast as we choose to make

    it
  96. performant by default

  97. bridge the gap

  98. performance dictates access

  99. The internet changes everything.

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

    Kadlec
 @tkadlec tim@timkadlec.com