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
300
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
180
The Web is a Contender
surma
0
130
Other Decks in Technology
See All in Technology
Bill One 開発エンジニア 紹介資料
sansan33
PRO
4
13k
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
sansan33
PRO
0
2.7k
Amplify Gen2から知るAWS CDK Toolkit Libraryの使い方/How to use the AWS CDK Toolkit Library as known from Amplify Gen2
fossamagna
1
310
SREの次のキャリアの道しるべ 〜SREがマネジメントレイヤーに挑戦して、 気づいたこととTips〜
coconala_engineer
1
3.8k
TLSから見るSREの未来
atpons
2
280
microCMSではじめるAIライティング
himaratsu
0
130
【あのMCPって、どんな処理してるの?】 AWS CDKでの開発で便利なAWS MCP Servers特集
yoshimi0227
6
860
衛星運用をソフトウェアエンジニアに依頼したときにできあがるもの
sankichi92
1
250
CDK Toolkit Libraryにおけるテストの考え方
smt7174
1
520
american aa airlines®️ USA Contact Numbers: Complete 2025 Support Guide
aaguide
0
500
セキュアなAI活用のためのLiteLLMの可能性
tk3fftk
1
230
United airlines®️ USA Contact Numbers: Complete 2025 Support Guide
unitedflyhelp
0
340
Featured
See All Featured
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
510
Designing Experiences People Love
moore
142
24k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Git: the NoSQL Database
bkeepers
PRO
430
65k
A better future with KSS
kneath
238
17k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Raft: Consensus for Rubyists
vanstee
140
7k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
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