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
160

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
470
Demystifying SPDY and HTTP/2
Avatar for Jonathan Klein jklein
1
650
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
1.1k
Upgrading the Web: Boston Web Performance Meetup
Avatar for Jonathan Klein jklein
1
320
Upgrading the Web: Driving Support For New Standards
Avatar for Jonathan Klein jklein
1
840
Northeastern Lunch and Learn
Avatar for Jonathan Klein jklein
0
280
Profiling PHP With XHProf
Avatar for Jonathan Klein jklein
1
1k

Other Decks in Technology

See All in Technology
Bill One急成長の舞台裏 開発組織が直面した失敗と教訓
Avatar for SansanTech sansantech
PRO
2
390
22nd ACRi Webinar - NTT Kawahara-san's slide
Avatar for Nao Sumikawa nao_sumikawa
0
100
SREチームをどう作り、どう育てるか ― Findy横断SREのマネジメント
Avatar for adachi.ryo rvirus0817
0
320
Amazon S3 Vectorsを使って資格勉強用AIエージェントを構築してみた
Avatar for usanchuu usanchuu
3
450
茨城の思い出を振り返る ～CDKのセキュリティを添えて～ / 20260201 Mitsutoshi Matsuo
Avatar for SHIFT EVOLVE shift_evolve
PRO
1
360
Kiro IDEのドキュメントを全部読んだので地味だけどちょっと嬉しい機能を紹介する
Avatar for khmoryz khmoryz
0
210
Agile Leadership Summit Keynote 2026
Avatar for seki at druby.org m_seki
1
650
What happened to RubyGems and what can we learn?
Avatar for Mike McQuaid mikemcquaid
0
310
Oracle Cloud Observability and Management Platform - OCI 運用監視サービス概要 -
Avatar for oracle4engineer oracle4engineer
PRO
2
14k
SREじゃなかった僕らがenablingを通じて「SRE実践者」になるまでのリアル / SRE Kaigi 2026
Avatar for AEON aeonpeople
6
2.5k
セキュリティについて学ぶ会 / 2026 01 25 Takamatsu WordPress Meetup
Avatar for Rocket Martue rocketmartue
1
310
Webhook best practices for rock solid and resilient deployments
Avatar for Guillaume Laforge glaforge
2
300

Featured

See All Featured
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
Avatar for Kenny Baas-Schwegler baasie
0
230
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
26
3.3k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
408
66k
What the history of the web can teach us about the future of AI
Avatar for Ines Montani inesmontani
PRO
1
430
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
281
24k
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
9
660
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.7k
Design in an AI World
Avatar for tapps tapps
0
140
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
Avatar for Szymon szymonslowik
1
920
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
80
6.2k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
9
1.2k
The Spectacular Lies of Maps
Avatar for Per Axbom axbom
PRO
1
520

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