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

Performance and User Experience

Avatar for Jonathan Klein Jonathan Klein
October 01, 2013
Technology
0
140

Performance and User Experience

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

Avatar for Jonathan Klein

Jonathan Klein

October 01, 2013
Tweet

More Decks by Jonathan Klein

See All by Jonathan Klein
Cognitive Biases in Engineering Organizations - Craft Conf
Avatar for Jonathan Klein jklein
15
440
Demystifying SPDY and HTTP/2
Avatar for Jonathan Klein jklein
1
640
Demystifying SPDY and HTTP/2
Avatar for Jonathan Klein jklein
2
1.1k
Cognitive Biases in Engineering Organizations
Avatar for Jonathan Klein jklein
4
2k
Composer: From Beginner to Expert
Avatar for Jonathan Klein jklein
1
1k
Upgrading the Web: Boston Web Performance Meetup
Avatar for Jonathan Klein jklein
1
310
Upgrading the Web: Driving Support For New Standards
Avatar for Jonathan Klein jklein
1
820
Northeastern Lunch and Learn
Avatar for Jonathan Klein jklein
0
260
Profiling PHP With XHProf
Avatar for Jonathan Klein jklein
1
1k

Other Decks in Technology

See All in Technology
マルチエージェントのチームビルディング_2025-10-25
Avatar for shino shinoyamada
0
200
オブザーバビリティと育てた ID管理・認証認可基盤の歩み / The Journey of an ID Management, Authentication, and Authorization Platform Nurtured with Observability
Avatar for 株式会社カミナシ kaminashi
1
1.1k
AWS re:Invent 2025事前勉強会資料 / AWS re:Invent 2025 pre study meetup
Avatar for Masanori Yamaguchi kinunori
0
720
dbtとAIエージェントを組み合わせて見えたデータ調査の新しい形
Avatar for 10xinc 10xinc
6
1.3k
激動の時代を爆速リチーミングで乗り越えろ
Avatar for SansanTech sansantech
PRO
1
150
DMMの検索システムをSolrからElasticCloudに移行した話
Avatar for 小山凌太 hmaa_ryo
0
100
AI連携の新常識！ 話題のMCPをはじめて学ぶ！
Avatar for MakoAkiba makoakiba
0
140
生成AI時代のPythonセキュリティとガバナンス
Avatar for abenben abenben
0
150
Kubernetes self-healing of your workload
Avatar for Hung-Wei Chiu hwchiu
0
600
コンパウンド組織のCRE #cre_meetup
Avatar for LayerX layerx
PRO
1
280
頭部ふわふわ浄酔器
Avatar for uyupun uyupun
0
230
AIを使ってテストを楽にする
Avatar for KNOWLEDGE WORK / 株式会社ナレッジワーク kworkdev
PRO
0
160

Featured

See All Featured
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.3k
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
2.8k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.2k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
930
Docker and Python
Avatar for Tania Allard trallard
46
3.6k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
329
39k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
285
14k
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
209
24k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
127
54k
How GitHub (no longer) Works
Avatar for Zach Holman holman
315
140k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.2k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
249
1.3M

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