Slide 1
Slide 1 text
@SimonHearne ➪ Performance Matters ➪ 11 May 2017
Optimising for
25,000 devices
The five stages of JavaScript Performance grief :(
Slide 2
Slide 2 text
@SimonHearne ➪ Performance Matters ➪ 11 May 2017
Measuring ‘Speed’
Slide 3
Slide 3 text
@SimonHearne ➪ Performance Matters ➪ 11 May 2017
You have to measure
Real User
performance
Slide 4
Slide 4 text
@SimonHearne ➪ Performance Matters ➪ 11 May 2017
Distributions tell a story (Smartphone OS)
iPhone
Android
Slide 5
Slide 5 text
@SimonHearne ➪ Performance Matters ➪ 11 May 2017
Distributions tell a story (Top 10 Models)
iPhone
Galaxy S5
Galaxy S7
Galaxy S6
Galaxy J5 & A3
Slide 6
Slide 6 text
@SimonHearne ➪ Performance Matters ➪ 11 May 2017
Distributions tell a story (Engagement by Model)
iPhone
Galaxy S5 & A3
Galaxy S7
Galaxy S6
Slide 7
Slide 7 text
@SimonHearne ➪ Performance Matters ➪ 11 May 2017
There were 25,000 unique
Android devices detected in 2015
Slide 8
Slide 8 text
@SimonHearne ➪ Performance Matters ➪ 11 May 2017
Only 15 iPhone models have ever been produced
...
Slide 9
Slide 9 text
@SimonHearne ➪ Performance Matters ➪ 11 May 2017
The five stages of grief
Slide 10
Slide 10 text
@SimonHearne ➪ Performance Matters ➪ 11 May 2017
Denial
Bargaining
Anger
Depression
Acceptance
Slide 11
Slide 11 text
@SimonHearne ➪ Performance Matters ➪ 11 May 2017
Denial
Slide 12
Slide 12 text
@SimonHearne ➪ Performance Matters ➪ 11 May 2017
We don’t have
much Smartphone
traffic
Slide 13
Slide 13 text
@SimonHearne ➪ Performance Matters ➪ 11 May 2017
Three large UK retailers.
Which is the fastest?
Slide 14
Slide 14 text
@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?
Slide 15
Slide 15 text
@SimonHearne ➪ Performance Matters ➪ 11 May 2017
Retailers with faster mobile
experiences have more mobile
traffic
Slide 16
Slide 16 text
@SimonHearne ➪ Performance Matters ➪ 11 May 2017
We don’t have
much Android
traffic
Slide 17
Slide 17 text
@SimonHearne ➪ Performance Matters ➪ 11 May 2017
https://www.kantarworldpanel.com/global/smartphone-os-market-share/
Slide 18
Slide 18 text
@SimonHearne ➪ Performance Matters ➪ 11 May 2017
53%
of mobile visits over 3 seconds are abandoned
https://www.doubleclickbygoogle.com/articles/mobile-speed-matters/
Slide 19
Slide 19 text
@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/
Slide 20
Slide 20 text
@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/
Slide 21
Slide 21 text
@SimonHearne ➪ Performance Matters ➪ 11 May 2017
Three seconds...
Slide 22
Slide 22 text
@SimonHearne ➪ Performance Matters ➪ 11 May 2017
Android doesn’t
convert as well as
iPhone
Slide 23
Slide 23 text
@SimonHearne ➪ Performance Matters ➪ 11 May 2017
The Android-iOS conversion rate
MoovWeb - Q1 2015
gap is now a mere
5%
Slide 24
Slide 24 text
@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%
Slide 25
Slide 25 text
@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
Slide 26
Slide 26 text
@SimonHearne ➪ Performance Matters ➪ 11 May 2017
Bargaining
Slide 27
Slide 27 text
@SimonHearne ➪ Performance Matters ➪ 11 May 2017
Android devices are
getting faster
Slide 28
Slide 28 text
@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
Slide 29
Slide 29 text
@SimonHearne ➪ Performance Matters ➪ 11 May 2017
People are moving to PAYG
Slide 30
Slide 30 text
@SimonHearne ➪ Performance Matters ➪ 11 May 2017
We’ve got an app!
Slide 31
Slide 31 text
@SimonHearne ➪ Performance Matters ➪ 11 May 2017
That takes guts
Slide 32
Slide 32 text
@SimonHearne ➪ Performance Matters ➪ 11 May 2017
That takes guts
Slide 33
Slide 33 text
@SimonHearne ➪ Performance Matters ➪ 11 May 2017
Average # apps downloaded per month?
Slide 34
Slide 34 text
@SimonHearne ➪ Performance Matters ➪ 11 May 2017
People with cheap
phones expect a
slow experience
Slide 35
Slide 35 text
@SimonHearne ➪ Performance Matters ➪ 11 May 2017
Your website competes
with native applications
Slide 36
Slide 36 text
@SimonHearne ➪ Performance Matters ➪ 11 May 2017
Slide 37
Slide 37 text
@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!
Slide 38
Slide 38 text
@SimonHearne ➪ Performance Matters ➪ 11 May 2017
Anger
Slide 39
Slide 39 text
@SimonHearne ➪ Performance Matters ➪ 11 May 2017
Why is Android
so slow?!
Slide 40
Slide 40 text
@SimonHearne ➪ Performance Matters ➪ 11 May 2017
Android CPUs focus on multitasking
Slide 41
Slide 41 text
@SimonHearne ➪ Performance Matters ➪ 11 May 2017
iPhone vs Android
Slide 42
Slide 42 text
@SimonHearne ➪ Performance Matters ➪ 11 May 2017
Javascript :(
Image rendering :(
DOM creation & manipulation :(
Slide 43
Slide 43 text
@SimonHearne ➪ Performance Matters ➪ 11 May 2017
Whose job is it?
Slide 44
Slide 44 text
@SimonHearne ➪ Performance Matters ➪ 11 May 2017
Slide 45
Slide 45 text
@SimonHearne ➪ Performance Matters ➪ 11 May 2017
Anger
● Android devices are slower than iPhones :(
● Lack of ownership of the problem
Slide 46
Slide 46 text
@SimonHearne ➪ Performance Matters ➪ 11 May 2017
Depression
Slide 47
Slide 47 text
@SimonHearne ➪ Performance Matters ➪ 11 May 2017
Why did we
choose
Angular?
Legit stock photo
Slide 48
Slide 48 text
@SimonHearne ➪ Performance Matters ➪ 11 May 2017
Who’s that?
Slide 49
Slide 49 text
@SimonHearne ➪ Performance Matters ➪ 11 May 2017
Ethan Marcotte - Started that whole ‘Responsive Web Design’ thing
Slide 50
Slide 50 text
@SimonHearne ➪ Performance Matters ➪ 11 May 2017
Optimising for
everything is hard
Slide 51
Slide 51 text
@SimonHearne ➪ Performance Matters ➪ 11 May 2017
Responsive web design
squishes desktop sites onto
mobile viewports
Slide 52
Slide 52 text
@SimonHearne ➪ Performance Matters ➪ 11 May 2017
AMP :(
Slide 53
Slide 53 text
@SimonHearne ➪ Performance Matters ➪ 11 May 2017
https://www.ampproject.org/
Slide 54
Slide 54 text
@SimonHearne ➪ Performance Matters ➪ 11 May 2017
Slide 55
Slide 55 text
@SimonHearne ➪ Performance Matters ➪ 11 May 2017
Slide 56
Slide 56 text
@SimonHearne ➪ Performance Matters ➪ 11 May 2017
Acceptance
Slide 57
Slide 57 text
@SimonHearne ➪ Performance Matters ➪ 11 May 2017
What can we do?
Slide 58
Slide 58 text
@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
Slide 59
Slide 59 text
@SimonHearne ➪ Performance Matters ➪ 11 May 2017
Track JS Execution
On Phones
Slide 60
Slide 60 text
@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)
Slide 61
Slide 61 text
@SimonHearne ➪ Performance Matters ➪ 11 May 2017
Manage DOM
complexity
Slide 62
Slide 62 text
@SimonHearne ➪ Performance Matters ➪ 11 May 2017
SOASTA
Slide 63
Slide 63 text
@SimonHearne ➪ Performance Matters ➪ 11 May 2017
yellowlab.tools has your back
https://github.com/gmetais/YellowLabTools/
Slide 64
Slide 64 text
@SimonHearne ➪ Performance Matters ➪ 11 May 2017
Budget Third-party
Content
Slide 65
Slide 65 text
@SimonHearne ➪ Performance Matters ➪ 11 May 2017
Slide 66
Slide 66 text
@SimonHearne ➪ Performance Matters ➪ 11 May 2017
Render on the
Server
Slide 67
Slide 67 text
@SimonHearne ➪ Performance Matters ➪ 11 May 2017
Safe, easy to scale, cheap, easy to monitor... Unpredictable, uncontrollable, hard to measure
Why give away control?
SPAs
Slide 68
Slide 68 text
@SimonHearne ➪ Performance Matters ➪ 11 May 2017
Stop Enhancing
Slide 69
Slide 69 text
@SimonHearne ➪ Performance Matters ➪ 11 May 2017
https://speakerdeck.com/patrickhamann/breaking-news-at-1000ms-front-trends-2014
Slide 70
Slide 70 text
@SimonHearne ➪ Performance Matters ➪ 11 May 2017
The Guardian. Moto G1. 100Mb/s.
https://www.webpagetest.org/result/170207_NV_130V/
14s
Slide 71
Slide 71 text
@SimonHearne ➪ Performance Matters ➪ 11 May 2017
Embrace (mobile)
Technology
Slide 72
Slide 72 text
@SimonHearne ➪ Performance Matters ➪ 11 May 2017
Slide 73
Slide 73 text
@SimonHearne ➪ Performance Matters ➪ 11 May 2017
Please go and fight for fast user experiences
Let’s keep in touch!
Slide 74
Slide 74 text
@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?
Slide 75
Slide 75 text
@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?
Slide 76
Slide 76 text
@SimonHearne ➪ Performance Matters ➪ 11 May 2017
Nav Timings in WebPageTest
plotcon.plot.ly tested on Moto G4 @ 3G
Slide 77
Slide 77 text
@SimonHearne ➪ Performance Matters ➪ 11 May 2017
https://www.npmjs.com/package/webpack-bundle-analyzer
[sidebar]
Slide 78
Slide 78 text
@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
( )
Slide 79
Slide 79 text
@SimonHearne ➪ Performance Matters ➪ 11 May 2017
Navigation Timing API
https://goo.gl/6sbQX5
Slide 80
Slide 80 text
@SimonHearne ➪ Performance Matters ➪ 11 May 2017
All the DATA
Slide 81
Slide 81 text
@SimonHearne ➪ Performance Matters ➪ 11 May 2017
Distributions tell a story (Top 10 Browser versions)
Samsung
Internet 4
Chrome 57
Samsung
Internet 5