HTTP/2 is here but why do we need it, how is it different to HTTP/1.1 and what does the mean for developers?
Slides from my talk at GreeceJS in Athens, June 2016
9. and we’ve been hacking around some of the limitations
https://www.flickr.com/photos/rocketnumber9/13695281
10. Each TCP connection only supports one request at a time*
https://www.flickr.com/photos/39551170@N02/5621408218
*HTTP Pipelining is broken in practice
11. So browsers allowed us to make more requests in parallel
Very old browsers - 2 parallel connections
Today’s browsers - 4 plus connections
12. To make even more parallel requests we split resources across hosts
www.bbc.co.uk
static.bbci.co.uk
news.bbcimg.co.uk
node1.bbcimg.co.uk
13. Increasing the risk of network congestion and packet loss
https://www.flickr.com/photos/dcmaster/4585119705
14. Every request has an overhead
https://www.flickr.com/photos/tholub/9488778040
24. and combine images to make sprites
Browser must download and
decode the whole image
To get just one sprite …
25. We override the browser’s priorities
https://www.flickr.com/photos/skoupidiaris/5025176923
26. Embed binary* data using DataURIs
url(data:image/
png;base64,iVBORw0KGgoAA
AANSUhEUgAAABkAAAAZCAMAA
ADzN3VRAAAAGXRFWHRTb2Z0d
2FyZQBBZG9iZSBJbWFnZVJlY
WR5ccllPAAAAAZQTFRF/
wAAAAAAQaMSAwAAABJJREFUe
NpiYBgFo2AwAIAAAwACigABt
nCV2AAAAABJRU5ErkJggg==)
=
*dataURIs can be text too e.g. SVG
60. Many opportunities for server push
HTML
CSS
DOM
CSSOM
Render
Tree
Layout PaintJavaScript
Fonts and background
images discovered
when render tree builds
Could we push them?
69. But choose your server carefully…
Does it respect stream and connection flow?
Does it support dependencies and weights?
Does it support server-push?
How does it help optimisation?
70. You might find some strange things…
https://www.flickr.com/photos/joebenjamin/5009411920
71. Implementations are still young…
Resources pushed in
reverse order!
(h20 v1.5.0 - fixed in h2o 1.5.3)
72. Different patterns of server resource usage
http://engineering.khanacademy.org/posts/js-packaging-http2.htm
73. Sometimes browsers have unexpected behaviour…
1.6s 1.7s 1.8s 1.9s 2.0s 2.1s
With Push 1.6
Without Push
(Chrome 46, in Firefox both tests were fast)
83. Some good practices remain constant across HTTP/1.1 and HTTP/2
Shrinking content - compression, minification, image optimisation
Reducing re-redirects
Effective caching
Reducing latency e.g. using a CDN
Reducing DNS lookups and TCP connections
84. Others need to vary to make the most of each
Replace inlining with server push
Reduce CSS/JS concatenation and image spriting
Avoiding sharding
85. HTTP/2 combines connections for shards
When:
Refer to same IP address
Use same certificate (wildcard, or SAN)
But… how well does this work in the field, with complexities of Global Load Balancing etc?
86. HTTP/2 combines connections for shards
When:
Refer to same IP address
Use same certificate (wildcard, or SAN) DNS lookup, but
no new TCP connection
or TLS negotiation
But… how well does this work in the field, with complexities of Global Load Balancing etc?
87. No content until DNS, TCP and TLS negotiation complete
Efficient TLS is still important
Session Resumption, Certificate Stapling and improvements in TLS v1.3 all help
88. Efficient TLS is Important
istlsfastyet.com www.ssllabs.com/ssltestBulletproof SSL and TLS
Ivan Ristic