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
190
0

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

More Decks by Jonathan Klein

See All by Jonathan Klein
Cognitive Biases in Engineering Organizations - Craft Conf
Avatar for Jonathan Klein jklein
15
510
Demystifying SPDY and HTTP/2
Avatar for Jonathan Klein jklein
1
690
Demystifying SPDY and HTTP/2
Avatar for Jonathan Klein jklein
2
1.2k
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
350
Upgrading the Web: Driving Support For New Standards
Avatar for Jonathan Klein jklein
1
870
Northeastern Lunch and Learn
Avatar for Jonathan Klein jklein
0
300
Profiling PHP With XHProf
Avatar for Jonathan Klein jklein
1
1.1k

Other Decks in Technology

See All in Technology
AIDLC_ヤフーショッピングの取り組み
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
530
初めてのDatabricks勉強会
Avatar for Takaaki Yayoi taka_aki
2
240
Text-to-SQLをAgentCoreで実現し、生成されるSQLの精度を定量的に評価する
Avatar for やくも yakumo
2
570
4人目のSREはAgent
Avatar for tanimuyk tanimuyk
0
390
Claude Codeとハーネスについて考えてみる
Avatar for Oikon oikon48
18
8.5k
Claude Code 珍プレー好プレー
Avatar for Shinya Saita shinyasaita
0
250
ZOZOTOWNの進化と信頼性を両立する負荷試験
Avatar for ZOZO Developers zozotech
PRO
0
110
AWS Blocks を触ってみた/first-tach-aws-blocks
Avatar for MURAKAMI Masahiko fossamagna
2
140
最近評価が難しくなった
Avatar for Mitsui maroon8021
0
230
NDIAS CTF 2026 問題解説会資料
Avatar for bata_24 bata_24
0
180
“ID沼入口” - 基本とセキュリティから始める、考え続けるためのID管理技術勉強会 告知&イントロ
Avatar for ritou ritou
0
400
GuardrailからGovernanceへ～AIエージェント運用の次の課題～
Avatar for 吉岡駿 sbspsy
1
190

Featured

See All Featured
Mind Mapping
Avatar for Hélio Medeiros helmedeiros
PRO
1
280
Leo the Paperboy
Avatar for Maya Tellez mayatellez
8
1.9k
Paper Plane (Part 1)
Avatar for Katie Cordina Lindsey katiecoart
PRO
0
9.5k
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
32k
Building an army of robots
Avatar for Kyle Neath kneath
306
46k
エンジニアに許された特別な時間の終わり
Avatar for watany watany
107
250k
How to audit for AI Accessibility on your Front & Back End
Avatar for davetheseo davetheseo
0
460
How GitHub (no longer) Works
Avatar for Zach Holman holman
316
150k
Marketing Yourself as an Engineer | Alaka | Gurzu
Avatar for Gurzu gurzu
0
260
Ecommerce SEO: The Keys for Success Now & Beyond - #SERPConf2024
Avatar for Aleyda Solis aleyda
1
2k
Deep Space Network (abreviated)
Avatar for Tony Rice tonyrice
0
220
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
10
1.2k

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