http://www.flickr.com/photos/arnybo/2679622216
The Case for HTTP/2
@AndyDavies
EpicFEL, September 2015
1999
RFC 2616 - HTTP/1.1
The Web of 1999…
…is not the Web of 2015
…is not the Web of 2015
http://www.flickr.com/photos/7671591@N08/1469828976
HTTP/1.x doesn’t use the network efficiently
and we’ve been hacking around some of the limitations
https://www.flickr.com/photos/rocketnumber9/13695281
Each TCP connection only supports one request at a time*
https://www.flickr.com/photos/39551170@N02/5621408218
*HTTP Pipeli...
So browsers allowed us to make more requests in parallel
Very Old browsers - 2 parallel connections
Today’s browsers - 4 p...
To make even more parallel requests we split resources across hosts
www.bbc.co.uk
static.bbci.co.uk
news.bbcimg.co.uk
node...
Increasing the risk of network congestion and packet loss
https://www.flickr.com/photos/dcmaster/4585119705
Every request has an overhead
https://www.flickr.com/photos/tholub/9488778040
HTTP 1.x - Higher latency = slower load times
PageLoadTime(s)
1
2
3
4
Round Trip Time (ms)
0 20 40 60 80 100 120 140 160 1...
Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Accept-Encoding:gzip,deflate,sdch
Accept...
And small responses may not fill the TCP Congestion Window
Could have sent more segments in this round-trip
Small response
So we follow recipes e.g. Reduce Requests
https://www.flickr.com/photos/nonny/116902484
Create CSS and JavaScript bundles
++++
= =More to download
and parse
x+
Whole bundle is
invalidated if a
single file changes
and mush images together as sprites
Browser must download and
decode the whole image
To get just one sprite …
We override the browser’s priorities
https://www.flickr.com/photos/skoupidiaris/5025176923
Embed binary* data using DataURIs
url(data:image/
png;base64,iVBORw0KGgoAA
AANSUhEUgAAABkAAAAZCAMAA
ADzN3VRAAAAGXRFWHRTb2Z...
and inline ‘critical resources’
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us">
<he...
There’s a tension between development and delivery
https://www.flickr.com/photos/domiriel/7376397968
Build tools and optimisation services help plug gaps
and won’t be going away…
But what if we could use the network more efficiently?
https://www.flickr.com/photos/belsymington/4102783610
HTTP/2
HTTP/1.1 HTTP/2
https://http2.golang.org/gophertiles
HTTP/1.1 HTTP/2
https://http2.golang.org/gophertiles
HTTP/1.1 HTTP/2
Impressive!
But is it a real world test?
https://http2.golang.org/gophertiles
• HTTP methods, status codes and semantics remain the same
• Binary headers
• Header compression
• Multiplexed
• Server ca...
Each request becomes a stream
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...
Frames are multiplexed over a TCP connection
…
Stream 1
DATA
Stream 2
HEADERS
Stream 2
DATA
Stream 1
DATA
…
Stream 4
DATA
...
TCP connection comparison HTTP/2 vs HTTP/1.1
HTTP/1.1
HTTP/2
Prioritised using Weights and Dependencies
https://nghttp2.org/blog/2014/04/27/how-dependency-based-prioritization-works/
...
Header compression
https://http2.github.io/http2-spec/compression.html
Does it make any difference?
Host: Ireland, Test Agent: Singapore, Cable
Does it make any difference?
Host: Ireland, Test Agent: Singapore, Cable
Does it make any difference?
Host: Ireland, Test Agent: Singapore, Cable
What about when server and client are close?
Host: Ireland, Test Agent: Ireland, Cable
HTTP/1.1
HTTP/2
and evenly matched when server and client are close
Host: Ireland, Test Agent: Ireland, Cable
HTTP/1.1
HTTP/2
and evenly matched when server and client are close
Host: Ireland, Test Agent: Ireland, Cable
HTTP/1.1
HTTP/2
Opportunities for new kinds of optimisations
https://www.flickr.com/photos/inucara/14981917985
Browser Server
Server
builds
page
GET index.html
<html><head>…
Network
Idle
Request other page resources
Server push
Browser Server
Server
builds
page
GET index.html
<html><head>…
Request other page resources
Push critical resources e.g. C...
Browser Server
Server
builds
page
GET index.html
<html><head>…
Request other page resources
Push critical resource e.g. CS...
Many opportunities for server push
HTML
CSS
DOM
CSSOM
Render
Tree
Layout PaintJavaScript
Fonts and background
images disco...
Multiplexing offers interesting possibilities too
How much of an image do we need to make it usable - 5%?
Experiment by John Mellor at Google
Parallel version looks usable with just 15% of bytes
And almost complete with 25% of the image bytes!
There are some questions over the user
experience with progressive images
Sequential version needs 80% of bytes to match u...
When do we kill off some HTTP/1.1 optimisation techniques?
http://www.flickr.com/photos/tonyjcase/7183556158
Browser support for HTTP/2 is relatively good
40 Edge 9b39 30a
a. Opera Mini doesn’t support HTTP/2
b. Server-Push not sup...
Server Support
https://github.com/http2/http2-spec/wiki/Implementations
Server implementations are getting there
Choose your server carefully…
Does it respect stream and connection flow?
Does it support dependencies and weights?
Does it...
No content until DNS, TCP and TLS negotiation complete
Efficient TLS is Important
Session Resumption, Certificate Stapling ...
Efficient TLS is Important
istlsfastyet.com www.ssllabs.com/ssltestBulletproof SSL and TLS
Ivan Ristic
https://www.flickr.com/photos/mariachily/3335708242
Still plenty of challenges…
Go explore!
http://www.flickr.com/photos/atoach/6014917153
http://www.flickr.com/photos/auntiep/5024494612
@andydavies
andy.davies@nccgroup.trust
http://slideshare.net/andydavies
Upcoming SlideShare
Loading in …5
×

The Case for HTTP/2 - EpicFEL Sept 2015

1,143 views

Published on

HTTP/2 is here but why do we need it, and how is it different to HTTP/1.1?

Video - https://www.youtube.com/watch?v=ob-CnA9YmiI

These are the slides from my talk at Front-End London's one day conference, EpicFEL

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,143
On SlideShare
0
From Embeds
0
Number of Embeds
78
Actions
Shares
0
Downloads
11
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

The Case for HTTP/2 - EpicFEL Sept 2015

  1. 1. http://www.flickr.com/photos/arnybo/2679622216 The Case for HTTP/2 @AndyDavies EpicFEL, September 2015
  2. 2. 1999 RFC 2616 - HTTP/1.1
  3. 3. The Web of 1999…
  4. 4. …is not the Web of 2015
  5. 5. …is not the Web of 2015
  6. 6. http://www.flickr.com/photos/7671591@N08/1469828976 HTTP/1.x doesn’t use the network efficiently
  7. 7. and we’ve been hacking around some of the limitations https://www.flickr.com/photos/rocketnumber9/13695281
  8. 8. Each TCP connection only supports one request at a time* https://www.flickr.com/photos/39551170@N02/5621408218 *HTTP Pipelining is broken in practice
  9. 9. So browsers allowed us to make more requests in parallel Very Old browsers - 2 parallel connections Today’s browsers - 4 plus connections
  10. 10. 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
  11. 11. Increasing the risk of network congestion and packet loss https://www.flickr.com/photos/dcmaster/4585119705
  12. 12. Every request has an overhead https://www.flickr.com/photos/tholub/9488778040
  13. 13. HTTP 1.x - Higher latency = slower load times PageLoadTime(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)”
  14. 14. 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 data and aren’t compressed
  15. 15. And small responses may not fill the TCP Congestion Window Could have sent more segments in this round-trip Small response
  16. 16. So we follow recipes e.g. Reduce Requests https://www.flickr.com/photos/nonny/116902484
  17. 17. Create CSS and JavaScript bundles ++++ = =More to download and parse x+ Whole bundle is invalidated if a single file changes
  18. 18. and mush images together as sprites Browser must download and decode the whole image To get just one sprite …
  19. 19. We override the browser’s priorities https://www.flickr.com/photos/skoupidiaris/5025176923
  20. 20. 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
  21. 21. 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' typ <link rel="alternate" href="http://blog.yoav.ws/index.xml" type="application/rss+xml" title="Y <style> body { font-family: 'Open Sans', 'Helvetica Neue', Helvetica, sans-serif; color: rgb(72, 7 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: .clearfix:before, .clearfix:after, .row:before, .row:after { content: '0020'; display: bl .row:after, .clearfix:after { clear: both; } .row, .clearfix { zoom: 1; }
  22. 22. There’s a tension between development and delivery https://www.flickr.com/photos/domiriel/7376397968
  23. 23. Build tools and optimisation services help plug gaps and won’t be going away…
  24. 24. But what if we could use the network more efficiently? https://www.flickr.com/photos/belsymington/4102783610
  25. 25. HTTP/2
  26. 26. HTTP/1.1 HTTP/2 https://http2.golang.org/gophertiles
  27. 27. HTTP/1.1 HTTP/2 https://http2.golang.org/gophertiles
  28. 28. HTTP/1.1 HTTP/2 Impressive! But is it a real world test? https://http2.golang.org/gophertiles
  29. 29. • HTTP methods, status codes and semantics remain the same • Binary headers • Header compression • Multiplexed • Server can push resources HTTP/2
  30. 30. Each request becomes a stream
  31. 31. 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" /> HTTP/2HTTP/1.1 Streams are divided into frames } } DATA frame DATA frame
  32. 32. Frames are multiplexed over a TCP connection … Stream 1 DATA Stream 2 HEADERS Stream 2 DATA Stream 1 DATA … Stream 4 DATA Client Server
  33. 33. TCP connection comparison HTTP/2 vs HTTP/1.1 HTTP/1.1 HTTP/2
  34. 34. 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
  35. 35. Header compression https://http2.github.io/http2-spec/compression.html
  36. 36. Does it make any difference? Host: Ireland, Test Agent: Singapore, Cable
  37. 37. Does it make any difference? Host: Ireland, Test Agent: Singapore, Cable
  38. 38. Does it make any difference? Host: Ireland, Test Agent: Singapore, Cable
  39. 39. What about when server and client are close? Host: Ireland, Test Agent: Ireland, Cable HTTP/1.1 HTTP/2
  40. 40. and evenly matched when server and client are close Host: Ireland, Test Agent: Ireland, Cable HTTP/1.1 HTTP/2
  41. 41. and evenly matched when server and client are close Host: Ireland, Test Agent: Ireland, Cable HTTP/1.1 HTTP/2
  42. 42. Opportunities for new kinds of optimisations https://www.flickr.com/photos/inucara/14981917985
  43. 43. Browser Server Server builds page GET index.html <html><head>… Network Idle Request other page resources Server push
  44. 44. Browser Server Server builds page GET index.html <html><head>… Request other page resources Push critical resources e.g. CSS Server push
  45. 45. Browser Server Server builds page GET index.html <html><head>… Request other page resources Push critical resource e.g. CSS Browser can reject push but may have already received data Server push
  46. 46. 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?
  47. 47. Multiplexing offers interesting possibilities too
  48. 48. How much of an image do we need to make it usable - 5%? Experiment by John Mellor at Google
  49. 49. Parallel version looks usable with just 15% of bytes
  50. 50. And almost complete with 25% of the image bytes!
  51. 51. There are some questions over the user experience with progressive images Sequential version needs 80% of bytes to match up…
  52. 52. When do we kill off some HTTP/1.1 optimisation techniques? http://www.flickr.com/photos/tonyjcase/7183556158
  53. 53. Browser support for HTTP/2 is relatively good 40 Edge 9b39 30a a. Opera Mini doesn’t support HTTP/2 b. Server-Push not supported yet
  54. 54. Server Support https://github.com/http2/http2-spec/wiki/Implementations Server implementations are getting there
  55. 55. 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?
  56. 56. No content until DNS, TCP and TLS negotiation complete Efficient TLS is Important Session Resumption, Certificate Stapling and improvements in TLS v1.3 all help
  57. 57. Efficient TLS is Important istlsfastyet.com www.ssllabs.com/ssltestBulletproof SSL and TLS Ivan Ristic
  58. 58. https://www.flickr.com/photos/mariachily/3335708242 Still plenty of challenges…
  59. 59. Go explore! http://www.flickr.com/photos/atoach/6014917153
  60. 60. http://www.flickr.com/photos/auntiep/5024494612 @andydavies andy.davies@nccgroup.trust http://slideshare.net/andydavies

×