Slide 1
Slide 1 text
@SimonHearne • Optimizing for Low Powered Devices • Velocity New York 2016 1
TOO HOT TO HANDLE
OPTIMIZING FOR LOW POWERED DEVICES
Slide 2
Slide 2 text
2
Simon Hearne
@SimonHearne
Senior Performance Consultant
NCC Group
slides: hearne.me/2hot
slides
Slide 3
Slide 3 text
3
Things I Make
Slide 4
Slide 4 text
4
1. Device Diversity
2. Developer Convenience
3. Unpredictable Hardware
4. JavaScript Performance is Critical to User Experience
5. We Don’t Have the Tools
6. So What Do We Do?
Slide 5
Slide 5 text
@SimonHearne • Optimizing for Low Powered Devices • Velocity New York 2016 5
Slide 6
Slide 6 text
@SimonHearne • Optimizing for Low Powered Devices • Velocity New York 2016 6
Slide 7
Slide 7 text
@SimonHearne • Optimizing for Low Powered Devices • Velocity New York 2016 7
Performance was ‘the same’
Slide 8
Slide 8 text
@SimonHearne • Optimizing for Low Powered Devices • Velocity New York 2016 8
High conversion rate expectations…
-40%
Slide 9
Slide 9 text
@SimonHearne • Optimizing for Low Powered Devices • Velocity New York 2016 9
Slide 10
Slide 10 text
@SimonHearne • Optimizing for Low Powered Devices • Velocity New York 2016 10
User feedback was poor
“Old-fashioned”
“clunky”
“hard to use”
“slow”
“tired”
“frustrating”
Slide 11
Slide 11 text
@SimonHearne • Optimizing for Low Powered Devices • Velocity New York 2016 11
Slide 12
Slide 12 text
@SimonHearne • Optimizing for Low Powered Devices • Velocity New York 2016 12
0.00%
0.50%
1.00%
1.50%
2.00%
2.50%
3.00%
0 2 4 6 8 10 12 14 16 18 20
Page Impressions
Page Load Time (s)
Desktop
Smartphone
Smartphone experience slower than desktop
Slide 13
Slide 13 text
@SimonHearne • Optimizing for Low Powered Devices • Velocity New York 2016 13
“ ”
people on mobile
expect a slower experience
A Customer
Slide 14
Slide 14 text
@SimonHearne • Optimizing for Low Powered Devices • Velocity New York 2016 14
Your users’ expectations are set
by their most recent interactions.
Slide 15
Slide 15 text
@SimonHearne • Optimizing for Low Powered Devices • Velocity New York 2016 15
Your users’ expectations are set
by their most recent interactions.
On mobile, that means you’re competing
with the OS and native applications
Slide 16
Slide 16 text
@SimonHearne • Optimizing for Low Powered Devices • Velocity New York 2016 16
Mobile users are not patient.
Slide 17
Slide 17 text
@SimonHearne • Optimizing for Low Powered Devices • Velocity New York 2016 17
53%
The need for mobile speed. DoubleClick, September 2016.
of visits are abandoned if a mobile
page takes over three seconds
Mobile users are not patient.
Slide 18
Slide 18 text
@SimonHearne • Optimizing for Low Powered Devices • Velocity New York 2016 18
0.00%
0.50%
1.00%
1.50%
2.00%
2.50%
3.00%
0 2 4 6 8 10 12 14 16 18 20
Page Impressions
Page Load Time (s)
Android
iOS
Android experience slower than iPhone
Slide 19
Slide 19 text
19
Device Diversity
Increasing device diversity has led to a
‘great on some, okay on all’ attitude
Slide 20
Slide 20 text
@SimonHearne • Optimizing for Low Powered Devices • Velocity New York 2016 20
Slide 21
Slide 21 text
@SimonHearne • Optimizing for Low Powered Devices • Velocity New York 2016 21
Slide 22
Slide 22 text
@SimonHearne • Optimizing for Low Powered Devices • Velocity New York 2016 23
“ ”
Responsive web design is a
fluid grid, flexible images and
media queries
Ethan Marcotte
(2010)
Slide 23
Slide 23 text
@SimonHearne • Optimizing for Low Powered Devices • Velocity New York 2016 24
RESPONSIVE WEB DESIGN WAS CREATED
WHEN MOBILE TRAFFIC WAS < 3%
http://www.statista.com/statistics/241462/global-mobile-phone-website-traffic-share/
Slide 24
Slide 24 text
@SimonHearne • Optimizing for Low Powered Devices • Velocity New York 2016 25
RESPONSIVE WEB DESIGN WAS CREATED
WHEN MOBILE TRAFFIC WAS < 3%
MOBILE TRAFFIC IS NOW >40%
http://www.statista.com/statistics/241462/global-mobile-phone-website-traffic-share/
Slide 25
Slide 25 text
@SimonHearne • Optimizing for Low Powered Devices • Velocity New York 2016 27
US Android market share is 25% greater than iPhone
2016 U.S. Cross-Platform Future in Focus – ConScore Inc.
53%
43%
Slide 26
Slide 26 text
@SimonHearne • Optimizing for Low Powered Devices • Velocity New York 2016 28
(p.s. smartphone ⊆ mobile)
Slide 27
Slide 27 text
@SimonHearne • Optimizing for Low Powered Devices • Velocity New York 2016 29
Smart TV
Smart Watch
Raspberry Pi
Games Console
Wireless Router
2% of
Ecommerce
Traffic
Slide 28
Slide 28 text
@SimonHearne • Optimizing for Low Powered Devices • Velocity New York 2016 30
COMING SOON TO A FUTURE NEAR YOU…
IN-CAR WEB BROWSERS
Slide 29
Slide 29 text
@SimonHearne • Optimizing for Low Powered Devices • Velocity New York 2016 31
COMING SOON TO A FUTURE NEAR YOU…
APPLIANCE WEB BROWSERS
Slide 30
Slide 30 text
@SimonHearne • Optimizing for Low Powered Devices • Velocity New York 2016 32
COMING SOON TO A FUTURE NEAR YOU…
WEARABLE WEB BROWSERS
Slide 31
Slide 31 text
@SimonHearne • Optimizing for Low Powered Devices • Velocity New York 2016 33
Responsive (generally) means a
desktop site on non-desktop devices
Slide 32
Slide 32 text
@SimonHearne • Optimizing for Low Powered Devices • Velocity New York 2016 36
RULE
1
Responsive Web Design Is Not Enough
Slide 33
Slide 33 text
37
Developer
Convenience
We prioritise developer convenience
over user experience
Slide 34
Slide 34 text
@SimonHearne • Optimizing for Low Powered Devices • Velocity New York 2016 38
“ ”
Responsive web design is a
fluid grid, flexible images and
media queries
Ethan Marcotte
(2010)
Slide 35
Slide 35 text
@SimonHearne • Optimizing for Low Powered Devices • Velocity New York 2016 39
i.e.
develop one code-base &
compromise on most viewports
Slide 36
Slide 36 text
@SimonHearne • Optimizing for Low Powered Devices • Velocity New York 2016 40
the way we consume the web has changed
19%
http://www.pewinternet.org/2015/04/01/us-smartphone-use-in-2015/
of adults in the United States are
Smartphone-dependent
Slide 37
Slide 37 text
@SimonHearne • Optimizing for Low Powered Devices • Velocity New York 2016 42
Mobile revenue share is increasing
2016 U.S. Cross Platform Future in Focus – ComScore Inc.
16.9%
of digital revenue is mobile
3.6%
9.0% 11.3% 11.7% 13.0%
16.9%
2010 2011 2012 2013 2014 2015
Slide 38
Slide 38 text
@SimonHearne • Optimizing for Low Powered Devices • Velocity New York 2016 44
2007 2016
the way we develop for the web has changed
Slide 39
Slide 39 text
@SimonHearne • Optimizing for Low Powered Devices • Velocity New York 2016 46
MOBILE
USERS
JAVASCRIPT
FRAMEWORKS
Slide 40
Slide 40 text
@SimonHearne • Optimizing for Low Powered Devices • Velocity New York 2016 47
15%
“Building Pew Research Center’s American Trends Panel,” April 8, 2015
do not have JavaScript
enabled devices”
“among our 5,400 panellists
Slide 41
Slide 41 text
@SimonHearne • Optimizing for Low Powered Devices • Velocity New York 2016 48
1.1%
https://gds.blog.gov.uk/2013/10/21/how-many-people-are-missing-out-on-javascript-enhancement/
of UK traffic does not
execute JavaScript
Slide 42
Slide 42 text
@SimonHearne • Optimizing for Low Powered Devices • Velocity New York 2016 50
JavaScript frameworks take our
code from a safe and controlled
environment (server) to the wild
west (client).
Slide 43
Slide 43 text
@SimonHearne • Optimizing for Low Powered Devices • Velocity New York 2016 51
RULE
2
Question the Use of JavaScript Frameworks
Slide 44
Slide 44 text
52
Unpredictable
Hardware
We can’t control our users’ devices.
Even high-end devices can perform poorly.
Slide 45
Slide 45 text
@SimonHearne • Optimizing for Low Powered Devices • Velocity New York 2016 53
“ ”
Our customers use iPhones and
high-end Android phones,
so performance isn’t an issue
A Customer
Slide 46
Slide 46 text
@SimonHearne • Optimizing for Low Powered Devices • Velocity New York 2016 54
JetStream JavaScript Benchmark
(bigger = better)
48
14
Galaxy S6 Moto G (3rd Ed.)
Slide 47
Slide 47 text
@SimonHearne • Optimizing for Low Powered Devices • Velocity New York 2016 55
JetStream JavaScript Benchmark
(bigger = better)
48
37
14
Galaxy S6 Galaxy S6
(Power Saving)
Moto G
(3rd Ed.)
Slide 48
Slide 48 text
@SimonHearne • Optimizing for Low Powered Devices • Velocity New York 2016 56
JetStream JavaScript Benchmark
(bigger = better)
48
37
25
14
Galaxy S6 Galaxy S6
(Power Saving)
Galaxy S6
(In the Sun)
Moto G
(3rd Ed.)
Slide 49
Slide 49 text
@SimonHearne • Optimizing for Low Powered Devices • Velocity New York 2016 57
JetStream JavaScript Benchmark
(bigger = better)
63
52 48
37
25
14
iPhone 6 iPhone 5S Galaxy S6 Galaxy S6
(Power Saving)
Galaxy S6
(In the Sun)
Moto G
(3rd Ed.)
Slide 50
Slide 50 text
@SimonHearne • Optimizing for Low Powered Devices • Velocity New York 2016 58
JetStream JavaScript Benchmark
(bigger = better)
63
52 48
37
25 21
14
iPhone 6 iPhone 5S Galaxy S6 Galaxy S6
(Power Saving)
Galaxy S6
(In the Sun)
iPhone 5C Moto G
(3rd Ed.)
Slide 51
Slide 51 text
@SimonHearne • Optimizing for Low Powered Devices • Velocity New York 2016 59
JetStream JavaScript Benchmark
(bigger = better)
160
63 52 48 37 25 21 14
iPhone 7 iPhone 6 iPhone 5S Galaxy S6 Galaxy S6
(Power
Saving)
Galaxy S6
(In the Sun)
iPhone 5C Moto G
(3rd Ed.)
Slide 52
Slide 52 text
@SimonHearne • Optimizing for Low Powered Devices • Velocity New York 2016 61
Increasing Performance Fragmentation
Slide 53
Slide 53 text
@SimonHearne • Optimizing for Low Powered Devices • Velocity New York 2016 62
Should low-income users get
a poorer web experience?
Slide 54
Slide 54 text
@SimonHearne • Optimizing for Low Powered Devices • Velocity New York 2016 63
Do you test performance
on low-end devices?
Slide 55
Slide 55 text
@SimonHearne • Optimizing for Low Powered Devices • Velocity New York 2016 64
RULE
3
Test on low-end hardware (it’s cheap!)
Slide 56
Slide 56 text
65
JavaScript
Performance is
Critical to User
Experience
Slide 57
Slide 57 text
@SimonHearne • Optimizing for Low Powered Devices • Velocity New York 2016 66
Facebook @ Line Speed
2x Faster
(at least)
https://www.webpagetest.org/video/compare.php?tests=160918_2A_SSH,160918_05_SSF
Slide 58
Slide 58 text
@SimonHearne • Optimizing for Low Powered Devices • Velocity New York 2016 67
Facebook @ Line Speed
2186
322
177
52
5
46
20
9
0 500 1000 1500 2000 2500
Scripting
Layout
Loading
Painting
Processing Breakdown (ms)
mbasic.facebook.com
m.facebook.com
https://www.webpagetest.org/breakdownTimeline.php?test=160918_2A_SSH , https://www.webpagetest.org/breakdownTimeline.php?test=160918_05_SSF
Slide 59
Slide 59 text
@SimonHearne • Optimizing for Low Powered Devices • Velocity New York 2016 68
700ms
https://timkadlec.com/2014/09/js-parse-and-execution-time/
on low-powered devices
Parsing & executing jQuery can take
Slide 60
Slide 60 text
@SimonHearne • Optimizing for Low Powered Devices • Velocity New York 2016 69
• QuantCast top 10,000 websites
• WebPageTest Private
• AWS North California
• Chrome mobile emulation
• Cable speed
• 8,289 valid page tests
• 12.4% have a single-page application framework (hearne.me/spajs)
Here comes some data…
Slide 61
Slide 61 text
@SimonHearne • Optimizing for Low Powered Devices • Velocity New York 2016 70
43%
Measured by Speed Index
slower than those without
mobile sites with
SPA frameworks are
Slide 62
Slide 62 text
@SimonHearne • Optimizing for Low Powered Devices • Velocity New York 2016 71
500ms
longer to start render
mobile sites with
SPA frameworks take
Slide 63
Slide 63 text
@SimonHearne • Optimizing for Low Powered Devices • Velocity New York 2016 72
0
2000
4000
6000
8000
10000
12000
14000
none angular react backbone dojo unknown knockout
MEDIAN of CPU Time MEDIAN of Speed Index MEDIAN of Visually Complete
hearne.me/spadata
Slide 64
Slide 64 text
@SimonHearne • Optimizing for Low Powered Devices • Velocity New York 2016 73
0
2000
4000
6000
8000
10000
12000
14000
none angular react backbone dojo unknown knockout
MEDIAN of CPU Time MEDIAN of Speed Index MEDIAN of Visually Complete
hearne.me/spadata
Slide 65
Slide 65 text
@SimonHearne • Optimizing for Low Powered Devices • Velocity New York 2016 74
WPT API
Chrome Mobile
Chrome Desktop
Slide 66
Slide 66 text
@SimonHearne • Optimizing for Low Powered Devices • Velocity New York 2016 75
You can make it faster
Slide 67
Slide 67 text
@SimonHearne • Optimizing for Low Powered Devices • Velocity New York 2016 76
Any JavaScript single-page
application framework or
template can be pre-rendered
Slide 68
Slide 68 text
@SimonHearne • Optimizing for Low Powered Devices • Velocity New York 2016 77
Angular 2 Universal Pre-Render
https://angular.io/features.html
Slide 69
Slide 69 text
@SimonHearne • Optimizing for Low Powered Devices • Velocity New York 2016 78
Angular 2 Universal Pre-Render
https://angular.io/features.html
Slide 70
Slide 70 text
@SimonHearne • Optimizing for Low Powered Devices • Velocity New York 2016 80
But It’s Not Just Page Loads…
Slide 71
Slide 71 text
@SimonHearne • Optimizing for Low Powered Devices • Velocity New York 2016 81
But It’s Not Just Page Loads…
Slide 72
Slide 72 text
@SimonHearne • Optimizing for Low Powered Devices • Velocity New York 2016 83
Third-Parties can lock the UI
1,000 ms
Slide 73
Slide 73 text
@SimonHearne • Optimizing for Low Powered Devices • Velocity New York 2016 84
Beware of onBeforeUnload
250ms input latency!
Slide 74
Slide 74 text
@SimonHearne • Optimizing for Low Powered Devices • Velocity New York 2016 85
RULE
4
Measure and Monitor CPU Usage
Including page interactions!
Slide 75
Slide 75 text
86
We Don’t
Have the Tools
You can’t manage what you don’t measure.
Slide 76
Slide 76 text
@SimonHearne • Optimizing for Low Powered Devices • Velocity New York 2016 87
Developer Machines vs Customer Machines
Slide 77
Slide 77 text
@SimonHearne • Optimizing for Low Powered Devices • Velocity New York 2016 88
Emulation is
NOT GOOD ENOUGH
but this helps
Slide 78
Slide 78 text
@SimonHearne • Optimizing for Low Powered Devices • Velocity New York 2016 89
https://www.webpagetest.org/video/compare.php?tests=160915_V5_2177,160915_6R_2170
Slide 79
Slide 79 text
@SimonHearne • Optimizing for Low Powered Devices • Velocity New York 2016 90
Mobile Labs are Design-Focused
https://codeascraft.com/2013/08/09/mobile-device-lab/
Slide 80
Slide 80 text
@SimonHearne • Optimizing for Low Powered Devices • Velocity New York 2016 91
Chrome & Safari Remote Debugging
Slide 81
Slide 81 text
@SimonHearne • Optimizing for Low Powered Devices • Velocity New York 2016 92
Use Real Data!
Slide 82
Slide 82 text
@SimonHearne • Optimizing for Low Powered Devices • Velocity New York 2016 93
“ ”
The Web Performance industry
is lacking a good way of
measuring real client CPU usage
Me, just now
Slide 83
Slide 83 text
@SimonHearne • Optimizing for Low Powered Devices • Velocity New York 2016 94
Slide 84
Slide 84 text
@SimonHearne • Optimizing for Low Powered Devices • Velocity New York 2016 95
RULE
5
Understand the Data &
Invest in a Mobile Performance Lab
Slide 85
Slide 85 text
96
So…
What do we do?
the Web is not about pixel perfect results
for a reduced subset of devices
Slide 86
Slide 86 text
@SimonHearne • Optimizing for Low Powered Devices • Velocity New York 2016 97
Progressive Web Apps
to the rescue
Slide 87
Slide 87 text
@SimonHearne • Optimizing for Low Powered Devices • Velocity New York 2016 98
Progressive Web Apps
to the rescue
Slide 88
Slide 88 text
@SimonHearne • Optimizing for Low Powered Devices • Velocity New York 2016 99
provide the best user experience possible,
given the current conditions
Slide 89
Slide 89 text
@SimonHearne • Optimizing for Low Powered Devices • Velocity New York 2016 100
HTML CSS
Images (ATF)
JavaScript
Additional Content
Third-Party Content
Core Experience
Progressive Enhancement
Bloat
>94% of
transferred
bytes
(<14kB)
http://mobile.httparchive.org/trends.php
Slide 90
Slide 90 text
@SimonHearne • Optimizing for Low Powered Devices • Velocity New York 2016 101
back to m.
Slide 91
Slide 91 text
@SimonHearne • Optimizing for Low Powered Devices • Velocity New York 2016 102
back to m.
without the m.
Slide 92
Slide 92 text
@SimonHearne • Optimizing for Low Powered Devices • Velocity New York 2016 103
Slide 93
Slide 93 text
@SimonHearne • Optimizing for Low Powered Devices • Velocity New York 2016 105
https://medium.com/engineering-housing/progressing-mobile-web-fac3efb8b454
Slide 94
Slide 94 text
@SimonHearne • Optimizing for Low Powered Devices • Velocity New York 2016 106
https://speakerdeck.com/steveworkman/adapting-for-the-times?slide=22
Slide 95
Slide 95 text
@SimonHearne • Optimizing for Low Powered Devices • Velocity New York 2016 107
RULE
6
Split Your Codebase When Necessary
Slide 96
Slide 96 text
@SimonHearne • Optimizing for Low Powered Devices • Velocity New York 2016 108
SUMMARY
1. Responsive Web Design is Not Enough
2. Question the Use of JavaScript Frameworks - yes, even jQuery
3. Test on Low-End Hardware – It’s Cheap!
4. Measure and Monitor CPU Usage - Including page interactions!
5. Understand the Data & Invest in a Mobile Lab
6. Split the Codebase When Necessary
Slide 97
Slide 97 text
@SimonHearne • Optimizing for Low Powered Devices • Velocity New York 2016 109
1. Mobile networks – 5G is coming
2. Third-Party Content
3. AMP
4. Image Performance
WE HAVEN’T COVERED IT ALL
Slide 98
Slide 98 text
@SimonHearne • Optimizing for Low Powered Devices • Velocity New York 2016 110
Test your mobile site in WebPageTestwith JavaScript disabled
ONE THING
(using emulation as it doesn’t work on devices)
Slide 100
Slide 100 text
@SimonHearne • Optimizing for Low Powered Devices • Velocity New York 2016 112