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.

Real world experiences with HTTP/2 (Michael Gooding, Javier Garza from Akamai)

1,397 views

Published on

HTTP/2 has been out for about a year. Over that time, Michael Gooding and Javier Garza have worked with many customers to implement it. However, beyond a turnkey solution that offers instant performance gains, HTTP/2 has led to a large amount of questions and confusion about how to optimize for it. Michael and Javier share their experiences with HTTP/2 over the last year, discussing case studies that demonstrate how performance can be improved over HTTP/2 while addressing backward compatibility, exploring using RUM data to review performance-related observations of customers after switching to HTTP/2, and offering hands-on demos of HTTP/2 with server push and HTTP/2 + QUIC.

Topics include:

Rendering impact without prioritization: Many solutions currently do not support server push or prioritization, which can have a negative impact on rendering when all resources instantly compete for the same bandwidth. Michael and Javier discuss solutions to mitigate this problem.
Breaking out to smaller files: Best practices used to dictate combining CSS and JavaScript into as few resources as possible. In an HTTP/2 world, the advice is to leave files alone and serve them as they are. Michael and Javier look at examples where trade-offs exist between the delivery, management, compression, and caching and advise how best to approach the problem.
Sprites: As with smaller files, what should we do with sprites in an HTTP/2 world? Looking at examples, Michael and Javier analyze the trade-offs in breaking a sprite out to smaller parts, looking at the effects of less-complex CSS against network performance to see how much of a difference it actually makes on performance.
Delivering for HTTP/1.x: Many websites today still have a large user base from older browsers that do not and will not support HTTP/2. By reviewing case study sites optimized for HTTP/2, Michael and Javier display the delta between a site delivered over an HTTP/2 connection and an HTTP/1.x connection. Taking these differences into account, they then explore some common trade-offs and review the delivery options to provide good performance for both protocols at the same time.
Real-life HTTP/2 web performance data: Michael and Javier explain how to use RUM data to review web performance data from large websites after enabling HTTP/2 and see the conditions where the performance improvements are at their best.
Hands-on demo comparing the web performance of HTTP/2 versus HTTP/1.x 1 and HTTP/2 with server push and QUIC.

Published in: Technology
  • Be the first to comment

Real world experiences with HTTP/2 (Michael Gooding, Javier Garza from Akamai)

  1. 1. HTTP/2 (h2) in the real world Michael Gooding @Michael_G_81 Javier Garza @jjaviergarza
  2. 2. ©2016 AKAMAI | FASTER FORWARDTM 18 Feb 2015
  3. 3. ©2016 AKAMAI | FASTER FORWARDTM Conflict in Ukraine continued Picture: AFP/Getty Images
  4. 4. ©2016 AKAMAI | FASTER FORWARDTM Heavy snow in Istanbul causes airport closure Picture: AFP/Getty Images
  5. 5. ©2016 AKAMAI | FASTER FORWARDTM Relatives of missing flight MH370 passengers protest in Malaysia Picture: AFP/Getty Images
  6. 6. ©2016 AKAMAI | FASTER FORWARDTM People in Finland celebrated Chinese New Year Picture: EPA
  7. 7. ©2016 AKAMAI | FASTER FORWARDTM In Holland a Tiger cub goes outside for the first time! Picture: Europics
  8. 8. ©2016 AKAMAI | FASTER FORWARDTM
  9. 9. ©2016 AKAMAI | FASTER FORWARDTM
  10. 10. ©2016 AKAMAI | FASTER FORWARDTM Michael Gooding: Performance Specialist Javier Garza: Enterprise Architect (h2 evangelist) 1. H2 Performance i. Measurement ii. Rendering iii. Small files iv. Sprites 2. Summary
  11. 11. ©2016 AKAMAI | FASTER FORWARDTM Performance i. Measurement ii. Rendering iii. Small files iv. Sprites
  12. 12. ©2016 AKAMAI | FASTER FORWARDTM Akamai Real User Monitoring (RUM) 1. Billions beacons collected per day 2. Some sites see good improvements 3. Some sites don’t! 4. 3rd Party content waters down benefit 5. A/B testing 6. Browsers behave differently 7. Network conditions vary results
  13. 13. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Network variations for non-cellular connections seconds % users h1 h2
  14. 14. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Network variations for cellular connections seconds % users h1 h2
  15. 15. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Real latency vs Simulated latency, h1 vs h2, Chrome vs Firefox 1. Test real cities with real latency 2. Test using synthetic latency from dulles 3. Using Chrome and Firefox agents (h2 on/off) 4. Tens of thousands of WPT tests Using Webpagetest.org (WPT) to measure Latency
  16. 16. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Using WPT to measure (Real vs Simulated) Latency Lessons learned: • Can’t trust simulated latency • Difference between real and simulated changes by browser too • Better stick with RUM testing (more work to clean results)
  17. 17. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Using WPT to measure Packet Loss Source: http://conferences.oreilly.com/velocity/devops-web-performance-ny/public/schedule/detail/51303 - https://goo.gl/MPndFs h2 performance suffers with packet loss 0% packet loss 2% packet loss h1 h2 0% packet loss 2% packet loss
  18. 18. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Other research studies on packet loss h2 helps with a lot of small objects TCP slow start impacts a single connection when delivering more bytes Source: https://www.akamai.com/us/en/multimedia/documents/technical-publication/http2-performance-in-cellular-networks.pdf > https://goo.gl/y0NYha
  19. 19. ©2016 AKAMAI | FASTER FORWARDTM Performance i. Measurement ii. Rendering iii. Small files iv. Sprites
  20. 20. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Performance - Rendering h1 h2 h1 h2 4 sec
  21. 21. ©2016 AKAMAI | FASTER FORWARDTM What’s the problem? Rendering with different prioritisation
  22. 22. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Performance - Rendering: Sharding h1 h2 1 Domain All on same connection 2nd connection opened /js /css www.website.com /js /css www.website.com dns connection ssl ttfb d/load
  23. 23. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Performance - Rendering: Sharding cdn.website.com/js cdn.website.com/css www.website.com cdn.website.com/js cdn.website.com/css www.website.com h1 h2 2 Domains h2 1 Certificate 2 Certificates cdn.website.com/js cdn.website.com/css www.website.com dns connection ssl ttfb d/load
  24. 24. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Performance – Rendering: Sharding example h2 after h2 before Simple improvement by not making connection
  25. 25. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Performance – Rendering: Sharding example h2 after h2 before
  26. 26. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Performance – Rendering: Progressive jpegs h2 normal jpeg progressive Normal jpegs just 60% loaded
  27. 27. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Performance – Rendering: Progressive jpeg example h2 after h2 before
  28. 28. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Performance – Rendering: DIY prioritisation <img onload="addImages();" src="tshirt12_thumb.jpg"> <script> function addImages() {; var img = document.createElement("img"); img.src = "tshirt2.jpg"; document.getElementById("imgholder").appendChild(img); } </script> Different order and loaded with dependency
  29. 29. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Performance – Rendering example Large image fills bandwidth
  30. 30. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Performance – Rendering example prog jpg h2 before js priority
  31. 31. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Performance – Rendering example with Push 2 sec1 sec Push prog jpg
  32. 32. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Performance – Rendering example Server Push h2 push prog jpg
  33. 33. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Performance – Rendering: Server push bad example h2 push h2 before
  34. 34. ©2016 AKAMAI | FASTER FORWARDTM Rendering Summary 1. Keep critical content on same domain 2. If you need to shard to balance h1 use the same cert 3. Progressive jpgs can help rendering 4. Use JavaScript if you need to delay resources 5. Use server push where you can
  35. 35. ©2016 AKAMAI | FASTER FORWARDTM Performance i. Measurement ii. Rendering iii. Small files iv. Sprites
  36. 36. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Performance – Small files: CSS CSS bytes downloaded (gzip off) H2 is smaller because of header compression h1 h2 # of files bytes
  37. 37. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Performance – Small files: CSS h2 performance comparison h # of files time
  38. 38. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Performance – Small files: CSS h2 performance comparison - Chrome h # of files time h1 h2 H2 is faster, especially as you increase the number of files Smaller number of files is faster to load
  39. 39. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Performance – Small files: CSS h2 performance comparison - Firefox h # of files time h1 h2 H2 is slower in FF after ~100 files Smaller number of files is faster to load for h1 and h2
  40. 40. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Performance – Small files: CSS h2 performance comparison – Safari Mobile h # of files time h1 h2 H2 is faster, especially as you increase the number of files Smaller number of files is faster to load
  41. 41. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Performance – Small files: CSS h2 performance comparison – Chrome Mobile h # of files time h1 h2 H2 is faster, but struggles > 500 files
  42. 42. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Performance – Small files: CSS Too many files causes problems in Chrome ???
  43. 43. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Performance – Small files example Network not much different h2 after h2 before
  44. 44. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Performance – Small files example h2 after h2 before Result in browser is big
  45. 45. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Performance – Small files: JS h2 performance comparison h # of files time
  46. 46. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Performance – Small files: JS What about rendering? h h1 h2
  47. 47. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Performance – Small files: JS example Network results pretty similar h2 after h2 before
  48. 48. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Performance – Small files: JS example Faster rendering in browser h2 after h2 before
  49. 49. ©2016 AKAMAI | FASTER FORWARDTM Small files Summary 1. h2 is more efficient in most browsers 2. NOT faster dealing with many files 3. Keep combining files, same as h1 4. 2 or 3 is ok, based on frequency of change
  50. 50. ©2016 AKAMAI | FASTER FORWARDTM Performance i. Measurement ii. Rendering iii. Small files iv. Sprites
  51. 51. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Performance – Image Sprites h2 performance comparison h # of files time mob-Safari X
  52. 52. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Performance – Image Sprites h2 performance comparison - Chrome h # of files time h1 h2 Difference between h1 and h2 is almost non existent for images Smaller number of files is faster to load for both protocols
  53. 53. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Performance – Image Sprites h2 performance comparison - Firefox h # of files time h1 h2 h2 is only slightly slower in FF Smaller number of files is faster to load for h1 and h2
  54. 54. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Performance – Image Sprites h2 performance comparison – Safari Mobile h # of files time h1 h2 h2 just breaks >200 files Smaller number of files is faster to load
  55. 55. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Performance – Image Sprites h2 performance comparison – Safari Mobile h h2 Harder to debug on iPhone, could be: 1. Max streams 2. Memory 3. CPU
  56. 56. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Performance – Image Sprites h2 performance comparison – Chrome Mobile h # of files time h1 h2 h2 performance is mixed for Chrome Mobile
  57. 57. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Performance – Image Sprites Visual experience of loading the page h1 h2
  58. 58. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Performance – Image Sprites Other considerations 1. Management complexity 2. Caching 3. Images used in sprite
  59. 59. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Performance – Image Sprites example
  60. 60. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Performance – Image Sprites example h2 images h2 sprite Load difference much less with sprite
  61. 61. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Performance – Image Sprites example # of images used Load time (ms) #sprite19 {background:url('images/sprite.png') no-repeat -17px 0;} #image19 {background:url('sprite/sprite19.png') no-repeat;} 0 70 140 sprite 1 5 10 20 30 40 code img used
  62. 62. ©2016 AKAMAI | FASTER FORWARDTM Sprite Summary 1. Keep using sprites for performance, especially mobile 2. If you are only using a few images files are ok 3. Think about management cost 4. Think about frequency of change 5. Mobile decoding times can be slow and has issues with large numbers of files
  63. 63. ©2016 AKAMAI | FASTER FORWARDTM Most of the times h2 improves performance Don’t give up if it doesn’t Anti-patterns aren’t anti-patterns 1. Don’t shard critical content 2. Keep combining files 3. Keep using sprites (if you use enough images) Everything is evolving FAST (servers, browsers, QUIC)
  64. 64. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Shameless plug https://goo.gl/3ZVNN8
  65. 65. ©2016 AKAMAI | FASTER FORWARDTM 1. Turn h2 on 2. Measure 3. Experiment 4. Share What if we could save 1 second on every page this woman views in a day? (50 page views/day)
  66. 66. ©2016 AKAMAI | FASTER FORWARDTM 1 sec/page x 50/day x 365 = 5 hours/year 5 sec/page = 25 hours/year
  67. 67. Questions? Michael Gooding @Michael_G_81 uk.linkedin.com/in/mgooding1981 Javier Garza @jjaviergarza www.linkedin.com/in/jjgarza

×