Performance Automation

Making pages faster automatically

Agenda
‡ Introduction ‡ What is performance automation ‡ Basic terminology and concepts ‡ Case Study ‡ History of performance automation ‡ Market overview and challenges ‡ Q&A

© 2010 Strangeloop Networks

Strangeloop. Faster Websites. Automatically.

2

© 2010 Strangeloop Networks

Strangeloop. Faster Websites. Automatically.

3

Web Performance

Making sites faster without changing code

© 2010 Strangeloop Networks

Strangeloop. Faster Websites. Automatically.

5

Basic terminology and concepts

© 2010 Strangeloop Networks

Strangeloop. Faster Websites. Automatically.

7

© 2010 Strangeloop Networks

Strangeloop. Faster Websites. Automatically.

8

© 2010 Strangeloop Networks

Strangeloop. Faster Websites. Automatically.

9

© 2010 Strangeloop Networks

Strangeloop. Faster Websites. Automatically.

10

Waterfall chart

© 2010 Strangeloop Networks

Strangeloop. Faster Websites. Automatically.

11

11

Waterfall chart
HTML

© 2010 Strangeloop Networks

Strangeloop. Faster Websites. Automatically.

12

12

Waterfall chart
HTML

Resources

© 2010 Strangeloop Networks

Strangeloop. Faster Websites. Automatically.

13

13

Waterfall chart
Start Render Document Fully Complete Loaded

© 2010 Strangeloop Networks

Strangeloop. Faster Websites. Automatically.

14

14

Waterfall component breakdown

DNS lookup
DNS Lookup
‡ Takes one packet in each direction Time is limited to the latency of the connection (DSL/Cable/etc) for the single round trip

‡

© 2010 Strangeloop Networks

Strangeloop. Faster Websites. Automatically.

15

15

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

© 2010 Strangeloop Networks

Strangeloop. Faster Websites. Automatically.

16

16

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 Includes the latency of the connect ion (DSL/Cable/etc) for a single round trip Also includes whatever server think time was involved in generating the response

‡

‡

© 2010 Strangeloop Networks

Strangeloop. Faster Websites. Automatically.

17

17

Waterfall component breakdown

Content Download
Download
‡ Time it takes for the entire content of the response to get to the browser Mostly limited by the bandwidth limit of the connection (DSL/Cable/etc)

‡

© 2010 Strangeloop Networks

Strangeloop. Faster Websites. Automatically.

18

18

First view vs Repeat View

© 2010 Strangeloop Networks

Strangeloop. Faster Websites. Automatically.

19

19

Concurrency

Blocking

Concurrency
‡Blocking script don't let the browser use available resources (network, connections, etc) to fetch more content from the server ‡The overall page load time and render time are both affected negatively

Concurrent

© 2010 Strangeloop Networks

Strangeloop. Faster Websites. Automatically.

20

20

Case Study: Automation in action

© 2010 Strangeloop Networks

Strangeloop. Faster Websites. Automatically.

21

Methodology

© 2010 Strangeloop Networks

Strangeloop. Faster Websites. Automatically.

22

Let¶s Automate

© 2010 Strangeloop Networks

Strangeloop. Faster Websites. Automatically.

23

© 2010 Strangeloop Networks

Strangeloop. Faster Websites. Automatically.

24

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)
* The real Velocity site is somewhere in the middle!
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically.

Awesome (fast)

25

Performance Summary

http://bit.ly/au01VY /

© 2010 Strangeloop Networks

Strangeloop. Faster Websites. Automatically.

26

Waterfall
First View Repeat View

© 2010 Strangeloop Networks

Strangeloop. Faster Websites. Automatically.

27

Per Object

© 2010 Strangeloop Networks

Strangeloop. Faster Websites. Automatically.

28

Content Analysis by Type

© 2010 Strangeloop Networks

Strangeloop. Faster Websites. Automatically.

29

Content Analysis by Domain

© 2010 Strangeloop Networks

Strangeloop. Faster Websites. Automatically.

30

Show Me Where It Hurts
Problem Analysis

© 2010 Strangeloop Networks

Strangeloop. Faster Websites. Automatically.

31

Performance Problems
‡ Too many connections (too much orange)

© 2010 Strangeloop Networks

Strangeloop. Faster Websites. Automatically.

32

Too Many Connections

97 Connections (almost one per request)

© 2010 Strangeloop Networks

Strangeloop. Faster Websites. Automatically.

33

Too Many Connections

© 2010 Strangeloop Networks

Strangeloop. Faster Websites. Automatically.

34

Performance Problems
‡ Too many connections (too much orange) ‡ Too many bytes (too much blue)

© 2010 Strangeloop Networks

Strangeloop. Faster Websites. Automatically.

35

Too Many Bytes

By Type

By Domain

© 2010 Strangeloop Networks

Strangeloop. Faster Websites. Automatically.

36

Performance Problems
‡ Too many connections (too much orange) ‡ Too many bytes (too much blue) ‡ Concurrency

© 2010 Strangeloop Networks

Strangeloop. Faster Websites. Automatically.

37

Concurrency
‡ Browsers can only open and use so many connections at once

‡ www.browserscope.org
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically.

38

Performance Problems
‡ ‡ ‡ ‡ Too many connections (too much orange) Too many bytes (too much blue) Concurrency Bad Caching for repeat views

© 2010 Strangeloop Networks

Strangeloop. Faster Websites. Automatically.

39

Bad Repeat View
Full Fetches

Validation

© 2010 Strangeloop Networks

Strangeloop. Faster Websites. Automatically.

40

Bad Repeat View
Connections Bytes

© 2010 Strangeloop Networks

Strangeloop. Faster Websites. Automatically.

41

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)

© 2010 Strangeloop Networks

Strangeloop. Faster Websites. Automatically.

42

The Green Problem #1: No CDN
TTFB

© 2010 Strangeloop Networks

Strangeloop. Faster Websites. Automatically.

43

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)

© 2010 Strangeloop Networks

Strangeloop. Faster Websites. Automatically.

44

The Green Problem #2: Roundtrips

First View

Repeat View

80 Requests

78 Requests

27 Requests

14 Requests
45

© 2010 Strangeloop Networks

Strangeloop. Faster Websites. Automatically.

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

© 2010 Strangeloop Networks

Strangeloop. Faster Websites. Automatically.

46

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

© 2010 Strangeloop Networks

Strangeloop. Faster Websites. Automatically.

47

Examples of Other Problems
‡ Blocking Javascript

‡ 3rd party calls (http://stevesouders.com/p3pc/)

© 2010 Strangeloop Networks

Strangeloop. Faster Websites. Automatically.

48

What it looks like
http://bit.ly/velocity-original

Summary

© 2010 Strangeloop Networks

Strangeloop. Faster Websites. Automatically.

50

Let¶s Fix It!!

© 2010 Strangeloop Networks

Strangeloop. Faster Websites. Automatically.

51

Set-Up

© 2010 Strangeloop Networks

Strangeloop. Faster Websites. Automatically.

52

Testing Environment

WebPageTest Client (East Coast)

SERVICE (CLOUD)

O Reilly Datacenter (West Coast)

© 2010 Strangeloop Networks

Strangeloop. Faster Websites. Automatically.

53

Acceleration Methodology

© 2010 Strangeloop Networks

Strangeloop. Faster Websites. Automatically.

54

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

© 2010 Strangeloop Networks

Strangeloop. Faster Websites. Automatically.

55

Step 1: Low Hanging Fruit

© 2010 Strangeloop Networks

Strangeloop. Faster Websites. Automatically.

56

Keep-Alive
‡ Solves the too-many connection problem (Less Orange!) ‡ Will help alleviate the TCP connection setup overhead

97 Connections

© 2010 Strangeloop Networks

Strangeloop. Faster Websites. Automatically.

57

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

© 2010 Strangeloop Networks

Strangeloop. Faster Websites. Automatically.

58

WebPageTest

http://bit.ly/cKkjGz
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically.

59

Before and After

~17.8sec

~10.5sec

© 2010 Strangeloop Networks

Strangeloop. Faster Websites. Automatically.

60

What We Helped: Keep-Alive
97 Connections 19 Connections

© 2010 Strangeloop Networks

Strangeloop. Faster Websites. Automatically.

61

What We Helped: Compression

© 2010 Strangeloop Networks

Strangeloop. Faster Websites. Automatically.

62

How Did We Do?
Original

KA+Comp

Improvement
First View Repeat View 52% 71% 40% 62% 34% 94% 31% 51% 23% 75%

© 2010 Strangeloop Networks

Strangeloop. Faster Websites. Automatically.

63

What it looks like
http://bit.ly/velocity-keep-alives

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

© 2010 Strangeloop Networks

Strangeloop. Faster Websites. Automatically.

65

Step 2: Repeat View Problem

© 2010 Strangeloop Networks

Strangeloop. Faster Websites. Automatically.

66

Poor Client Side Caching

Original

KA+Comp

© 2010 Strangeloop Networks

Strangeloop. Faster Websites. Automatically.

67

Problem Still Exists

~6.2sec

© 2010 Strangeloop Networks

Strangeloop. Faster Websites. Automatically.

68

How Do We Get Better Caching
‡ RFC 2616, Section 13 ‡ Caching headers should be used on static (nonchanging) objects, so they can be cached browserside ± And by intermediate caching proxies ‡ Validators are not enough

© 2010 Strangeloop Networks

Strangeloop. Faster Websites. Automatically.

69

WebPageTest

http://bit.ly/aCP3iX
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically.

70

Before and After

~2.0sec

~6.2sec

© 2010 Strangeloop Networks

Strangeloop. Faster Websites. Automatically.

71

How Did We Do?
KA+Comp

With Good Caching

Improvement
Repeat View 70% 67% 42%

© 2010 Strangeloop Networks

Strangeloop. Faster Websites. Automatically.

72

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

© 2010 Strangeloop Networks

Strangeloop. Faster Websites. Automatically.

73

Step 3: CDN

© 2010 Strangeloop Networks

Strangeloop. Faster Websites. Automatically.

74

What Does a CDN do?
‡ Global network of proxy caches ‡ Get cacheable content close to users ‡ Reduce TTFB (smaller greens)

© 2010 Strangeloop Networks

Strangeloop. Faster Websites. Automatically.

75

TTFB Problem

© 2010 Strangeloop Networks

Strangeloop. Faster Websites. Automatically.

76

WebPageTest

http://bit.ly/a9ZJcF
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically.

77

Before and After

~10.5sec

~8.3sec

© 2010 Strangeloop Networks

Strangeloop. Faster Websites. Automatically.

78

TTFB Savings

Per object TTFB savings of ~50%

© 2010 Strangeloop Networks

Strangeloop. Faster Websites. Automatically.

79

How Did We Do?
KA+Comp

+CDN

Improvement
First View Seconds Gained 21% 0.7 sec 22% 2.3 sec 17% 2.7 sec

© 2010 Strangeloop Networks

Strangeloop. Faster Websites. Automatically.

80

What it looks like
http://bit.ly/velocity-CDN

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)

© 2010 Strangeloop Networks

Strangeloop. Faster Websites. Automatically.

82

Step 4: Steroids - the Hard Stuff

© 2010 Strangeloop Networks

Strangeloop. Faster Websites. Automatically.

83

We Can Get Better!
Still too many roundtrips

Still too many bytes

Not Fast Enough!!
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically.

84

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
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically.

85

WebPageTest

http://bit.ly/bbT3v4
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically.

86

Before and After

~3.8sec

~8.3sec

© 2010 Strangeloop Networks

Strangeloop. Faster Websites. Automatically.

87

How Did We Do?
+CDN

81

107

+Strangeloop

11

37

Improvement
First View Seconds Gained 19% 0.5 sec 54% 4.6 sec 45% 30% 4.1 sec 31%

© 2010 Strangeloop Networks

Strangeloop. Faster Websites. Automatically.

88

What it looks like
http://bit.ly/velocity-awesomest

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

© 2010 Strangeloop Networks

Strangeloop. Faster Websites. Automatically.

90

Other performance opportunities

© 2010 Strangeloop Networks

Strangeloop. Faster Websites. Automatically.

91

3rd Party content & Javascript

© 2010 Strangeloop Networks

Strangeloop. Faster Websites. Automatically.

92

Additional TCP based optimizations*

*Image credit: FastSoft [http://www.fastsoft.com/how-it-works/]
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically.

93

DNS based optimizations

© 2010 Strangeloop Networks

Strangeloop. Faster Websites. Automatically.

94

Different Browsers
4 3 2 1 0

Performance differences across browsers

© 2010 Strangeloop Networks

Strangeloop. Faster Websites. Automatically.

95

Flow

Conversion

? 3.8 Seconds 11 Roundtrips

?

?

© 2010 Strangeloop Networks

Strangeloop. Faster Websites. Automatically.

96

Performance automation market

© 2010 Strangeloop Networks

Strangeloop. Faster Websites. Automatically.

97

1993

1995

1996

1998

1999

2000

2002

2003

2004

2006

2007

2008

2009

2010

© 2010 Strangeloop Networks

Strangeloop. Faster Websites. Automatically.

98

History of performance automation
I will deliver what the server gives me as efficiently as possible to the browser. Delivery I will transform what the server gives me to optimize it for the user s browser Transformation

© 2010 Strangeloop Networks

Strangeloop. Faster Websites. Automatically.

99

Delivery vs Transformation
Original Delivery Transformation

9.5 seconds 63 roundtrips
© 2010 Strangeloop Networks

5.7 seconds 63 roundtrips
Strangeloop. Faster Websites. Automatically.

2.1 seconds 9 roundtrips
100

Delivery market
Load Balancers (scale and availability)

Delivery

CDN (scale, availability and performance)

TCP (Fastsoft)

Other

WAN Optimization (Riverbed)

DNS (Neustar)

© 2010 Strangeloop Networks

Strangeloop. Faster Websites. Automatically.

101

Delivery market
Delivery

Load Balancers ‡ Compression Smaller blues on HTML and resources ‡ TCP Optimization & Multiplexing Smaller greens on HTML and some resources ‡ Caching Smaller greens on HTML and resources ‡ SSL Offload Higher scale and potentially smaller greens on HTML and smaller blues

CDN- Static and Dynamic ‡ Static object delivery smaller greens on resources ‡ ESI smaller greens on HTML ‡ DNS smaller teal ‡ Compression Smaller blues on HTML ‡ TCP Optimizations smaller greens and blues on HTML and some resources ‡ Routing Optimization smaller blues on HTML and some resources

© 2010 Strangeloop Networks

Strangeloop. Faster Websites. Automatically.

102

Players delivery market
Delivery Load Balancers CDN

Basic

Advanced

Small object delivery

Dynamic

Kemp

F5

Akamai

Akamai

Barracuda

Citrix

Limelight

CDNetworks

Coyote Point

Radware

Level 3

Contendo

Zeus

AT&T

© 2010 Strangeloop Networks

Cisco Edgecast Strangeloop. Faster Websites. Automatically.

103

Transformation market

Server side

Transformation

Network

Cloud

© 2010 Strangeloop Networks

Strangeloop. Faster Websites. Automatically.

104

Transformation market

© 2010 Strangeloop Networks

Strangeloop. Faster Websites. Automatically.

105

Transformation market

Transformation

Server

Network

Cloud

Platform agnostic

Platform specific

Basic

Advanced

Basic

Advanced

Strangeloop (Virtual)

Aptimize

F5 Web Acc

Strangeloop

Akamai

Strangeloop

Webo

Cisco ACE4710 (fineground)

Acceloweb

© 2010 Strangeloop Networks

Strangeloop. Faster Websites. Automatically.

106

Performance automation challenges

© 2010 Strangeloop Networks

Strangeloop. Faster Websites. Automatically.

107

Challenges
Javascript Ajax Flash Mobile Third Party Content Browsers Bad code- no standardization Measurment- How and What

Opportunity

© 2010 Strangeloop Networks

Strangeloop. Faster Websites. Automatically.

109

Speed is the next competitive advantage.
- Steve Souders, Google

© 2010 Strangeloop Networks

Strangeloop. Faster Websites. Automatically.

110

Q&A

© 2010 Strangeloop Networks

Strangeloop. Faster Websites. Automatically.

111

Sign up to vote on this title
UsefulNot useful