O slideshow foi denunciado.
Seu SlideShare está sendo baixado. ×

Meetup Tech Talk on Web Performance

Próximos SlideShares
Http/2  - What's it all about?
Http/2 - What's it all about?
Carregando em…3

Confira estes a seguir

1 de 56 Anúncio

Mais Conteúdo rRelacionado

Quem viu também gostou (17)


Semelhante a Meetup Tech Talk on Web Performance (20)

Mais recentes (20)


Meetup Tech Talk on Web Performance

  1. 1. Web Performance and the impact of SPDY, HTTP/2, and QUIC RootPerformance
  2. 2. ● Founder of RootPerformance, doing application performance analysis and troubleshooting for clients ● Find me @ About Me ● 17+ years in Performance Engineering space ○ application performance (web, DB, thin-client, thick- client, etc) ○ network analysis ○ capacity planning ● Been both customer and implementer of application performance software products
  3. 3. Let’s talk about… Performance : taken from - http://www.picserver.org/p/performance.html - http://creativecommons.org/licenses/by-sa/3.0/
  4. 4. Are your app’s user-expected page load times acceptable? Fairfield Church, Romney Marsh (C) Stephen Nunney :: Geograph Britain and Ireland : taken from - http://www.geograph.org.uk/photo/228870 Author: Stephen Nunney http://creativecommons. org/licenses/by-sa/2.0/
  5. 5. Hold that thought… First a primer
  6. 6. Web PerformancePerformance of your site or app is important Users won’t stick around long if your site is slow 1 second has been benchmark for years, and still is ➢ beyond that, users start to think of going elsewhere ➢ at 10s, most are gone Average US connection speed is about 7.4Mbps (2012)* *Source: State of Broadband 2013 - whitehouse.gov
  7. 7. But bandwidth is not nearly as important as latency, which varies depending on user location Web PerformanceSlow websites impact the bottom line ○ lower conversions ○ higher bounce rates We want to make the web as fast as possible to improve business metrics
  8. 8. ...But how do we do that?
  9. 9. By first understanding how a web request works.
  10. 10. It’s important to optimize these to reduce page load time ✓ HTTP request ✓ Server processing ✓ Content download Web requests involve many steps ✓ DNS request ✓ TCP connection ✓ TLS connection (if secure)
  11. 11. What are common optimization recommendations?
  12. 12. Typical recommendations Reduce latency between user and server ✓ implement content delivery network (CDN) ✓ increase bandwidth ✓ increase number of connections, but up to a point Cache static resources, when possible Compress all data with gzip compression Reduce image sizes Combine JS/CSS files Persist connections Utilize different browser (IE7 to IE9, IE to Chrome) Increase server hardware resources Precision approach path indicator - Wikipedia, the free encyclopedia : taken from - https://en.wikipedia.org/wiki/Precision_approach_path_indicator - https://creativecommons.org/licenses/by-sa/3.0/
  13. 13. Are recommendations being followed?
  14. 14. Well, not really
  15. 15. Worldwide website stats - Page Size Source: HTTP Archive - May 2015 Size of average image is 2MB! That’s a lot. Not enough compression happening!
  16. 16. Worldwide website stats - Transfers Source: HTTP Archive - May 2015 Number of web requests and their sizes are going up! Not good!
  17. 17. Worldwide website stats - CDN Use Source: HTTP Archive - May 2015 Use of content delivery networks is steady, but should be going up!
  18. 18. Worldwide website stats - Caching Source: HTTP Archive - May 2015 Percentage of cached data should be going up, but has remained steady!
  19. 19. Understanding the web’s protocol may help
  20. 20. HTTP Protocol Hypertext Transport Protocol - application layer protocol in the TCP/IP stack used for communication of web traffic Most widely used version is HTTP/1.1 But there limitations By Magnus D from London, United Kingdom (The new Routemaster Uploaded by Kobac) [CC BY 2.0 (http://creativecommons.org/licenses/by/2.0)], via Wikimedia Commons
  21. 21. HTTP/1.1 Limitations Many small requests makes it latency sensitive Pipelining is not multiplexing ○ server must still respond in order ○ head-of-line blocking occurs due to TCP ○ most browsers disable it Short-lived requests affected by TCP slow start ○ default OS initial congestion window = 3 ○ changed to 10 in Linux 2.6 kernel, but not in Windows ○ short HTTP requests (most requests) are still in slow-start
  22. 22. Common HTTP/1.1 Workarounds Open multiple connections ○ modern browsers allow 6 concurrent TCP connections to send multiple HTTP requests ○ helps reduce impact of slow- start Image spriting - to combine small images and reduce HTTP requests Domain sharding ○ used to multiply number of concurrent connections ○ one.domain.com, two.domain. com, three.domain.com, etc Resource inlining - to reduce number of TCP connections By Camilo Sanchez (Own work) [CC BY-SA 4.0 (http://creativecommons.org/licenses/by-sa/4.0)], via Wikimedia Commons
  23. 23. But workarounds aren’t long-term solutions...
  24. 24. Enter Google
  25. 25. SPDY Overview To help solve HTTP/1.1 limitations, in Nov 2009, Google released first draft defining a new protocol called SPDY (pronounced "SPeeDY") Main goal: reduce page load times This is done in following technical ways: ✓ multiplexing requests on one TCP connection ✓ prioritizing requests ✓ compressing headers ✓ enabling server pushes ✓ ensuring better security with TLS
  26. 26. From SPDY to HTTP/2
  27. 27. HTTP/2 Overview More efficient version of HTTP/1.1 Initial draft published in 2012 an exact copy of SPDY Published as proposed standard (RFC 7540) in May 2015 SPDY was used at starting point to build on ✓ Multiplexing of requests via request/response streams ✓ Flow control and prioritization of multiplexed streams ✓ Interaction mode via server push ✓ Data compression of HTTP headers Three energy saving light bulbs | Elektrostandard compact fl… | Flickr : taken from - https://www.flickr.com/photos/antonfomkin/5243218781 Author: Anton Fomkin https://creativecommons. org/licenses/by/2.0/
  28. 28. Differs from SPDY in 2 key ways
  29. 29. 1. Can be implemented with or without TLS (port 80 & 443) via h2 & h2c version IDs, respectively 2. HTTPS expected to be de facto standard by web servers By Bert Kaufmann from Roermond, Netherlands (Making a difference) [CC BY 2.0 (http://creativecommons.org/licenses/by/2.0)], via Wikimedia Commons
  30. 30. What else about HTTP/2? By Caroline Culler (User:Wgreaves) (Own work) [CC BY-SA 3.0 (http://creativecommons.org/licenses/by-sa/3.0) or GFDL (http://www.gnu.org/copyleft/fdl.html)], via Wikimedia Commons
  31. 31. Uses only one TCP connection; instead of many to reduce connection setup time
  32. 32. Requests are multiplexed
  33. 33. Compresses HTTP header
  34. 34. Can reset HTTP/2 stream instead of TCP connection
  35. 35. Servers can push data to the client
  36. 36. That’s nice, but can I use it?
  37. 37. Supported Browsers: ⬜ Chrome ⬜ Firefox ⬜ Opera ⬜ IE/Edge By Gabe Torney (Own work) [CC BY-SA 3.0 (http://creativecommons.org/licenses/by-sa/3.0)], via Wikimedia Commons
  38. 38. By Gabe Torney (Own work) [CC BY-SA 3.0 (http://creativecommons.org/licenses/by-sa/3.0)], via Wikimedia Commons Supported Web Servers: ⬜ Apache ⬜ Nginx
  39. 39. Ok. So now what?
  40. 40. You complete some HTTP/2 implementation steps
  41. 41. Remove domain sharding to reduce TCP connections
  42. 42. Remove resource inlining to avoid unneeded TCP connections
  43. 43. Uncombine scripts and CSS files, with a caveat...don’t do all files* * Khan Academy’s implementation of HTTP/2
  44. 44. Use SPDY if you can’t use HTTP/2
  45. 45. What are the pros of doing this?
  46. 46. Substantially and measurably improves end-user perceived latency over HTTP/1.1 using TCP Addresses the "head of line” blocking problem in HTTP Does not require multiple connections to a server to enable parallelism, thus improving its use of TCP Retains the semantics of HTTP/1.1, like header fields, status codes, etc Clearly defines how HTTP/2.0 interacts with HTTP/1.x via new Upgrade header field
  47. 47. Ok. Now the cons?
  48. 48. TLS connection setup still takes time Binary format makes troubleshooting a little more difficult Unable to get around TCP “head of line” blocking, particularly during packet loss TCP Slow-Start’s congestion avoidance algorithm increases serialization delay
  49. 49. Be QUIC on the web
  50. 50. QUIC overview QUIC (Quick UDP Internet Connections) development started in 2012 as an extension of work done by Google to get around cons with SPDY & HTTP/2 Need protocol with quicker connection setup time & quicker retransmissions, unlike TCP Multiplexed HTTP communication running over UDP instead of TCP Main goal: reduce over latency across Internet for user interactions Implements various TCP features without the limitations ● 0 RTT for connection setup ● Flow control ● Congestion avoidance All benefits of HTTP/2 with no TCP head-of-line blocking due to no connectionless orientation of UDP protocol By Amey Hegde (Flickr) [CC BY 2.0 (http://creativecommons.org/licenses/by/2.0)], via Wikimedia Commons
  51. 51. Want to know more about Web Performance?
  52. 52. Want to learn how to make your web applications faster? Red ones go faster | A toy car speeding to work. Strobist in… | Flickr : taken from - https://www.flickr.com/photos/leszekleszczynski/5161000002 Author: Leszek Leszczynski https://creativecommons. org/licenses/by/2.0/
  53. 53. YES! How do I do it? By Los Angeles (Own work) [CC BY-SA 3.0 (http://creativecommons.org/licenses/by-sa/3.0) or GFDL (http://www.gnu.org/copyleft/fdl.html)], via Wikimedia Commons
  54. 54. Free eBook Chapter: GET THE CHAPTER! Learn the key things to look for when analyzing a web application
  55. 55. Thank You RootPerformance
  56. 56. Happy Analyzing! RootPerformance