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

Optimising for 25,000 Devices - JS Monthly London

Optimising for 25,000 Devices - JS Monthly London

Simon Hearne

May 30, 2017
Tweet

More Decks by Simon Hearne

Other Decks in Technology

Transcript

  1. @SimonHearne ➪ JS Monthly ➪ 30 May 2017
    The five stages of JavaScript
    performance grief

    View full-size slide

  2. @SimonHearne ➪ JS Monthly ➪ 30 May 2017
    Measuring ‘Speed’

    View full-size slide

  3. @SimonHearne ➪ JS Monthly ➪ 30 May 2017
    You have to measure
    Real User
    performance

    View full-size slide

  4. @SimonHearne ➪ JS Monthly ➪ 30 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

  5. @SimonHearne ➪ JS Monthly ➪ 30 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

  6. @SimonHearne ➪ JS Monthly ➪ 30 May 2017
    Nav Timings in WebPageTest
    plotcon.plot.ly tested on Moto G4 @ 3G

    View full-size slide

  7. @SimonHearne ➪ JS Monthly ➪ 30 May 2017
    Navigation Timing API
    https://goo.gl/6sbQX5

    View full-size slide

  8. @SimonHearne ➪ JS Monthly ➪ 30 May 2017
    Distributions tell a story (Smartphone OS)
    iPhone
    Android

    View full-size slide

  9. @SimonHearne ➪ JS Monthly ➪ 30 May 2017
    Distributions tell a story (Top 10 Models)
    iPhone
    Galaxy S5
    Galaxy S7
    Galaxy S6
    Galaxy J5 & A3

    View full-size slide

  10. @SimonHearne ➪ JS Monthly ➪ 30 May 2017
    Distributions tell a story (Engagement by Model)
    iPhone
    Galaxy S5 & A3
    Galaxy S7
    Galaxy S6

    View full-size slide

  11. @SimonHearne ➪ JS Monthly ➪ 30 May 2017
    There were 25,000 unique
    Android devices detected in 2015

    View full-size slide

  12. @SimonHearne ➪ JS Monthly ➪ 30 May 2017
    Only 15 iPhone models have ever been produced
    ...

    View full-size slide

  13. @SimonHearne ➪ JS Monthly ➪ 30 May 2017
    The five stages of grief

    View full-size slide

  14. @SimonHearne ➪ JS Monthly ➪ 30 May 2017
    Denial
    Bargaining
    Anger
    Depression
    Acceptance

    View full-size slide

  15. @SimonHearne ➪ JS Monthly ➪ 30 May 2017
    Denial

    View full-size slide

  16. @SimonHearne ➪ JS Monthly ➪ 30 May 2017
    We don’t have
    much Smartphone
    traffic

    View full-size slide

  17. @SimonHearne ➪ JS Monthly ➪ 30 May 2017
    Three large UK retailers.
    Which is the fastest?

    View full-size slide

  18. @SimonHearne ➪ JS Monthly ➪ 30 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

  19. @SimonHearne ➪ JS Monthly ➪ 30 May 2017
    Sites with faster mobile experiences
    have more mobile traffic

    View full-size slide

  20. @SimonHearne ➪ JS Monthly ➪ 30 May 2017
    We don’t have
    much Android
    traffic

    View full-size slide

  21. @SimonHearne ➪ JS Monthly ➪ 30 May 2017
    https://www.kantarworldpanel.com/global/smartphone-os-market-share/

    View full-size slide

  22. @SimonHearne ➪ JS Monthly ➪ 30 May 2017
    53%
    of mobile visits over 3 seconds are abandoned
    https://www.doubleclickbygoogle.com/articles/mobile-speed-matters/

    View full-size slide

  23. @SimonHearne ➪ JS Monthly ➪ 30 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

  24. @SimonHearne ➪ JS Monthly ➪ 30 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

  25. @SimonHearne ➪ JS Monthly ➪ 30 May 2017
    Three seconds...

    View full-size slide

  26. @SimonHearne ➪ JS Monthly ➪ 30 May 2017
    Android doesn’t
    convert as well as
    iPhone

    View full-size slide

  27. @SimonHearne ➪ JS Monthly ➪ 30 May 2017
    The Android-iOS conversion rate
    MoovWeb - Q1 2015
    gap is now a mere
    5%

    View full-size slide

  28. @SimonHearne ➪ JS Monthly ➪ 30 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

  29. @SimonHearne ➪ JS Monthly ➪ 30 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

  30. @SimonHearne ➪ JS Monthly ➪ 30 May 2017
    Bargaining

    View full-size slide

  31. @SimonHearne ➪ JS Monthly ➪ 30 May 2017
    Android devices are
    getting faster

    View full-size slide

  32. @SimonHearne ➪ JS Monthly ➪ 30 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

  33. @SimonHearne ➪ JS Monthly ➪ 30 May 2017
    People are moving to PAYG

    View full-size slide

  34. @SimonHearne ➪ JS Monthly ➪ 30 May 2017
    27% of ‘techies’ have old phones

    View full-size slide

  35. @SimonHearne ➪ JS Monthly ➪ 30 May 2017
    We’ve got an app!

    View full-size slide

  36. @SimonHearne ➪ JS Monthly ➪ 30 May 2017
    That takes guts

    View full-size slide

  37. @SimonHearne ➪ JS Monthly ➪ 30 May 2017
    That takes guts

    View full-size slide

  38. @SimonHearne ➪ JS Monthly ➪ 30 May 2017
    Average # apps downloaded per month?

    View full-size slide

  39. @SimonHearne ➪ JS Monthly ➪ 30 May 2017
    People with cheap
    phones expect a
    slow experience

    View full-size slide

  40. @SimonHearne ➪ JS Monthly ➪ 30 May 2017
    Your website competes
    with native applications

    View full-size slide

  41. @SimonHearne ➪ JS Monthly ➪ 30 May 2017

    View full-size slide

  42. @SimonHearne ➪ JS Monthly ➪ 30 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

  43. @SimonHearne ➪ JS Monthly ➪ 30 May 2017
    Anger

    View full-size slide

  44. @SimonHearne ➪ JS Monthly ➪ 30 May 2017
    Why is Android
    so slow?!

    View full-size slide

  45. @SimonHearne ➪ JS Monthly ➪ 30 May 2017
    Android CPUs focus on multitasking

    View full-size slide

  46. @SimonHearne ➪ JS Monthly ➪ 30 May 2017
    iPhone vs Android

    View full-size slide

  47. @SimonHearne ➪ JS Monthly ➪ 30 May 2017
    Whose job is it?

    View full-size slide

  48. @SimonHearne ➪ JS Monthly ➪ 30 May 2017

    View full-size slide

  49. @SimonHearne ➪ JS Monthly ➪ 30 May 2017
    Anger
    ● Android devices are slower than iPhones :(
    ● Lack of ownership of the problem

    View full-size slide

  50. @SimonHearne ➪ JS Monthly ➪ 30 May 2017
    Depression

    View full-size slide

  51. @SimonHearne ➪ JS Monthly ➪ 30 May 2017
    Why did we
    choose
    Angular?
    Legit stock photo

    View full-size slide

  52. @SimonHearne ➪ JS Monthly ➪ 30 May 2017
    Optimising for
    everything is hard

    View full-size slide

  53. @SimonHearne ➪ JS Monthly ➪ 30 May 2017
    Responsive web design
    squishes desktop sites onto
    mobile viewports

    View full-size slide

  54. @SimonHearne ➪ JS Monthly ➪ 30 May 2017
    AMP :(

    View full-size slide

  55. @SimonHearne ➪ JS Monthly ➪ 30 May 2017
    https://www.ampproject.org/

    View full-size slide

  56. @SimonHearne ➪ JS Monthly ➪ 30 May 2017

    View full-size slide

  57. @SimonHearne ➪ JS Monthly ➪ 30 May 2017

    View full-size slide

  58. @SimonHearne ➪ JS Monthly ➪ 30 May 2017
    Acceptance

    View full-size slide

  59. @SimonHearne ➪ JS Monthly ➪ 30 May 2017
    What can we do?

    View full-size slide

  60. @SimonHearne ➪ JS Monthly ➪ 30 May 2017
    Track JS Execution
    On Phones
    There’s no point measuring JS performance on Desktop

    View full-size slide

  61. @SimonHearne ➪ JS Monthly ➪ 30 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

  62. @SimonHearne ➪ JS Monthly ➪ 30 May 2017
    Manage DOM
    complexity

    View full-size slide

  63. @SimonHearne ➪ JS Monthly ➪ 30 May 2017
    SOASTA

    View full-size slide

  64. @SimonHearne ➪ JS Monthly ➪ 30 May 2017
    yellowlab.tools has your back
    https://github.com/gmetais/YellowLabTools/

    View full-size slide

  65. @SimonHearne ➪ JS Monthly ➪ 30 May 2017
    Budget Third-party
    Content

    View full-size slide

  66. @SimonHearne ➪ JS Monthly ➪ 30 May 2017

    View full-size slide

  67. @SimonHearne ➪ JS Monthly ➪ 30 May 2017
    Render on the
    Server

    View full-size slide

  68. @SimonHearne ➪ JS Monthly ➪ 30 May 2017
    Safe, easy to scale, cheap, easy to monitor... Unpredictable, uncontrollable, hard to measure
    Why give away control?
    SPAs

    View full-size slide

  69. @SimonHearne ➪ JS Monthly ➪ 30 May 2017
    Stop Enhancing

    View full-size slide

  70. @SimonHearne ➪ JS Monthly ➪ 30 May 2017
    https://speakerdeck.com/patrickhamann/breaking-news-at-1000ms-front-trends-2014

    View full-size slide

  71. @SimonHearne ➪ JS Monthly ➪ 30 May 2017
    The Guardian. Moto G1. 100Mb/s.
    https://www.webpagetest.org/result/170207_NV_130V/
    14s

    View full-size slide

  72. @SimonHearne ➪ JS Monthly ➪ 30 May 2017
    Embrace (mobile)
    Technology

    View full-size slide

  73. @SimonHearne ➪ JS Monthly ➪ 30 May 2017

    View full-size slide

  74. @SimonHearne ➪ JS Monthly ➪ 30 May 2017
    1. Performance is more of a challenge than you think
    2. Performance is everyone’s responsibility
    3. JavaScript is a bigger problem than network
    4. Test on representative mobile devices
    Let’s keep in touch.
    @SimonHearne
    webperf.ninja

    View full-size slide

  75. @SimonHearne ➪ JS Monthly ➪ 30 May 2017
    https://www.npmjs.com/package/webpack-bundle-analyzer
    [sidebar]

    View full-size slide

  76. @SimonHearne ➪ JS Monthly ➪ 30 May 2017
    All the Nav Timings
    boomerang 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

  77. @SimonHearne ➪ JS Monthly ➪ 30 May 2017
    All the DATA

    View full-size slide

  78. @SimonHearne ➪ JS Monthly ➪ 30 May 2017
    Distributions tell a story (Top 10 Browser versions)
    Samsung
    Internet 4
    Chrome 57
    Samsung
    Internet 5

    View full-size slide