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
Know thy buzzwords: HTTP/2
Search
Surma
July 13, 2017
Technology
1
550
Know thy buzzwords: HTTP/2
Fullstack Conf 2017
Surma
July 13, 2017
Tweet
Share
More Decks by Surma
See All by Surma
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
93
Instant Loading
surma
4
1.3k
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
140
Other Decks in Technology
See All in Technology
PdM業務における使い分け
shinshiro
0
670
手動からの解放!!Strands Agents で実現する総合テスト自動化
ideaws
3
390
AI エンジニアの立場からみた、AI コーディング時代の開発の品質向上の取り組みと妄想
soh9834
8
590
クマ×共生 HACKATHON - 熊対策を『特別な行動」から「生活の一部」に -
pharaohkj
0
190
興味の胞子を育て 業務と技術に広がる”きのこ力”
fumiyasac0921
0
290
生成AIを活用した野球データ分析 - メジャーリーグ編 / Baseball Analytics for Gen AI
shinyorke
PRO
1
240
FAST導入1年間のふりかえり〜現実を直視し、さらなる進化を求めて〜 / Review of the first year of FAST implementation
wooootack
1
180
ファインディにおける Dataform ブランチ戦略
hiracky16
0
210
東京海上日動におけるセキュアな開発プロセスの取り組み
miyabit
0
200
Power Automate のパフォーマンス改善レシピ / Power Automate Performance Improvement Recipes
karamem0
0
270
AIエージェントを支える設計
tkikuchi1002
11
2.3k
Jitera Company Deck / JP
jitera
0
250
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
110
19k
The World Runs on Bad Software
bkeepers
PRO
70
11k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Speed Design
sergeychernyshev
32
1k
Statistics for Hackers
jakevdp
799
220k
Scaling GitHub
holman
461
140k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Why Our Code Smells
bkeepers
PRO
337
57k
How STYLIGHT went responsive
nonsquared
100
5.7k
A Tale of Four Properties
chriscoyier
160
23k
Transcript
@DasSurma Developer Advocate ✨HTTP/2✨ OMG so good
TL;DR: SWITCH!
HTTP/1.1 – Upgrade – HTTP/2.0 ✨HTTP/2✨
caniuse.com
None
History HTTP HTTP/0.9 HTTP/1.0 HTTP/1.1 SPDY/2 HTTP/2 1991 1996 1997
2012 2015
History HTTP HTTP/0.9 HTTP/1.0 HTTP/1.1 SPDY/2 HTTP/2 1991 1996 1997
2012 2015 bit.ly/surma-http2 Talk from CDS 2015
Head-of-Line Blocking aka one-resource-at-a-time syndrome
HTTP/1
HTTP/1
HTTP/1 200KB 4s
✨HTTP/2✨ Single TCP connection
http2.golang.org/gophertiles
h1 h2
Concatenation Inlining Bundling Spriting ? More later
Encryption
None
None
✨HTTP/2✨ TLS encrypted ? ?
✨HTTP/2✨ $0
certbot.eff.org
CDNs say bit.ly/surma-http2-performance-increase HTTP/2 is 20% faster (on avg)
h2 capable h2 enabled h2 unsupported 7,200 ms 5,325 ms
6,160 ms Time to mobile load event Sample is 1 month of data on https://next.ft.com 26%
HTTP/2 bit.ly/chromeblog-http2
But how? Setup? Testing? bit.ly/surma-http2-setup
What about local development?
None
None
What did I not talk about yet?
HPACK
HTTP/2 Push
RTT > Bandwidth
index.html styles.css webfont.css webfont.woff <link> @import @font-face 14K 1.4K 800B
12K Back-of-napkin math: Total data: 28.4K Data transfer time: 37ms # of RTTs: 4 Total time: 437ms
None
bit.ly/jake-push
bit.ly/jake-push TL;DR: – Massive inconsistencies between browsers – Not pushing
things that are already in the cache is a hard problem – Don’t even think about pushing anything but GET
bit.ly/jake-push Alternatives – Inlining for first-paint-critical resources – <link rel=“preload”>
for interactive-critical resources
Onemore thing about bundling bit.ly/sergio-bundling
TL;DR: SWITCH!
@DasSurma Developer Advocate ✨HTTP/2✨ OMG so good