Reaching Everyone, Fast at Velocity NY, 2014

A9a379f2e92c7ded4564190c5b286b78?s=47 Tim Kadlec
September 16, 2014

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.

A9a379f2e92c7ded4564190c5b286b78?s=128

Tim Kadlec

September 16, 2014
Tweet

Transcript

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

    ! 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 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

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

  23. None
  24. Andy Davies @andydavies

  25. None
  26. None
  27. 20% rule

  28. visually complete <= 4000ms

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

  30. None
  31. None
  32. None
  33. None
  34. None
  35. None
  36. None
  37. http://bit.ly/1sgKKK3

  38. None
  39. None
  40. None
  41. humanize performance

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

  43. None
  44. None
  45. None
  46. None
  47. None
  48. can’t risk performance

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

  58. None
  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
  71. None
  72. Older browsers Polyfills and frameworks for all the things Full-featured

    site
  73. None
  74. None
  75. None
  76. None
  77. None
  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
  84. None
  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