http2 is here!
TRANSCRIPT
![Page 1: HTTP2 is Here!](https://reader031.vdocuments.us/reader031/viewer/2022022413/58eccb301a28ab293c8b458f/html5/thumbnails/1.jpg)
https://www.flickr.com/photos/tim_ellis/6882599706
HTTP/2 is here!
@AndyDavies #LDNWebPerf, July 2015
![Page 2: HTTP2 is Here!](https://reader031.vdocuments.us/reader031/viewer/2022022413/58eccb301a28ab293c8b458f/html5/thumbnails/2.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 3: HTTP2 is Here!](https://reader031.vdocuments.us/reader031/viewer/2022022413/58eccb301a28ab293c8b458f/html5/thumbnails/3.jpg)
http://www.flickr.com/photos/7671591@N08/1469828976
TCP was designed for long flows… typical web page has many short ones
![Page 4: HTTP2 is Here!](https://reader031.vdocuments.us/reader031/viewer/2022022413/58eccb301a28ab293c8b458f/html5/thumbnails/4.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 data!and!
can’t be compressed
![Page 5: HTTP2 is Here!](https://reader031.vdocuments.us/reader031/viewer/2022022413/58eccb301a28ab293c8b458f/html5/thumbnails/5.jpg)
We’ve been hacking around limitations of HTTP/1.1
https://www.flickr.com/photos/rocketnumber9/13695281
![Page 6: HTTP2 is Here!](https://reader031.vdocuments.us/reader031/viewer/2022022413/58eccb301a28ab293c8b458f/html5/thumbnails/6.jpg)
Browsers support more parallel connections
Old browsers - 2 parallel connections
Today’s browsers - 4 plus connections
![Page 7: HTTP2 is Here!](https://reader031.vdocuments.us/reader031/viewer/2022022413/58eccb301a28ab293c8b458f/html5/thumbnails/7.jpg)
We split resources across domains
www.bbc.co.uk!static.bbci.co.uk!news.bbcimg.co.uk!node1.bbcimg.co.uk
![Page 8: HTTP2 is Here!](https://reader031.vdocuments.us/reader031/viewer/2022022413/58eccb301a28ab293c8b458f/html5/thumbnails/8.jpg)
We follow recipes e.g. Reduce Requests
http://www.flickr.com/photos/mrsmagic/2247364228
![Page 9: HTTP2 is Here!](https://reader031.vdocuments.us/reader031/viewer/2022022413/58eccb301a28ab293c8b458f/html5/thumbnails/9.jpg)
We 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; } .container .columns, .container .column { margin: 0px; } .container .sixteen.columns { width: 100%; } .container .one.column, .container .one.columns, .container .two.columns, .container .three.columns, .container .four.columns, .container .five.columns, .container .six.columns, .container .seven.columns, .container .eight.columns, .container
![Page 10: HTTP2 is Here!](https://reader031.vdocuments.us/reader031/viewer/2022022413/58eccb301a28ab293c8b458f/html5/thumbnails/10.jpg)
Sometimes with DataURIs
url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAMAAADzN3VRAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRF/wAAAAAAQaMSAwAAABJJREFUeNpiYBgFo2AwAIAAAwACigABtnCV2AAAAABJRU5ErkJggg==)
=
Larger downloads (needs gzip)!Overrides browser priorities
![Page 11: HTTP2 is Here!](https://reader031.vdocuments.us/reader031/viewer/2022022413/58eccb301a28ab293c8b458f/html5/thumbnails/11.jpg)
Create CSS and JavaScript bundles
++++= =
![Page 12: HTTP2 is Here!](https://reader031.vdocuments.us/reader031/viewer/2022022413/58eccb301a28ab293c8b458f/html5/thumbnails/12.jpg)
Create CSS and JavaScript bundles
++++= =More to download
and parse
![Page 13: HTTP2 is Here!](https://reader031.vdocuments.us/reader031/viewer/2022022413/58eccb301a28ab293c8b458f/html5/thumbnails/13.jpg)
Create CSS and JavaScript bundles
++++= =More to download
and parse x+!!
Whole bundle is invalidated if a
single file changes
![Page 14: HTTP2 is Here!](https://reader031.vdocuments.us/reader031/viewer/2022022413/58eccb301a28ab293c8b458f/html5/thumbnails/14.jpg)
and mush images together as sprites
![Page 15: HTTP2 is Here!](https://reader031.vdocuments.us/reader031/viewer/2022022413/58eccb301a28ab293c8b458f/html5/thumbnails/15.jpg)
and mush images together as sprites
To get just one sprite …
![Page 16: HTTP2 is Here!](https://reader031.vdocuments.us/reader031/viewer/2022022413/58eccb301a28ab293c8b458f/html5/thumbnails/16.jpg)
and mush images together as sprites
Browser must download and decode the whole image
To get just one sprite …
![Page 17: HTTP2 is Here!](https://reader031.vdocuments.us/reader031/viewer/2022022413/58eccb301a28ab293c8b458f/html5/thumbnails/17.jpg)
There’s a tension between development and delivery
https://www.flickr.com/photos/domiriel/7376397968
![Page 18: HTTP2 is Here!](https://reader031.vdocuments.us/reader031/viewer/2022022413/58eccb301a28ab293c8b458f/html5/thumbnails/18.jpg)
Build tools and optimisation services help plug gaps
and won’t be going away…
![Page 19: HTTP2 is Here!](https://reader031.vdocuments.us/reader031/viewer/2022022413/58eccb301a28ab293c8b458f/html5/thumbnails/19.jpg)
But couldn’t we use the network more efficiently?https://www.flickr.com/photos/belsymington/4102783610
![Page 20: HTTP2 is Here!](https://reader031.vdocuments.us/reader031/viewer/2022022413/58eccb301a28ab293c8b458f/html5/thumbnails/20.jpg)
HTTP/2(Evolved from Google’s SPDY)
![Page 21: HTTP2 is Here!](https://reader031.vdocuments.us/reader031/viewer/2022022413/58eccb301a28ab293c8b458f/html5/thumbnails/21.jpg)
![Page 22: HTTP2 is Here!](https://reader031.vdocuments.us/reader031/viewer/2022022413/58eccb301a28ab293c8b458f/html5/thumbnails/22.jpg)
Impressive Eh!
![Page 23: HTTP2 is Here!](https://reader031.vdocuments.us/reader031/viewer/2022022413/58eccb301a28ab293c8b458f/html5/thumbnails/23.jpg)
Impressive Eh!
But is it a real world test?
![Page 24: HTTP2 is Here!](https://reader031.vdocuments.us/reader031/viewer/2022022413/58eccb301a28ab293c8b458f/html5/thumbnails/24.jpg)
Single multiplexed connection to host
HTTP/1.1
HTTP/2
![Page 25: HTTP2 is Here!](https://reader031.vdocuments.us/reader031/viewer/2022022413/58eccb301a28ab293c8b458f/html5/thumbnails/25.jpg)
Frames are multiplexed (not just whole resources)
Stream 1 DATA
Stream 2 HEADERS
Stream 2 DATA
Stream 1 DATA …
Stream 4 DATA
Client Server
![Page 26: HTTP2 is Here!](https://reader031.vdocuments.us/reader031/viewer/2022022413/58eccb301a28ab293c8b458f/html5/thumbnails/26.jpg)
HTTP/1.1 - browser sets priorities
![Page 27: HTTP2 is Here!](https://reader031.vdocuments.us/reader031/viewer/2022022413/58eccb301a28ab293c8b458f/html5/thumbnails/27.jpg)
HTTP/2 - browser hints priorities server can override
![Page 28: HTTP2 is Here!](https://reader031.vdocuments.us/reader031/viewer/2022022413/58eccb301a28ab293c8b458f/html5/thumbnails/28.jpg)
Prioritisation uses 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 29: HTTP2 is Here!](https://reader031.vdocuments.us/reader031/viewer/2022022413/58eccb301a28ab293c8b458f/html5/thumbnails/29.jpg)
Adds header compression too
![Page 30: HTTP2 is Here!](https://reader031.vdocuments.us/reader031/viewer/2022022413/58eccb301a28ab293c8b458f/html5/thumbnails/30.jpg)
Does it make any difference?
Host: Ireland, Test Agent: Singapore, Cable
![Page 31: HTTP2 is Here!](https://reader031.vdocuments.us/reader031/viewer/2022022413/58eccb301a28ab293c8b458f/html5/thumbnails/31.jpg)
Does it make any difference?
Host: Ireland, Test Agent: Singapore, Cable
![Page 32: HTTP2 is Here!](https://reader031.vdocuments.us/reader031/viewer/2022022413/58eccb301a28ab293c8b458f/html5/thumbnails/32.jpg)
Does it make any difference?
Host: Ireland, Test Agent: Singapore, Cable
YMMV
![Page 33: HTTP2 is Here!](https://reader031.vdocuments.us/reader031/viewer/2022022413/58eccb301a28ab293c8b458f/html5/thumbnails/33.jpg)
What about when server and client are close?
Host: Ireland, Test Agent: Ireland, Cable
![Page 34: HTTP2 is Here!](https://reader031.vdocuments.us/reader031/viewer/2022022413/58eccb301a28ab293c8b458f/html5/thumbnails/34.jpg)
and evenly matched when server and client are close
Host: Ireland, Test Agent: Ireland, Cable
![Page 35: HTTP2 is Here!](https://reader031.vdocuments.us/reader031/viewer/2022022413/58eccb301a28ab293c8b458f/html5/thumbnails/35.jpg)
and evenly matched when server and client are close
Host: Ireland, Test Agent: Ireland, Cable
![Page 36: HTTP2 is Here!](https://reader031.vdocuments.us/reader031/viewer/2022022413/58eccb301a28ab293c8b458f/html5/thumbnails/36.jpg)
Browser support is relatively good
40 Edge 9 b39 30
a
a. Opera Mini doesn’t support HTTP/2 b. Server-Push not supported in beta
![Page 37: HTTP2 is Here!](https://reader031.vdocuments.us/reader031/viewer/2022022413/58eccb301a28ab293c8b458f/html5/thumbnails/37.jpg)
Server Support
https://github.com/http2/http2-spec/wiki/Implementations
Server implementations are getting there
![Page 38: HTTP2 is Here!](https://reader031.vdocuments.us/reader031/viewer/2022022413/58eccb301a28ab293c8b458f/html5/thumbnails/38.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 39: HTTP2 is Here!](https://reader031.vdocuments.us/reader031/viewer/2022022413/58eccb301a28ab293c8b458f/html5/thumbnails/39.jpg)
Can check server conformance with h2spec
https://github.com/summerwind/h2spec
![Page 40: HTTP2 is Here!](https://reader031.vdocuments.us/reader031/viewer/2022022413/58eccb301a28ab293c8b458f/html5/thumbnails/40.jpg)
Server Support
https://github.com/bradfitz/http2/tree/master/h2i
Are you missing telnet for debugging?
![Page 41: HTTP2 is Here!](https://reader031.vdocuments.us/reader031/viewer/2022022413/58eccb301a28ab293c8b458f/html5/thumbnails/41.jpg)
No content until DNS, TCP and TLS negotiation complete
Efficient TLS is Important
![Page 42: HTTP2 is Here!](https://reader031.vdocuments.us/reader031/viewer/2022022413/58eccb301a28ab293c8b458f/html5/thumbnails/42.jpg)
Efficient TLS is Important
istlsfastyet.com www.ssllabs.com/ssltestBulletproof SSL and TLS Ivan Ristic
![Page 43: HTTP2 is Here!](https://reader031.vdocuments.us/reader031/viewer/2022022413/58eccb301a28ab293c8b458f/html5/thumbnails/43.jpg)
New optimisations
https://www.flickr.com/photos/inucara/14981917985
![Page 44: HTTP2 is Here!](https://reader031.vdocuments.us/reader031/viewer/2022022413/58eccb301a28ab293c8b458f/html5/thumbnails/44.jpg)
Browser Server
Server!builds!page
GET index.html
<html><head>…
Network!Idle
Request other page resources
Server push
![Page 45: HTTP2 is Here!](https://reader031.vdocuments.us/reader031/viewer/2022022413/58eccb301a28ab293c8b458f/html5/thumbnails/45.jpg)
Browser Server
Server!builds!page
GET index.html
<html><head>…
Request other page resources
Push critical resource e.g. CSS
Server push
![Page 46: HTTP2 is Here!](https://reader031.vdocuments.us/reader031/viewer/2022022413/58eccb301a28ab293c8b458f/html5/thumbnails/46.jpg)
Browser Server
Server!builds!page
GET index.html
<html><head>…
Request other page resources
Push critical resource e.g. CSS
Server push
![Page 47: HTTP2 is Here!](https://reader031.vdocuments.us/reader031/viewer/2022022413/58eccb301a28ab293c8b458f/html5/thumbnails/47.jpg)
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
![Page 48: HTTP2 is Here!](https://reader031.vdocuments.us/reader031/viewer/2022022413/58eccb301a28ab293c8b458f/html5/thumbnails/48.jpg)
Other 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?
![Page 49: HTTP2 is Here!](https://reader031.vdocuments.us/reader031/viewer/2022022413/58eccb301a28ab293c8b458f/html5/thumbnails/49.jpg)
Multiplexing offers interesting possibilities too
![Page 50: HTTP2 is Here!](https://reader031.vdocuments.us/reader031/viewer/2022022413/58eccb301a28ab293c8b458f/html5/thumbnails/50.jpg)
How much of an image do we need to make it usable - 5%?
Experiment by John Mellor at Google
![Page 51: HTTP2 is Here!](https://reader031.vdocuments.us/reader031/viewer/2022022413/58eccb301a28ab293c8b458f/html5/thumbnails/51.jpg)
How much of an image do we need to make it usable - 15%?
![Page 52: HTTP2 is Here!](https://reader031.vdocuments.us/reader031/viewer/2022022413/58eccb301a28ab293c8b458f/html5/thumbnails/52.jpg)
How much of an image do we need to make it usable - 25%?
![Page 53: HTTP2 is Here!](https://reader031.vdocuments.us/reader031/viewer/2022022413/58eccb301a28ab293c8b458f/html5/thumbnails/53.jpg)
There are some questions over the user experience with progressive images
How much of an image do we need to make it usable - 80%?
![Page 54: HTTP2 is Here!](https://reader031.vdocuments.us/reader031/viewer/2022022413/58eccb301a28ab293c8b458f/html5/thumbnails/54.jpg)
Time to kill off some optimisation techniques?
http://www.flickr.com/photos/tonyjcase/7183556158
![Page 55: HTTP2 is Here!](https://reader031.vdocuments.us/reader031/viewer/2022022413/58eccb301a28ab293c8b458f/html5/thumbnails/55.jpg)
https://www.flickr.com/photos/mariachily/3335708242
Still plenty of challenges…
![Page 56: HTTP2 is Here!](https://reader031.vdocuments.us/reader031/viewer/2022022413/58eccb301a28ab293c8b458f/html5/thumbnails/56.jpg)
We need to explore!
http://www.flickr.com/photos/atoach/6014917153
![Page 57: HTTP2 is Here!](https://reader031.vdocuments.us/reader031/viewer/2022022413/58eccb301a28ab293c8b458f/html5/thumbnails/57.jpg)
http://www.flickr.com/photos/auntiep/5024494612
!
@andydavies!!
http://slideshare.net/andydavies!