Stubborn Empathy

Slide 1

Stubbo n Empathy r Tim Kadlec @tkadlec.bsky.social linkedin.com/in/tkadlec/

Slide 2

Stubbo n Empathy r Tim Kadlec @tkadlec.bsky.social linkedin.com/in/tkadlec/

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

The monoculture & the machine.

Slide 8

Slide 9

r r r It’s our job to make sure that they have a great user expe ience…. r “ And then finally, and I think most impo tantly, is that for me, front-end enginee ing comes down to suppo ting users.

Slide 10

“ r r …We want to have stubbo n empathy for what they need, and what they want, and what they’re going through — what can we do to make all that better?

Slide 11

…We want to have stubbo r r stubbo n empathy

Slide 12

…We want to have stubbo empathy r r stubbo

Slide 13

r The monoculture stubbo & the machine.

Slide 14

r The monoculture stubbo The monoculture & the machine.

Slide 15

Slide 16

The localhost delusion.

Slide 17

<body> <h1>LCP Test: Slow CSS in Body, after the image</h1> <img src=”https://www.placecats.com/1000/700” alt=”A large cat image.” width=”500” height=”350” > <link rel=“stylesheet” href=”https://slowfil.es/file?type=css&delay=3000”> <p>The LCP is the image, with a slow CSS link in the body.</p> </body>

Slide 18

Slide 19

Slide 20

Slide 21

Cross-browser testing is an act of user advocacy.

Slide 22

Slide 23

144

Slide 24

229

Slide 25

Slide 26

Slide 27

230

Slide 28

Slide 29

P75 INP (desktop only) 88ms 120ms

Slide 30

P75 LCP (desktop only) 2.26s 1.86s

Slide 31

r Measurement difference? stubbo

Slide 32

r r Oppo tunity? stubbo

Slide 33

fl https://github.com/cloud are/telescope

Slide 34

Cross-browser support Packet level network throttling Custom cookies Custom headers Filmstrip images HTTP Auth Video recording CPU Throttling Har generation Block requests Paint Timing Block domains User Timing Firefox preferences Resource Timing Chromium ags fl Navigation Timing