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

Reaching Everyone, Fast at From the Front, 2015

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.

Tim Kadlec

September 17, 2015
Tweet

More Decks by Tim Kadlec

Other Decks in Technology

Transcript

  1. Reaching
    Everyone, Fast
    September 17, 2015 at From the Front
    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 &
    moral standards.”
    http://bit.ly/1pKV0gH

    View Slide

  10. speed as a weapon

    View Slide

  11. View Slide

  12. Tomáš
    Randus
    Victor

    Cala
    Mladen

    Drmač
    Karel
    Knop
    Kim
    Conger

    View Slide

  13. Dan Mall Matt Cook

    View Slide

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

    View Slide

  15. Our internet is not
    their internet.

    View Slide

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

    View Slide

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

    View Slide

  18. 2169kb

    View Slide

  19. View Slide

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

    View Slide

  21. 3G
    Penetration
    Fixed
    Broadband
    16.0%
    0.1%

    View Slide

  22. View Slide

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

    View Slide

  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

    View Slide

  25. performant by default

    View Slide

  26. set a
    performance budget

    View Slide

  27. View Slide

  28. Andy Davies
    @andydavies

    View Slide

  29. View Slide

  30. View Slide

  31. View Slide

  32. 20% rule

    View Slide

  33. visually complete
    <= 4000ms

    View Slide

  34. Culture change
    doesn't happen all
    at once

    View Slide

  35. https://speakerdeck.com/aemcknig/crafting-performance-alerting-tools

    View Slide

  36. View Slide

  37. View Slide

  38. View Slide

  39. View Slide

  40. View Slide

  41. View Slide

  42. View Slide

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

    View Slide

  44. View Slide

  45. View Slide

  46. View Slide

  47. embrace the pain

    View Slide

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

    View Slide

  49. View Slide

  50. View Slide

  51. View Slide

  52. View Slide

  53. View Slide

  54. can’t risk
    performance

    View Slide

  55. View Slide

  56. compress images
    grunt-contrib-imagemin

    View Slide

  57. progressive JPEGs
    grunt-contrib-imagemin

    View Slide

  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'
    }
    ]
    }

    View Slide

  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'
    }
    ]
    }

    View Slide

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

    View Slide

  61. eliminate unused CSS
    grunt-uncss

    View Slide

  62. inline critical CSS
    grunt-penthouse

    View Slide

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

    View Slide

  64. SVG workflow
    grunt-svgmin

    View Slide

  65. h/t to @zachleat and @lara_hogan

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

  69. SVG workflow
    grunt-svgmin
    grunt-svgstore

    View Slide



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

    ....

    View Slide

  71. aria-hidden="true">


    View Slide

  72. 20 icons = 2.5kb

    View Slide

  73. 125 bytes

    View Slide

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

  75. set it.
    forget it.

    View Slide

  76. raises the floor

    View Slide

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

    View Slide

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

    View Slide

  79. View Slide

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

    View Slide

  81. View Slide

  82. <br/>var rfe = {};<br/>if ('querySelector' in document && 'localStorage' in window &&<br/>'addEventListener' in window) {<br/>} else {false};<br/>
    document.documentElement.className += ' mustard’;

    View Slide

  83. rfe.cutsMustard = true;
    document.documentElement.className += ' mustard’;
    <br/>var rfe = {};<br/>if ('querySelector' in document && 'localStorage' in window &&<br/>'addEventListener' in window)<br/>} else {false};<br/>

    View Slide

  84. loadCSS('../../css/fonts.css?1410230753');
    loadJS('../../js/main.js?1410230753');
    <br/>var rfe = {};<br/>if ('querySelector' in document && 'localStorage' in<br/>window &&<br/>'addEventListener' in window)<br/>document.documentElement.className += ' mustard’;<br/>} else {false};<br/>

    View Slide

  85. View Slide

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

    View Slide

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

    View Slide

  88. dynamic range

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

  92. Large: 33 reqs, 781.5kb
    Small: 23 reqs, 418kb
    Core: 4 reqs, 22.2kb
    35x

    View Slide


  93. View Slide

  94. 95%

    View Slide

  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/

    View Slide

  96. the web is as fast as
    we choose to make it

    View Slide

  97. performant
    by default

    View Slide

  98. bridge the gap

    View Slide

  99. performance
    dictates
    access

    View Slide

  100. The internet
    changes everything.

    View Slide

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

    @tkadlec
    [email protected]

    View Slide