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
Oracle Audit Vault and Database Firewall 20 概要
oracle4engineer
PRO
3
1.7k
Clineを含めたAIエージェントを 大規模組織に導入し、投資対効果を考える / Introducing AI agents into your organization
i35_267
4
1.5k
5min GuardDuty Extended Threat Detection EKS
takakuni
0
120
LinkX_GitHubを基点にした_AI時代のプロジェクトマネジメント.pdf
iotcomjpadmin
0
170
監視のこれまでとこれから/sakura monitoring seminar 2025
fujiwara3
11
3.8k
データプラットフォーム技術におけるメダリオンアーキテクチャという考え方/DataPlatformWithMedallionArchitecture
smdmts
5
620
25分で解説する「最小権限の原則」を実現するための AWS「ポリシー」大全 / 20250625-aws-summit-aws-policy
opelab
9
1.1k
AIエージェント最前線! Amazon Bedrock、Amazon Q、そしてMCPを使いこなそう
minorun365
PRO
13
4.9k
CSS、JSをHTMLテンプレートにまとめるフロントエンド戦略
d120145
0
280
_第3回__AIxIoTビジネス共創ラボ紹介資料_20250617.pdf
iotcomjpadmin
0
150
実践! AIエージェント導入記
1mono2prod
0
160
Абьюзим random_bytes(). Фёдор Кулаков, разработчик Lamoda Tech
lamodatech
0
330
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
39
1.9k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
Typedesign – Prime Four
hannesfritz
42
2.7k
VelocityConf: Rendering Performance Case Studies
addyosmani
330
24k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Adopting Sorbet at Scale
ufuk
77
9.4k
Rails Girls Zürich Keynote
gr2m
94
14k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
The World Runs on Bad Software
bkeepers
PRO
69
11k
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