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
N=1から解き明かすAWS ソリューションアーキテクトの魅力
kiiwami
0
140
オブザーバビリティの観点でみるAWS / AWS from observability perspective
ymotongpoo
9
1.6k
デスクトップだけじゃないUbuntu
mtyshibata
0
550
RSNA2024振り返り
nanachi
0
620
2/18/25: Java meets AI: Build LLM-Powered Apps with LangChain4j
edeandrea
PRO
0
150
Swiftの “private” を テストする / Testing Swift "private"
yutailang0119
0
140
2.5Dモデルのすべて
yu4u
2
930
利用終了したドメイン名の最強終活〜観測環境を育てて、分析・供養している件〜 / The Ultimate End-of-Life Preparation for Discontinued Domain Names
nttcom
2
310
Helm , Kustomize に代わる !? 次世代 k8s パッケージマネージャー Glasskube 入門 / glasskube-entry
parupappa2929
0
270
「海外登壇」という 選択肢を与えるために 〜Gophers EX
logica0419
0
890
システム・ML活用を広げるdbtのデータモデリング / Expanding System & ML Use with dbt Modeling
i125
0
230
全文検索+セマンティックランカー+LLMの自然文検索サ−ビスで得られた知見
segavvy
2
130
Featured
See All Featured
Fireside Chat
paigeccino
34
3.2k
A Modern Web Designer's Workflow
chriscoyier
693
190k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Bash Introduction
62gerente
611
210k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
Large-scale JavaScript Application Architecture
addyosmani
511
110k
Building Your Own Lightsaber
phodgson
104
6.2k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
GraphQLとの向き合い方2022年版
quramy
44
13k
Rails Girls Zürich Keynote
gr2m
94
13k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
YesSQL, Process and Tooling at Scale
rocio
172
14k
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