Your SlideShare is downloading. ×
Web Performance Automation - NY Web Performance Meetup
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Web Performance Automation - NY Web Performance Meetup

4,513
views

Published on

Slide deck from a presentation made by Strangeloop president Joshua Bixby

Slide deck from a presentation made by Strangeloop president Joshua Bixby

Published in: Technology

0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,513
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
87
Comments
0
Likes
5
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Optimizing web performance doesn’t just drive more traffic to a website. It also improves the user experience, increases revenue, and reduces operating costs. In 2010, there’s an important convergence happening between two previously divergent communities: The business community is aware of the direct relationship between site speed and business metrics. The technical community has a growing expertise and understanding of web performance issues.The gap between how sites currently perform and how users want sites to perform is still huge, but companies finally have the incentive – and access to tools – to bridge that gap. This year there’s a palpable urgency surrounding web performance optimization, as companies race to lead the pack in delivering sites that meet – and ideally, exceed – user expectations.
  • Transcript

    • 1. Performance Automation
      Making pages faster automatically
    • 2. Agenda
      • Introduction
      • 3. What is performance automation
      • 4. Basic terminology and concepts
      • 5. Case Study
      • 6. History of performance automation
      • 7. Market overview and challenges
      • 8. Q&A
    • 9. Web Performance
    • 10. Making sites faster
      without changing code
    • 11.
    • 12. Basic terminology and concepts
    • 13.
    • 14.
    • 15.
    • 16. Waterfall chart
      11
    • 17. Waterfall chart
      HTML
      12
    • 18. Waterfall chart
      HTML
      Resources
      13
    • 19. Waterfall chart
      Start
      Render
      Document
      Complete
      Fully
      Loaded
      14
    • 20. Waterfall component breakdown
      DNS lookup
      DNS Lookup
      • Takes one packet in each direction
      • 21. Time is limited to the latency of the connection (DSL/Cable/etc) for the single round trip
      15
    • 22. Waterfall component breakdown
      TCP Connection
      TCP Connection
      • 3 packets
      - ClientServer (SYN)
      - ServerClient (SYN/ACK)
      - ClientServer (ACK)
      • Time is limited to the latency of the connection (DSL/Cable/etc) for the single round trip
      16
    • 23. Waterfall component breakdown
      Time To First Byte
      Time to First Byte
      • Time from the request packet (usually 1) to the first packet of the response
      • 24. Includes the latency of the connect ion (DSL/Cable/etc) for a single round trip
      • 25. Also includes whatever server think time was involved in generating the response
      17
    • 26. Waterfall component breakdown
      Content Download
      Download
      • Time it takes for the entire content of the response to get to the browser
      • 27. Mostly limited by the bandwidth limit of the connection (DSL/Cable/etc)
      18
    • 28. First view vs Repeat View
      19
    • 29. Concurrency
      Concurrency
      • Blocking script don't let the browser use available resources (network, connections, etc) to fetch more content from the server
      • 30. The overall page load time and render time are both affected negatively
      Blocking
      Concurrent
      20
    • 31. Case Study: Automation in action
    • 32. Methodology
    • 33. Let’s Automate
    • 34.
    • 35. A Few Points of Clarification
      We’ll use it to describe where performance pain points are, but that doesn’t mean the page actually has these problems
      What we’re going to do:
      Improve performance incrementally
      Not so good
      (slow)
      Awesome
      (fast)
      * The real Velocity site is somewhere in the middle!
    • 36. Performance Summary
      http://bit.ly/au01VY /
    • 37. Waterfall
      First View
      Repeat View
    • 38. Per Object
    • 39. Content Analysis by Type
    • 40. Content Analysis by Domain
    • 41. Show Me Where It Hurts
      Problem Analysis
    • 42. Performance Problems
      Too many connections (too much orange)
    • 43. Too Many Connections
      97 Connections
      (almost one per request)
    • 44. Too Many Connections
    • 45. Performance Problems
      Too many connections (too much orange)
      Too many bytes (too much blue)
    • 46. Too Many Bytes
      By Type
      By Domain
    • 47. Performance Problems
      Too many connections (too much orange)
      Too many bytes (too much blue)
      Concurrency
    • 48. Concurrency
      Browsers can only open and use so many connections at once
      www.browserscope.org
    • 49. Performance Problems
      Too many connections (too much orange)
      Too many bytes (too much blue)
      Concurrency
      Bad Caching for repeat views
    • 50. Bad Repeat View
      Full Fetches
      Validation
    • 51. Bad Repeat View
      Connections
      Bytes
    • 52. Performance Problems
      Too many connections (too much orange)
      Too many bytes (too much blue)
      Concurrency
      Bad Caching for repeat views
      No CDN (the greens are too big)
    • 53. The Green Problem #1: No CDN
      TTFB
    • 54. Performance Problems
      Too many connections (too much orange)
      Too many bytes (too much blue)
      Concurrency
      Bad Caching for repeat views
      No CDN (the greens are too big)
      Too Many Roundtrips (too many greens)
    • 55. The Green Problem #2: Roundtrips
      Repeat View
      First View
      80 Requests
      78 Requests
      27 Requests
      14 Requests
    • 56. The Green Problem #2: Roundtrips
      Every fetch still pays the HTTP overhead penalty  TTFB is still a problem
      Exacerbated by concurrency issues
      Getting worse as number of objects per page grows
      Generally, the hardest problem to solve
    • 57. Performance Problems
      Too many connections
      Too many bytes (too much blue)
      Concurrency
      Bad Caching for repeat views
      No CDN (the greens are too big)
      Too Many Roundtrips (too many greens)
      Others
    • 58. Examples of Other Problems
      Blocking Javascript
      3rd party calls (http://stevesouders.com/p3pc/)
    • 59. What it looks like
      http://bit.ly/velocity-original
    • 60. Summary
    • 61. Let’s Fix It!!
    • 62. Set-Up
    • 63. Testing Environment
      WebPageTest Client
      (East Coast)
      O’Reilly Datacenter
      (West Coast)
      SERVICE (CLOUD)
    • 64. Acceleration Methodology
    • 65. Stepwise Acceleration
      Start from the beginning and fix the easy stuff
      Step by step acceleration of the page
      Apply techniques/methods/etc and see the result
      Try to make it as fast as possible
    • 66. Step 1: Low Hanging Fruit
    • 67. Keep-Alive
      Solves the too-many connection problem (Less Orange!)
      Will help alleviate the TCP connection setup overhead
      97
      Connections
    • 68. Compression
      Addresses the too-many-bytes problem (Less Blue!)
      We’ll compress textual content (html/css/etc)
      Not the only solution to less blue, but the easiest
    • 69. WebPageTest
      http://bit.ly/cKkjGz
    • 70. Before and After
      ~17.8sec
      ~10.5sec
    • 71. What We Helped: Keep-Alive
      97 Connections  19 Connections
    • 72. What We Helped: Compression
    • 73. How Did We Do?
      Original
      KA+Comp
      Improvement
      First View
      Repeat View
      52%
      71%
      34%
      94%
      31%
      51%
      23%
      75%
      40%
      62%
    • 74. What it looks like
      http://bit.ly/velocity-keep-alives
    • 75. Pros and Cons
      Pros
      Really easy to do
      Single configuration switches in servers, proxies, or load balancers
      Good benefit seen right away
      Cons
      Compression has processing overhead
      On their own they’re just not enough
    • 76. Step 2: Repeat View Problem
    • 77. Poor Client Side Caching
      Original
      KA+Comp
    • 78. Problem Still Exists
      ~6.2sec
    • 79. How Do We Get Better Caching
      RFC 2616, Section 13
      Caching headers should be used on static (non-changing) objects, so they can be cached browser-side
      And by intermediate caching proxies
      Validators are not enough
    • 80. WebPageTest
      http://bit.ly/aCP3iX
    • 81. Before and After
      ~2.0sec
      ~6.2sec
    • 82. How Did We Do?
      KA+Comp
      With Good Caching
      Improvement
      Repeat View
      70%
      42%
      67%
    • 83. Pros and Cons
      Pros
      Good caching can have a major performance impact on repeat visits to a page
      Sometimes it’s easy to do
      Browsers generally pay attention (although interpretation may vary slightly)
      Cons
      The spec appears scary
      Invalidation and stale content
    • 84. Step 3: CDN
    • 85. What Does a CDN do?
      Global network of proxy caches
      Get cacheable content close to users
      Reduce TTFB (smaller greens)
    • 86. TTFB Problem
    • 87. WebPageTest
      http://bit.ly/a9ZJcF
    • 88. Before and After
      ~8.3sec
      ~10.5sec
    • 89. TTFB Savings
      Per object TTFB savings of ~50%
    • 90. How Did We Do?
      KA+Comp
      +CDN
      Improvement
      First View
      21%
      17%
      22%
      0.7 sec
      2.3 sec
      2.7 sec
      Seconds Gained
    • 91. What it looks like
      http://bit.ly/velocity-CDN
    • 92. Pros and Cons
      Pro
      Good mitigation of the TTFB problem
      Established industry: lots of vendors to choose from
      Cons
      Sometimes costly
      May require code change (CDN’ed objects should be written to the CDN domain)
    • 93. Step 4: Steroids - the Hard Stuff
    • 94. We Can Get Better!
      Still too many roundtrips
      Still too many bytes
      Not Fast Enough!!
    • 95. What to do Next?
      Reduce Roundtrips
      Combine images
      Combine JavaScript
      Combine CSS
      Reduce Payload even more
      Minify CSS and JavaScript
      Add Image Compression
      Increase Concurrency
      Add a couple of domains to the mix
    • 96. WebPageTest
      http://bit.ly/bbT3v4
    • 97. Before and After
      ~3.8sec
      ~8.3sec
    • 98. How Did We Do?
      +CDN
      81
      107
      +Strangeloop
      11
      37
      Improvement
      First View
      19%
      30%
      54%
      45%
      31%
      0.5 sec
      4.6 sec
      4.1 sec
      Seconds Gained
    • 99. What it looks like
      http://bit.ly/velocity-awesomest
    • 100. Pros and Cons
      Pros
      Most significant benefit for the hardest part of the acceleration lifecycle
      Address multiple performance points (somtimes multiple ones with the same technique)
      Cons
      It’s not easy
      Regression
    • 101. Other performance opportunities
    • 102. 3rd Party content & Javascript
    • 103. AdditionalTCP based optimizations*
      *Image credit: FastSoft[http://www.fastsoft.com/how-it-works/]
    • 104. DNS based optimizations
    • 105. Different Browsers
      Safari Mobile
      IE 7
      IE 8
      IE 6
      FireFox 3
      Chrome 4
      Chrome 5
      FireFox 2
      Safari 4
    • 106. Flow
      Conversion
      ?
      ?
      ?
      3.8 Seconds
      11 Roundtrips
    • 107. Performance automation market
    • 108. 1993
      2002
      1999
      2006
      2000
      2007
      1996
      1995
      1998
      2004
      2003
      2009
      2008
      2010
    • 109. History of performance automation
      “I will deliver what the server gives me as efficiently as possible to the browser.”
      “I will transform what the server gives me to optimize it for the user’s browser”
      Delivery
      Transformation
    • 110. Deliveryvs Transformation
      Transformation
      Delivery
      Original
      9.5 seconds
      63 roundtrips
      5.7 seconds
      63 roundtrips
      2.1 seconds
      9 roundtrips
    • 111. Delivery market
    • 112. Delivery market
    • 113. Players delivery market
    • 114. Transformation market
    • 115. Transformation market
    • 116. Transformation market
    • 117. Performance automation challenges
    • 118. Challenges
    • Opportunity
    • 126. “Speed is the next competitive advantage.”
      - Steve Souders, Google
    • 127. Q&A