A strategic view on website quality

by Jono Alderson

Slide 1

Slide 1 text

@jonoalderson We can do better than this

Slide 2

Slide 2 text

@jonoalderson Nobody’s perfect

Slide 3

Slide 3 text

@jonoalderson “With a 0.1s improvement in site speed, we observed that retail consumers spent almost 10% more ” “ Deloitte, 2020, via https://bit.ly/3FOa48A More studies at wpostats.com

Slide 4

Slide 4 text

@jonoalderson “US consumers with vision loss have an estimated $175 billion of disposable income.” Blindcanadians.ca (via CXL), 2015, via https://bit.ly/3I13ls5

Slide 5

Slide 5 text

@jonoalderson “Across industries, the average landing page conversion rate was 2.35%” WordStream, 2021, via https://bit.ly/3Gs5E7d

Slide 6

Slide 6 text

@jonoalderson You’re competing for subconscious attention

Slide 7

Slide 7 text

@jonoalderson So, how are we doing?

Slide 8

Slide 8 text

@jonoalderson pingdom.com/blog/web-performance-top-100-e-commerce-sites-in-2018/

Slide 9

Slide 9 text

@jonoalderson pingdom.com/blog/web-performance-top-100-e-commerce-sites-in-2018/

Slide 10

Slide 10 text

@jonoalderson pingdom.com/blog/web-performance-top-100-e-commerce-sites-in-2018/ ?

Slide 11

Slide 11 text

@jonoalderson gtmetrix.com/reports/www.gap.com/GHyVT3JE/

Slide 12

Slide 12 text

@jonoalderson pingdom.com/blog/web-performance-top-100-e-commerce-sites-in-2018/ E ?

Slide 13

Slide 13 text

@jonoalderson gtmetrix.com/reports/www.bestbuy.ca/vKFafNXt/

Slide 14

Slide 14 text

@jonoalderson pingdom.com/blog/web-performance-top-100-e-commerce-sites-in-2018/ E F ?

Slide 15

Slide 15 text

@jonoalderson gtmetrix.com/reports/www.underarmour.com/og5ejNdl/

Slide 16

Slide 16 text

@jonoalderson pingdom.com/blog/web-performance-top-100-e-commerce-sites-in-2018/ E F D

Slide 17

Slide 17 text

@jonoalderson What about all the clever, disruptive startups?

Slide 18

Slide 18 text

@jonoalderson gtmetrix.com/reports/www.pactcoffee.com/KTZbj1ch/

Slide 19

Slide 19 text

@jonoalderson gtmetrix.com/reports/impossiblefoods.com/DuUwiVDy/

Slide 20

Slide 20 text

@jonoalderson gtmetrix.com/reports/purple.com/nZ9SjFSC/

Slide 21

Slide 21 text

@jonoalderson What about the big players?

Slide 22

Slide 22 text

@jonoalderson gtmetrix.com/reports/www.coca-cola.co.uk/wtj1N0DN/

Slide 23

Slide 23 text

@jonoalderson gtmetrix.com/reports/www.gap.com/GHyVT3JE/

Slide 24

Slide 24 text

@jonoalderson gtmetrix.com/reports/www.dell.com/CgWuTjut/

Slide 25

Slide 25 text

@jonoalderson gtmetrix.com/reports/www.nvidia.com/zpIuWwPS/

Slide 26

Slide 26 text

@jonoalderson gtmetrix.com/reports/www.vodafone.co.uk/mlxE9Fh7/

Slide 27

Slide 27 text

@jonoalderson gtmetrix.com/reports/www.vodafone.co.uk/mlxE9Fh7/ web.dev/vodafone/

Slide 28

Slide 28 text

@jonoalderson Most websites are imperfect bad

Slide 29

Slide 29 text

@jonoalderson It’s almost always the same story

Slide 30

Slide 30 text

@jonoalderson It’s easy to understand why

Slide 31

Slide 31 text

@jonoalderson There is a solution.

Slide 32

Slide 32 text

@jonoalderson web.dev/vitals/

Slide 33

Slide 33 text

@jonoalderson web.dev/vitals-tools/

Slide 34

Slide 34 text

@jonoalderson (on lab data vs ﬁeld data)

Slide 35

Slide 35 text

@jonoalderson web.dev/chrome-ux-report-data-studio-dashboard/

Slide 36

Slide 36 text

@jonoalderson CWV ﬁxes "It's hard to quantify"

Slide 37

Slide 37 text

@jonoalderson (and provides motivation)

Slide 38

Slide 38 text

@jonoalderson They even give speciﬁc recommendations

Slide 39

Slide 39 text

@jonoalderson web.dev/optimize-vitals-lighthouse/

Slide 40

Slide 40 text

@jonoalderson web.dev/patterns/web-vitals-patterns/

Slide 41

Slide 41 text

@jonoalderson developers.google.com/web/fundamentals/design-and-ux/responsive/images

Slide 42

Slide 42 text

@jonoalderson And workﬂows

Slide 43

Slide 43 text

@jonoalderson web.dev/vitals-tools-workflow/

Slide 44

Slide 44 text

@jonoalderson These are all solved problems

Slide 45

Slide 45 text

@jonoalderson The (lack of) tools & docs aren’t the problem

Slide 46

Slide 46 text

@jonoalderson Either they don’t know, or don’t care

Slide 47

Slide 47 text

@jonoalderson CWV scores don’t just measure speed

Slide 48

Slide 48 text

@jonoalderson Technical maturity

Slide 49

Slide 49 text

@jonoalderson Resource allocation & budget

Slide 50

Slide 50 text

@jonoalderson Competency & Capabilities

Slide 51

Slide 51 text

@jonoalderson Priorities & politics

Slide 52

Slide 52 text

@jonoalderson Trajectory & velocity

Slide 53

Slide 53 text

@jonoalderson Why is this important?

Slide 54

Slide 54 text

@jonoalderson CWV is a proxy for quality*

Slide 55

Slide 55 text

@jonoalderson "The quality of your website determines how well it performs"

Slide 56

Slide 56 text

@jonoalderson There’ll be new metrics

Slide 57

Slide 57 text

@jonoalderson SEO, accessibility, general best practice & more

Slide 58

Slide 58 text

@jonoalderson

Slide 59

Slide 59 text

@jonoalderson

Slide 60

Slide 60 text

@jonoalderson

Slide 61

Slide 61 text

@jonoalderson ???

Slide 62

Slide 62 text

@jonoalderson And the metrics & measurements evolve

Slide 63

Slide 63 text

@jonoalderson Speed quality is important.

Slide 64

Slide 64 text

@jonoalderson blog.google/products/search/overview-our-rater-guidelines-search/

Slide 65

Slide 65 text

@jonoalderson So, what do we do?

Slide 66

Slide 66 text

@jonoalderson Don’t aim for perfection

Slide 67

Slide 67 text

@jonoalderson gtmetrix.com/reports/www.jonoalderson.com/p9qItDqQ/

Slide 68

Slide 68 text

@jonoalderson gtmetrix.com/reports/yoast.com/rvkNGtO3/

Slide 69

Slide 69 text

@jonoalderson If you have a team of performance experts

Slide 70

Slide 70 text

@jonoalderson If you start from scratch

Slide 71

Slide 71 text

@jonoalderson Or you have unlimited resources and timeframes

Slide 72

Slide 72 text

@jonoalderson And if you can perfectly predict your future needs

Slide 73

Slide 73 text

@jonoalderson And if you can keep it performant once you've created it

Slide 74

Slide 74 text

@jonoalderson

Slide 75

Slide 75 text

@jonoalderson You cannot make a perfect website

Slide 76

Slide 76 text

@jonoalderson But you shouldn’t try to.

Slide 77

Slide 77 text

@jonoalderson Your strategy shouldn’t be hope

Slide 78

Slide 78 text

@jonoalderson You cannot make a perfect website

Slide 79

Slide 79 text

@jonoalderson Cheat Collaborate

Slide 80

Slide 80 text

@jonoalderson How to get other people to make your website perfect for you

Slide 81

Slide 81 text

@jonoalderson Operating system Publishing & optimization suite App store Telco infrastructure (ﬁbre, security, analytics)

Slide 82

Slide 82 text

@jonoalderson Publishing & optimization suite App store Telco infrastructure (ﬁbre, security, analytics) Operating system

Slide 83

Slide 83 text

@jonoalderson But...

Slide 84

Slide 84 text

@jonoalderson You need to get the basics right, before you chase the shinies

Slide 85

Slide 85 text

@jonoalderson But… You can have your cake and eat it.

Slide 86

Slide 86 text

@jonoalderson Publishing & optimization suite Telco infrastructure (ﬁbre, security, analytics) App store Operating system

Slide 87

Slide 87 text

@jonoalderson !?

Slide 88

Slide 88 text

@jonoalderson amp.dev/documentation/components/

Slide 89

Slide 89 text

@jonoalderson AMP is the best performance framework

Slide 90

Slide 90 text

@jonoalderson

Slide 91

Slide 91 text

@jonoalderson amp.dev

Slide 92

Slide 92 text

@jonoalderson bentojs.dev

Slide 93

Slide 93 text

@jonoalderson Publishing & optimization suite Telco infrastructure (ﬁbre, security, analytics) App store Operating system

Slide 94

Slide 94 text

@jonoalderson Pipelines and lego

Slide 95

Slide 95 text

@jonoalderson

Slide 96

Slide 96 text

@jonoalderson Telco infrastructure (ﬁbre, security, analytics) Publishing & optimization suite App store Operating system

Slide 97

Slide 97 text

@jonoalderson

Slide 98

Slide 98 text

@jonoalderson

Slide 99

Slide 99 text

@jonoalderson

Slide 100

Slide 100 text

@jonoalderson Publishing & optimization suite Telco infrastructure (ﬁbre, security, analytics) App store Operating system

Slide 101

Slide 101 text

@jonoalderson Anticlimactic, eh?

Slide 102

Slide 102 text

@jonoalderson pingdom.com/blog/web-performance-top-100-e-commerce-sites-in-2018/

Slide 103

Slide 103 text

@jonoalderson “We can do this ourselves”

Slide 104

Slide 104 text

@jonoalderson Stop trying to make a perfect website

Slide 105

Slide 105 text

@jonoalderson Stop accepting that it’s normal for your website to be crappy

Slide 106

Slide 106 text

@jonoalderson Get other people to make your website perfect for you

Slide 107

Slide 107 text

@jonoalderson Telco infrastructure (ﬁbre, security, analytics) Publishing & optimization suite App store Operating system