Chrome Dev Summit 2015 https://www.youtube.com/watch?v=r5oT_2ndjms
View Slide
HTTP2 101Surma@surmair
TL;DR: SWITCH!HTTP/2 ≥ HTTP/1
TL;DR PerformanceIf you invest, you can squeeze out lots of Δt
History HTTPHTTP/0.9HTTP/1.0HTTP/1.1SPDY/2HTTP/21991 1995 1997 2012 2015
HTTP/0.9
History HTTPHTTP/0.9HTTP/1.0HTTP/1.1SPDY/2HTTP/21991 1996 1997 2012 2015
HTTP/0.9GETPOSTHEADPUTDELETELINKUNLINKHTTP/1.0
HTTP/1.xBest PracticesWrite it, concatenate it, minify it, inline it,sprite it, shard it, vulcanize it, gzip itWorkaroundsHacks
Flaw #1 HOL Blockingaka one-resource-at-a-time syndrome
http2.golang.org/gophertiles
h1h2
Flaw #2 Meta DataGET /index.htmlUser-Agent: Mozilla/5.0…Cookie: session_id=deadbeef…POST /commentUser-Agent: Mozilla/5.0…GET /logo.jpgUser-Agent: Mozilla/5.0…GET /script.jsUser-Agent: Mozilla/5.0…Cookie: session_id=deadbeef…
Flaw #2 Meta Data200 OKSet-Cookie: …Content-Type: text/htmlContent-Encoding: gzip?
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/2ConcatenationInliningVulcanizeSpriting
h1 h2
h2h1
h2 capableh2 enabledh2 unsupported 7,200 ms5,325 ms6,160 msTime to mobile load eventSample is 1 monthof data onhttps://next.ft.com
HPACKHeader compression specifically for HTTP
✨HPACK✨Header compression specifically for HTTPglorious
✨HPACK✨2 :method GET3 :method POST5 :path /index.html8 :status 20035 Host61 www-authenticate62………GET /index.htmlHost: www.example.org2, 5, 35,Huffman(“www.example.org”)
✨HPACK✨2 :method GET3 :method POST5 :path /index.html8 :status 20035 Host61 www-authenticate62 Host www.example.org………GET /index.htmlHost: www.example.org2, 5, 35,Huffman(“www.example.org”)
✨HPACK✨2 :method GET3 :method POST5 :path /index.html8 :status 20035 Host61 www-authenticate62 Host www.example.org63……POST /somethingHost: www.example.org3, Huffman(“/something”), 62
HPACKShardingMultiple CDNs
But waittheres more…Squeeze out the last bits of performance
✨PUSH✨Can I interest you in some complementaryresources to your resources?
✨PUSH✨GET /index.html/index.html/style.css/script.jsGET /style.cssGET /script.js
with push without pushDon’t push mindlessly!
StillneededGZIP/DeflateFirst RenderCDNs/DNS lookupCache-Control
47% of HTML36% of CSS26% of JSare still uncompressedwithout gzipwith gzipbit.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
Now!Your Production Environment
Now!(Tier 1)Put your static assets on a h2 CDN
Now!(Tier 1)8.41svs1.84sover 3G
Now!(Tier 1)10% less data0.15% faster
Now!(Tier 2)h2 reverse proxy
Now!(Tier 3)h2
Future?Manifest for static hosters and CDNsmanifest.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 ThingFuture?
Now? YesWhy? #PerfMattersHow? JUST DO ITHTTP/2
Thank you!Surma@surmair