Embed Size (px)
DESCRIPTION
This presentation covers some techniques for improving performance, as well as some business metrics around performance that Etsy has gathered recently.
Citation preview
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
