Web Performance… It’s for People!

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

Web Performance… It’s for People! Andy Davies ∙ Oct 2019 https://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

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 becomes interactive? @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 for the 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 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%

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

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

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 https://noti.st/andydavies http://www.flickr.com/photos/auntiep/5024494612

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

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