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
Secrets to Lightning Fast Mobile Design
Search
Mike Krieger
December 06, 2011
Technology
251
170k
Secrets to Lightning Fast Mobile Design
Presentation given at Warm Gun 2011.
Mike Krieger
December 06, 2011
Tweet
Share
More Decks by Mike Krieger
See All by Mike Krieger
Scaling Instagram at AirBnB OpenAir 2015
mikeyk
15
4.2k
Scaling Instagram
mikeyk
154
49k
Other Decks in Technology
See All in Technology
Shadow DOMとセキュリティ - 光と影の境界を探る / Shibuya.XSS techtalk #13
masatokinugawa
0
310
AWS表彰プログラムとキャリアについて
naoki_0531
1
140
FAST導入1年間のふりかえり〜現実を直視し、さらなる進化を求めて〜 / Review of the first year of FAST implementation
wooootack
1
170
AI時代の知識創造 ─GeminiとSECIモデルで読み解く “暗黙知”と創造の境界線
nyagasan
0
150
大規模組織にAIエージェントを迅速に導入するためのセキュリティの勘所 / AI agents for large-scale organizations
i35_267
6
310
経験がないことを言い訳にしない、 AI時代の他領域への染み出し方
parayama0625
0
240
AIに全任せしないコーディングとマネジメント思考
kikuchikakeru
0
240
手動からの解放!!Strands Agents で実現する総合テスト自動化
ideaws
3
380
Railsの限界を超えろ!「家族アルバム みてね」の画像・動画の大規模アップロードを支えるアーキテクチャの変遷
ojima_h
4
510
TypeScript 上達の道
ysknsid25
23
4.7k
クマ×共生 HACKATHON - 熊対策を『特別な行動」から「生活の一部」に -
pharaohkj
0
160
The Madness of Multiple Gemini CLIs Developing Simultaneously with Jujutsu
gunta
1
2.8k
Featured
See All Featured
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
720
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Six Lessons from altMBA
skipperchong
28
3.9k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
How to Ace a Technical Interview
jacobian
278
23k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Designing Experiences People Love
moore
142
24k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Site-Speed That Sticks
csswizardry
10
720
Optimising Largest Contentful Paint
csswizardry
37
3.4k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Transcript
Secrets to Lightning- Fast Mobile Design Warm Gun 2011 Mike
Krieger Instagram 1
me - Co-founder, Instagram - Previously: UX & Front-end @
Meebo - Stanford HCI BS/MS - @mikeyk on everything 2
3
12 million users in 12 months 4
5
6
7
8
“Fast, beautiful photo sharing” 9
“Fast, beautiful photo sharing” 10
making your mobile experiences feel lightning-fast 11
not the code, but the experience 12
mobile design requires the ultimate in design & development collaboration
13
14
speed matters 15
mobile experiences fill gaps while we wait 16
no one wants to wait while they wait 17
JSON parsing UITableViewCell HTTP pipelining 18
creative design decisions 19
how speed can be a design feature 20
how design can be a speed feature 21
implementation details 22
details that need to be designed 23
3 secrets to apps that feel lightning-fast, even on 3G
24
1. perform actions optimistically 2. adaptively pre-load content 3. move
bits when no-one’s watching 25
perform actions optimistically 26
latency is what’ll get ya 27
make the user feel productive 28
29
30
request is going, but we register the like 31
32
33
request is going, but we register the comment 34
35
36
if it fails? 37
38
39
why it works 40
@thesarahnator 41
@stayintheshade 42
adaptive pre-loading 43
basic version: load content before it’s needed 44
“let’s load all the images in the feed once the
user loads the page” 45
fresh feed 30 photos to load 46
pitfall 47
48
49
50
51
52
53
54
55
56
instead... 57
re-prioritize based on interest 58
59
60
61
62
63
64
listen to what their flicks & taps are telling you
65
why it works 66
@miriamjasmine 67
move bits when no-one’s watching 68
sign-up 69
70
? 71
72
73
upload 74
75
76
77
78
79
80
81
most apps upload here we start uploading here 82
non-optimal engineering solution 83
2 requests, 2 round-trips + latency need to match up
84
but makes uploads feel really, really quick 85
send data/info as soon as part of it’s ready to
go; match up later 86
worth it even if you throw out the data on
cancel 87
why it works 88
where to go from here 89
“it works” isn’t enough 90
design & development collaboration 91
92
1. perform actions optimistically 2. adaptively pre-load content 3. move
bits when no-one’s watching 93
Qs? we’re hiring:
[email protected]
get in touch: @mikeyk 94