Performance… It’s for People!

A presentation at State Of The Browser in September 2019 in London, UK by Andy Davies

Slide 1

Slide 1

Performance… It’s for People! Andy Davies ∙ Sep 2019 https://www.flickr.com/photos/josepina/286052072/

Slide 2

Slide 2

We ❤ Proxy Metrics Page Size ∙ # of Requests ∙ Lighthouse Scores # of Third-Parties ∙ Resources Sizes etc., etc. @AndyDavies https://sophiebits.com/2018/12/04/metrics-by-proxy.html

Slide 3

Slide 3

And they make for great headlines… https://www.wired.com/2016/04/average-webpage-now-size-original-doom @AndyDavies https://twitter.com/arnauddelafosse/status/458796490606247936

Slide 4

Slide 4

They’re really useful as guard rails… https://www.flickr.com/photos/jcubic/6999177777

Slide 5

Slide 5

And easy to track @AndyDavies https://httparchive.org/reports/state-of-javascript#bytesJs

Slide 6

Slide 6

But ultimately… they don’t represent our visitor’s experience @AndyDavies

Slide 7

Slide 7

But ultimately… they don’t represent our visitor’s experience @AndyDavies

Slide 8

Slide 8

But ultimately… they don’t represent our visitor’s experience @AndyDavies

Slide 9

Slide 9

But ultimately… they don’t represent our visitor’s experience @AndyDavies

Slide 10

Slide 10

Page load is a journey… with milestones along the way Working? @AndyDavies Useful? Usable?

Slide 11

Slide 11

Control the journey… Choreograph your content… https://www.flickr.com/photos/davidstanleytravel/15910178387

Slide 12

Slide 12

Understand and control what affects the milestones Title bar first real visual indication of navigation How long does the server take to respond? Visitor relies on cues from the browser / device until <head> is processed What’s needed to get this point? @AndyDavies

Slide 13

Slide 13

Understand and control what affects the milestones Prioritise the most important content When does it start to appear? What’s delaying it? @AndyDavies

Slide 14

Slide 14

Understand and control what affects the milestones Why does the image take so long to appear? Perhaps it’s lazy loaded? @AndyDavies

Slide 15

Slide 15

Understand and control what affects the milestones Are those 3rd parties really required? Can their load be delayed? What’s their impact on when the page becomes interactive? @AndyDavies

Slide 16

Slide 16

Remember everyone’s journey will have differences http://www.flickr.com/photos/atoach/6014917153

Slide 17

Slide 17

Not all parts of that journey are within our control Visitor’s “choose” their own browser, device, network They’re constraints we need to design for @AndyDavies

Slide 18

Slide 18

Increasing, we’re living in a mobile world @AndyDavies Comscore UKOM Jun 2019

Slide 19

Slide 19

Sometimes, for economic reasons @AndyDavies Comscore UKOM Jun 2019

Slide 20

Slide 20

But the trend isn’t limited to just those on lower incomes @AndyDavies Comscore UKOM Jun 2019

Slide 21

Slide 21

We’re still designing and building for desktop! @AndyDavies (it’s not really surprising… that’s what we tend to use all day)

Slide 22

Slide 22

And then trying to shrink the experience to fit mobile (and it’s not working well) @AndyDavies

Slide 23

Slide 23

Anyone want to buy a bag or a tent or a light? @AndyDavies

Slide 24

Slide 24

These challenges feed into site performance too @AndyDavies

Slide 25

Slide 25

These challenges feed into site performance too 18,723 pixels tall @AndyDavies

Slide 26

Slide 26

With worrying consequences for the success of our sites @AndyDavies

Slide 27

Slide 27

Visitor’s who have better experiences are more engaged @AndyDavies

Slide 28

Slide 28

Your Analytics are Skewed They’re biased towards visitors who’ll tolerate the experience you’re delivering @AndyDavies

Slide 29

Slide 29

Your most popular browsers might look something like this Most_Popular_12_03_11_Sat_14_Sep_2019 Safari mobile 12 51% Chrome Mobile 76 8% Chrome 76 8% Mobile Samsung Browser 9 4% Chrome Mobile 77 4% Safari 12 3% Unknown Facebook App 2% Safari mobile 11 2% Mobile Samsung Browser 10 2% Facebook App 238 2% others 15%

Slide 30

Slide 30

In the UK, Android outsells iOS @AndyDavies https://www.kantarworldpanel.com/global/smartphone-os-market-share

Slide 31

Slide 31

But Android devices are generally much less powerful @AndyDavies https://mobile.twitter.com/slightlylate/status/1139684093602349056

Slide 32

Slide 32

What phones should you test on?

Slide 33

Slide 33

26% of UK mobile customers are on PAYG plans @AndyDavies https://www.ofcom.org.uk/research-and-data/multi-sector-research/cmr/interactive-data

Slide 34

Slide 34

And the best selling PAYG smart phones are ¯_(ツ)_/¯

Slide 35

Slide 35

Released May 2016 Android 5.1!!! https://www.gsmarena.com/vodafone_smart_first_7-8100.php

Slide 36

Slide 36

Alcatel 1x 3rd most popular PAYG phone on Vodafone £35 from Tesco Mobile @AndyDavies

Slide 37

Slide 37

Somewhere around Moto G4 level of performance @AndyDavies https://mobile.twitter.com/slightlylate/status/1139684093602349056

Slide 38

Slide 38

And guess what happens if we improve those slow experiences? @AndyDavies

Slide 39

Slide 39

April 2017 iOS Median @AndyDavies Android Median

Slide 40

Slide 40

June 2017 iOS Median @AndyDavies Android Median

Slide 41

Slide 41

August 2017 iOS Median @AndyDavies Android Median

Slide 42

Slide 42

April 2018 iOS Median @AndyDavies Android Median

Slide 43

Slide 43

Our site’s success depends on how our visitors behave @AndyDavies

Slide 44

Slide 44

Our visitors’ experience influences their behaviour @AndyDavies

Slide 45

Slide 45

How we design, develop and deliver our pages determines our visitor’s experience @AndyDavies

Slide 46

Slide 46

@AndyDavies hello@andydavies.me http://www.flickr.com/photos/auntiep/5024494612