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
Instant Loading
Search
Surma
March 20, 2016
Technology
4
1.3k
Instant Loading
PWA Roadshow London & Bangalore
Surma
March 20, 2016
Tweet
Share
More Decks by Surma
See All by Surma
Know thy buzzwords: HTTP/2
surma
1
550
Houdini Breakout Session
surma
4
640
Houdini – Demystifying CSS
surma
3
330
Progressive Web Apps – Mobile has natively come to the Web
surma
5
300
The Glorious Era of HTTP/2
surma
1
94
HTTP/2 101
surma
5
500
What if there isn’t?
surma
0
83
What if there isn’t?
surma
2
180
The Web is a Contender
surma
0
140
Other Decks in Technology
See All in Technology
要件定義・デザインフェーズでもAIを活用して、コミュニケーションの密度を高める
kazukihayase
0
120
「その開発、認知負荷高すぎませんか?」Platform Engineeringで始める開発者体験カイゼン術
sansantech
PRO
2
110
AWSで始める実践Dagster入門
kitagawaz
1
680
La gouvernance territoriale des données grâce à la plateforme Terreze
bluehats
0
190
AI開発ツールCreateがAnythingになったよ
tendasato
0
130
Practical Agentic AI in Software Engineering
uzyn
0
110
エンジニアリングマネージャーの成長の道筋とキャリア / Developers Summit 2025 KANSAI
daiksy
2
440
なぜテストマネージャの視点が 必要なのか? 〜 一歩先へ進むために 〜
moritamasami
0
230
企業の生成AIガバナンスにおけるエージェントとセキュリティ
lycorptech_jp
PRO
2
190
AIのグローバルトレンド2025 #scrummikawa / global ai trend
kyonmm
PRO
1
300
Django's GeneratedField by example - DjangoCon US 2025
pauloxnet
0
150
データ分析エージェント Socrates の育て方
na0
5
480
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
49
14k
Balancing Empowerment & Direction
lara
3
620
Art, The Web, and Tiny UX
lynnandtonic
303
21k
The Language of Interfaces
destraynor
161
25k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
Become a Pro
speakerdeck
PRO
29
5.5k
Agile that works and the tools we love
rasmusluckow
330
21k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
BBQ
matthewcrist
89
9.8k
Transcript
Instant Loading
Proprietary + Confidential Proprietary + Confidential Surma @DasSurma
Instant Loading
Done.
Proprietary + Confidential End
Instant Loading
Instant Loading*
Asset delivery …fast
“Every step you make a user perform before they get
value out of your app will cost you 20% of users” http://blog.gaborcselle.com/2012/10/every-step-costs-you-20-of-users.htm
“Every step you make a user perform before they get
value out of your app will cost you 20% of users” http://blog.gaborcselle.com/2012/10/every-step-costs-you-20-of-users.htm 1. Install
“Every step you make a user perform before they get
value out of your app will cost you 20% of users” http://blog.gaborcselle.com/2012/10/every-step-costs-you-20-of-users.htm 1. Install ✅
“Every step you make a user perform before they get
value out of your app will cost you 20% of users” http://blog.gaborcselle.com/2012/10/every-step-costs-you-20-of-users.htm 1. Install ✅ 2. Loading 3. ???
Speed = Money
Goals
Goals 1. Don’t be big
Goals 1. Don’t be big 2. Only download what you
need
Goals 1. Don’t be big 2. Only download what you
need 3. Only download what changed
Step.by.Step
Compression
goo.gl/hPLUqB Library Size Compressed size Compression ratio jquery-1.11.0.js 276 KB
82 KB 70% jquery-1.11.0.min.js 94 KB 33 KB 65% angular-1.2.15.js 729 KB 182 KB 75% angular-1.2.15.min.js 101 KB 37 KB 63% bootstrap-3.1.1.css 118 KB 18 KB 85% bootstrap-3.1.1.min.css 98 KB 17 KB 83%
goo.gl/631F31 30% over JPEG 25% over PNG
None
<picture> <source srcset="washing.webp"> <source srcset="washing.jpg"> <img src="washing.jpg"> </picture>
<img sizes="(max-width: 30em) 100vw, (max-width: 50em) 50vw, calc(33vw - 100px)"
srcset="swing-200.jpg 200w, swing-400.jpg 400w, swing-800.jpg 800w, swing-1600.jpg 1600w" src="swing-400.jpg" alt="Kettlebell Swing"> goo.gl/Aev18k
Round Trips +50ms @WiFi +500ms @3G +2500ms @2G
Round Trips 100 reqs/site 6 connections >833 ms spent in
RTT @WiFi
<link rel="dns-prefetch" href="https://example.com/"> <link rel="preconnect" href="https://example.com/"> <link rel="preload" href="https://example.com/footer.jpg" as="image">
<link rel="prefetch" href="https://example.com/next-page.html" as="html">
HTTP/1.1 200 OK Date: ... Link: <footer.jpg>; rel=preload; as=image ...
Be interactive
None
<script async defer …>
CSS?
CSS? github.com/filamentgroup/loadCSS
Regioning/Critical …then Rest
https://aerotwist.com/blog/guitar-tuner/
Defer iFrames <iframe data-src="https://example.com"></iframe> <iframe data-src="https://another.example.com"></iframe> <script> document.addEventListener('load', () =>
{ Array.from(document.querySelectorAll('iframe')) .forEach(iframe => iframe.src = iframe.dataset.src); }); </script>
Conserve Data
None
None
None
goo.gl/M3v9iv
{ "css/unicorn.css": "css/unicorn-d41d8cd98f.css", "js/unicorn.js": "js/unicorn-273c2cin3f.js" } https://github.com/sindresorhus/gulp-rev
CDNs
None
None
None
None
None
None
None
None
github.com/GoogleChrome/simplehttp2server
Best Practices
• Concatenation • Sharding • Cookies
• Concatenation • Sharding • Cookies
• Concatenation • Sharding • Cookies
• Concatenation • Sharding • Cookies
• Compression • Smaller images ◦ Multi-sized images ◦ Multi-format
images • Reduce Round Trips ◦ Redirects ◦ Preconnect/Prefetch • Be interactive ◦ async/defer scripts ◦ Lazy-load CSS ◦ Regioning CSS ◦ Defer iFrames • Good caching ◦ Cache forever or not at all ◦ Hash in names • CDNs • HTTP/2
Proprietary + Confidential End Surma @DasSurma