From Milliseconds  to Millions: A Look at the Numbers Powering Web Performance

Slide 1

Slide 1 text

From Milliseconds to Millions A Look at the Numbers Powering Web Performance

Slide 2

Slide 2 text

Hi, I’m Harry Consultant Performance Engineer Leeds, UK @csswizardry

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

From clearﬁxes to waterfalls.

Slide 5

Slide 5 text

Ask the Right Questions

Slide 6

Slide 6 text

I don’t have all of the answers.

Slide 7

Slide 7 text

Ask the Right Questions How do you know the site is slow? What key areas of the site should I look at? What will it being faster mean for the business? How do you intend to measure this?

Slide 8

Slide 8 text

Nobody Wants a Faster Website

Slide 9

Slide 9 text

They want the most effective website.

Slide 10

Slide 10 text

Motives Increase revenues Improve engagement Drive sign-ups Raise conversions Solicit donations Deliver content

Slide 11

Slide 11 text

Case Study

Slide 12

Slide 12 text

We want to be faster but still run the same number of ads. Publishing Client “

Slide 13

Slide 13 text

5HYHQXH $PRXQWRI$GVDQG7UDFNLQJ (QJDJHPHQW $PRXQWRI$GVDQG7UDFNLQJDQG5HYHQXH Ads Engagement Revenue

Slide 14

Slide 14 text

How much can we get away with?

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

You Can’t Fix What You Can’t Measure

Slide 17

Slide 17 text

Gather Data Spend time gathering statistics Then spend some more

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

Google Analytics Average data means means—we want percentiles Only samples 1% of sessions—insufficient for many sites Far too coarse—aggregates every device, browser, page, region Focuses on load times—considered a legacy metric

Slide 20

Slide 20 text

Any data is better than none.

Slide 21

Slide 21 text

Case Study

Slide 22

Slide 22 text

Do you know about your Venezuela problem? “

Slide 23

Slide 23 text

Do you know about your Venezuela problem? “

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

Venezuela Economy is tanked Government minted Petro Electricity is virtually free

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

Follow the Numbers

Slide 33

Slide 33 text

Numbers seldom lie.

Slide 34

Slide 34 text

Case Study

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

... ...

Slide 37

Slide 37 text

... ...

Slide 38

Slide 38 text

It got slower.

Slide 39

Slide 39 text

Move Slow to Move Fast

Slide 40

Slide 40 text

There is probably no rush.

Slide 41

Slide 41 text

Take your time to measure.

Slide 42

Slide 42 text

Release incrementally.

Slide 43

Slide 43 text

One thematic release per day.

Slide 44

Slide 44 text

What Has Most Impact? Know where to look next time Know what to avoid next time

Slide 45

Slide 45 text

Maximise the Work Not Done

Slide 46

Slide 46 text

It’s just as important to know what not to do.

Slide 47

Slide 47 text

Case Study

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

Most conversions happen at 2s but our median is 2.9s.

Slide 50

Slide 50 text

Case Study

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

&RPSDQ\ 9LWDPL[ %UHYLOOH 1LQMD %OHQGWHF .LWFKHQ$LG 1XWUL%XOOHW /RDG7LPH 6WDUW5HQGHU /RDG7LPHDQG6WDUW5HQGHU±%HIRUH

Slide 53

Slide 53 text

There is no prize beyond ﬁrst place.

Slide 54

Slide 54 text

Let’s Ignore Load Already the best on desktop and mobile It’s a legacy metric anyway We’re definitely suffering with Start Render Everyone hitting the site wants to see stuff Start Render is our focus

Slide 55

Slide 55 text

Load is subresources; Start Render is .

Slide 56

Slide 56 text

A week in their .

Slide 57

Slide 57 text

&RPSDQ\ 9LWDPL[ %UHYLOOH %OHQGWHF 1LQMD 1XWUL%XOOHW .LWFKHQ$LG /RDG7LPH 6WDUW5HQGHU /RDG7LPHDQG6WDUW5HQGHU±$IWHU

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

4EKI 8MQIW ,SQI 'EXIKSV] 4VSHYGX 4(4 764 0SEH8MQI 88*& 7XEVX6IRHIV *MVWX'SRXIRXJYP4EMRX 7TIIH-RHI\ 0EWX4EMRXIH,IVS *MVWX'49-HPI %TTPI1MPIWXSRI8MQMRKWƁ1SFMPI

Slide 60

Slide 60 text

Pricing Performance

Slide 61

Slide 61 text

Don’t do it for the money, but never do it for no money. Oliver Reichenstein “

Slide 62

Slide 62 text

Performance directly affects the bottom line.

Slide 63

Slide 63 text

This is not a good time to be shy.

Slide 64

Slide 64 text

Case Study

Slide 65

Slide 65 text

No content

Slide 66

Slide 66 text

03.s average [reduction in] latency across our funnel equals £8m a year in additional revenue. csswz.it/2FQHt2S “

Slide 67

Slide 67 text

Value-Based Pricing.

Slide 68

Slide 68 text

My fee represents my contribution to the project with a dramatic ROI for you and equitable compensation for me. Alan Weiss “

Slide 69

Slide 69 text

How much are we likely to make from this project? “

Slide 70

Slide 70 text

How have you calculated the value of this project?

Slide 71

Slide 71 text

I am not your Business Analyst.

Slide 72

Slide 72 text

But I can be for a little bit.

Slide 73

Slide 73 text

Phase Zero.

Slide 74

Slide 74 text

Phase Zero A period of pre-engagement Let’s work out the value of the project together Then we know how much it’s worth to you… …and I know what to charge you.

Slide 75

Slide 75 text

No content

Slide 76

Slide 76 text

Customer Data and A/B Tests.

Slide 77

Slide 77 text

3× more conversions if we start rendering under 3s compared to after 6s

Slide 78

Slide 78 text

No content

Slide 79

Slide 79 text

62.1% 87.5% Bounce Rate With and Without Cloud.typography

Slide 80

Slide 80 text

Now we can put numbers against it.

Slide 81

Slide 81 text

If we can achieve a start render of 0.9s, we stand to increase conversions by 8%. Across one year, this equates to increased revenues of £1–1.2m. I’ll take X%. “

Slide 82

Slide 82 text

Keep on Top of Things

Slide 83

Slide 83 text

Performance budgets, pragmatically.

Slide 84

Slide 84 text

How should we set performance budgets?

Slide 85

Slide 85 text

Set to your worst point in the last two weeks.

Slide 86

Slide 86 text

0.8s under budget: new budget set to 2.2s

Slide 87

Slide 87 text

Only just staying in budget: leave as-is but don’t slip further

Slide 88

Slide 88 text

Yikes! Lots of work to do here: budget is overshot daily

Slide 89

Slide 89 text

Normalise performance.

Slide 90

Slide 90 text

Normalise Performance Talk about it like it’s always been there Mention it in passing Have dashboards for individual teams

Slide 91

Slide 91 text

No content

Slide 92

Slide 92 text

Ultimately blur the lines.

Slide 93

Slide 93 text

Performance is a proxy for business success.

Slide 94

Slide 94 text

Know When to Stop

Slide 95

Slide 95 text

Good enough is good enough.

Slide 96

Slide 96 text

Thank You Very Much

Slide 97

Slide 97 text

Thank You Understand the situation fully before you begin Maximise the work not done Calculate the value of the project Know when to stop

Slide 98

Slide 98 text

harry.is/for-hire