Optimising for 25,000 Devices - JS Monthly London

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