Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
User Perceived Performance
Search
Mike North
August 25, 2015
Technology
0
110
User Perceived Performance
Mike North
August 25, 2015
Tweet
Share
More Decks by Mike North
See All by Mike North
Enemy of the state
truenorth
0
49
Phoenix for Rubyists
truenorth
0
71
Scalable, Ambitious, Future-friendly web apps with Ember.js
truenorth
0
130
Ember addons, served three ways
truenorth
0
67
Write Once, Run Everywhere - Mobile+Web Devcon 2015
truenorth
0
340
Compose All the Things (Wicked Good Ember 2015)
truenorth
0
110
Async/Await in JavaScript, today!
truenorth
1
200
Test like a pro with Ember.js
truenorth
0
54
Tomorrow's components, today!
truenorth
0
47
Other Decks in Technology
See All in Technology
解析の定理証明実践@Lean 4
dec9ue
1
190
生まれ変わった AWS Security Hub (Preview) を紹介 #reInforce_osaka / reInforce New Security Hub
masahirokawahara
0
330
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
3
920
Wasm元年
askua
0
160
How Community Opened Global Doors
hiroramos4
PRO
1
130
Snowflake Summit 2025全体振り返り / Snowflake Summit 2025 Overall Review
mtpooh
2
420
LangChain Interrupt & LangChain Ambassadors meetingレポート
os1ma
2
170
登壇ネタの見つけ方 / How to find talk topics
pinkumohikan
5
550
論文紹介:LLMDet (CVPR2025 Highlight)
tattaka
0
160
Node-REDのFunctionノードでMCPサーバーの実装を試してみた / Node-RED × MCP 勉強会 vol.1
you
PRO
0
120
強化されたAmazon Location Serviceによる新機能と開発者体験
dayjournal
3
230
変化する開発、進化する体系時代に適応するソフトウェアエンジニアの知識と考え方(JaSST'25 Kansai)
mizunori
1
240
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Stop Working from a Prison Cell
hatefulcrawdad
270
20k
Fireside Chat
paigeccino
37
3.5k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Visualization
eitanlees
146
16k
Being A Developer After 40
akosma
90
590k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Typedesign – Prime Four
hannesfritz
42
2.7k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
How to Ace a Technical Interview
jacobian
277
23k
Transcript
User Perceived Performance Mike North Ember.js SF Meetup - 8/25/2015
@MichaelLNorth github.com/mike-north
@MichaelLNorth Hi
Ember @ Yahoo • LOTS of Ember Apps • ~70
Ember-focused developers • A “flagship” app that ’s huge (70K lines JS) • An internal add on ecosystem
//TODO • What is user-perceived performance? • Instrumenting & Measuring
• Lessons learned from large ember apps @ Yahoo • UX tricks for perception of responsiveness
What is User Perceived Performance?
User Perception < 100ms Feels “instantaneous” < 1,000ms Keep flow
of thought < 10,000ms Keep attention
SPA Performance • Server deals only w/ JSON • Incremental
changes instead of boiling the ocean • Control over UX of loading/ transitions • Initial page load is longer • Slowness appears to be in the UI • API loses context ADVANTAGES CHALLENGES
Perf Matters ↑ 1.0s Page Load ↓ $1.6B /Year ↑0.4s
Search Load ↓ 8,000,000 Searches/Day
How do we measure it?
System-Wide Instrumentation
@MichaelLNorth API DB Caching / Indexing Asset Serving Networking /
Infrastructure Where do we start? Client
System-Wide Instrumentation API DB DB Network UI
System-Wide Instrumentation API DB DB Business logic API DB DB
Network UI
System-Wide Instrumentation R Transition Render R Render R Route A
RouteB
UI System-Wide Instrumentation R Transition Render R Render R Route
A RouteB ember-perf API DB { meta: {} } DB
System-Wide Instrumentation ember-perf R Transition Render R Render R Route
A RouteB API DB API DB DB
Other tools • Browser profiler, timeline and network tab •
Ember inspector • Take rendering speed numbers with a grain of salt
#Protips
Project Setup • Enable gzip compression • Load images @
the size you need, and compress them • Keep up to date on the framework releases
Ember Performance • Have an awareness of the cost of
data • Load what you need • ?per_page=200 • Pretender is your friend • It’s ok to keep loading stragglers Pretender
Ember Performance • Scrutinize observers • Avoid {{{ known slow
things }}} • Find and squash re-renders • this.set() in didInsertElement
Ember Performance /companies/1 CompaniesShow /api/companies/1 /api/companies/1/employees CompaniesShowEmployees 180ms 220ms 400ms
Ember Performance /companies/1 CompaniesShow /api/companies/1 /api/companies/1/employees CompaniesShowEmployees 180ms 220ms 220ms
For the waits you can’t conquer…
UX Tricks
UX Tricks • Background tasks
UX Tricks • Make waiting more interesting Loading… Thanks for
waiting, we’re almost done! Just a few more moments… Yay! Your thing is ready! GET THING
UX Tricks • Get something on the screen immediately •
Use “dummy content” • Smooth and honest progress bars ember-load
Addons ember-load ember-perf