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
HTTP/2 101
Search
Surma
November 20, 2015
Technology
5
480
HTTP/2 101
Chrome Dev Summit 2015
https://www.youtube.com/watch?v=r5oT_2ndjms
Surma
November 20, 2015
Tweet
Share
More Decks by Surma
See All by Surma
Know thy buzzwords: HTTP/2
surma
1
540
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
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
明日からできる!技術的負債の返済を加速するための実践ガイド~『ホットペッパービューティー』の事例をもとに~
recruitengineers
PRO
3
390
第13回 Data-Centric AI勉強会, 画像認識におけるData-centric AI
ksaito_osx
0
370
OpenID BizDay#17 KYC WG活動報告(法人) / 20250219-BizDay17-KYC-legalidentity
oidfj
0
240
トラシューアニマルになろう ~開発者だからこそできる、安定したサービス作りの秘訣~
jacopen
2
2k
管理者しか知らないOutlookの裏側のAIを覗く#AzureTravelers
hirotomotaguchi
2
360
転生CISOサバイバル・ガイド / CISO Career Transition Survival Guide
kanny
3
970
急成長する企業で作った、エンジニアが輝ける制度/ 20250214 Rinto Ikenoue
shift_evolve
3
1.3k
2024.02.19 W&B AIエージェントLT会 / AIエージェントが業務を代行するための計画と実行 / Algomatic 宮脇
smiyawaki0820
13
3.3k
2.5Dモデルのすべて
yu4u
2
850
運用しているアプリケーションのDBのリプレイスをやってみた
miura55
1
710
『衛星データ利用の方々にとって近いようで触れる機会のなさそうな小話 ~ 衛星搭載ソフトウェアと衛星運用ソフトウェア (実物) を動かしながらわいわいする編 ~』 @日本衛星データコミニティ勉強会
meltingrabbit
0
140
Oracle Cloud Infrastructure:2025年2月度サービス・アップデート
oracle4engineer
PRO
1
200
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
174
51k
The Cost Of JavaScript in 2023
addyosmani
47
7.3k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
How to Think Like a Performance Engineer
csswizardry
22
1.3k
GraphQLとの向き合い方2022年版
quramy
44
13k
What's in a price? How to price your products and services
michaelherold
244
12k
Typedesign – Prime Four
hannesfritz
40
2.5k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
How to train your dragon (web standard)
notwaldorf
91
5.8k
Transcript
None
HTTP2 101 Surma @surmair
TL;DR: SWITCH! HTTP/2 ≥ HTTP/1
TL;DR Performance If you invest, you can squeeze out lots
of Δt
History HTTP HTTP/0.9 HTTP/1.0 HTTP/1.1 SPDY/2 HTTP/2 1991 1995 1997
2012 2015
HTTP/0.9
History HTTP HTTP/0.9 HTTP/1.0 HTTP/1.1 SPDY/2 HTTP/2 1991 1996 1997
2012 2015
HTTP/0.9 GET POST HEAD PUT DELETE LINK UNLINK HTTP/1.0
History HTTP HTTP/0.9 HTTP/1.0 HTTP/1.1 SPDY/2 HTTP/2 1991 1996 1997
2012 2015
None
HTTP/1.x Best Practices Write it, concatenate it, minify it, inline
it, sprite it, shard it, vulcanize it, gzip it Workarounds Hacks
Flaw #1 HOL Blocking aka one-resource-at-a-time syndrome
http2.golang.org/gophertiles
None
h1 h2
Flaw #2 Meta Data GET /index.html User-Agent: Mozilla/5.0… Cookie: session_id=deadbeef
… POST /comment User-Agent: Mozilla/5.0… GET /logo.jpg User-Agent: Mozilla/5.0… GET /script.js User-Agent: Mozilla/5.0… Cookie: session_id=deadbeef …
Flaw #2 Meta Data 200 OK Set-Cookie: … Content-Type: text/html
Content-Encoding: gzip <compressed data> ?
History HTTP HTTP/0.9 HTTP/1.0 HTTP/1.1 SPDY/2 HTTP/2 1991 1996 1997
2012 2015
Welcome to the glorious era of ✨HTTP/2✨ …but what is
it?
HTTP/1.1 Upgrade to h2 ✨HTTP/2✨
✨HTTP/2✨ TLS encrypted
✨HTTP/2✨ Single TCP connection
✨HTTP/2✨
✨HTTP/2✨ Single TCP connection
HTTP/2 Concatenation Inlining Vulcanize Spriting
None
h1 h2
h1 h2
h2 h1
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
✨HTTP/2✨
HPACK Header compression specifically for HTTP
✨HPACK✨ Header compression specifically for HTTP glorious
✨HPACK✨ 2 :method GET 3 :method POST 5 :path /index.html
8 :status 200 35 Host 61 www-authenticate 62 … … … GET /index.html Host: www.example.org 2, 5, 35, Huffman(“www.example.org”)
✨HPACK✨ 2 :method GET 3 :method POST 5 :path /index.html
8 :status 200 35 Host 61 www-authenticate 62 Host www.example.org … … … GET /index.html Host: www.example.org 2, 5, 35, Huffman(“www.example.org”)
✨HPACK✨ 2 :method GET 3 :method POST 5 :path /index.html
8 :status 200 35 Host 61 www-authenticate 62 Host www.example.org 63 … … POST /something Host: www.example.org 3, Huffman(“/something”), 62
HPACK Sharding Multiple CDNs
But wait theres more… Squeeze out the last bits of
performance
✨PUSH✨ Can I interest you in some complementary resources to
your resources?
✨PUSH✨ GET /index.html /index.html /style.css /script.js GET /style.css GET /script.js
None
with push without push Don’t push mindlessly!
Still needed GZIP/Deflate First Render CDNs/DNS lookup Cache-Control
47% of HTML 36% of CSS 26% of JS are
still uncompressed without gzip with gzip bit.ly/uncompressed-resources
Now?
Now? (browsers)
Now? (servers) ✔ ✔ ✔
Now? (languages) bit.ly/http2implementations
bit.ly/http2implementations
Now? github.com/GoogleChrome/simplehttp2server (local dev) HTTP/2 & Push
None
None
Now! Your Production Environment
Now! (Tier 1) Put your static assets on a h2
CDN
Now! (Tier 1) 8.41s vs 1.84s over 3G
Now! (Tier 1) 10% less data 0.15% faster
Now! (Tier 2) h2 reverse proxy
Now! (Tier 3) h2
Future? Manifest for static hosters and CDNs manifest.json
{ "index.html": { "/css/app.css": { "type": "style" }, ... },
"page.html": { "/css/page.css": { "type": "style" }, ... } }
$ http2-push-manifest -f index.html -f page.html
WebSockets – Maybe not a Thing Future?
Now? Yes Why? #PerfMatters How? JUST DO IT HTTP/2
Thank you! Surma @surmair