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

Performance and User Experience

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
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
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
Avatar for Sansan, Inc. sansan33
PRO
0
3k
M&A 後の統合をどう進めるか ─ ナレッジワーク × Poetics が実践した組織とシステムの融合
Avatar for KNOWLEDGE WORK / 株式会社ナレッジワーク kworkdev
PRO
1
420
【５分でわかる】セーフィー エンジニア向け会社紹介
Avatar for Safie safie_recruit
0
42k
仕様書駆動AI開発の実践： Issue→Skill→PRテンプレで 再現性を作る
Avatar for 西岡 賢一郎 (Kenichiro Nishioka) knishioka
2
620
（金融庁共催）第4回金融データ活用チャレンジ勉強会資料
Avatar for tak takumimukaiyama
0
140
MCPでつなぐElasticsearchとLLM - 深夜の障害対応を楽にしたい / Bridging Elasticsearch and LLMs with MCP
Avatar for Sashimimochi sashimimochi
0
150
Contract One Engineering Unit 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
0
13k
Oracle Cloud Observability and Management Platform - OCI 運用監視サービス概要 -
Avatar for oracle4engineer oracle4engineer
PRO
2
14k
フルカイテン株式会社 エンジニア向け採用資料
Avatar for FULL KAITEN fullkaiten
0
10k
茨城の思い出を振り返る ～CDKのセキュリティを添えて～ / 20260201 Mitsutoshi Matsuo
Avatar for SHIFT EVOLVE shift_evolve
PRO
1
220
Kiro IDEのドキュメントを全部読んだので地味だけどちょっと嬉しい機能を紹介する
Avatar for khmoryz khmoryz
0
170
こんなところでも（地味に）活躍するImage Modeさんを知ってるかい？- Image Mode for OpenShift -
Avatar for Masataka Tsukamoto tsukaman
0
120

Featured

See All Featured
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
Avatar for Mine Cetinkaya-Rundel minecr
0
140
Public Speaking Without Barfing On Your Shoes - THAT 2023
Avatar for David Neal reverentgeek
1
300
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
Avatar for Yuki Nakata chikuwait chikuwait
0
320
The Anti-SEO Checklist Checklist. Pubcon Cyber Week
Avatar for Ryan Jones ryanjones
0
55
Joys of Absence: A Defence of Solitary Play
Avatar for Sebastian Deterding codingconduct
1
290
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
Avatar for r-kagaya rkaga
60
42k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
515
110k
Efficient Content Optimization with Google Search Console & Apps Script
Avatar for Katarina Dahlin katarinadahlin
PRO
0
310
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.6k
Ecommerce SEO: The Keys for Success Now & Beyond - #SERPConf2024
Avatar for Aleyda Solis aleyda
1
1.8k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
How to make the Groovebox
Avatar for あそなす asonas
2
1.9k

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