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
110
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
100
Building Resilient Frontend Systems (All Day Hey)
ianfeather
1
480
Building Resilient Frontend Systems (@frontendne)
ianfeather
1
180
Testing Without Assertions
ianfeather
0
130
Building Resilient Frontend Systems - NationJS
ianfeather
0
190
Reducing complexity with a Component API
ianfeather
0
160
Web Fonts and Performance
ianfeather
0
170
Other Decks in Technology
See All in Technology
kargoの魅力について伝える
magisystem0408
0
200
AI時代のデータセンターネットワーク
lycorptech_jp
PRO
1
280
日本版とグローバル版のモバイルアプリ統合の開発の裏側と今後の展望
miichan
1
130
PHPからGoへのマイグレーション for DMMアフィリエイト
yabakokobayashi
1
170
大幅アップデートされたRagas v0.2をキャッチアップ
os1ma
2
520
Snowflake女子会#3 Snowpipeの良さを5分で語るよ
lana2548
0
220
社内イベント管理システムを1週間でAKSからACAに移行した話し
shingo_kawahara
0
180
2024年にチャレンジしたことを振り返るぞ
mitchan
0
130
小学3年生夏休みの自由研究「夏休みに Copilot で遊んでみた」
taichinakamura
0
150
Qiita埋め込み用スライド
naoki_0531
0
860
ゼロから創る横断SREチーム 挑戦と進化の軌跡
rvirus0817
2
260
私なりのAIのご紹介 [2024年版]
qt_luigi
1
120
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1366
200k
Music & Morning Musume
bryan
46
6.2k
The Cult of Friendly URLs
andyhume
78
6.1k
Rails Girls Zürich Keynote
gr2m
94
13k
Unsuck your backbone
ammeep
669
57k
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.6k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
29
2k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
95
17k
The Pragmatic Product Professional
lauravandoore
32
6.3k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
28
4.4k
The Language of Interfaces
destraynor
154
24k
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