Performance… It’s for People!

Slide 1

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

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

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

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

Slide 5

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

Slide 6

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

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

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

Slide 11

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

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

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

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

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

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

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

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

Slide 19

Sometimes, for economic reasons @AndyDavies Comscore UKOM Jun 2019

Slide 20

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

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

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

Slide 23

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

Slide 24

These challenges feed into site performance too @AndyDavies

Slide 25

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

Slide 26

With worrying consequences for the success of our sites @AndyDavies

Slide 27

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

Slide 28

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

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%