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

Bf8ea4b5c4f3d94db2bb16dff9ca626b?s=128

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
  2. @SimonHearne ➪ JS Monthly ➪ 30 May 2017 Measuring ‘Speed’

  3. @SimonHearne ➪ JS Monthly ➪ 30 May 2017 You have

    to measure Real User performance
  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?
  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?
  6. @SimonHearne ➪ JS Monthly ➪ 30 May 2017 Nav Timings

    in WebPageTest plotcon.plot.ly tested on Moto G4 @ 3G
  7. @SimonHearne ➪ JS Monthly ➪ 30 May 2017 Navigation Timing

    API https://goo.gl/6sbQX5
  8. @SimonHearne ➪ JS Monthly ➪ 30 May 2017 Distributions tell

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

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

    a story (Engagement by Model) iPhone Galaxy S5 & A3 Galaxy S7 Galaxy S6
  11. @SimonHearne ➪ JS Monthly ➪ 30 May 2017 There were

    25,000 unique Android devices detected in 2015
  12. @SimonHearne ➪ JS Monthly ➪ 30 May 2017 Only 15

    iPhone models have ever been produced ...
  13. @SimonHearne ➪ JS Monthly ➪ 30 May 2017 The five

    stages of grief
  14. @SimonHearne ➪ JS Monthly ➪ 30 May 2017 Denial Bargaining

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

  16. @SimonHearne ➪ JS Monthly ➪ 30 May 2017 We don’t

    have much Smartphone traffic
  17. @SimonHearne ➪ JS Monthly ➪ 30 May 2017 Three large

    UK retailers. Which is the fastest?
  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?
  19. @SimonHearne ➪ JS Monthly ➪ 30 May 2017 Sites with

    faster mobile experiences have more mobile traffic
  20. @SimonHearne ➪ JS Monthly ➪ 30 May 2017 We don’t

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

  22. @SimonHearne ➪ JS Monthly ➪ 30 May 2017 53% of

    mobile visits over 3 seconds are abandoned https://www.doubleclickbygoogle.com/articles/mobile-speed-matters/
  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/
  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/
  25. @SimonHearne ➪ JS Monthly ➪ 30 May 2017 Three seconds...

  26. @SimonHearne ➪ JS Monthly ➪ 30 May 2017 Android doesn’t

    convert as well as iPhone
  27. @SimonHearne ➪ JS Monthly ➪ 30 May 2017 The Android-iOS

    conversion rate MoovWeb - Q1 2015 gap is now a mere 5%
  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%
  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
  30. @SimonHearne ➪ JS Monthly ➪ 30 May 2017 Bargaining

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

    are getting faster
  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
  33. @SimonHearne ➪ JS Monthly ➪ 30 May 2017 People are

    moving to PAYG
  34. @SimonHearne ➪ JS Monthly ➪ 30 May 2017 27% of

    ‘techies’ have old phones
  35. @SimonHearne ➪ JS Monthly ➪ 30 May 2017 We’ve got

    an app!
  36. @SimonHearne ➪ JS Monthly ➪ 30 May 2017 That takes

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

    guts
  38. @SimonHearne ➪ JS Monthly ➪ 30 May 2017 Average #

    apps downloaded per month?
  39. @SimonHearne ➪ JS Monthly ➪ 30 May 2017 People with

    cheap phones expect a slow experience
  40. @SimonHearne ➪ JS Monthly ➪ 30 May 2017 Your website

    competes with native applications
  41. @SimonHearne ➪ JS Monthly ➪ 30 May 2017

  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!
  43. @SimonHearne ➪ JS Monthly ➪ 30 May 2017 Anger

  44. @SimonHearne ➪ JS Monthly ➪ 30 May 2017 Why is

    Android so slow?!
  45. @SimonHearne ➪ JS Monthly ➪ 30 May 2017 Android CPUs

    focus on multitasking
  46. @SimonHearne ➪ JS Monthly ➪ 30 May 2017 iPhone vs

    Android
  47. @SimonHearne ➪ JS Monthly ➪ 30 May 2017 Whose job

    is it?
  48. @SimonHearne ➪ JS Monthly ➪ 30 May 2017

  49. @SimonHearne ➪ JS Monthly ➪ 30 May 2017 Anger •

    Android devices are slower than iPhones :( • Lack of ownership of the problem
  50. @SimonHearne ➪ JS Monthly ➪ 30 May 2017 Depression

  51. @SimonHearne ➪ JS Monthly ➪ 30 May 2017 Why did

    we choose Angular? Legit stock photo
  52. @SimonHearne ➪ JS Monthly ➪ 30 May 2017 Optimising for

    everything is hard
  53. @SimonHearne ➪ JS Monthly ➪ 30 May 2017 Responsive web

    design squishes desktop sites onto mobile viewports
  54. @SimonHearne ➪ JS Monthly ➪ 30 May 2017 AMP :(

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

  56. @SimonHearne ➪ JS Monthly ➪ 30 May 2017

  57. @SimonHearne ➪ JS Monthly ➪ 30 May 2017

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

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

    we do?
  60. @SimonHearne ➪ JS Monthly ➪ 30 May 2017 Track JS

    Execution On Phones There’s no point measuring JS performance on Desktop
  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)
  62. @SimonHearne ➪ JS Monthly ➪ 30 May 2017 Manage DOM

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

  64. @SimonHearne ➪ JS Monthly ➪ 30 May 2017 yellowlab.tools has

    your back https://github.com/gmetais/YellowLabTools/
  65. @SimonHearne ➪ JS Monthly ➪ 30 May 2017 Budget Third-party

    Content
  66. @SimonHearne ➪ JS Monthly ➪ 30 May 2017

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

    the Server
  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
  69. @SimonHearne ➪ JS Monthly ➪ 30 May 2017 Stop Enhancing

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

  71. @SimonHearne ➪ JS Monthly ➪ 30 May 2017 The Guardian.

    Moto G1. 100Mb/s. https://www.webpagetest.org/result/170207_NV_130V/ 14s
  72. @SimonHearne ➪ JS Monthly ➪ 30 May 2017 Embrace (mobile)

    Technology
  73. @SimonHearne ➪ JS Monthly ➪ 30 May 2017

  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
  75. @SimonHearne ➪ JS Monthly ➪ 30 May 2017 https://www.npmjs.com/package/webpack-bundle-analyzer [sidebar]

  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 ( )
  77. @SimonHearne ➪ JS Monthly ➪ 30 May 2017 All the

    DATA
  78. @SimonHearne ➪ JS Monthly ➪ 30 May 2017 Distributions tell

    a story (Top 10 Browser versions) Samsung Internet 4 Chrome 57 Samsung Internet 5