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
91
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
89
Building Resilient Frontend Systems (All Day Hey)
ianfeather
1
440
Building Resilient Frontend Systems (@frontendne)
ianfeather
1
160
Testing Without Assertions
ianfeather
0
120
Building Resilient Frontend Systems - NationJS
ianfeather
0
180
Reducing complexity with a Component API
ianfeather
0
100
Web Fonts and Performance
ianfeather
0
110
Other Decks in Technology
See All in Technology
一生覚えておきたい「システム開発=コミュニケーション」〜初めての実務案件振り返りLT〜
maimyyym
0
130
FrontDoorとWebAppsを組み合わせた際のリダイレクト処理の注意点
kenichirokimura
1
510
Java EE/Jakarta EEの現状と将来―クラウドネイティブ時代にJava EEは対応できるのか?―
takakiyo
1
150
MapLibreとAmazon Location Service
dayjournal
1
150
リテール金融(キャッシュレス・ネット銀行・ネット証券)の競争環境と経済圏
8maki
0
720
レガシーをぶっ壊せ。AEONで始めるDevRelの話 / Qiita Night 2024-2-22
aeonpeople
3
1.3k
非同期推論システムによるコスト削減と信頼性向上
koki_nishihara
0
230
SPI原点回帰論:事業課題とFour Keysの結節点を見出す実践的ソフトウェアプロセス改善 / DevOpsDays Tokyo 2024
visional_engineering_and_design
4
1.9k
20240418_Google ColabにLLMが搭載されたようなのでPython x データ分析の勉強方法を考えてみる
doradora09
0
130
Databricks における 『MLOps』
databricksjapan
2
170
生産性向上チームの紹介
cybozuinsideout
PRO
1
870
よく聞くけど使ったことないソフトウェアNo.1 KafkaとSnowflake
foursue
4
350
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
Building Your Own Lightsaber
phodgson
99
5.7k
Faster Mobile Websites
deanohume
299
30k
The Pragmatic Product Professional
lauravandoore
25
5.8k
Stop Working from a Prison Cell
hatefulcrawdad
266
19k
The Art of Programming - Codeland 2020
erikaheidi
42
12k
Building a Modern Day E-commerce SEO Strategy
aleyda
17
6.4k
Happy Clients
brianwarren
92
6.4k
Designing the Hi-DPI Web
ddemaree
276
33k
Building Effective Engineering Teams - LeadDev
addyosmani
28
1.8k
For a Future-Friendly Web
brad_frost
172
9k
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