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
490
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
550
Houdini Breakout Session
surma
4
630
Houdini – Demystifying CSS
surma
3
330
Progressive Web Apps – Mobile has natively come to the Web
surma
5
300
The Glorious Era of HTTP/2
surma
1
93
Instant Loading
surma
4
1.3k
What if there isn’t?
surma
0
83
What if there isn’t?
surma
2
180
The Web is a Contender
surma
0
140
Other Decks in Technology
See All in Technology
SRE with AI:実践から学ぶ、運用課題解決と未来への展望
yoshiiryo1
1
680
新規事業におけるAIリサーチの活用例
ranxxx
0
130
(HackFes)米国国防総省のDevSecOpsライフサイクルをAWSのセキュリティサービスとOSSで実現
syoshie
5
650
Shadow DOM & Security - Exploring the boundary between light and shadow
masatokinugawa
0
650
The Madness of Multiple Gemini CLIs Developing Simultaneously with Jujutsu
gunta
1
2.4k
エンジニアリングマネージャー“お悩み相談”パネルセッション
ar_tama
1
640
データ戦略部門 紹介資料
sansan33
PRO
1
3.3k
PHPからはじめるコンピュータアーキテクチャ / From Scripts to Silicon: A Journey Through the Layers of Computing
tomzoh
2
380
20250719_JAWS_kobe
takuyay0ne
1
160
データ駆動経営の道しるべ:プロダクト開発指標の戦略的活用法
ham0215
2
230
機械学習を「社会実装」するということ 2025年夏版 / Social Implementation of Machine Learning July 2025 Version
moepy_stats
1
470
怖くない!GritQLでBiomeプラグインを作ろうよ
pal4de
1
120
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Building Adaptive Systems
keathley
43
2.7k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Rails Girls Zürich Keynote
gr2m
95
14k
What's in a price? How to price your products and services
michaelherold
246
12k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
How to train your dragon (web standard)
notwaldorf
96
6.1k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Building an army of robots
kneath
306
45k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
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