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
520
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
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
Instant Loading
surma
4
1.2k
HTTP/2 101
surma
5
460
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
プロンプトエンジニアリングでがんばらない-Agentic Workflow へ-近藤憲児
kenjikondobai
2
740
元インフラエンジニアに成る / Human Resources to Human Relations
bobtani
4
920
ServiceNow Knowledge 24の歩き方 EYストラテジー・アンド・コンサルティング
manarobot
0
200
AOAI をきっかけに 社内の Azure 管理を見直した話
recruitengineers
PRO
1
290
JSON攻略法.pdf
miyakemito
8
5.1k
Gitlab本から学んだこと - そーだいなるプレイバック / gitlab-book
soudai
4
430
一生覚えておきたい「システム開発=コミュニケーション」〜初めての実務案件振り返りLT〜
maimyyym
0
140
FrontDoorとWebAppsを組み合わせた際のリダイレクト処理の注意点
kenichirokimura
1
530
オーナーシップを持つ領域を明確にする
konifar
13
3.2k
Delivering Millions of Messages within seconds @ Duolingo
pelelgrino
0
350
Terraformあれやこれ/terraform-this-and-that
emiki
8
1.4k
SIEMを用いて、セキュリティログ分析の可視化と分析を実現し、PDCAサイクルを回してみた
coconala_engineer
0
320
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
44
9.7k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
121
39k
A Modern Web Designer's Workflow
chriscoyier
689
190k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
30
6k
jQuery: Nuts, Bolts and Bling
dougneiner
59
7.1k
How to Ace a Technical Interview
jacobian
272
22k
Six Lessons from altMBA
skipperchong
21
3k
RailsConf 2023
tenderlove
4
540
The Invisible Customer
myddelton
114
12k
Facilitating Awesome Meetings
lara
42
5.6k
Building Applications with DynamoDB
mza
88
5.6k
Optimising Largest Contentful Paint
csswizardry
8
2.4k
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