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

Like this? Share it with your network

Share

Web Performance Automation - NY Web Performance Meetup

  • 4,820 views
Uploaded on

Slide deck from a presentation made by Strangeloop president Joshua Bixby

Slide deck from a presentation made by Strangeloop president Joshua Bixby

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
4,820
On Slideshare
2,482
From Embeds
2,338
Number of Embeds
10

Actions

Shares
Downloads
84
Comments
0
Likes
4

Embeds 2,338

http://www.webperformancetoday.com 1,993
http://www.strangeloopnetworks.com 168
http://www.techpresentations.org 130
http://allagringaus.com 19
http://static.slidesharecdn.com 10
http://stage.strangeloopnetworks.com 10
http://translate.googleusercontent.com 4
http://webcache.googleusercontent.com 2
http://76.10.176.70 1
http://radwareit.wpengine.com 1

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