Web Performance… It’s for People!

Slide 1

Web Performance… It’s for People! Andy Davies Headline sponsor #BDF2019 Partners Category sponsor bathdigitalfestival.co.uk @bathdigital

Slide 2

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

Slide 3

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 4

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 5

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

Slide 6

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

Slide 7

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

Slide 8

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

Slide 9

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

Slide 10

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

Slide 11

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

Slide 12

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

Slide 13

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 14

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

Slide 15

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

Slide 16

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 17

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

Slide 18

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 19

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

Slide 20

Sometimes, for economic reasons @AndyDavies Comscore UKOM Jun 2019

Slide 21

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

Slide 22

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

Slide 23

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

Slide 24

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

Slide 25

These challenges feed into site performance too @AndyDavies

Slide 26

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

Slide 27

With worrying consequences for the success of our sites @AndyDavies

Slide 28

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

Slide 29

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

Slide 30

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 31

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

Slide 32

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

Slide 33

What phones should you test on?

Slide 34

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 35

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

Slide 36

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

Slide 37

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

Slide 38

You’ll spot problems that mobile emulation just can’t find

Slide 39

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

Slide 40

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

Slide 41

April 2017 iOS Median @AndyDavies Android Median

Slide 42

June 2017 iOS Median @AndyDavies Android Median

Slide 43

August 2017 iOS Median @AndyDavies Android Median

Slide 44

April 2018 iOS Median @AndyDavies Android Median

Slide 45

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

Slide 46

Our visitors’ experience influences their behaviour @AndyDavies

Slide 47

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

Slide 48

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

Slide 49

Thanks to our headline sponsor, category sponsors and partners #BDF2019 bathdigitalfestival.co.uk @bathdigital

Slide 50

…and to our festival supporters! #BDF2019 bathdigitalfestival.co.uk @bathdigital