Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Performance and User Experience

Jonathan Klein
October 01, 2013
Technology
0
120

Performance and User Experience

A talk I gave at UX Fest 2013 at the offices of Fresh Tilled Soil in Boston, Massachusetts

Jonathan Klein

October 01, 2013
Tweet

More Decks by Jonathan Klein

See All by Jonathan Klein
Cognitive Biases in Engineering Organizations - Craft Conf
jklein
15
390
Demystifying SPDY and HTTP/2
jklein
1
620
Demystifying SPDY and HTTP/2
jklein
2
1.1k
Cognitive Biases in Engineering Organizations
jklein
4
1.9k
Composer: From Beginner to Expert
jklein
1
930
Upgrading the Web: Boston Web Performance Meetup
jklein
1
290
Upgrading the Web: Driving Support For New Standards
jklein
1
780
Northeastern Lunch and Learn
jklein
0
230
Profiling PHP With XHProf
jklein
1
1k

Other Decks in Technology

See All in Technology
アセスメントで紐解く、10Xのデータマネジメントの軌跡
10xinc
1
400
自分の軸足を見つけろ
tsuemura
2
660
Amazon S3 Tables + Amazon Athena / Apache Iceberg
okaru
0
260
AIと開発者の共創: エージェント時代におけるAIフレンドリーなDevOpsの実践
bicstone
1
270
低レイヤを知りたいPHPerのためのCコンパイラ作成入門 / Building a C Compiler for PHPers Who Want to Dive into Low-Level Programming
tomzoh
0
220
AI Agentを「期待通り」に動かすために：設計アプローチの模索と現在地
kworkdev
PRO
2
400
AIを活用した化学反応的なスピード開発 TDD × ペアプロ × AI / Chemically Reactive Speed Development with AI. TDD-Pair Pro-AI
oomatomo
0
220
彩の国で始めよう。おっさんエンジニアから共有したい、当たり前のことを当たり前にする技術
otsuki
0
130
MCPを活用した検索システムの作り方/How to implement search systems with MCP #catalks
quiver
11
5.6k
いつも初心者向けの記事に助けられているので得意分野では初心者向けの記事を書きます
toru_kubota
2
280
”知のインストール”戦略：テキスト資産をAIの文脈理解に活かす
kworkdev
PRO
9
4.2k
Classmethod AI Talks(CATs) #21 司会進行スライド(2025.04.17) / classmethod-ai-talks-aka-cats_moderator-slides_vol21_2025-04-17
shinyaa31
0
520

Featured

See All Featured
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
650
Building an army of robots
kneath
304
45k
Agile that works and the tools we love
rasmusluckow
328
21k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
227
22k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.3k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.4k
For a Future-Friendly Web
brad_frost
176
9.7k
Optimising Largest Contentful Paint
csswizardry
36
3.2k
Being A Developer After 40
akosma
91
590k

Transcript

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

    October 1, 13

  2. Some Etsy Stats • Handmade marketplace • 1.5 billion page

    views/month • Almost $1B in sales last year Tuesday, October 1, 13

  3. Tuesday, October 1, 13

  4. What We Focus On Tuesday, October 1, 13

  5. Metrics We Care About Tuesday, October 1, 13

  6. Metrics We Care About • Backend Load Time Tuesday, October

    1, 13

  7. Metrics We Care About • Backend Load Time • SEO,

    capacity, impacts first paint Tuesday, October 1, 13

  8. Metrics We Care About • Backend Load Time • SEO,

    capacity, impacts first paint • Time to first paint Tuesday, October 1, 13

  9. Metrics We Care About • Backend Load Time • SEO,

    capacity, impacts first paint • Time to first paint • Rendering Performance Tuesday, October 1, 13

  10. Metrics We Care About • Backend Load Time • SEO,

    capacity, impacts first paint • Time to first paint • Rendering Performance Tuesday, October 1, 13

  11. Time to First Paint Tuesday, October 1, 13

  12. Tuesday, October 1, 13

  13. Blocked By Tuesday, October 1, 13

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

  15. Blocked By • Base HTML Page • CSS Tuesday, October

    1, 13

  16. Blocked By • Base HTML Page • CSS • JavaScript

    Tuesday, October 1, 13

  17. Solutions Tuesday, October 1, 13

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

  19. Solutions • Small CSS (can inline) • Defer JavaScript Tuesday,

    October 1, 13

  20. Solutions • Small CSS (can inline) • Defer JavaScript •

    Fast backend Tuesday, October 1, 13

  21. Solutions • Small CSS (can inline) • Defer JavaScript •

    Fast backend • CDN Tuesday, October 1, 13

  22. Rendering Performance Tuesday, October 1, 13

  23. 60 FPS Tuesday, October 1, 13

  24. 16.6 ms Tuesday, October 1, 13

  25. Tuesday, October 1, 13

  26. Jank Tuesday, October 1, 13

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

  28. Why Do We Care? Tuesday, October 1, 13

  29. 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

  30. 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

  31. Solutions Tuesday, October 1, 13

  32. Tuesday, October 1, 13

  33. jankfree.org Tuesday, October 1, 13

  34. Etsy Studies Tuesday, October 1, 13

  35. Improved Performance Tuesday, October 1, 13

  36. Improved Performance • Went from 4 sharded domains to two

    Tuesday, October 1, 13

  37. Improved Performance • Went from 4 sharded domains to two

    • 500ms load time improvement on mobile Tuesday, October 1, 13

  38. Improved Performance • Went from 4 sharded domains to two

    • 500ms load time improvement on mobile • 30-50ms on desktop Tuesday, October 1, 13

  39. 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

  40. Increased Page Weight Tuesday, October 1, 13

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

    Tuesday, October 1, 13

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

    • 12% increase in bounce rate Tuesday, October 1, 13

  43. Tradeoffs Tuesday, October 1, 13

  44. Test Everything Tuesday, October 1, 13

  45. Listen to the Customer Tuesday, October 1, 13

  46. Faster is Better Tuesday, October 1, 13