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

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

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

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

And easy to track@AndyDavies

https://httparchive.org/reports/state-of-javascript#bytesJs

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

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

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

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

Page load is a journey… with milestones along the way
Working?

@AndyDavies

Useful?

Usable?

Control the journey… Choreograph your content…

https://www.flickr.com/photos/davidstanleytravel/15910178387

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

Understand and control what affects the milestones

Prioritise the most important content
When does it start to appear?
What’s delaying it?

@AndyDavies

Understand and control what affects the milestones

Why does the image take so long to appear?
Perhaps it’s lazy loaded?

@AndyDavies

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 becomesinteractive?

@AndyDavies

Remember everyone’s journey will have differences

http://www.flickr.com/photos/atoach/6014917153

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

Increasing, we’re living in a mobile world@AndyDavies

Comscore UKOM Jun 2019Sometimes, for economic reasons@AndyDavies

Comscore UKOM Jun 2019

But the trend isn’t limited to just those on lower incomes@AndyDavies

Comscore UKOM Jun 2019

We’re still designing and building for desktop!

@AndyDavies(it’s not really surprising… that’s what we tend to use all day)And then trying to shrink the experience to fit mobile(and it’s not working well)@AndyDavies

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

@AndyDavies

These challenges feed into site performance too@AndyDavies

These challenges feed into site performance too

18,723 pixels tall
@AndyDaviesWith worrying consequences forthe success of our sites@AndyDavies

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

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

Your most popular browsers might look something like thisMost_Popular_12_03_11_Sat_14_Sep_2019

Safari mobile 1251%

Chrome Mobile 76

8%

Chrome 768%

Mobile Samsung Browser 94%

Chrome Mobile 774%

Safari 123%

Unknown Facebook App2%

Safari mobile 112%

Mobile Samsung Browser 102%

Facebook App 2382%

others15%

In the UK, Android outsells iOS@AndyDavies

https://www.kantarworldpanel.com/global/smartphone-os-market-shareBut Android devices are generally much less powerful@AndyDavies

https://mobile.twitter.com/slightlylate/status/1139684093602349056

What phones should you test on?

26% of UK mobile customers
are on PAYG plans@AndyDavies

https://www.ofcom.org.uk/research-and-data/multi-sector-research/cmr/interactive-data

And the best selling PAYG smart phones are ¯\_(ツ)_/¯Released May 2016
Android 5.1!!!

https://www.gsmarena.com/vodafone_smart_first_7-8100.phpAlcatel 1x
3rd most popular PAYG
phone on Vodafone£35 from Tesco Mobile@AndyDavies

Somewhere around Moto G4 level of performance@AndyDavies

https://mobile.twitter.com/slightlylate/status/1139684093602349056

And guess what happens if we
improve those slow experiences?

@AndyDavies

April 2017
iOS Median@AndyDavies

Android MedianJune 2017
iOS Median@AndyDavies

Android MedianAugust 2017
iOS Median@AndyDavies

Android MedianApril 2018
iOS Median@AndyDavies

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

Our visitors’ experience influences
their behaviour@AndyDavies

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

@AndyDavies
hello@andydavies.me

http://www.flickr.com/photos/auntiep/5024494612