HTTP2 is Here!
•
13 likes•5,056 views
Slides from my Jul 2015 talk on HTTP/2 at the London Web Performance Meetup
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to HTTP2 is Here!
Similar to HTTP2 is Here! (20)
More from Andy Davies
More from Andy Davies (20)
Recently uploaded
Recently uploaded (20)
HTTP2 is Here!
- 1. https://www.flickr.com/photos/tim_ellis/6882599706 HTTP/2 is here! @AndyDavies #LDNWebPerf, July 2015
- 2. 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)”
- 3. http://www.flickr.com/photos/7671591@N08/1469828976 TCP was designed for long flows… typical web page has many short ones
- 4. 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=75620c7ca040deb7c0d3275d81c51c2361684a959e281319b3b5da4dab59588 %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 ckns_policy=111; BGUID=55b28cbc20d2e32f221f3ed0e1be9624c960f93b1e483329c3752a6d253efd40; s1=52CC023F3812005F; BBCCOMMENTSMODULESESSID=L-k22bbkde3jkqf928himljnlkl3; ckpf_ww_mobil ckpf_mandolin=%22footer-promo%22%3A%7B%22segment%22%3Anull%2C%22end%22%3A%22139283418260 _chartbeat2=ol0j0uq4hkq6pumu.1389101635322.1392285654268.0111111111111111; _chartbeat_uu 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, lik Chrome/32.0.1700.107 Safari/537.36 Headers sent with every request Contain lots of repeated data! and! can’t be compressed
- 5. We’ve been hacking around limitations of HTTP/1.1 https://www.flickr.com/photos/rocketnumber9/13695281
- 6. Browsers support more parallel connections Old browsers - 2 parallel connections Today’s browsers - 4 plus connections
- 7. We split resources across domains www.bbc.co.uk! static.bbci.co.uk! news.bbcimg.co.uk! node1.bbcimg.co.uk
- 8. We follow recipes e.g. Reduce Requests http://www.flickr.com/photos/mrsmagic/2247364228
- 9. 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' 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; } .container .column, .container .columns { float: left; display: inline; margin-left: 10px; .container .columns, .container .column { margin: 0px; } .container .sixteen.columns { width: 100%; } .container .one.column, .container .one.columns, .container .two.columns, .container .thre
- 10. Sometimes with DataURIs url(data:image/ png;base64,iVBORw0KGgoAA AANSUhEUgAAABkAAAAZCAMAA ADzN3VRAAAAGXRFWHRTb2Z0d 2FyZQBBZG9iZSBJbWFnZVJlY WR5ccllPAAAAAZQTFRF/ wAAAAAAQaMSAwAAABJJREFUe NpiYBgFo2AwAIAAAwACigABt nCV2AAAAABJRU5ErkJggg==) = Larger downloads (needs gzip)! Overrides browser priorities
- 11. Create CSS and JavaScript bundles ++++ = =
- 12. Create CSS and JavaScript bundles ++++ = =More to download and parse
- 13. Create CSS and JavaScript bundles ++++ = =More to download and parse x+! ! Whole bundle is invalidated if a single file changes
- 14. and mush images together as sprites
- 15. and mush images together as sprites To get just one sprite …
- 16. and mush images together as sprites Browser must download and decode the whole image To get just one sprite …
- 17. There’s a tension between development and delivery https://www.flickr.com/photos/domiriel/7376397968
- 18. Build tools and optimisation services help plug gaps and won’t be going away…
- 19. But couldn’t we use the network more efficiently? https://www.flickr.com/photos/belsymington/4102783610
- 20. HTTP/2 (Evolved from Google’s SPDY)
- 22. Impressive Eh!
- 23. Impressive Eh! But is it a real world test?
- 24. Single multiplexed connection to host HTTP/1.1 HTTP/2
- 25. Frames are multiplexed (not just whole resources) Stream 1 DATA Stream 2 HEADERS Stream 2 DATA Stream 1 DATA … Stream 4 DATA Client Server
- 26. HTTP/1.1 - browser sets priorities
- 27. HTTP/2 - browser hints priorities server can override
- 28. 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
- 29. Adds header compression too
- 30. Does it make any difference? Host: Ireland, Test Agent: Singapore, Cable
- 31. Does it make any difference? Host: Ireland, Test Agent: Singapore, Cable
- 32. Does it make any difference? Host: Ireland, Test Agent: Singapore, Cable YMMV
- 33. What about when server and client are close? Host: Ireland, Test Agent: Ireland, Cable
- 34. and evenly matched when server and client are close Host: Ireland, Test Agent: Ireland, Cable
- 35. and evenly matched when server and client are close Host: Ireland, Test Agent: Ireland, Cable
- 36. Browser support is relatively good 40 Edge 9b39 30a a. Opera Mini doesn’t support HTTP/2 b. Server-Push not supported in beta
- 37. Server Support https://github.com/http2/http2-spec/wiki/Implementations Server implementations are getting there
- 38. 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?
- 39. Can check server conformance with h2spec https://github.com/summerwind/h2spec
- 40. Server Support https://github.com/bradfitz/http2/tree/master/h2i Are you missing telnet for debugging?
- 41. No content until DNS, TCP and TLS negotiation complete Efficient TLS is Important
- 42. Efficient TLS is Important istlsfastyet.com www.ssllabs.com/ssltestBulletproof SSL and TLS Ivan Ristic
- 44. Browser Server Server! builds! page GET index.html <html><head>… Network! Idle Request other page resources Server push
- 45. Browser Server Server! builds! page GET index.html <html><head>… Request other page resources Push critical resource e.g. CSS Server push
- 46. Browser Server Server! builds! page GET index.html <html><head>… Request other page resources Push critical resource e.g. CSS Server push
- 47. 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
- 48. 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?
- 49. Multiplexing offers interesting possibilities too
- 50. How much of an image do we need to make it usable - 5%? Experiment by John Mellor at Google
- 51. How much of an image do we need to make it usable - 15%?
- 52. How much of an image do we need to make it usable - 25%?
- 53. There are some questions over the user experience with progressive images How much of an image do we need to make it usable - 80%?
- 54. Time to kill off some optimisation techniques? http://www.flickr.com/photos/tonyjcase/7183556158
- 56. We need to explore! http://www.flickr.com/photos/atoach/6014917153