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

Bf8ea4b5c4f3d94db2bb16dff9ca626b?s=128

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 :(
  2. @SimonHearne ➪ Performance Matters ➪ 11 May 2017 Measuring ‘Speed’

  3. @SimonHearne ➪ Performance Matters ➪ 11 May 2017 You have

    to measure Real User performance
  4. @SimonHearne ➪ Performance Matters ➪ 11 May 2017 Distributions tell

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

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

    a story (Engagement by Model) iPhone Galaxy S5 & A3 Galaxy S7 Galaxy S6
  7. @SimonHearne ➪ Performance Matters ➪ 11 May 2017 There were

    25,000 unique Android devices detected in 2015
  8. @SimonHearne ➪ Performance Matters ➪ 11 May 2017 Only 15

    iPhone models have ever been produced ...
  9. @SimonHearne ➪ Performance Matters ➪ 11 May 2017 The five

    stages of grief
  10. @SimonHearne ➪ Performance Matters ➪ 11 May 2017 Denial Bargaining

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

  12. @SimonHearne ➪ Performance Matters ➪ 11 May 2017 We don’t

    have much Smartphone traffic
  13. @SimonHearne ➪ Performance Matters ➪ 11 May 2017 Three large

    UK retailers. Which is the fastest?
  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?
  15. @SimonHearne ➪ Performance Matters ➪ 11 May 2017 Retailers with

    faster mobile experiences have more mobile traffic
  16. @SimonHearne ➪ Performance Matters ➪ 11 May 2017 We don’t

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

  18. @SimonHearne ➪ Performance Matters ➪ 11 May 2017 53% of

    mobile visits over 3 seconds are abandoned https://www.doubleclickbygoogle.com/articles/mobile-speed-matters/
  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/
  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/
  21. @SimonHearne ➪ Performance Matters ➪ 11 May 2017 Three seconds...

  22. @SimonHearne ➪ Performance Matters ➪ 11 May 2017 Android doesn’t

    convert as well as iPhone
  23. @SimonHearne ➪ Performance Matters ➪ 11 May 2017 The Android-iOS

    conversion rate MoovWeb - Q1 2015 gap is now a mere 5%
  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%
  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
  26. @SimonHearne ➪ Performance Matters ➪ 11 May 2017 Bargaining

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

    are getting faster
  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
  29. @SimonHearne ➪ Performance Matters ➪ 11 May 2017 People are

    moving to PAYG
  30. @SimonHearne ➪ Performance Matters ➪ 11 May 2017 We’ve got

    an app!
  31. @SimonHearne ➪ Performance Matters ➪ 11 May 2017 That takes

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

    guts
  33. @SimonHearne ➪ Performance Matters ➪ 11 May 2017 Average #

    apps downloaded per month?
  34. @SimonHearne ➪ Performance Matters ➪ 11 May 2017 People with

    cheap phones expect a slow experience
  35. @SimonHearne ➪ Performance Matters ➪ 11 May 2017 Your website

    competes with native applications
  36. @SimonHearne ➪ Performance Matters ➪ 11 May 2017

  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!
  38. @SimonHearne ➪ Performance Matters ➪ 11 May 2017 Anger

  39. @SimonHearne ➪ Performance Matters ➪ 11 May 2017 Why is

    Android so slow?!
  40. @SimonHearne ➪ Performance Matters ➪ 11 May 2017 Android CPUs

    focus on multitasking
  41. @SimonHearne ➪ Performance Matters ➪ 11 May 2017 iPhone vs

    Android
  42. @SimonHearne ➪ Performance Matters ➪ 11 May 2017 Javascript :(

    Image rendering :( DOM creation & manipulation :(
  43. @SimonHearne ➪ Performance Matters ➪ 11 May 2017 Whose job

    is it?
  44. @SimonHearne ➪ Performance Matters ➪ 11 May 2017

  45. @SimonHearne ➪ Performance Matters ➪ 11 May 2017 Anger •

    Android devices are slower than iPhones :( • Lack of ownership of the problem
  46. @SimonHearne ➪ Performance Matters ➪ 11 May 2017 Depression

  47. @SimonHearne ➪ Performance Matters ➪ 11 May 2017 Why did

    we choose Angular? Legit stock photo
  48. @SimonHearne ➪ Performance Matters ➪ 11 May 2017 Who’s that?

  49. @SimonHearne ➪ Performance Matters ➪ 11 May 2017 Ethan Marcotte

    - Started that whole ‘Responsive Web Design’ thing
  50. @SimonHearne ➪ Performance Matters ➪ 11 May 2017 Optimising for

    everything is hard
  51. @SimonHearne ➪ Performance Matters ➪ 11 May 2017 Responsive web

    design squishes desktop sites onto mobile viewports
  52. @SimonHearne ➪ Performance Matters ➪ 11 May 2017 AMP :(

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

  54. @SimonHearne ➪ Performance Matters ➪ 11 May 2017

  55. @SimonHearne ➪ Performance Matters ➪ 11 May 2017

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

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

    we do?
  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
  59. @SimonHearne ➪ Performance Matters ➪ 11 May 2017 Track JS

    Execution On Phones
  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)
  61. @SimonHearne ➪ Performance Matters ➪ 11 May 2017 Manage DOM

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

  63. @SimonHearne ➪ Performance Matters ➪ 11 May 2017 yellowlab.tools has

    your back https://github.com/gmetais/YellowLabTools/
  64. @SimonHearne ➪ Performance Matters ➪ 11 May 2017 Budget Third-party

    Content
  65. @SimonHearne ➪ Performance Matters ➪ 11 May 2017

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

    the Server
  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
  68. @SimonHearne ➪ Performance Matters ➪ 11 May 2017 Stop Enhancing

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

  70. @SimonHearne ➪ Performance Matters ➪ 11 May 2017 The Guardian.

    Moto G1. 100Mb/s. https://www.webpagetest.org/result/170207_NV_130V/ 14s
  71. @SimonHearne ➪ Performance Matters ➪ 11 May 2017 Embrace (mobile)

    Technology
  72. @SimonHearne ➪ Performance Matters ➪ 11 May 2017

  73. @SimonHearne ➪ Performance Matters ➪ 11 May 2017 Please go

    and fight for fast user experiences Let’s keep in touch!
  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?
  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?
  76. @SimonHearne ➪ Performance Matters ➪ 11 May 2017 Nav Timings

    in WebPageTest plotcon.plot.ly tested on Moto G4 @ 3G
  77. @SimonHearne ➪ Performance Matters ➪ 11 May 2017 https://www.npmjs.com/package/webpack-bundle-analyzer [sidebar]

  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 ( )
  79. @SimonHearne ➪ Performance Matters ➪ 11 May 2017 Navigation Timing

    API https://goo.gl/6sbQX5
  80. @SimonHearne ➪ Performance Matters ➪ 11 May 2017 All the

    DATA
  81. @SimonHearne ➪ Performance Matters ➪ 11 May 2017 Distributions tell

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