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
現場で効くClaude Code ─ 最新動向と企業導入
takaakikakei
1
160
Vault を基盤として整備し、 みんなに使ってもらえるようになるまで
takahiko
1
100
Function Body Macros で、SwiftUI の View に Accessibility Identifier を自動付与する/Function Body Macros: Autogenerate accessibility identifiers for SwiftUI Views
miichan
2
170
品質視点から考える組織デザイン/Organizational Design from Quality
mii3king
0
120
20250910_障害注入から効率的復旧へ_カオスエンジニアリング_生成AIで考えるAWS障害対応.pdf
sh_fk2
2
110
RSCの時代にReactとフレームワークの境界を探る
uhyo
10
3.1k
DDD集約とサービスコンテキスト境界との関係性
pandayumi
2
270
Obsidian応用活用術
onikun94
1
410
ヘブンバーンズレッドのレンダリングパイプライン刷新
gree_tech
PRO
0
590
複数サービスを支えるマルチテナント型Batch MLプラットフォーム
lycorptech_jp
PRO
0
220
実践!カスタムインストラクション&スラッシュコマンド
puku0x
0
150
エニグモ_会社紹介資料(エンジニア職種向け).pdf
enigmo_hr
0
2.2k
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.8k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
910
Facilitating Awesome Meetings
lara
55
6.5k
A Tale of Four Properties
chriscoyier
160
23k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Docker and Python
trallard
45
3.5k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
Unsuck your backbone
ammeep
671
58k
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