A presentation at State Of The Browser in in London, UK by Andy Davies
Performance… It’s for People! Andy Davies ∙ Sep 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
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 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
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
It’s easy to focus on the number of 3rd-party tags, how large a page is, or even its Lighthouse score, but fundamentally performance is about our visitors’ experience – how quickly it loads, how smooth it is to use.
This talk looks at our perception of performance, some of the issues and challenges with our current approach to designing and delivering fast experiences.
for free. You
can too.