$30 off During Our Annual Pro Sale. View Details »

Reaching Everyone, Fast at Velocity NY, 2014

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.

Tim Kadlec

September 16, 2014
Tweet

More Decks by Tim Kadlec

Other Decks in Programming

Transcript

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

    @tkadlec
    [email protected]

    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 and
    moral standards.”
    http://bit.ly/1pKV0gH

    View Slide

  10. performance as a weapon

    View Slide

  11. Tomáš
    Randus
    Victor

    Cala
    Mladen

    Drmač
    Karel
    Knop
    Kim
    Conger

    View Slide

  12. Dan Mall Matt Cook

    View Slide

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

    View Slide

  14. Our internet is not
    their internet.

    View Slide

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

    View Slide

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

    View Slide

  17. 0.1% 16.0%
    3G
    Penetration
    Fixed
    Broadband

    View Slide

  18. View Slide

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

    View Slide

  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.

    View Slide

  21. performant by default

    View Slide

  22. set a
    performance budget

    View Slide

  23. View Slide

  24. Andy Davies
    @andydavies

    View Slide

  25. View Slide

  26. View Slide

  27. 20% rule

    View Slide

  28. visually complete <= 4000ms

    View Slide

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

    View Slide

  30. View Slide

  31. View Slide

  32. View Slide

  33. View Slide

  34. View Slide

  35. View Slide

  36. View Slide

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

    View Slide

  38. View Slide

  39. View Slide

  40. View Slide

  41. humanize
    performance

    View Slide

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

    View Slide

  43. View Slide

  44. View Slide

  45. View Slide

  46. View Slide

  47. View Slide

  48. can’t risk
    performance

    View Slide

  49. View Slide

  50. compress images
    grunt-contrib-imagemin

    View Slide

  51. progressive JPEGs
    grunt-contrib-imagemin

    View Slide

  52. !
    !
    !
    !
    !
    !
    !
    !
    !
    !
    !
    !
    !
    !
    !
    !
    ! ! options: {!
    ! ! ! progressive: true!
    ! ! },!
    !
    !
    !
    !
    !
    !
    !
    !
    !
    !
    imagemin
    ! png
    ! !
    ! ! !
    ! ! },!
    ! !
    ! ! ! {!
    ! ! ! !
    ! ! ! !
    ! ! ! !
    ! ! ! !
    ! ! ! !
    ! ! ! }!
    ! ! ]!
    ! },!
    ! jpg
    !
    !
    !
    ! !
    ! ! ! {!
    ! ! ! !
    ! ! ! !
    ! ! ! !
    ! ! ! !
    ! ! ! !
    ! ! ! }!
    ! ! ]!
    ! }!
    },

    View Slide

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

    View Slide

  54. eliminate unused CSS
    grunt-uncss

    View Slide

  55. inline critical CSS
    grunt-penthouse

    View Slide

  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!
    ! },!
    ! . . .!
    },

    View Slide

  57. SVG workflow
    grunt-svgmin

    View Slide

  58. View Slide

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

    View Slide

  60. svgmin
    ! options
    ! !
    !
    !
    !
    !
    !
    !
    ! },!
    ! dist
    ! !
    ! ! ! {!
    ! ! ! !
    ! ! ! !
    ! ! ! !
    ! ! ! !
    ! ! ! }!
    ! ! ]!
    ! }!
    }

    View Slide

  61. SVG workflow
    grunt-svgmin
    grunt-svgstore

    View Slide

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

    View Slide

  63. hidden="true">!
    !

    View Slide

  64. 20 icons = 2.5kb

    View Slide

  65. 125 bytes

    View Slide

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

  67. set it.
    forget it.

    View Slide

  68. raises the floor

    View Slide

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

    View Slide

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

    View Slide

  71. View Slide

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

    View Slide

  73. View Slide

  74. View Slide

  75. View Slide

  76. View Slide

  77. View Slide

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

    View Slide

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

    View Slide

  80. dynamic range

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

  84. View Slide

  85. x

    View Slide

  86. performant by default

    View Slide

  87. bridge the gap

    View Slide

  88. The internet changes
    everything.

    View Slide

  89. thank you
    September 16, 2014 at Velocity NY, 2014
    !
    Tim Kadlec

    @tkadlec
    [email protected]

    View Slide