Performance and User Experience

Slide 1

Slide 1 text

RUM Distillation 101 UX Fest 2013 Jonathan Klein @jonathanklein Tuesday, October 1, 13

Slide 2

Slide 2 text

Some Etsy Stats • Handmade marketplace • 1.5 billion page views/month • Almost $1B in sales last year Tuesday, October 1, 13

Slide 3

Slide 3 text

Tuesday, October 1, 13

Slide 4

Slide 4 text

What We Focus On Tuesday, October 1, 13

Slide 5

Slide 5 text

Metrics We Care About Tuesday, October 1, 13

Slide 6

Slide 6 text

Metrics We Care About • Backend Load Time Tuesday, October 1, 13

Slide 7

Slide 7 text

Metrics We Care About • Backend Load Time • SEO, capacity, impacts first paint Tuesday, October 1, 13

Slide 8

Slide 8 text

Metrics We Care About • Backend Load Time • SEO, capacity, impacts first paint • Time to first paint Tuesday, October 1, 13

Slide 9

Slide 9 text

Metrics We Care About • Backend Load Time • SEO, capacity, impacts first paint • Time to first paint • Rendering Performance Tuesday, October 1, 13

Slide 10

Slide 10 text

Metrics We Care About • Backend Load Time • SEO, capacity, impacts first paint • Time to first paint • Rendering Performance Tuesday, October 1, 13

Slide 11

Slide 11 text

Time to First Paint Tuesday, October 1, 13

Slide 12

Slide 12 text

Tuesday, October 1, 13

Slide 13

Slide 13 text

Blocked By Tuesday, October 1, 13

Slide 14

Slide 14 text

Blocked By • Base HTML Page Tuesday, October 1, 13

Slide 15

Slide 15 text

Blocked By • Base HTML Page • CSS Tuesday, October 1, 13

Slide 16

Slide 16 text

Blocked By • Base HTML Page • CSS • JavaScript Tuesday, October 1, 13

Slide 17

Slide 17 text

Solutions Tuesday, October 1, 13

Slide 18

Slide 18 text

Solutions • Small CSS (can inline) Tuesday, October 1, 13

Slide 19

Slide 19 text

Solutions • Small CSS (can inline) • Defer JavaScript Tuesday, October 1, 13

Slide 20

Slide 20 text

Solutions • Small CSS (can inline) • Defer JavaScript • Fast backend Tuesday, October 1, 13

Slide 21

Slide 21 text

Solutions • Small CSS (can inline) • Defer JavaScript • Fast backend • CDN Tuesday, October 1, 13

Slide 22

Slide 22 text

Rendering Performance Tuesday, October 1, 13

Slide 23

Slide 23 text

60 FPS Tuesday, October 1, 13

Slide 24

Slide 24 text

16.6 ms Tuesday, October 1, 13

Slide 25

Slide 25 text

Tuesday, October 1, 13

Slide 26

Slide 26 text

Jank Tuesday, October 1, 13

Slide 27

Slide 27 text

http://jankfree.org/jank-busters-io-2013/template.html#15 Tuesday, October 1, 13

Slide 28

Slide 28 text

Why Do We Care? Tuesday, October 1, 13

Slide 29

Slide 29 text

Facebook artiﬁcially slowed down frame rate on iOS and Android to 30 FPS, and “engagement collapsed” - Shane O'Sullivan, Edge London 2013 Tuesday, October 1, 13

Slide 30

Slide 30 text

Etsy tested pre-fetching JS on our search results page, which caused jank as the JS ﬁnished downloading. All business metrics we monitored got much worse. - Me, right now Tuesday, October 1, 13

Slide 31

Slide 31 text

Solutions Tuesday, October 1, 13

Slide 32

Slide 32 text

Tuesday, October 1, 13

Slide 33

Slide 33 text

jankfree.org Tuesday, October 1, 13

Slide 34

Slide 34 text

Etsy Studies Tuesday, October 1, 13

Slide 35

Slide 35 text

Improved Performance Tuesday, October 1, 13

Slide 36

Slide 36 text

Improved Performance • Went from 4 sharded domains to two Tuesday, October 1, 13

Slide 37

Slide 37 text

Improved Performance • Went from 4 sharded domains to two • 500ms load time improvement on mobile Tuesday, October 1, 13

Slide 38

Slide 38 text

Improved Performance • Went from 4 sharded domains to two • 500ms load time improvement on mobile • 30-50ms on desktop Tuesday, October 1, 13

Slide 39

Slide 39 text

Improved Performance • Went from 4 sharded domains to two • 500ms load time improvement on mobile • 30-50ms on desktop • 0.27% increase in page views per visit Tuesday, October 1, 13

Slide 40

Slide 40 text

Increased Page Weight Tuesday, October 1, 13

Slide 41

Slide 41 text

Increased Page Weight • Added ~160k more bytes on mobile Tuesday, October 1, 13

Slide 42

Slide 42 text

Increased Page Weight • Added ~160k more bytes on mobile • 12% increase in bounce rate Tuesday, October 1, 13