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
630
Houdini – Demystifying CSS
surma
3
320
Progressive Web Apps – Mobile has natively come to the Web
surma
5
290
The Glorious Era of HTTP/2
surma
1
93
HTTP/2 101
surma
5
490
What if there isn’t?
surma
0
83
What if there isn’t?
surma
2
170
The Web is a Contender
surma
0
130
Other Decks in Technology
See All in Technology
生成AI時代の開発組織・技術・プロセス 〜 ログラスの挑戦と考察 〜
itohiro73
0
150
監視のこれまでとこれから/sakura monitoring seminar 2025
fujiwara3
11
3.9k
本が全く読めなかった過去の自分へ
genshun9
0
300
~宇宙最速~2025年AWS Summit レポート
satodesu
1
1.8k
MySQL5.6から8.4へ 戦いの記録
kyoshidaxx
1
210
低レイヤを知りたいPHPerのためのCコンパイラ作成入門 完全版 / Building a C Compiler for PHPers Who Want to Dive into Low-Level Programming - Expanded
tomzoh
4
3.2k
Oracle Cloud Infrastructure:2025年6月度サービス・アップデート
oracle4engineer
PRO
2
240
Agentic Workflowという選択肢を考える
tkikuchi1002
1
500
2年でここまで成長!AWSで育てたAI Slack botの軌跡
iwamot
PRO
4
700
AIの最新技術&テーマをつまんで紹介&フリートークするシリーズ #1 量子機械学習の入門
tkhresk
0
140
解析の定理証明実践@Lean 4
dec9ue
0
180
CI/CD/IaC 久々に0から環境を作ったらこうなりました
kaz29
1
170
Featured
See All Featured
Producing Creativity
orderedlist
PRO
346
40k
Raft: Consensus for Rubyists
vanstee
140
7k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
A better future with KSS
kneath
239
17k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
RailsConf 2023
tenderlove
30
1.1k
A Tale of Four Properties
chriscoyier
160
23k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
Stop Working from a Prison Cell
hatefulcrawdad
270
20k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
KATA
mclloyd
29
14k
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