Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Optimising for 25,000 Devices - Performance Matters 2017

Optimising for 25,000 Devices - Performance Matters 2017

Simon Hearne

May 11, 2017
Tweet

More Decks by Simon Hearne

Other Decks in Technology

Transcript

  1. @SimonHearne ➪ Performance Matters ➪ 11 May 2017
    Optimising for
    25,000 devices
    The five stages of JavaScript Performance grief :(

    View full-size slide

  2. @SimonHearne ➪ Performance Matters ➪ 11 May 2017
    Measuring ‘Speed’

    View full-size slide

  3. @SimonHearne ➪ Performance Matters ➪ 11 May 2017
    You have to measure
    Real User
    performance

    View full-size slide

  4. @SimonHearne ➪ Performance Matters ➪ 11 May 2017
    Distributions tell a story (Smartphone OS)
    iPhone
    Android

    View full-size slide

  5. @SimonHearne ➪ Performance Matters ➪ 11 May 2017
    Distributions tell a story (Top 10 Models)
    iPhone
    Galaxy S5
    Galaxy S7
    Galaxy S6
    Galaxy J5 & A3

    View full-size slide

  6. @SimonHearne ➪ Performance Matters ➪ 11 May 2017
    Distributions tell a story (Engagement by Model)
    iPhone
    Galaxy S5 & A3
    Galaxy S7
    Galaxy S6

    View full-size slide

  7. @SimonHearne ➪ Performance Matters ➪ 11 May 2017
    There were 25,000 unique
    Android devices detected in 2015

    View full-size slide

  8. @SimonHearne ➪ Performance Matters ➪ 11 May 2017
    Only 15 iPhone models have ever been produced
    ...

    View full-size slide

  9. @SimonHearne ➪ Performance Matters ➪ 11 May 2017
    The five stages of grief

    View full-size slide

  10. @SimonHearne ➪ Performance Matters ➪ 11 May 2017
    Denial
    Bargaining
    Anger
    Depression
    Acceptance

    View full-size slide

  11. @SimonHearne ➪ Performance Matters ➪ 11 May 2017
    Denial

    View full-size slide

  12. @SimonHearne ➪ Performance Matters ➪ 11 May 2017
    We don’t have
    much Smartphone
    traffic

    View full-size slide

  13. @SimonHearne ➪ Performance Matters ➪ 11 May 2017
    Three large UK retailers.
    Which is the fastest?

    View full-size slide

  14. @SimonHearne ➪ Performance Matters ➪ 11 May 2017
    Median smartphone DOM Content Loaded time
    5.8s 1.8s 3.8s
    Three large UK retailers.
    Which is the fastest?

    View full-size slide

  15. @SimonHearne ➪ Performance Matters ➪ 11 May 2017
    Retailers with faster mobile
    experiences have more mobile
    traffic

    View full-size slide

  16. @SimonHearne ➪ Performance Matters ➪ 11 May 2017
    We don’t have
    much Android
    traffic

    View full-size slide

  17. @SimonHearne ➪ Performance Matters ➪ 11 May 2017
    https://www.kantarworldpanel.com/global/smartphone-os-market-share/

    View full-size slide

  18. @SimonHearne ➪ Performance Matters ➪ 11 May 2017
    53%
    of mobile visits over 3 seconds are abandoned
    https://www.doubleclickbygoogle.com/articles/mobile-speed-matters/

    View full-size slide

  19. @SimonHearne ➪ Performance Matters ➪ 11 May 2017
    53%
    of mobile visits over 3 seconds are abandoned
    like, proper lost
    https://www.doubleclickbygoogle.com/articles/mobile-speed-matters/

    View full-size slide

  20. @SimonHearne ➪ Performance Matters ➪ 11 May 2017
    53%
    of mobile visits over 3 seconds are abandoned
    like, proper lost
    not bounces, just silent echoes in an analytics void
    https://www.doubleclickbygoogle.com/articles/mobile-speed-matters/

    View full-size slide

  21. @SimonHearne ➪ Performance Matters ➪ 11 May 2017
    Three seconds...

    View full-size slide

  22. @SimonHearne ➪ Performance Matters ➪ 11 May 2017
    Android doesn’t
    convert as well as
    iPhone

    View full-size slide

  23. @SimonHearne ➪ Performance Matters ➪ 11 May 2017
    The Android-iOS conversion rate
    MoovWeb - Q1 2015
    gap is now a mere
    5%

    View full-size slide

  24. @SimonHearne ➪ Performance Matters ➪ 11 May 2017
    The Android-iOS conversion rate
    MoovWeb - Q1 2015
    (Android users want to buy things, who knew?)
    gap is now a mere
    5%

    View full-size slide

  25. @SimonHearne ➪ Performance Matters ➪ 11 May 2017
    Denial - Summary
    ● Android & iPhone traffic should be equal
    ● Android & iPhone conversions should be equal
    ● Android bounce rate is likely understated
    ● Question assumptions about your users

    View full-size slide

  26. @SimonHearne ➪ Performance Matters ➪ 11 May 2017
    Bargaining

    View full-size slide

  27. @SimonHearne ➪ Performance Matters ➪ 11 May 2017
    Android devices are
    getting faster

    View full-size slide

  28. @SimonHearne ➪ Performance Matters ➪ 11 May 2017
    The Galaxy S8 is only
    15% faster than the Galaxy S6.
    It’s 3x slower than the iPhone 7

    View full-size slide

  29. @SimonHearne ➪ Performance Matters ➪ 11 May 2017
    People are moving to PAYG

    View full-size slide

  30. @SimonHearne ➪ Performance Matters ➪ 11 May 2017
    We’ve got an app!

    View full-size slide

  31. @SimonHearne ➪ Performance Matters ➪ 11 May 2017
    That takes guts

    View full-size slide

  32. @SimonHearne ➪ Performance Matters ➪ 11 May 2017
    That takes guts

    View full-size slide

  33. @SimonHearne ➪ Performance Matters ➪ 11 May 2017
    Average # apps downloaded per month?

    View full-size slide

  34. @SimonHearne ➪ Performance Matters ➪ 11 May 2017
    People with cheap
    phones expect a
    slow experience

    View full-size slide

  35. @SimonHearne ➪ Performance Matters ➪ 11 May 2017
    Your website competes
    with native applications

    View full-size slide

  36. @SimonHearne ➪ Performance Matters ➪ 11 May 2017

    View full-size slide

  37. @SimonHearne ➪ Performance Matters ➪ 11 May 2017
    Bargaining
    ● Do not assume that devices will catch up
    ● Users won’t install your app
    ● Users with slow devices still expect fast websites!

    View full-size slide

  38. @SimonHearne ➪ Performance Matters ➪ 11 May 2017
    Anger

    View full-size slide

  39. @SimonHearne ➪ Performance Matters ➪ 11 May 2017
    Why is Android
    so slow?!

    View full-size slide

  40. @SimonHearne ➪ Performance Matters ➪ 11 May 2017
    Android CPUs focus on multitasking

    View full-size slide

  41. @SimonHearne ➪ Performance Matters ➪ 11 May 2017
    iPhone vs Android

    View full-size slide

  42. @SimonHearne ➪ Performance Matters ➪ 11 May 2017
    Javascript :(
    Image rendering :(
    DOM creation & manipulation :(

    View full-size slide

  43. @SimonHearne ➪ Performance Matters ➪ 11 May 2017
    Whose job is it?

    View full-size slide

  44. @SimonHearne ➪ Performance Matters ➪ 11 May 2017

    View full-size slide

  45. @SimonHearne ➪ Performance Matters ➪ 11 May 2017
    Anger
    ● Android devices are slower than iPhones :(
    ● Lack of ownership of the problem

    View full-size slide

  46. @SimonHearne ➪ Performance Matters ➪ 11 May 2017
    Depression

    View full-size slide

  47. @SimonHearne ➪ Performance Matters ➪ 11 May 2017
    Why did we
    choose
    Angular?
    Legit stock photo

    View full-size slide

  48. @SimonHearne ➪ Performance Matters ➪ 11 May 2017
    Who’s that?

    View full-size slide

  49. @SimonHearne ➪ Performance Matters ➪ 11 May 2017
    Ethan Marcotte - Started that whole ‘Responsive Web Design’ thing

    View full-size slide

  50. @SimonHearne ➪ Performance Matters ➪ 11 May 2017
    Optimising for
    everything is hard

    View full-size slide

  51. @SimonHearne ➪ Performance Matters ➪ 11 May 2017
    Responsive web design
    squishes desktop sites onto
    mobile viewports

    View full-size slide

  52. @SimonHearne ➪ Performance Matters ➪ 11 May 2017
    AMP :(

    View full-size slide

  53. @SimonHearne ➪ Performance Matters ➪ 11 May 2017
    https://www.ampproject.org/

    View full-size slide

  54. @SimonHearne ➪ Performance Matters ➪ 11 May 2017

    View full-size slide

  55. @SimonHearne ➪ Performance Matters ➪ 11 May 2017

    View full-size slide

  56. @SimonHearne ➪ Performance Matters ➪ 11 May 2017
    Acceptance

    View full-size slide

  57. @SimonHearne ➪ Performance Matters ➪ 11 May 2017
    What can we do?

    View full-size slide

  58. @SimonHearne ➪ Performance Matters ➪ 11 May 2017
    Good things
    1. Track JS execution time on real mobile devices
    2. Budget third-party content
    3. Budget second-party content
    4. Render on the server
    5. Manage DOM Complexity
    6. Stop ‘enhancing’
    7. Embrace (mobile) technology

    View full-size slide

  59. @SimonHearne ➪ Performance Matters ➪ 11 May 2017
    Track JS Execution
    On Phones

    View full-size slide

  60. @SimonHearne ➪ Performance Matters ➪ 11 May 2017
    Track JS Execution using…
    Developer Tools
    or WebPageTest
    or RUM
    (https://github.com/SOASTA/measuring-continuity/blob/master/examples/cpu-page-busy.js)

    View full-size slide

  61. @SimonHearne ➪ Performance Matters ➪ 11 May 2017
    Manage DOM
    complexity

    View full-size slide

  62. @SimonHearne ➪ Performance Matters ➪ 11 May 2017
    SOASTA

    View full-size slide

  63. @SimonHearne ➪ Performance Matters ➪ 11 May 2017
    yellowlab.tools has your back
    https://github.com/gmetais/YellowLabTools/

    View full-size slide

  64. @SimonHearne ➪ Performance Matters ➪ 11 May 2017
    Budget Third-party
    Content

    View full-size slide

  65. @SimonHearne ➪ Performance Matters ➪ 11 May 2017

    View full-size slide

  66. @SimonHearne ➪ Performance Matters ➪ 11 May 2017
    Render on the
    Server

    View full-size slide

  67. @SimonHearne ➪ Performance Matters ➪ 11 May 2017
    Safe, easy to scale, cheap, easy to monitor... Unpredictable, uncontrollable, hard to measure
    Why give away control?
    SPAs

    View full-size slide

  68. @SimonHearne ➪ Performance Matters ➪ 11 May 2017
    Stop Enhancing

    View full-size slide

  69. @SimonHearne ➪ Performance Matters ➪ 11 May 2017
    https://speakerdeck.com/patrickhamann/breaking-news-at-1000ms-front-trends-2014

    View full-size slide

  70. @SimonHearne ➪ Performance Matters ➪ 11 May 2017
    The Guardian. Moto G1. 100Mb/s.
    https://www.webpagetest.org/result/170207_NV_130V/
    14s

    View full-size slide

  71. @SimonHearne ➪ Performance Matters ➪ 11 May 2017
    Embrace (mobile)
    Technology

    View full-size slide

  72. @SimonHearne ➪ Performance Matters ➪ 11 May 2017

    View full-size slide

  73. @SimonHearne ➪ Performance Matters ➪ 11 May 2017
    Please go and fight for fast user experiences
    Let’s keep in touch!

    View full-size slide

  74. @SimonHearne ➪ Performance Matters ➪ 11 May 2017
    Nav Timings in WebPageTest
    DOM Interactive
    (HTML is parsed)
    DOM Content Loaded
    (CSS is parsed)
    DOM Complete
    (Subresources loaded)
    Page Loaded
    When was this page usable?
    plotcon.plot.ly tested on Moto G4 @ 3G
    firstPaint?

    View full-size slide

  75. @SimonHearne ➪ Performance Matters ➪ 11 May 2017
    Nav Timings in WebPageTest
    DOM Interactive
    (HTML is parsed)
    DOM Content Loaded
    (CSS is parsed)
    DOM Complete
    (Subresources loaded)
    Page Loaded
    plotcon.plot.ly tested on Moto G4 @ 3G
    firstPaint?

    View full-size slide

  76. @SimonHearne ➪ Performance Matters ➪ 11 May 2017
    Nav Timings in WebPageTest
    plotcon.plot.ly tested on Moto G4 @ 3G

    View full-size slide

  77. @SimonHearne ➪ Performance Matters ➪ 11 May 2017
    https://www.npmjs.com/package/webpack-bundle-analyzer
    [sidebar]

    View full-size slide

  78. @SimonHearne ➪ Performance Matters ➪ 11 May 2017
    All the Nav Timings
    is a JavaScript library
    that measures the page load time
    experienced by real users,
    commonly called RUM.
    https://github.com/SOASTA/boomerang
    ( )

    View full-size slide

  79. @SimonHearne ➪ Performance Matters ➪ 11 May 2017
    Navigation Timing API
    https://goo.gl/6sbQX5

    View full-size slide

  80. @SimonHearne ➪ Performance Matters ➪ 11 May 2017
    All the DATA

    View full-size slide

  81. @SimonHearne ➪ Performance Matters ➪ 11 May 2017
    Distributions tell a story (Top 10 Browser versions)
    Samsung
    Internet 4
    Chrome 57
    Samsung
    Internet 5

    View full-size slide