The document provides a detailed analysis of web performance, focusing on various performance metrics and case studies to identify common issues such as too many connections and bytes, poor caching, and the need for Content Delivery Networks (CDN). It outlines a stepwise methodology for improving website performance through automated testing, implementing compression, enhancing caching strategies, and reducing roundtrips. The summary emphasizes the business implications of site speed and offers insights on how to effectively communicate performance benefits to stakeholders.

1. Performance in business terms

2. Agenda Introduction

3. Basic terminology and concepts

4. Case study

5. Performance stats and examples

6. 5 minute performance benchmark

7. Business case

8. Q&A

10. Web Performance

12. Basic terminology and concepts

13. 8www.strangeloopnetworks.com

15. Waterfall chart10

16. Waterfall chartHTML11

17. Waterfall chartHTMLResources12

18. Waterfall chartStart RenderDocument CompleteFullyLoaded13

19. Waterfall component breakdownDNS lookupDNS LookupTakes one packet in each direction

20. Time is limited to the latency of the connection (DSL/Cable/etc) for the single round trip14

21. Waterfall component breakdownTCP ConnectionTCP Connection3 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 trip15

22. Waterfall component breakdownTime To First ByteTime to First ByteTime from the request packet (usually 1) to the first packet of the response

23. Includes the latency of the connect ion (DSL/Cable/etc) for a single round trip

24. Also includes whatever server think time was involved in generating the response16

25. Waterfall component breakdownContent DownloadDownloadTime it takes for the entire content of the response to get to the browser

26. Mostly limited by the bandwidth limit of the connection (DSL/Cable/etc)17

27. First view vs Repeat View18

28. ConcurrencyConcurrencyBlocking script don't let the browser use available resources (network, connections, etc) to fetch more content from the server

29. The overall page load time and render time are both affected negatively)BlockingConcurrent19

30. Case Study: Automation in action

31. Methodology

32. Let’s Automate

34. A Few Points of ClarificationWe’ll use it to describe where performance pain points are, but that doesn’t mean the page actually has these problemsWhat we’re going to do:Improve performance incrementallyNot so good(slow)Awesome(fast)* The real Velocity site is somewhere in the middle!

35. Performance Summaryhttp://bit.ly/au01VY /

36. WaterfallFirst ViewRepeat View

37. Per Object

38. Content Analysis by Type

39. Content Analysis by Domain

40. Show Me Where It HurtsProblem Analysis

41. Performance ProblemsToo many connections (too much orange)

42. Too Many Connections97 Connections(almost one per request)

43. Too Many Connections

44. Performance ProblemsToo many connections (too much orange)Too many bytes (too much blue)

45. Too Many BytesBy TypeBy Domain

46. Performance ProblemsToo many connections (too much orange)Too many bytes (too much blue)Concurrency

47. ConcurrencyBrowsers can only open and use so many connections at oncewww.browserscope.org

48. Performance ProblemsToo many connections (too much orange)Too many bytes (too much blue)ConcurrencyBad Caching for repeat views

49. Bad Repeat ViewFull FetchesValidation

50. Bad Repeat ViewConnectionsBytes

51. Performance ProblemsToo many connections (too much orange)Too many bytes (too much blue)ConcurrencyBad Caching for repeat viewsNo CDN (the greens are too big)

52. The Green Problem #1: No CDNTTFB

53. Performance ProblemsToo many connections (too much orange)Too many bytes (too much blue)ConcurrencyBad Caching for repeat viewsNo CDN (the greens are too big)Too Many Roundtrips (too many greens)

54. The Green Problem #2: RoundtripsRepeat ViewFirst View80 Requests78 Requests27 Requests14 Requests

55. The Green Problem #2: RoundtripsEvery fetch still pays the HTTP overhead penalty  TTFB is still a problemExacerbated by concurrency issuesGetting worse as number of objects per page growsGenerally, the hardest problem to solve

56. Performance ProblemsToo many connectionsToo many bytes (too much blue)ConcurrencyBad Caching for repeat viewsNo CDN (the greens are too big)Too Many Roundtrips (too many greens)Others

57. Examples of Other ProblemsBlocking Javascript3rd party calls (http://stevesouders.com/p3pc/)

58. Before and after: Keep-alives & compressionhttp://www.youtube.com/watch?v=KPYBF41yiFw

59. Summary

60. Let’s Fix It!!

61. Set-Up

62. Testing EnvironmentWebPageTest Client(East Coast)O’Reilly Datacenter (West Coast)Automation SERVICE (CLOUD)

63. Acceleration Methodology

64. Stepwise AccelerationStart from the beginning and fix the easy stuffStep by step acceleration of the pageApply techniques/methods/etc and see the resultTry to make it as fast as possible

65. Step 1: Low Hanging Fruit

66. Keep-AliveSolves the too-many connection problem (Less Orange!)Will help alleviate the TCP connection setup overhead97 Connections

67. CompressionAddresses 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

68. WebPageTesthttp://bit.ly/cKkjGz

69. Before and After~17.8sec~10.5sec

70. What We Helped: Keep-Alive97 Connections  19 Connections

71. What We Helped: Compression

72. How Did We Do?OriginalKA+CompImprovementFirst View Repeat View52%71%34%94%31%51%23%75%40%62%

74. Pros and ConsProsReally easy to doSingle configuration switches in servers, proxies, or load balancersGood benefit seen right awayConsCompression has processing overheadOn their own they’re just not enough

75. Step 2: Repeat View Problem

76. Poor Client Side CachingOriginalKA+Comp

77. Problem Still Exists~6.2sec

78. How Do We Get Better CachingRFC 2616, Section 13Caching headers should be used on static (non-changing) objects, so they can be cached browser-side And by intermediate caching proxiesValidators are not enough

79. WebPageTesthttp://bit.ly/aCP3iX

80. Before and After~2.0sec~6.2sec

81. How Did We Do?KA+CompWith Good CachingImprovementRepeat View70%42%67%

82. Pros and ConsProsGood caching can have a major performance impact on repeat visits to a pageSometimes it’s easy to doBrowsers generally pay attention (although interpretation may vary slightly)ConsThe spec appears scaryInvalidation and stale content

83. Step 3: CDN

84. What Does a CDN do?Global network of proxy cachesGet cacheable content close to usersReduce TTFB (smaller greens)

85. TTFB Problem

86. WebPageTesthttp://bit.ly/a9ZJcF

87. Before and After~8.3sec~10.5sec

88. TTFB SavingsPer object TTFB savings of ~50%

89. How Did We Do?KA+Comp+CDNImprovementFirst View21%17%22%0.7 sec2.3 sec2.7 secSeconds Gained

90. Before and after: Adding a CDNhttp://www.youtube.com/watch?v=BR5hO5rL8lE

91. Pros and ConsProGood mitigation of the TTFB problemEstablished industry: lots of vendors to choose fromConsSometimes costlyMay require code change (CDN’ed objects should be written to the CDN domain)

92. Step 4: Steroids- the Hard Stuff

93. We Can Get Better!Still too many roundtripsStill too many bytesNot Fast Enough!!

94. What to do Next?Reduce RoundtripsCombine imagesCombine JavaScriptCombine CSSReduce Payload even moreMinify CSS and JavaScriptAdd Image CompressionIncrease ConcurrencyAdd a couple of domains to the mix

95. WebPageTesthttp://bit.ly/bbT3v4

96. Before and After~3.8sec~8.3sec

97. How Did We Do?+CDN81107+Strangeloop1137ImprovementFirst View19%30%54%45%31%0.5 sec4.6 sec4.1 secSeconds Gained

98. Before and after: The final, fastest versionhttp://www.youtube.com/watch?v=IPn0T1UacIA

99. Pros and ConsProsMost significant benefit for the hardest part of the acceleration lifecycleAddress multiple performance points (somtimes multiple ones with the same technique)ConsIt’s not easyRegression

100. Different BrowsersSafari MobileChrome 10IE 7IE 8IE 6FireFox 4Chrome 9FireFox 3Safari 5

101. FlowConversion???3.8 Seconds11 Roundtrips

108. “These stats don’t apply to me.”

111. “These stats don’t apply to me either.”

112. How to perform a 5-minute speed/revenue benefit analysis of your site

113. Step 1Perform WebPagetests in IE7 and IE8. Calculate the load time difference as a percentage.

114. Step 2Use Google Analytics to calculate your current order value per visit for IE7 and IE8.

115. Step 3Determine your order value per visit, by connection speed (cable, DSL, T1, dialup).

116. Step 3 con’tDetermine your order value per visit, by connection speed (cable, DSL, T1, dialup).

117. Step 4Correlate the results of steps 1 to 3 in simple graphs.

118. Step 5Test your site to get a sense of how much faster it could be.strangeloopnetworks.com/test-your-website

119. Step 6Compare these gains to your graphs from step 4. What lift can you anticipate in value per visit?

120. CaveatsCorrelation does not imply causation. Browser and connection speed might imply something about the buyer (i.e. s/he is more affluent) that is unrelated to the effects of speed.

121. But this trend seems to hold true in the real world.

122. Case study

123. How to be your company’s in-house performance evangelist

124. The average exec wants to know 3 thingsWhat’s in it for the company?What’s in it for me?How do we compare to our competitors?

125. When talking to an exec…Tell the time, not how the watch works.Most important, urgent point first.Keep it short.Keep it simple.Make it visual.Be ready to give context.

126. What to say: #1“Our site is slower than our competitors. We’re losing money.”

129. What to say: #2“We’ve proven that, when our site is faster for users, they spend more.”

130. What to say: #3“This is where we should be aiming.”

131. What to say: #4“Consumers expect EVERY website to load fast.”