UXFest - RUM Distillation 101

Post on 15-Jan-2015

1.157 views 1 download

Tags:

description

This presentation covers some techniques for improving performance, as well as some business metrics around performance that Etsy has gathered recently.

Transcript of UXFest - RUM Distillation 101

RUM Distillation 101UX Fest 2013Jonathan Klein@jonathanklein

Tuesday, October 1, 13

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

Tuesday, October 1, 13

Tuesday, October 1, 13

What We Focus On

Tuesday, October 1, 13

Metrics We Care About

Tuesday, October 1, 13

Metrics We Care About•Backend Load Time

Tuesday, October 1, 13

Metrics We Care About•Backend Load Time• SEO, capacity, impacts first paint

Tuesday, October 1, 13

Metrics We Care About•Backend Load Time• SEO, capacity, impacts first paint•Time to first paint

Tuesday, October 1, 13

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

Tuesday, October 1, 13

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

Tuesday, October 1, 13

Time to First Paint

Tuesday, October 1, 13

Tuesday, October 1, 13

Blocked By

Tuesday, October 1, 13

Blocked By•Base HTML Page

Tuesday, October 1, 13

Blocked By•Base HTML Page•CSS

Tuesday, October 1, 13

Blocked By•Base HTML Page•CSS• JavaScript

Tuesday, October 1, 13

Solutions

Tuesday, October 1, 13

Solutions• Small CSS (can inline)

Tuesday, October 1, 13

Solutions• Small CSS (can inline)•Defer JavaScript

Tuesday, October 1, 13

Solutions• Small CSS (can inline)•Defer JavaScript• Fast backend

Tuesday, October 1, 13

Solutions• Small CSS (can inline)•Defer JavaScript• Fast backend•CDN

Tuesday, October 1, 13

Rendering Performance

Tuesday, October 1, 13

60 FPS

Tuesday, October 1, 13

16.6 ms

Tuesday, October 1, 13

Tuesday, October 1, 13

Jank

Tuesday, October 1, 13

http://jankfree.org/jank-busters-io-2013/template.html#15

Tuesday, October 1, 13

Why Do We Care?

Tuesday, October 1, 13

Facebook artificially slowed down frame rate on iOS and Android to 30 FPS, and “engagement collapsed”

- Shane O'Sullivan, Edge London 2013

Tuesday, October 1, 13

Etsy tested pre-fetching JS on our search results page, which caused jank as the JS finished downloading. All

business metrics we monitored got much worse.- Me, right now

Tuesday, October 1, 13

Solutions

Tuesday, October 1, 13

Tuesday, October 1, 13

jankfree.org

Tuesday, October 1, 13

Etsy Studies

Tuesday, October 1, 13

Improved Performance

Tuesday, October 1, 13

Improved Performance•Went from 4 sharded domains to two

Tuesday, October 1, 13

Improved Performance•Went from 4 sharded domains to two• 500ms load time improvement on mobile

Tuesday, October 1, 13

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

Tuesday, October 1, 13

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

Increased Page Weight

Tuesday, October 1, 13

Increased Page Weight•Added ~160k more bytes on mobile

Tuesday, October 1, 13

Increased Page Weight•Added ~160k more bytes on mobile• 12% increase in bounce rate

Tuesday, October 1, 13

Tradeoffs

Tuesday, October 1, 13

Test Everything

Tuesday, October 1, 13

Listen to the Customer

Tuesday, October 1, 13

Faster is Better

Tuesday, October 1, 13