the case for http/2 - greecejs - june 2016
TRANSCRIPT
![Page 1: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/1.jpg)
http://www.flickr.com/photos/arnybo/2679622216
The Case for HTTP/2
@AndyDavies #GreeceJS, June 2016
![Page 2: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/2.jpg)
![Page 3: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/3.jpg)
1999
![Page 4: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/4.jpg)
1999RFC 2616 - HTTP/1.1
![Page 5: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/5.jpg)
The Web of 1999…
![Page 6: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/6.jpg)
…is not the Web of 2016
![Page 7: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/7.jpg)
…is not the Web of 2016
![Page 8: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/8.jpg)
http://www.flickr.com/photos/7671591@N08/1469828976
HTTP/1.x doesn’t use the network efficiently
![Page 9: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/9.jpg)
and we’ve been hacking around some of the limitations
https://www.flickr.com/photos/rocketnumber9/13695281
![Page 10: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/10.jpg)
Each TCP connection only supports one request at a time*
https://www.flickr.com/photos/39551170@N02/5621408218*HTTP Pipelining is broken in practice
![Page 11: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/11.jpg)
So browsers allowed us to make more requests in parallel
Very old browsers - 2 parallel connections
Today’s browsers - 4 plus connections
![Page 12: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/12.jpg)
To make even more parallel requests we split resources across hosts
www.bbc.co.ukstatic.bbci.co.uknews.bbcimg.co.uknode1.bbcimg.co.uk
![Page 13: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/13.jpg)
Increasing the risk of network congestion and packet losshttps://www.flickr.com/photos/dcmaster/4585119705
![Page 14: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/14.jpg)
Every request has an overheadhttps://www.flickr.com/photos/tholub/9488778040
![Page 15: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/15.jpg)
HTTP 1.x - Higher latency = slower load timesPa
ge L
oad
Tim
e (s
)
1
2
3
4
Round Trip Time (ms)
0 20 40 60 80 100 120 140 160 180 200 220 240
Mike Belshe - “More Bandwidth Doesn’t Matter (much)”
![Page 16: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/16.jpg)
Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8 Accept-Encoding:gzip,deflate,sdch Accept-Language:en-US,en;q=0.8 Cache-Control:no-cache Cookie:NTABS=B5; BBC-UID=75620c7ca040deb7c0d3275d81c51c2361684a959e281319b3b5da4dab5958880Mozilla%2f5%2e0%20%28Macintosh%3b%20Intel%20Mac%20OS%20X%2010%5f9%5f1%29%20AppleWebKit%2f537%2e36%20%28KHTML%2c%20like%20Gecko%29%20Chrome%2f31%2e0%2e1650%2e63%20Safari%2f537%2e36; ckns_policy=111; BGUID=55b28cbc20d2e32f221f3ed0e1be9624c960f93b1e483329c3752a6d253efd40; s1=52CC023F3812005F; BBCCOMMENTSMODULESESSID=L-k22bbkde3jkqf928himljnlkl3; ckpf_ww_mobile_js=on; ckpf_mandolin=%22footer-promo%22%3A%7B%22segment%22%3Anull%2C%22end%22%3A%221392834182609%22%7D; _chartbeat2=ol0j0uq4hkq6pumu.1389101635322.1392285654268.0111111111111111; _chartbeat_uuniq=1; ecos.dt=1392285758216 Host:www.bbc.co.uk Pragma:no-cache User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/32.0.1700.107 Safari/537.36
Headers sent with every request
Contain lots of repeated dataand aren’t compressed
![Page 17: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/17.jpg)
And small responses may not fill the TCP Congestion Window
Could have sent more segments in this round-trip
Small response
![Page 18: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/18.jpg)
So we follow recipes e.g. Reduce Requests
https://www.flickr.com/photos/nonny/116902484
![Page 19: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/19.jpg)
Create CSS and JavaScript bundles
++++= =
![Page 20: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/20.jpg)
Create CSS and JavaScript bundles
++++= =More to download
and parse
![Page 21: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/21.jpg)
Create CSS and JavaScript bundles
++++= =x+
Whole bundle is invalidated if a
single file changes
More to download and parse
![Page 22: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/22.jpg)
and combine images to make sprites
![Page 23: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/23.jpg)
and combine images to make sprites
To get just one sprite …
![Page 24: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/24.jpg)
and combine images to make sprites
Browser must download and decode the whole image
To get just one sprite …
![Page 25: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/25.jpg)
We override the browser’s priorities
https://www.flickr.com/photos/skoupidiaris/5025176923
![Page 26: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/26.jpg)
Embed binary* data using DataURIs
url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAMAAADzN3VRAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRF/wAAAAAAQaMSAwAAABJJREFUeNpiYBgFo2AwAIAAAwACigABtnCV2AAAAABJRU5ErkJggg==)
=
*dataURIs can be text too e.g. SVG
![Page 27: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/27.jpg)
and inline ‘critical resources’<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600' type='text/css'> <link rel="alternate" href="http://blog.yoav.ws/index.xml" type="application/rss+xml" title="Yoav's blog thing" /> <style> body { font-family: 'Open Sans', 'Helvetica Neue', Helvetica, sans-serif; color: rgb(72, 70, 68); } img { max-width: 100%; } .li-page-header { color: rgb(255, 255, 255); padding: 16px 0px; background-color: #8a1e1b; } .container { position: relative; width: 90vw; max-width: 760px; margin: 0px auto; padding: 0px; } .clearfix:before, .clearfix:after, .row:before, .row:after { content: '\0020'; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; } .row:after, .clearfix:after { clear: both; } .row, .clearfix { zoom: 1; } .container .column, .container .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px; }
![Page 28: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/28.jpg)
There’s a tension between development and delivery
https://www.flickr.com/photos/domiriel/7376397968
![Page 29: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/29.jpg)
Build tools and optimisation services help plug gaps
and won’t be going away…
![Page 30: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/30.jpg)
But what if we could use the network more efficiently?https://www.flickr.com/photos/belsymington/4102783610
![Page 31: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/31.jpg)
HTTP/2
![Page 32: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/32.jpg)
HTTP/1.1 HTTP/2
https://http2.golang.org/gophertiles
![Page 33: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/33.jpg)
HTTP/1.1 HTTP/2
https://http2.golang.org/gophertiles
![Page 34: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/34.jpg)
HTTP/1.1 HTTP/2
https://http2.golang.org/gophertiles
Impressive
But is it a real world test?
![Page 35: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/35.jpg)
• HTTP methods, status codes and semantics remain the same• Binary headers• Header compression• Multiplexed• Server can push resources
HTTP/2
![Page 36: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/36.jpg)
Each request becomes a stream
![Page 37: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/37.jpg)
DATA frame
HEADERS frame
HTTP/1.1 200 OK Date: Mon, 07 Sep 2015 17:39:33 GMT Expires: -1 Cache-Control: private, max-age=0 Content-Type: text/html; charset=UTF-8 Content-Encoding: gzip X-XSS-Protection: 1; mode=block X-Frame-Options: SAMEORIGIN Transfer-Encoding: chunked<!doctype html> <html> <head> <meta charset="utf-8"> <title>This is my title<title>
<link rel="stylesheet" href="styles.css" type="text/css" />
<script src="script.js"></script>
HTTP/2HTTP/1.1
Streams are divided into frames
}} DATA
frameDATA frame
![Page 38: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/38.jpg)
Frames are multiplexed over a TCP connection
… Stream 1 DATA
Stream 2 HEADERS
Stream 2 DATA
Stream 1 DATA …
Stream 4 DATA
Client Server
![Page 39: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/39.jpg)
TCP connection comparison HTTP/2 vs HTTP/1.1
HTTP/1.1
HTTP/2
![Page 40: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/40.jpg)
Prioritised using Weights and Dependencies
https://nghttp2.org/blog/2014/04/27/how-dependency-based-prioritization-works/
Weight: 200 id: 2
Weight: 100 id: 4
Weight: 1 id: 6
Weight: 100 id: 12
Weight: 100 id: 8
Weight: 100 id: 10
![Page 41: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/41.jpg)
Prioritised using Weights and Dependencies
https://nghttp2.org/blog/2014/04/27/how-dependency-based-prioritization-works/
Weight: 200 id: 2
Weight: 100 id: 4
Weight: 1 id: 6
Weight: 100 id: 12
Weight: 100 id: 8
Weight: 100 id: 10
2/3 1/3 Low priority
![Page 42: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/42.jpg)
Prioritised using Weights and Dependencies
https://nghttp2.org/blog/2014/04/27/how-dependency-based-prioritization-works/
Weight: 200 id: 2
Weight: 100 id: 4
Weight: 1 id: 6
Weight: 100 id: 12
Weight: 100 id: 8
Weight: 100 id: 10
2/3 1/3 Low priorityIn reality, there are some difficulties implementing this
![Page 43: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/43.jpg)
What is the optimal order… Does it change as page loads?https://www.flickr.com/photos/add1sun/4993432274
![Page 44: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/44.jpg)
Header compression
https://http2.github.io/http2-spec/compression.html
![Page 45: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/45.jpg)
Does it make any difference?
Host: Ireland, Test Agent: Singapore, Cable
![Page 46: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/46.jpg)
Does it make any difference?
Host: Ireland, Test Agent: Singapore, Cable
![Page 47: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/47.jpg)
Does it make any difference?
Host: Ireland, Test Agent: Singapore, Cable
![Page 48: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/48.jpg)
Does it make any difference?
Host: Ireland, Test Agent: Singapore, Cable
![Page 49: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/49.jpg)
What about when server and client are close?
Host: Ireland, Test Agent: Ireland, Cable
HTTP/1.1
HTTP/2
![Page 50: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/50.jpg)
and evenly matched when server and client are close
Host: Ireland, Test Agent: Ireland, Cable
HTTP/1.1
HTTP/2
![Page 51: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/51.jpg)
and evenly matched when server and client are close
Host: Ireland, Test Agent: Ireland, Cable
HTTP/1.1
HTTP/2
![Page 52: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/52.jpg)
https://speakerdeck.com/patrickhamann/http2-what-where-why-and-when-smashing-conference-march-2016
![Page 53: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/53.jpg)
https://speakerdeck.com/patrickhamann/http2-what-where-why-and-when-smashing-conference-march-2016
![Page 54: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/54.jpg)
https://speakerdeck.com/patrickhamann/http2-what-where-why-and-when-smashing-conference-march-2016
![Page 55: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/55.jpg)
Opportunities for new kinds of optimisations
https://www.flickr.com/photos/inucara/14981917985
![Page 56: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/56.jpg)
Browser Server
Serverbuildspage
GET index.html
<html><head>…
NetworkIdle
Request other page resources
Server push
![Page 57: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/57.jpg)
Browser Server
Serverbuildspage
GET index.html
<html><head>…
Request other page resources
Push critical resources e.g. CSS
Server push
![Page 58: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/58.jpg)
Browser Server
Serverbuildspage
GET index.html
<html><head>…
Request other page resources
Push critical resources e.g. CSS
Server push
![Page 59: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/59.jpg)
Browser Server
Serverbuildspage
GET index.html
<html><head>…
Request other page resources
Push critical resources e.g. CSS
Browser can reject push but
may have already received data
Server push
![Page 60: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/60.jpg)
Many opportunities for server push
HTML
CSS
DOM
CSSOM
RenderTree Layout PaintJavaScript
Fonts and background images discovered
when render tree builds
Could we push them?
![Page 61: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/61.jpg)
Multiplexing offers interesting possibilities too
![Page 62: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/62.jpg)
How much of an image do we need to make it usable - 5%?
Experiment by John Mellor at Google
![Page 63: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/63.jpg)
Parallel version looks usable with just 15% of bytes
![Page 64: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/64.jpg)
And almost complete with 25% of the image bytes!
![Page 65: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/65.jpg)
There are some questions over the user experience with progressive images
Sequential version needs 80% of bytes to match up…
![Page 66: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/66.jpg)
When do we kill off some HTTP/1.1 optimisation techniques?
http://www.flickr.com/photos/tonyjcase/7183556158
![Page 67: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/67.jpg)
Browser support for HTTP/2 is relatively good
40 Edge 9 b39 30
a
a. Opera Mini doesn’t support HTTP/2 b. Server-Push not supported yet
![Page 68: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/68.jpg)
Server Support
https://github.com/http2/http2-spec/wiki/Implementations
Common servers already support it*
![Page 69: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/69.jpg)
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?
![Page 70: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/70.jpg)
You might find some strange things…https://www.flickr.com/photos/joebenjamin/5009411920
![Page 71: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/71.jpg)
Implementations are still young…
Resources pushed inreverse order!
(h20 v1.5.0 - fixed in h2o 1.5.3)
![Page 72: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/72.jpg)
Different patterns of server resource usage
http://engineering.khanacademy.org/posts/js-packaging-http2.htm
![Page 73: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/73.jpg)
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)
![Page 74: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/74.jpg)
with push
without push
300ms gap in waterfall while Chrome’s preloader starts
![Page 75: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/75.jpg)
Chrome recently deprecated NPN
![Page 76: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/76.jpg)
https://blogs.dropbox.com/tech/2016/05/enabling-http2-for-dropbox-web-services-experiences-and-observations/
![Page 77: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/77.jpg)
Tools that might help you understand more
https://www.flickr.com/photos/99783447@N07/9431062947
![Page 78: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/78.jpg)
Wireshark
![Page 79: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/79.jpg)
chrome://net-internals
![Page 80: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/80.jpg)
https://github.com/rmurphey/chrome-http2-log-parser
![Page 81: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/81.jpg)
http://webpagetest.org
Shows pushed resources in Chrome & Firefox tests
![Page 82: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/82.jpg)
Balancing HTTP/1.1 & HTTP/2
https://www.flickr.com/photos/kyletaylor/589628071
![Page 83: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/83.jpg)
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
![Page 84: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/84.jpg)
Others need to vary to make the most of each
Replace inlining with server push
Reduce CSS/JS concatenation and image spriting
Avoiding sharding
![Page 85: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/85.jpg)
HTTP/2 combines connections for shardsWhen:
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?
![Page 86: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/86.jpg)
HTTP/2 combines connections for shardsWhen:
Refer to same IP address
Use same certificate (wildcard, or SAN) DNS lookup, but no new TCP connectionor TLS negotiation
But… how well does this work in the field, with complexities of Global Load Balancing etc?
![Page 87: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/87.jpg)
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
![Page 88: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/88.jpg)
Efficient TLS is Important
istlsfastyet.com www.ssllabs.com/ssltestBulletproof SSL and TLS Ivan Ristic
![Page 89: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/89.jpg)
https://www.flickr.com/photos/mariachily/3335708242
Still plenty of challenges…
![Page 90: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/90.jpg)
Use of Third-Parties is still growing
Requests by Domain Bytes by Domain
![Page 91: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/91.jpg)
W3C Resource Hints should help
<link rel="dns-prefetch" href=“//example.com”>
<link rel="preconnect" href=“//example.com”>
<link rel="preload" href=“//example.com/font.woff” as=“font”>
![Page 92: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/92.jpg)
If you want to learn more…
hpbn.co/http2 http://daniel.haxx.se/http2
![Page 93: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/93.jpg)
Go explore!
http://www.flickr.com/photos/atoach/6014917153
![Page 94: The Case for HTTP/2 - GreeceJS - June 2016](https://reader036.vdocument.in/reader036/viewer/2022070522/58eed0611a28ab932a8b46a9/html5/thumbnails/94.jpg)
http://www.flickr.com/photos/auntiep/5024494612
@andydavies
http://slideshare.net/andydavies