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
86
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
関東Kaggler会LT: 人狼コンペとLLM量子化について
nejumi
3
580
オブザーバビリティの観点でみるAWS / AWS from observability perspective
ymotongpoo
8
1.5k
ユーザーストーリーマッピングから始めるアジャイルチームと並走するQA / Starting QA with User Story Mapping
katawara
0
200
MC906491 を見据えた Microsoft Entra Connect アップグレード対応
tamaiyutaro
1
540
白金鉱業Meetup Vol.17_あるデータサイエンティストのデータマネジメントとの向き合い方
brainpadpr
5
740
ホワイトボードチャレンジ 説明&実行資料
ichimichi
0
130
あれは良かった、あれは苦労したB2B2C型SaaSの新規開発におけるCloud Spanner
hirohito1108
2
570
株式会社EventHub・エンジニア採用資料
eventhub
0
4.3k
Data-centric AI入門第6章:Data-centric AIの実践例
x_ttyszk
1
400
Moved to https://speakerdeck.com/toshihue/presales-engineer-career-bridging-tech-biz-ja
toshihue
2
740
バックエンドエンジニアのためのフロントエンド入門 #devsumiC
panda_program
18
7.5k
Culture Deck
optfit
0
420
Featured
See All Featured
Code Review Best Practice
trishagee
67
18k
Into the Great Unknown - MozCon
thekraken
35
1.6k
It's Worth the Effort
3n
184
28k
Building Your Own Lightsaber
phodgson
104
6.2k
Docker and Python
trallard
44
3.3k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
KATA
mclloyd
29
14k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Building an army of robots
kneath
303
45k
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