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.2k
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
520
Houdini Breakout Session
surma
4
540
Houdini – Demystifying CSS
surma
3
290
Progressive Web Apps – Mobile has natively come to the Web
surma
5
280
The Glorious Era of HTTP/2
surma
1
77
HTTP/2 101
surma
5
470
What if there isn’t?
surma
0
69
What if there isn’t?
surma
2
150
The Web is a Contender
surma
0
110
Other Decks in Technology
See All in Technology
DMM.com アルファ室採用案内資料
hsugita
1
210
Gitlab本から学んだこと - そーだいなるプレイバック / gitlab-book
soudai
6
1.3k
Building Dashboards as a Hobby
egmc
0
340
Microsoft Intune 勉強会 第 2 回目
tamaiyutaro
2
360
EMとして2023年度に頑張ったこと / What we did well in FY2023 as a EM
pauli
1
200
成長をサポートするピープルマネジメントのやり方
sioncojp
1
110
開発生産性大幅アップ!Postman VS Code拡張機能
nagix
3
610
web-application-security
matsuihidetoshi
1
190
Babylon.js JAPAN活動紹介 (2024/4)
limes2018
1
100
Azureの基本的な権限管理の勉強会
yhana
1
1.9k
Tellus の衛星データを見てみよう #mf_fukuoka
kongmingstrap
0
260
[新卒向け研修資料] テスト文字列に「うんこ」と入れるな(2024年版)
infiniteloop_inc
4
17k
Featured
See All Featured
The Invisible Customer
myddelton
114
12k
KATA
mclloyd
16
12k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
222
21k
How GitHub (no longer) Works
holman
305
140k
Docker and Python
trallard
35
2.7k
Learning to Love Humans: Emotional Interface Design
aarron
267
39k
What’s in a name? Adding method to the madness
productmarketing
PRO
17
2.7k
Optimizing for Happiness
mojombo
370
69k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
18
1.6k
Git: the NoSQL Database
bkeepers
PRO
423
63k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
79
43k
In The Pink: A Labor of Love
frogandcode
138
21k
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