Optimising for 25,000 devices - JS Oxford

@SimonHearne ➪ JS Oxford ➪ 3 May 2017 Optimising for
25,000 devices The five stages of JavaScript Performance grief :(

@SimonHearne ➪ JS Oxford ➪ 3 May 2017

@SimonHearne ➪ JS Oxford ➪ 3 May 2017 Smooth segway
from Star Wars to site speed.

@SimonHearne ➪ JS Oxford ➪ 3 May 2017 Measuring ‘Speed’

@SimonHearne ➪ JS Oxford ➪ 3 May 2017 @SimonHearne ➪
JS Oxford ➪ 3 May 2017 You have to measure Real User performance

@SimonHearne ➪ JS Oxford ➪ 3 May 2017 Navigation Timing
API https://goo.gl/6sbQX5

@SimonHearne ➪ JS Oxford ➪ 3 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?

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?

in WebPageTest plotcon.plot.ly tested on Moto G4 @ 3G

@SimonHearne ➪ JS Oxford ➪ 3 May 2017 https://www.npmjs.com/package/webpack-bundle-analyzer [sidebar]

@SimonHearne ➪ JS Oxford ➪ 3 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 ( )

@SimonHearne ➪ JS Oxford ➪ 3 May 2017 All the
DATA

@SimonHearne ➪ JS Oxford ➪ 3 May 2017 Distributions tell
a story (Smartphone OS) iPhone Android

a story (Top 10 Models) iPhone Galaxy S5 Galaxy S7 Galaxy S6 Galaxy J5 & A3

a story (Top 10 Browser versions) Samsung Internet 4 Chrome 57 Samsung Internet 5

a story (Engagement by Model)

@SimonHearne ➪ JS Oxford ➪ 3 May 2017 There were
25,000 unique Android devices detected in 2015

@SimonHearne ➪ JS Oxford ➪ 3 May 2017 Only 15
iPhone models have ever been produced ...

JS Oxford ➪ 3 May 2017 The five stages of grief

JS Oxford ➪ 3 May 2017 Denial Bargaining Anger Depression Acceptance

@SimonHearne ➪ JS Oxford ➪ 3 May 2017 Denial

@SimonHearne ➪ JS Oxford ➪ 3 May 2017 We don’t
have much Smartphone traffic

@SimonHearne ➪ JS Oxford ➪ 3 May 2017 Three large
UK retailers. Which is the fastest?

@SimonHearne ➪ JS Oxford ➪ 3 May 2017 Median smartphone
DOM Content Loaded time 5.8s 1.8s 3.8s Three large UK retailers. Which is the fastest?

JS Oxford ➪ 3 May 2017 Retailers with faster mobile experiences have more mobile traffic

@SimonHearne ➪ JS Oxford ➪ 3 May 2017 We don’t
have much Android traffic

@SimonHearne ➪ JS Oxford ➪ 3 May 2017 https://www.kantarworldpanel.com/global/smartphone-os-market-share/

@SimonHearne ➪ JS Oxford ➪ 3 May 2017 53% of
mobile visits over 3 seconds are abandoned https://www.doubleclickbygoogle.com/articles/mobile-speed-matters/

mobile visits over 3 seconds are abandoned like, proper lost https://www.doubleclickbygoogle.com/articles/mobile-speed-matters/

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/

@SimonHearne ➪ JS Oxford ➪ 3 May 2017 Three seconds...

@SimonHearne ➪ JS Oxford ➪ 3 May 2017 Android doesn’t
convert as well as iPhone

JS Oxford ➪ 3 May 2017 The Android-iOS conversion rate MoovWeb - Q1 2015 gap is now a mere 5%

JS Oxford ➪ 3 May 2017 The Android-iOS conversion rate MoovWeb - Q1 2015 (Android users want to buy things, who knew?) gap is now a mere 5%

JS Oxford ➪ 3 May 2017 Denial - Summary • Android & iPhone traffic should be equal • Android & iPhone conversions should be equal • Android bounce rate is likely understated • Question your assumptions about your users

@SimonHearne ➪ JS Oxford ➪ 3 May 2017 Bargaining

@SimonHearne ➪ JS Oxford ➪ 3 May 2017 Android devices
are getting faster

@SimonHearne ➪ JS Oxford ➪ 3 May 2017 The Galaxy
S8 is only 15% faster than the Galaxy S6. It’s 300% slower than the iPhone 7

@SimonHearne ➪ JS Oxford ➪ 3 May 2017 People are
moving to PAYG

@SimonHearne ➪ JS Oxford ➪ 3 May 2017 We’ve got
an app!

JS Oxford ➪ 3 May 2017 That takes guts

@SimonHearne ➪ JS Oxford ➪ 3 May 2017 Average #
apps downloaded per month?

@SimonHearne ➪ JS Oxford ➪ 3 May 2017 People with
cheap phones expect a slow experience

JS Oxford ➪ 3 May 2017 Your website competes with native applications

JS Oxford ➪ 3 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!

@SimonHearne ➪ JS Oxford ➪ 3 May 2017 Anger

@SimonHearne ➪ JS Oxford ➪ 3 May 2017 Why is
Android so slow?!

JS Oxford ➪ 3 May 2017 Android CPUs focus on multitasking

@SimonHearne ➪ JS Oxford ➪ 3 May 2017 iPhone vs
Android

@SimonHearne ➪ JS Oxford ➪ 3 May 2017 Javascript :(
Image rendering :( DOM creation & manipulation :(

@SimonHearne ➪ JS Oxford ➪ 3 May 2017 Whose job
is it?

JS Oxford ➪ 3 May 2017 Anger • Android devices are slower than iPhones :( • Lack of ownership of the problem

@SimonHearne ➪ JS Oxford ➪ 3 May 2017 Depression

@SimonHearne ➪ JS Oxford ➪ 3 May 2017 Why did
we choose Angular? Legit stock photo

JS Oxford ➪ 3 May 2017 Who’s that?

JS Oxford ➪ 3 May 2017 Ethan Marcotte - Started that whole ‘Responsive Web Design’ thing

JS Oxford ➪ 3 May 2017 Optimising for everything is hard

JS Oxford ➪ 3 May 2017 Responsive web design squishes desktop sites onto mobile viewports

@SimonHearne ➪ JS Oxford ➪ 3 May 2017 AMP :(

@SimonHearne ➪ JS Oxford ➪ 3 May 2017 https://www.ampproject.org/

@SimonHearne ➪ JS Oxford ➪ 3 May 2017 Acceptance

@SimonHearne ➪ JS Oxford ➪ 3 May 2017 What can
we do?

@SimonHearne ➪ JS Oxford ➪ 3 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

JS Oxford ➪ 3 May 2017 Track JS Execution On Phones There’s no point measuring JS performance on Desktop

@SimonHearne ➪ JS Oxford ➪ 3 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)

JS Oxford ➪ 3 May 2017 Manage DOM complexity

@SimonHearne ➪ JS Oxford ➪ 3 May 2017 SOASTA

@SimonHearne ➪ JS Oxford ➪ 3 May 2017 yellowlab.tools has
your back https://github.com/gmetais/YellowLabTools/

JS Oxford ➪ 3 May 2017 Budget Third-party Content

JS Oxford ➪ 3 May 2017 Render on the Server

@SimonHearne ➪ JS Oxford ➪ 3 May 2017 Safe, easy
to scale, cheap, easy to monitor... Unpredictable, uncontrollable, hard to measure Why give away control? SPAs

JS Oxford ➪ 3 May 2017 Stop Enhancing

@SimonHearne ➪ JS Oxford ➪ 3 May 2017 https://speakerdeck.com/patrickhamann/breaking-news-at-1000ms-front-trends-2014

@SimonHearne ➪ JS Oxford ➪ 3 May 2017 The Guardian.
Moto G1. 100Mb/s. https://www.webpagetest.org/result/170207_NV_130V/ 14s

JS Oxford ➪ 3 May 2017 Embrace (mobile) Technology

JS Oxford ➪ 3 May 2017 Please go and fight for fast user experiences Let’s keep in touch! @simonhearne [email protected] webperf.ninja

Optimising for 25,000 devices - JS Oxford

Optimising for 25,000 devices - JS Oxford

More Decks by Simon Hearne

Other Decks in Programming

Featured

Transcript