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

Optimising for 25,000 devices - JS Oxford

Optimising for 25,000 devices - JS Oxford

Bf8ea4b5c4f3d94db2bb16dff9ca626b?s=128

Simon Hearne

May 03, 2017
Tweet

More Decks by Simon Hearne

Other Decks in Programming

Transcript

  1. @SimonHearne ➪ JS Oxford ➪ 3 May 2017 Optimising for

    25,000 devices The five stages of JavaScript Performance grief :(
  2. @SimonHearne ➪ JS Oxford ➪ 3 May 2017

  3. @SimonHearne ➪ JS Oxford ➪ 3 May 2017 Smooth segway

    from Star Wars to site speed.
  4. @SimonHearne ➪ JS Oxford ➪ 3 May 2017 Measuring ‘Speed’

  5. @SimonHearne ➪ JS Oxford ➪ 3 May 2017 @SimonHearne ➪

    JS Oxford ➪ 3 May 2017 You have to measure Real User performance
  6. @SimonHearne ➪ JS Oxford ➪ 3 May 2017 Navigation Timing

    API https://goo.gl/6sbQX5
  7. @SimonHearne ➪ JS Oxford ➪ 3 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?
  8. @SimonHearne ➪ JS Oxford ➪ 3 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?
  9. @SimonHearne ➪ JS Oxford ➪ 3 May 2017 Nav Timings

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

  11. @SimonHearne ➪ JS Oxford ➪ 3 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 ( )
  12. @SimonHearne ➪ JS Oxford ➪ 3 May 2017 All the

    DATA
  13. @SimonHearne ➪ JS Oxford ➪ 3 May 2017 Distributions tell

    a story (Smartphone OS) iPhone Android
  14. @SimonHearne ➪ JS Oxford ➪ 3 May 2017 Distributions tell

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

    a story (Top 10 Browser versions) Samsung Internet 4 Chrome 57 Samsung Internet 5
  16. @SimonHearne ➪ JS Oxford ➪ 3 May 2017 Distributions tell

    a story (Engagement by Model)
  17. @SimonHearne ➪ JS Oxford ➪ 3 May 2017 There were

    25,000 unique Android devices detected in 2015
  18. @SimonHearne ➪ JS Oxford ➪ 3 May 2017 Only 15

    iPhone models have ever been produced ...
  19. @SimonHearne ➪ JS Oxford ➪ 3 May 2017 @SimonHearne ➪

    JS Oxford ➪ 3 May 2017 The five stages of grief
  20. @SimonHearne ➪ JS Oxford ➪ 3 May 2017 @SimonHearne ➪

    JS Oxford ➪ 3 May 2017 Denial Bargaining Anger Depression Acceptance
  21. @SimonHearne ➪ JS Oxford ➪ 3 May 2017 Denial

  22. @SimonHearne ➪ JS Oxford ➪ 3 May 2017 We don’t

    have much Smartphone traffic
  23. @SimonHearne ➪ JS Oxford ➪ 3 May 2017 Three large

    UK retailers. Which is the fastest?
  24. @SimonHearne ➪ JS Oxford ➪ 3 May 2017 Median smartphone

    DOM Content Loaded time 5.8s 1.8s 3.8s Three large UK retailers. Which is the fastest?
  25. @SimonHearne ➪ JS Oxford ➪ 3 May 2017 @SimonHearne ➪

    JS Oxford ➪ 3 May 2017 Retailers with faster mobile experiences have more mobile traffic
  26. @SimonHearne ➪ JS Oxford ➪ 3 May 2017 We don’t

    have much Android traffic
  27. @SimonHearne ➪ JS Oxford ➪ 3 May 2017 https://www.kantarworldpanel.com/global/smartphone-os-market-share/

  28. @SimonHearne ➪ JS Oxford ➪ 3 May 2017 53% of

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

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

  32. @SimonHearne ➪ JS Oxford ➪ 3 May 2017 Android doesn’t

    convert as well as iPhone
  33. @SimonHearne ➪ JS Oxford ➪ 3 May 2017 @SimonHearne ➪

    JS Oxford ➪ 3 May 2017 The Android-iOS conversion rate MoovWeb - Q1 2015 gap is now a mere 5%
  34. @SimonHearne ➪ JS Oxford ➪ 3 May 2017 @SimonHearne ➪

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

    JS Oxford ➪ 3 May 2017 Denial - Summary • Android & iPhone traffic should be equal • Android & iPhone conversions should be equal • Android bounce rate is likely understated • Question your assumptions about your users
  36. @SimonHearne ➪ JS Oxford ➪ 3 May 2017 Bargaining

  37. @SimonHearne ➪ JS Oxford ➪ 3 May 2017 Android devices

    are getting faster
  38. @SimonHearne ➪ JS Oxford ➪ 3 May 2017 The Galaxy

    S8 is only 15% faster than the Galaxy S6. It’s 300% slower than the iPhone 7
  39. @SimonHearne ➪ JS Oxford ➪ 3 May 2017 People are

    moving to PAYG
  40. @SimonHearne ➪ JS Oxford ➪ 3 May 2017 We’ve got

    an app!
  41. @SimonHearne ➪ JS Oxford ➪ 3 May 2017 @SimonHearne ➪

    JS Oxford ➪ 3 May 2017 That takes guts
  42. @SimonHearne ➪ JS Oxford ➪ 3 May 2017 @SimonHearne ➪

    JS Oxford ➪ 3 May 2017 That takes guts
  43. @SimonHearne ➪ JS Oxford ➪ 3 May 2017 Average #

    apps downloaded per month?
  44. @SimonHearne ➪ JS Oxford ➪ 3 May 2017 People with

    cheap phones expect a slow experience
  45. @SimonHearne ➪ JS Oxford ➪ 3 May 2017 @SimonHearne ➪

    JS Oxford ➪ 3 May 2017 Your website competes with native applications
  46. @SimonHearne ➪ JS Oxford ➪ 3 May 2017

  47. @SimonHearne ➪ JS Oxford ➪ 3 May 2017 @SimonHearne ➪

    JS Oxford ➪ 3 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!
  48. @SimonHearne ➪ JS Oxford ➪ 3 May 2017 Anger

  49. @SimonHearne ➪ JS Oxford ➪ 3 May 2017 Why is

    Android so slow?!
  50. @SimonHearne ➪ JS Oxford ➪ 3 May 2017 @SimonHearne ➪

    JS Oxford ➪ 3 May 2017 Android CPUs focus on multitasking
  51. @SimonHearne ➪ JS Oxford ➪ 3 May 2017 iPhone vs

    Android
  52. @SimonHearne ➪ JS Oxford ➪ 3 May 2017 Javascript :(

    Image rendering :( DOM creation & manipulation :(
  53. @SimonHearne ➪ JS Oxford ➪ 3 May 2017 Whose job

    is it?
  54. @SimonHearne ➪ JS Oxford ➪ 3 May 2017

  55. @SimonHearne ➪ JS Oxford ➪ 3 May 2017 @SimonHearne ➪

    JS Oxford ➪ 3 May 2017 Anger • Android devices are slower than iPhones :( • Lack of ownership of the problem
  56. @SimonHearne ➪ JS Oxford ➪ 3 May 2017 Depression

  57. @SimonHearne ➪ JS Oxford ➪ 3 May 2017 Why did

    we choose Angular? Legit stock photo
  58. @SimonHearne ➪ JS Oxford ➪ 3 May 2017 @SimonHearne ➪

    JS Oxford ➪ 3 May 2017 Who’s that?
  59. @SimonHearne ➪ JS Oxford ➪ 3 May 2017 @SimonHearne ➪

    JS Oxford ➪ 3 May 2017 Ethan Marcotte - Started that whole ‘Responsive Web Design’ thing
  60. @SimonHearne ➪ JS Oxford ➪ 3 May 2017 @SimonHearne ➪

    JS Oxford ➪ 3 May 2017 Optimising for everything is hard
  61. @SimonHearne ➪ JS Oxford ➪ 3 May 2017 @SimonHearne ➪

    JS Oxford ➪ 3 May 2017 Responsive web design squishes desktop sites onto mobile viewports
  62. @SimonHearne ➪ JS Oxford ➪ 3 May 2017 AMP :(

  63. @SimonHearne ➪ JS Oxford ➪ 3 May 2017 https://www.ampproject.org/

  64. @SimonHearne ➪ JS Oxford ➪ 3 May 2017

  65. @SimonHearne ➪ JS Oxford ➪ 3 May 2017

  66. @SimonHearne ➪ JS Oxford ➪ 3 May 2017 Acceptance

  67. @SimonHearne ➪ JS Oxford ➪ 3 May 2017 What can

    we do?
  68. @SimonHearne ➪ JS Oxford ➪ 3 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
  69. @SimonHearne ➪ JS Oxford ➪ 3 May 2017 @SimonHearne ➪

    JS Oxford ➪ 3 May 2017 Track JS Execution On Phones There’s no point measuring JS performance on Desktop
  70. @SimonHearne ➪ JS Oxford ➪ 3 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)
  71. @SimonHearne ➪ JS Oxford ➪ 3 May 2017 @SimonHearne ➪

    JS Oxford ➪ 3 May 2017 Manage DOM complexity
  72. @SimonHearne ➪ JS Oxford ➪ 3 May 2017 SOASTA

  73. @SimonHearne ➪ JS Oxford ➪ 3 May 2017 yellowlab.tools has

    your back https://github.com/gmetais/YellowLabTools/
  74. @SimonHearne ➪ JS Oxford ➪ 3 May 2017 @SimonHearne ➪

    JS Oxford ➪ 3 May 2017 Budget Third-party Content
  75. @SimonHearne ➪ JS Oxford ➪ 3 May 2017

  76. @SimonHearne ➪ JS Oxford ➪ 3 May 2017 @SimonHearne ➪

    JS Oxford ➪ 3 May 2017 Render on the Server
  77. @SimonHearne ➪ JS Oxford ➪ 3 May 2017 Safe, easy

    to scale, cheap, easy to monitor... Unpredictable, uncontrollable, hard to measure Why give away control? SPAs
  78. @SimonHearne ➪ JS Oxford ➪ 3 May 2017 @SimonHearne ➪

    JS Oxford ➪ 3 May 2017 Stop Enhancing
  79. @SimonHearne ➪ JS Oxford ➪ 3 May 2017 https://speakerdeck.com/patrickhamann/breaking-news-at-1000ms-front-trends-2014

  80. @SimonHearne ➪ JS Oxford ➪ 3 May 2017 The Guardian.

    Moto G1. 100Mb/s. https://www.webpagetest.org/result/170207_NV_130V/ 14s
  81. @SimonHearne ➪ JS Oxford ➪ 3 May 2017 @SimonHearne ➪

    JS Oxford ➪ 3 May 2017 Embrace (mobile) Technology
  82. @SimonHearne ➪ JS Oxford ➪ 3 May 2017

  83. @SimonHearne ➪ JS Oxford ➪ 3 May 2017 @SimonHearne ➪

    JS Oxford ➪ 3 May 2017 Please go and fight for fast user experiences Let’s keep in touch! @simonhearne simon@hearne.me webperf.ninja