HTTP2 is Here!

3,620 views

Published on

Slides from my Jul 2015 talk on HTTP/2 at the London Web Performance Meetup

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

No Downloads
Views
Total views
3,620
On SlideShare
0
From Embeds
0
Number of Embeds
197
Actions
Shares
0
Downloads
29
Comments
0
Likes
12
Embeds 0
No embeds

No notes for slide

HTTP2 is Here!

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

×