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
The Glorious Era of HTTP/2
Search
Surma
March 21, 2016
Technology
1
77
The Glorious Era of HTTP/2
Chrome Dev Summit 2015
Surma
March 21, 2016
Tweet
Share
More Decks by Surma
See All by Surma
Know thy buzzwords: HTTP/2
surma
1
520
Houdini Breakout Session
surma
4
550
Houdini – Demystifying CSS
surma
3
300
Progressive Web Apps – Mobile has natively come to the Web
surma
5
280
Instant Loading
surma
4
1.2k
HTTP/2 101
surma
5
470
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
Node-RED MCUの活用事例とノードの開発
404background
0
110
RAGのサービスをリリースして1年が経ちました
segavvy
5
1.6k
SRECon 2024 Keynote: Is It Already Time To Version Observability? (Signs Point To Yes)
charity
2
130
Capacitor製のWebViewアプリからReact Native製のハイブリッドアプリへ
yukukotani
4
640
巨大ガジェット買ってみた
2bo
0
290
開発生産性 超入門 / development productivity introduction
igsr5
10
2.5k
オープンソースのロボットソフトウェア「ROS」で地図作成を試してみた
miura55
0
160
JAWS-UGの楽しみ方
schwrzktz
1
280
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
5
39k
Amazon RDS / Amazon Aurora パフォーマンスチューニングとモニタリング
twingob
4
430
Multimodal LLMs and foundation models in robotics
keio_smilab
PRO
2
680
GoのWebプロダクトに途中参加するときのキャッチアップ #layerxgo / How to catch up Go web product
budougumi0617
6
510
Featured
See All Featured
Designing with Data
zakiwarfel
96
4.9k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
Building Your Own Lightsaber
phodgson
100
5.8k
Infographics Made Easy
chrislema
238
18k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
9
3.6k
The Straight Up "How To Draw Better" Workshop
denniskardys
228
130k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
41
4.5k
Designing for humans not robots
tammielis
247
25k
Code Reviewing Like a Champion
maltzj
516
39k
The Art of Programming - Codeland 2020
erikaheidi
43
12k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
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