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
50
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
350
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
48
Other Decks in Technology
See All in Technology
現場データから見える、開発生産性の変化コード生成AI導入・運用のリアル〜 / Changes in Development Productivity and Operational Challenges Following the Introduction of Code Generation AI
nttcom
1
390
CoRL 2025 Survey
harukiabe
1
230
Data Hubグループ 紹介資料
sansan33
PRO
0
2.2k
Railsの話をしよう
yahonda
0
170
プロダクトのコードから見るGoによるデザインパターンの実践 #go_night_talk
bengo4com
1
2.7k
Introduction to Sansan Meishi Maker Development Engineer
sansan33
PRO
0
310
WEBサービスを成り立たせるAWSサービス
takano0131
1
190
20251014_Pythonを実務で徹底的に使いこなした話
ippei0923
0
220
Findy Team+ QAチーム これからのチャレンジ!
findy_eventslides
0
480
AI-Readyを目指した非構造化データのメダリオンアーキテクチャ
r_miura
1
230
Implementing and Evaluating a High-Level Language with WasmGC and the Wasm Component Model: Scala’s Case
tanishiking
0
150
今この時代に技術とどう向き合うべきか
gree_tech
PRO
2
2.1k
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
Site-Speed That Sticks
csswizardry
13
910
Visualization
eitanlees
149
16k
Build your cross-platform service in a week with App Engine
jlugia
232
18k
Music & Morning Musume
bryan
46
6.9k
Raft: Consensus for Rubyists
vanstee
140
7.1k
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
190
55k
It's Worth the Effort
3n
187
28k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
36
6.1k
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