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

Performance and User Experience

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Jonathan Klein Jonathan Klein
October 01, 2013
Technology
0
170

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
480
Demystifying SPDY and HTTP/2
Avatar for Jonathan Klein jklein
1
660
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
330
Upgrading the Web: Driving Support For New Standards
Avatar for Jonathan Klein jklein
1
850
Northeastern Lunch and Learn
Avatar for Jonathan Klein jklein
0
290
Profiling PHP With XHProf
Avatar for Jonathan Klein jklein
1
1k

Other Decks in Technology

See All in Technology
コンテキスト・ハーネスエンジニアリングの現在
Avatar for Hirosato Gamo hirosatogamo
PRO
6
710
Phase11_戦略的AI経営
Avatar for overflow ,Inc overflowinc
0
890
新規事業×QAの挑戦：不確実性を乗りこなす！フェーズごとに求められるQAの役割変革
Avatar for hacomono Inc. hacomono
PRO
0
150
テストプロセスにおけるAI活用 ：人間とAIの共存
Avatar for hacomono Inc. hacomono
PRO
0
130
How to install a gem
Avatar for André Arko indirect
0
180
脳が溶けた話 / Melted Brain
Avatar for Keisuke69 keisuke69
0
210
DDD×仕様駆動で回す高品質開発のプロセス設計
Avatar for Koichiro Matsuoka littlehands
4
1.9k
夢の無限スパゲッティ製造機 #phperkaigi
Avatar for hideki kinjyo o0h
PRO
0
320
TypeScript 7.0の現在地と備え方
Avatar for uhyo uhyo
7
2k
開発チームとQAエンジニアの新しい協業モデル -年末調整開発チームで実践する【QAリード施策】-
Avatar for kaomi kaomi_wombat
0
200
AWS Systems Managerのハイブリッドアクティベーションを使用したガバメントクラウド環境の統合管理
Avatar for Toru_Kubota toru_kubota
0
130
Phase12_総括_自走化
Avatar for overflow ,Inc overflowinc
0
850

Featured

See All Featured
How to make the Groovebox
Avatar for あそなす asonas
2
2k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
128
55k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
50
14k
Lightning talk: Run Django tests with GitHub Actions
Avatar for Sarah Abderemane sabderemane
0
150
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
281
24k
How to build an LLM SEO readiness audit: a practical framework
Avatar for Nick Samuel nmsamuel
1
690
A Soul's Torment
Avatar for Nat Ma seathinner
5
2.5k
The Spectacular Lies of Maps
Avatar for Per Axbom axbom
PRO
1
640
SEO for Brand Visibility & Recognition
Avatar for Aleyda Solis aleyda
0
4.4k
Public Speaking Without Barfing On Your Shoes - THAT 2023
Avatar for David Neal reverentgeek
1
340
Code Review Best Practice
Avatar for Trisha Gee trishagee
74
20k
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
Avatar for Katarina Dahlin katarinadahlin
PRO
1
3.5k

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