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 99

Slide 99 text

Thank You @SimonHearne [email protected] webperf.ninja/ Stay in touch!

Slide 100

Slide 100 text

@SimonHearne • Optimizing for Low Powered Devices • Velocity New York 2016 112