Optimising for 25,000 Devices - Performance Matters 2017

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