Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

HTTP/2 and a Faster Web

706 views

Published on

Video and slides synchronized, mp3 and slide download available at URL http://bit.ly/1yKnuxS.

Omer Shapira introduces HTTP/2 (and SPDY), exploring the impact the protocol has on application design, and telling the story of LinkedIn adopting SPDY on its network infrastructure. Filmed at qconsf.com.

Omer Shapira is an engineering manager at LinkedIn. He and his team are building scalable, low-latency traffic infrastructure to keep LinkedIn site fast.

Published in: Technology

HTTP/2 and a Faster Web

  1. 1. Traffic Infrastructure©2013 LinkedIn Corporation. All Rights Reserved. HTTP/2 and a faster Web
  2. 2. InfoQ.com: News & Community Site • 750,000 unique visitors/month • Published in 4 languages (English, Chinese, Japanese and Brazilian Portuguese) • Post content from our QCon conferences • News 15-20 / week • Articles 3-4 / week • Presentations (videos) 12-15 / week • Interviews 2-3 / week • Books 1 / month Watch the video with slide synchronization on InfoQ.com! http://www.infoq.com/presentations /http2-linkedin
  3. 3. Purpose of QCon - to empower software development by facilitating the spread of knowledge and innovation Strategy - practitioner-driven conference designed for YOU: influencers of change and innovation in your teams - speakers and topics driving the evolution and innovation - connecting and catalyzing the influencers and innovators Highlights - attended by more than 12,000 delegates since 2007 - held in 9 cities worldwide Presented at QCon San Francisco www.qconsf.com
  4. 4. Traffic Infrastructure©2013 LinkedIn Corporation. All Rights Reserved. Omer Shapira
  5. 5. Traffic Infrastructure©2013 LinkedIn Corporation. All Rights Reserved. Content Slides LinkedIn Presentation Template 3
  6. 6. Traffic Infrastructure©2013 LinkedIn Corporation. All Rights Reserved.  LinkedIn  Bandwidth vs. Latency  Challenges with HTTP/1  What is HTTP/2  How the game changes  How LinkedIn adopts HTTP/2 Agenda What to expect before beers
  7. 7. Traffic Infrastructure©2013 LinkedIn Corporation. All Rights Reserved.  Social network for business  Founded in 2002  300M+ users  200 countries  Users first Speed matters Who we are and what we do
  8. 8. Traffic Infrastructure©2013 LinkedIn Corporation. All Rights Reserved.  How do we measure the Internet speed?  Trains vs. cars  Bandwidth vs. latency Let’s talk about speed What’s speed, anyway?
  9. 9. Traffic Infrastructure©2013 LinkedIn Corporation. All Rights Reserved.  Bandwidth is analogous to number of cars on a train  Adding bandwidth is expensive – but simple  Typically sold as “speed”  Matters for streaming  Bandwidth does not matter that much for web or mobile Let’s talk about bandwidth One bazzillion MBps for $4.99 a month + VAT
  10. 10. Traffic Infrastructure©2013 LinkedIn Corporation. All Rights Reserved.  Shorten the pipe  Or move faster  Speed of light is a hard limit  Decreasing latency is hard and sometimes impossible Let’s talk about latency Latency: time it takes for the server to receive and process request for a page object
  11. 11. Traffic Infrastructure©2013 LinkedIn Corporation. All Rights Reserved.  100ms – user perceives as instantaneous.  1s – is about the upper limit of human flow of thought. User loses the feeling direct feedback.  10s – upper limit of attention. Feedback is important, and the chance of context switch is high. Source: Nielsen Norman Group Important latency limits No one will advertise latency
  12. 12. Traffic Infrastructure©2013 LinkedIn Corporation. All Rights Reserved. Route Distance (km) Time in vacuum (ms) Time in fiber (ms) TCP handshake in fiber (ms) NYC to SF 4148 14 21 63 NYC to London 5585 19 28 84 NYC to Sydney 15993 53 80 240 Reality check Signal latency in vacuum and in fiber 10 Source: High Performance Browser Networking
  13. 13. Traffic Infrastructure©2013 LinkedIn Corporation. All Rights Reserved.  Low latency  High bandwidth  …  PROFIT! Fast Internet Short latencies, high bandwidth, opportunities
  14. 14. Traffic Infrastructure©2013 LinkedIn Corporation. All Rights Reserved. In reality Not all latencies are the same 12  Network latency – DNS resolution – SSL/TLS negotiation – Last mile latency typically adds 40ms  Browser latency – DOM/CSSOM latency – Render tree construction – Blocking wait for connection
  15. 15. Traffic Infrastructure©2013 LinkedIn Corporation. All Rights Reserved. Browser latency: what’s up there? No rendering until the tree grows 13 Source: Critical Rendering Path
  16. 16. Traffic Infrastructure©2013 LinkedIn Corporation. All Rights Reserved. HTTP/1 challenges Things to consider during migration 14
  17. 17. Traffic Infrastructure©2013 LinkedIn Corporation. All Rights Reserved.  Mimics interactions between a person and a newspaper – Reading a page takes time. – Transferring text is easy – Single browser window Let’s talk about HTTP Long latencies, low bandwidth, lots of client time 15
  18. 18. Traffic Infrastructure©2013 LinkedIn Corporation. All Rights Reserved. Hyper TEXT transfer protocol In reality we mostly transfer images
  19. 19. Traffic Infrastructure©2013 LinkedIn Corporation. All Rights Reserved. Challenges with HTTP The protocol is getting obsolete
  20. 20. Traffic Infrastructure©2013 LinkedIn Corporation. All Rights Reserved. Challenges with HTTP Congestion Control
  21. 21. Traffic Infrastructure©2013 LinkedIn Corporation. All Rights Reserved. Challenges with HTTP 6 requests in flight, the rest wait… Once all threads are used, the browser blocks the next request…
  22. 22. Traffic Infrastructure©2013 LinkedIn Corporation. All Rights Reserved.  Shard1.static.company.com  …  ShardX.static.company.com  X times the connections  BUT – X times the SSL negotiation – X times nascent connections – X times “half closed” connections… Domain sharding to the rescue? 6 requests per shard
  23. 23. Traffic Infrastructure©2013 LinkedIn Corporation. All Rights Reserved.  Content is not requested until the base page is parsed Challenges with HTTP Head of line latency Head of line latency
  24. 24. Traffic Infrastructure©2013 LinkedIn Corporation. All Rights Reserved.  Headers are transmitted with every request  But some of the headers need to be only transferred once – Accepts-Encoding  Headers are never compressed  Can add extra hop Challenges with HTTP Headers are never compressed Server sent 914 bytes to transfer 57 bytes of response. This is 15x overhead
  25. 25. Traffic Infrastructure©2013 LinkedIn Corporation. All Rights Reserved. HTTP/2 approach A new perspective 23
  26. 26. Traffic Infrastructure©2013 LinkedIn Corporation. All Rights Reserved. SPDY – a new beginning Foundations for HTTP/2
  27. 27. Traffic Infrastructure©2013 LinkedIn Corporation. All Rights Reserved.  Starts with NPN negotiation (optionally with HTTP upgrade)  If both server and browser support SPDY, they switch to SPDY Overview of HTTP/2 Drop in replacement, transparent for webdevs and SWEs
  28. 28. Traffic Infrastructure©2013 LinkedIn Corporation. All Rights Reserved.  Single connection is maintained between browser and server  Congestion window grows, increasing utilization of the network  Unlimited resources in flight – browser is not blocked Overview of HTTP/2 Multiplexing instead of thread pools/domain sharding
  29. 29. Traffic Infrastructure©2013 LinkedIn Corporation. All Rights Reserved.  Negotiated over SSL (NPN/ALPN) or as HTTP upgrade  Transport layer security (always in SPDY, optional in HTTP/2)  Compression (including headers) Overview of HTTP/2 Based on SSL/TLS 27
  30. 30. Traffic Infrastructure©2013 LinkedIn Corporation. All Rights Reserved.  Server can speculatively push resources to client before base page has been parsed  Resources can be reused between pages through the browser cache. Overview of HTTP/2 Server push 28
  31. 31. Traffic Infrastructure©2013 LinkedIn Corporation. All Rights Reserved.  Explicit headers are eliminated  Headers are further compressed Overview of HTTP/2 Header elimination and compression 29
  32. 32. Traffic Infrastructure©2013 LinkedIn Corporation. All Rights Reserved. HTTP/2 changes the game Things to consider during migration 30
  33. 33. Traffic Infrastructure©2013 LinkedIn Corporation. All Rights Reserved.  chrome –enable-spdy4  IE 11  Firefox 34  Safari… It is (mostly) here Chrome, Firefox, IE with Safari to follow
  34. 34. Traffic Infrastructure©2013 LinkedIn Corporation. All Rights Reserved.  Domain sharding  Inlining  Spriting HTTP/1 best practices… Chrome, Firefox, IE with Safari to follow
  35. 35. Traffic Infrastructure©2013 LinkedIn Corporation. All Rights Reserved.  Domain sharding – Breaks HTTP/2 prioritization etc – Requires multiple SSL/TLS handshake – Nascent connections break TCP flow control  We are looking for a single connection per domain  Tip: use altName to map multiple domains to same SSL certificate – Single HTTP/2 connection, multiple connections for HTTP/1 Domain sharding – slows HTTP/2 down Chrome, Firefox, IE with Safari to follow
  36. 36. Traffic Infrastructure©2013 LinkedIn Corporation. All Rights Reserved.  Inlining != DRY  Instead of inlining resources, modularize codebase and utilize Server Push  SP places object into browser cache  Tombstone records to invalidate cache Inlining – wastes bandwidth Chrome, Firefox, IE with Safari to follow
  37. 37. Traffic Infrastructure©2013 LinkedIn Corporation. All Rights Reserved.  Recall browser latency graph  DOM and CSOM are required for rendering  Prioritize JS and CSS over images Control head-of-line latency Chrome, Firefox, IE with Safari to follow
  38. 38. Traffic Infrastructure©2013 LinkedIn Corporation. All Rights Reserved.  Transition from HTTP/1 to HTTP/2  Innovation possibilities  Hybrid models New challenges HTTP/2 simplifies delivery, opens new challenges
  39. 39. Traffic Infrastructure©2013 LinkedIn Corporation. All Rights Reserved. Putting SPDY to work at LinkedIn So what? 37
  40. 40. Traffic Infrastructure©2013 LinkedIn Corporation. All Rights Reserved. Anatomy of a page One base page and tons of static content 38 Base page Static Content
  41. 41. Traffic Infrastructure©2013 LinkedIn Corporation. All Rights Reserved. LinkedIn network stack Or rather non-planar graph 39
  42. 42. Traffic Infrastructure©2013 LinkedIn Corporation. All Rights Reserved.  Distribute the content around the globe  Make the web pretty fast by shortening the pipes CDNs Blazing fast, ubiquitous and not flexible
  43. 43. Traffic Infrastructure©2013 LinkedIn Corporation. All Rights Reserved. There is a CDN edge near you
  44. 44. Traffic Infrastructure©2013 LinkedIn Corporation. All Rights Reserved. Can we beat CDNs locally? Let’s use science to experiment!
  45. 45. Traffic Infrastructure©2013 LinkedIn Corporation. All Rights Reserved.  Profile page is better across the board  Homepage is better for regions closer to ECH Comparing SPDY with CDN - results Results Benefits of SPDY increased with for regions close to the PoP
  46. 46. Traffic Infrastructure©2013 LinkedIn Corporation. All Rights Reserved. LinkedIn network stack Overly simplified
  47. 47. Traffic Infrastructure©2013 LinkedIn Corporation. All Rights Reserved. LinkedIn network stack Pushing the CDN aside
  48. 48. Traffic Infrastructure©2013 LinkedIn Corporation. All Rights Reserved. Static content vs. base pages – round 2
  49. 49. Traffic Infrastructure©2013 LinkedIn Corporation. All Rights Reserved. Combining HTTP/2 with CDNs Deploy HTTP/2 stacks around the globe
  50. 50. Traffic Infrastructure©2013 LinkedIn Corporation. All Rights Reserved.  Modern CDNs do pretty good job accelerating HTTP  HTTP/2 accelerates web content delivery further  Serving static content through HTTP/2 accelerates LinkedIn page  In the long run, CDNs will support HTTP/2. This will make the web faster for everybody. Bottom line HTTP/2 makes web faster; so do CDNs
  51. 51. Questions
  52. 52. We are hiring
  53. 53. Watch the video with slide synchronization on InfoQ.com! http://www.infoq.com/presentations/http2- linkedin

×