Slide 1
Slide 1 text
how to
think like a
performance
engineer
Slide 2
Slide 2 text
hi—i’m harry
Slide 3
Slide 3 text
@csswizardry
Slide 4
Slide 4 text
tools of
the trade
Slide 5
Slide 5 text
crux
Slide 6
Slide 6 text
chrome user
experience report
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
treo
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
webpagetest
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
devtools
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
the metrics
that matter
Slide 17
Slide 17 text
agree on what you’re benchmarking
Slide 18
Slide 18 text
core
web
vitals
Slide 19
Slide 19 text
the easiest place to start
Slide 20
Slide 20 text
— web.dev/vitals
Slide 21
Slide 21 text
diagnostic
metrics
Slide 22
Slide 22 text
time to first byte
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
“While a good TTFB doesn
’
t necessarily mean
you will have a fast website, a bad TTFB
almost certainly guarantees a slow one.”
— csswz.it/ttfb
Slide 25
Slide 25 text
api calls, application runtime, cdn
features, cheap hosting, ddos or
heavy load, dns, database queries,
filesystem reads, last-mile latency,
latency, prioritisation, redirects,
routing, server-side rendering, tcp,
tls, wafs and load balancers
Slide 26
Slide 26 text
domcontentloaded
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
K E Y T A K E A W A Y
domcontentloaded fires after
deferred js has finished running
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
custom
metrics
Slide 31
Slide 31 text
W A R N I N G
largest !== most important
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
element timing api
Slide 35
Slide 35 text
Slide 36
Slide 36 text
No content
Slide 37
Slide 37 text
bare-metal
metrics
Slide 38
Slide 38 text
W A R N I N G
core web vitals are
too broad for localhost
Slide 39
Slide 39 text
lcp
Slide 40
Slide 40 text
ttfb
lcp
Slide 41
Slide 41 text
ttfb
cssTime
lcp
Slide 42
Slide 42 text
No content
Slide 43
Slide 43 text
performance.mark('cssStart');
performance.mark('cssEnd');
const cssTime =
performance.measure('cssTime', 'cssStart', 'cssEnd');
console.log(cssTime.duration);
Slide 44
Slide 44 text
performance.mark('cssStart');
/*! app.css */
performance.mark('cssEnd');
const cssTime =
performance.measure('cssTime', 'cssStart', 'cssEnd');
console.log(cssTime.duration);
Slide 45
Slide 45 text
K E Y T A K E A W A Y
custom timings better capture the
bare-metal impact of your work
Slide 46
Slide 46 text
the 75th
percentile
Slide 47
Slide 47 text
No content
Slide 48
Slide 48 text
No content
Slide 49
Slide 49 text
p75 is a big number*
Slide 50
Slide 50 text
“Data from ATI also confirms that BBC.com had
[…] 1.5 billion page views […] in March 2020.”
— bit.ly/3S8xexY
Slide 51
Slide 51 text
1,125,000,000
Slide 52
Slide 52 text
*but it’s not really big enough
Slide 53
Slide 53 text
375,000,000
Slide 54
Slide 54 text
aim around p95
Slide 55
Slide 55 text
reliable,
realistic, or
repeatable?
Slide 56
Slide 56 text
pick
three!
Slide 57
Slide 57 text
test
conditions
Slide 58
Slide 58 text
urls
device type
connection speed
geographic locale
Slide 59
Slide 59 text
W A R N I N G
this gets a little fiddly
Slide 60
Slide 60 text
urls
Slide 61
Slide 61 text
you should know your own urls:
source them from search console,
analytics, commercial importance
Slide 62
Slide 62 text
No content
Slide 63
Slide 63 text
device type
Slide 64
Slide 64 text
No content
Slide 65
Slide 65 text
connection speed
Slide 66
Slide 66 text
No content
Slide 67
Slide 67 text
W A R N I N G
most tools run too slowly
Slide 68
Slide 68 text
3.2
Slide 69
Slide 69 text
No content
Slide 70
Slide 70 text
score di
ff
erence (+)
3g fast 8.715 5.515
4g 6.230 3.030
4g fast 5.280 2.080
lte 5.018 1.818
cable 5.670 2.470
Slide 71
Slide 71 text
K E Y T A K E A W A Y
most tools’ defaults are
too pessimistic; try align
lab tests with field data
Slide 72
Slide 72 text
geographic locale
Slide 73
Slide 73 text
No content
Slide 74
Slide 74 text
No content
Slide 75
Slide 75 text
throttling?
not so fast!
Slide 76
Slide 76 text
dev tools throttling
is very synthetic
Slide 77
Slide 77 text
No content
Slide 78
Slide 78 text
No content
Slide 79
Slide 79 text
— csswz.it/464NNRb
Slide 80
Slide 80 text
live website ✅ ❌
localhost ❌ ✅
lots of third-
parties or apis
✅ ❌
Slide 81
Slide 81 text
No content
Slide 82
Slide 82 text
No content
Slide 83
Slide 83 text
No content
Slide 84
Slide 84 text
cold-start
scenarios
Slide 85
Slide 85 text
most tools start from
a very pessimistic baseline
Slide 86
Slide 86 text
No content
Slide 87
Slide 87 text
No content
Slide 88
Slide 88 text
empty cache
no user interactions
no open dns, tcp, tls
cookies not accepted
Slide 89
Slide 89 text
K E Y T A K E A W A Y
important to test, but don’t
over-focus on cold-start
Slide 90
Slide 90 text
K E Y T A K E A W A Y
cold starts should be
your least frequent scenarios
Slide 91
Slide 91 text
K E Y T A K E A W A Y
cold starts are your
most pessimistic scenario
Slide 92
Slide 92 text
K E Y T A K E A W A Y
cold starts tend to show
your most obvious issues
Slide 93
Slide 93 text
test
scenarios
Slide 94
Slide 94 text
interaction
mid-session
user journeys
cookie banners
logged-in state
experimentation
repeat page-view
Slide 95
Slide 95 text
the application panel
Slide 96
Slide 96 text
No content
Slide 97
Slide 97 text
cookie banners
Slide 98
Slide 98 text
No content
Slide 99
Slide 99 text
No content
Slide 100
Slide 100 text
No content
Slide 101
Slide 101 text
No content
Slide 102
Slide 102 text
setEventName Home
navigate %URL%
setEventName AcceptCookies
execAndWait document.querySelector('#nhsuk-cookie-\
banner__link_accept_analytics').click()
Slide 103
Slide 103 text
No content
Slide 104
Slide 104 text
most page views will
not incur a cookie banner
Slide 105
Slide 105 text
No content
Slide 106
Slide 106 text
No content
Slide 107
Slide 107 text
// Auth cookie, consent, experimentation, etc.
setCookie %ORIGIN% =
navigate %URL%
Slide 108
Slide 108 text
No content
Slide 109
Slide 109 text
shopping carts
Slide 110
Slide 110 text
https://www.website.com/checkout
Slide 111
Slide 111 text
No content
Slide 112
Slide 112 text
“There are no products
in your shopping cart yet.”
Slide 113
Slide 113 text
No content
Slide 114
Slide 114 text
No content
Slide 115
Slide 115 text
// Add something to localStorage before
// the app needs to read it back out.
localStorage.setItem('key', 'value');
Slide 116
Slide 116 text
No content
Slide 117
Slide 117 text
W A R N I N G
this is still an unlikely
(i.e. cold-start) scenario
Slide 118
Slide 118 text
user interactions
and user journeys
Slide 119
Slide 119 text
how did they get
there in the first place?
Slide 120
Slide 120 text
No content
Slide 121
Slide 121 text
No content
Slide 122
Slide 122 text
No content
Slide 123
Slide 123 text
No content
Slide 124
Slide 124 text
No content
Slide 125
Slide 125 text
W A R N I N G
even this isn’t the same as
a real user clicking around
Slide 126
Slide 126 text
No content
Slide 127
Slide 127 text
no amount of cold-start testing
could get anywhere close to
replicating the problem
Slide 128
Slide 128 text
api calls, application runtime, cdn
features, cheap hosting, ddos or
heavy load, dns, database queries,
filesystem reads, last-mile latency,
latency, prioritisation, redirects,
routing, server-side rendering, tcp,
tls, wafs and load balancers
Slide 129
Slide 129 text
api calls, application runtime, cdn
features, cheap hosting, ddos or
heavy load, dns, database queries,
filesystem reads, last-mile latency,
latency, prioritisation, redirects,
routing, server-side rendering, tcp,
tls, wafs and load balancers
Slide 130
Slide 130 text
-status-code:200 domain:www.first-party.com
Slide 131
Slide 131 text
No content
Slide 132
Slide 132 text
soft navigations and spa
Slide 133
Slide 133 text
W A R N I N G
you can’t use the navigate
command with spa
Slide 134
Slide 134 text
No content
Slide 135
Slide 135 text
No content
Slide 136
Slide 136 text
setEventName Home
// Trigger hard navigation
navigate %URL%
setEventName About
// Trigger soft navigation
execAndWait \
document.querySelector('[href=about/]').click()
Slide 137
Slide 137 text
wrapping
up
Slide 138
Slide 138 text
K E Y T A K E A W A Y
the numbers you see represent a
huge array of experiences…
Slide 139
Slide 139 text
K E Y T A K E A W A Y
…you can’t keep running one test
Slide 140
Slide 140 text
K E Y T A K E A W A Y
design tests that
suit your context
Slide 141
Slide 141 text
K E Y T A K E A W A Y
test the right things
under the right conditions
and in the right scenarios
Slide 142
Slide 142 text
K E Y T A K E A W A Y
the fun stuff is
the most well hidden
Slide 143
Slide 143 text
thank
you
Slide 144
Slide 144 text
harry.is/for-hire