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
Establishing Performance Contexts
Search
Ianfeather
September 28, 2014
Technology
0
130
Establishing Performance Contexts
Segmenting your site to target specific user performance contexts
Ianfeather
September 28, 2014
Tweet
Share
More Decks by Ianfeather
See All by Ianfeather
Building Resilient Front End Systems (Smashingconf)
ianfeather
0
110
Building Resilient Frontend Systems (All Day Hey)
ianfeather
1
500
Building Resilient Frontend Systems (@frontendne)
ianfeather
1
190
Testing Without Assertions
ianfeather
0
140
Building Resilient Frontend Systems - NationJS
ianfeather
0
210
Reducing complexity with a Component API
ianfeather
0
200
Web Fonts and Performance
ianfeather
0
200
Other Decks in Technology
See All in Technology
無意味な開発生産性の議論から抜け出すための予兆検知とお金とAI
i35_267
2
5.5k
B2C&B2B&社内向けサービスを抱える開発組織におけるサービス価値を最大化するイニシアチブ管理
belongadmin
1
2.4k
SmartNewsにおける 1000+ノード規模 K8s基盤 でのコスト最適化 – Spot・Gravitonの大規模導入への挑戦
vsanna2
0
100
How Community Opened Global Doors
hiroramos4
PRO
1
130
ビズリーチが挑む メトリクスを活用した技術的負債の解消 / dev-productivity-con2025
visional_engineering_and_design
1
2.6k
KubeCon + CloudNativeCon Japan 2025 Recap Opening & Choose Your Own Adventureシリーズまとめ
mmmatsuda
0
240
「Chatwork」の認証基盤の移行とログ活用によるプロダクト改善
kubell_hr
1
240
fukabori.fm 出張版: 売上高617億円と高稼働率を陰で支えた社内ツール開発のあれこれ話 / 20250704 Yoshimasa Iwase & Tomoo Morikawa
shift_evolve
PRO
2
2.8k
Amazon Bedrockで実現する 新たな学習体験
kzkmaeda
2
690
さくらのIaaS基盤のモニタリングとOpenTelemetry/OSC Hokkaido 2025
fujiwara3
2
280
Tech-Verse 2025 Keynote
lycorptech_jp
PRO
0
1.4k
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
26k
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
42
2.7k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
A better future with KSS
kneath
239
17k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Making Projects Easy
brettharned
116
6.3k
Visualization
eitanlees
146
16k
Transcript
Establishing performance contexts Ian Feather - @ianfeather
Performance at ! !
We don’t know how important speed is to our users
at a given time
None
None
None
None
It’s not that hard to get fast
It’s not that hard to get fast
It’s not that hard to get fast
It’s not that hard to get fast
None
You can use these techniques to optimise (to a certain
extent)
None
Total: weight: 674 KB ! Until you scroll down
the page…
None
!
Performance vs Design is all about compromise
Performance vs Design is all about compromise
You can only get as fast as the design allows
Performance Contexts
We have to accept there are things we don’t know
We are constantly required to make assumptions…
Assumption 1: Users on mobile devices want a different experience
to those on desktop
Assumption 1: Users on mobile devices want a different experience
to those on desktop Viewport !== context Viewport !== network
Assumption 2: Users want every site to load within X
seconds
None
None
None
None
Assumption 2: Users want every site to load within X
seconds Users want a site to load in-line with their expectations
Serving the same experience across multiple unknowns is a compromise
Currently we don’t have the tools to do anything about
this
But… ! The Web is for everyone
How can we determine a user’s performance context?
Why not ask them?
Hostel Mode
http://blog.chriszacharias.com/page-weight-matters
None
“We even burned through our monthly data plans in 40
minutes.”
Light Mode Default
Segmenting in to two ‘modes’ can be very powerful but…
Are we still making assumptions?
None
Did we ever ask users with retina screens if they
want a slower experience?
And are we still compromising?
We can’t leverage the best of the platform… whilst limiting
page weight.
None
Light Mode Default
Light Mode Default Enhanced
Segmenting allows us to design focused User Experiences
Asking the user
None
None
None
How could this look?
None
None
None
None
Implementation Advice
Don’t build three different websites!
Abstract out the development complexity
if('querySelector' in document && 'localStorage' in window && 'addEventListener' in
window && 'classList' in document.documentElement && lpHostelMode() !== "light") { } Global feature switches
<div class=“my-module”> <h1>{{ moduleTitle }}</h1> {{ img_tag(moduleImage) }} <p>{{ moduleContent
}}</p> </div> Authoring must stay the same
def img_tag(image_url, opts={}) return if @hostelMode ! image_tag(image_url, opts) end
Use helpers to abstract switches
Stateless vs Stateful
Consider the preloader
Future: Could the browser expose these user options?
Recap
You can only get as fast as the design allows
Your application may be entirely inaccessible to parts of the
world
Segmenting the user experience can be very powerful
Don’t guess. Ask.
Don’t do it at the expense of complexity
Thank you Ian Feather - @ianfeather
Creative Commons ! ! ! Arrano : https://flic.kr/p/4WjZDf Patrick Quinn-Graham
(thepatrick): https://flic.kr/p/Tk4Ha Leonardo Rizzi (L1010913): https://flic.kr/p/cVRiZm