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
540
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
600
Houdini – Demystifying CSS
surma
3
310
Progressive Web Apps – Mobile has natively come to the Web
surma
5
290
The Glorious Era of HTTP/2
surma
1
85
Instant Loading
surma
4
1.2k
HTTP/2 101
surma
5
480
What if there isn’t?
surma
0
76
What if there isn’t?
surma
2
160
The Web is a Contender
surma
0
120
Other Decks in Technology
See All in Technology
talk_about_wasmwasi
junkishigaki
0
100
High Performance PHP
cmuench
0
120
Larkご案内資料
customercloud
PRO
0
200
テストアーキテクチャ設計で実現する高品質で高スピードな開発の実践 / Test Architecture Design in Practice
ropqa
3
410
プロダクト観点で考えるデータ基盤の育成戦略 / Growth Strategy of Data Analytics Platforms from a Product Perspective
yamamotoyuta
0
420
バクラクの組織とアーキテクチャ(要約)2025/01版
shkomine
13
3.3k
Googleマップ/Earthが一般化した 地図タイルのイマ
mapconcierge4agu
1
170
【弥生】20250130_AWSマルチアカウント運用セミナー登壇資料
yayoi_dd
1
160
日本語プログラミングとSpring Bootアプリケーション開発 #kanjava
yusuke
2
370
クラウドネイティブ時代を乗り越えるためのオブザーバビリティ(可観測性)ことはじめ_CloudNative-Observability
tkhresk
0
110
AIプロダクト開発から得られた知見 - 2025年1月版
takaakikakei
0
170
Fin-JAWS第38回reInvent2024_全金融系セッションをライトにまとめてみた
mhrtech
1
160
Featured
See All Featured
Writing Fast Ruby
sferik
628
61k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2k
For a Future-Friendly Web
brad_frost
176
9.5k
Rails Girls Zürich Keynote
gr2m
94
13k
BBQ
matthewcrist
86
9.4k
Optimizing for Happiness
mojombo
376
70k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.8k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
230
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
Facilitating Awesome Meetings
lara
51
6.2k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Side Projects
sachag
452
42k
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