Web Performance Automation - NY Web Performance Meetup

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

Web Performance
Making sites faster
without changing code

Basic terminology and concepts

Waterfall chart
11
Waterfall chart
HTML
12
Waterfall chart
HTML
Resources
13
Waterfall chart
Start Document Fully
Render Complete Loaded
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
15
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
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
17
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)
18
First view vs Repeat View
19
Concurrency
Blocking Concurrency
•Blocking script don't let the

browser use available resources
(network, connections, etc) to
Concurrent fetch more content from the
server
•The overall page load time and

render time are both affected
negatively
20
Case Study: Automation in action

Methodology

Let’s Automate

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 Awesome

(slow) (fast)
* The real Velocity site is somewhere in the middle!

Performance Summary
http://bit.ly/au01VY /

Waterfall
First View Repeat View

Per Object

Content Analysis by Type

Content Analysis by Domain

Show Me Where It Hurts
Problem Analysis

Performance Problems
• Too many connections (too much orange)

Too Many Connections
97 Connections
(almost one per request)

Too Many Connections

• Too many bytes (too much blue)

Too Many Bytes
By Type By Domain

• Concurrency

Concurrency
• Browsers can only open and use so many
connections at once
• www.browserscope.org

• Concurrency
• Bad Caching for repeat views

Bad Repeat View
Full Fetches
Validation

Bad Repeat View
Connections Bytes

• Concurrency
• No CDN (the greens are too big)

The Green Problem #1: No CDN
TTFB

• Concurrency
• Too Many Roundtrips (too many greens)

The Green Problem #2: Roundtrips
First View Repeat View
80 Requests 78 Requests
27 Requests
14 Requests

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

• Too many connections
• Concurrency
• Too Many Roundtrips (too many greens)
• Others

Examples of Other Problems
• Blocking Javascript
• 3rd party calls (http://stevesouders.com/p3pc/)

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

Let’s Fix It!!

Set-Up

Testing Environment
WebPageTest Client SERVICE (CLOUD) O’Reilly Datacenter

(East Coast) (West Coast)

Acceleration Methodology

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

Step 1: Low Hanging Fruit

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

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

WebPageTest
http://bit.ly/cKkjGz
Before and After
~17.8sec ~10.5sec

What We Helped: Keep-Alive
97 Connections  19 Connections

What We Helped: Compression

How Did We Do?
Original
KA+Comp
Improvement
First View 52% 40% 34% 31% 23%
Repeat View 71% 62% 94% 51% 75%

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

Step 2: Repeat View Problem

Poor Client Side Caching
Original
KA+Comp

Problem Still Exists
~6.2sec

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

WebPageTest
http://bit.ly/aCP3iX

Before and After
~2.0sec
~6.2sec

How Did We Do?
KA+Comp
With Good Caching
Improvement
Repeat View 70% 67% 42%

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

Step 3: CDN

What Does a CDN do?
• Global network of
proxy caches
• Get cacheable content

close to users
• Reduce TTFB (smaller

greens)

TTFB Problem

WebPageTest
http://bit.ly/a9ZJcF

Before and After
~10.5sec ~8.3sec

TTFB Savings
Per object TTFB savings of ~50%

How Did We Do?
KA+Comp
+CDN
Improvement
First View 21% 22% 17%
Seconds Gained 0.7 sec 2.3 sec 2.7 sec

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)

Step 4: Steroids - the Hard Stuff

We Can Get Better!
Still too many roundtrips
Still too many bytes
Not Fast Enough!!

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

WebPageTest
http://bit.ly/bbT3v4

Before and After
~3.8sec
~8.3sec

How Did We Do?
+CDN
81 107
+Strangeloop
11 37
Improvement
First View 19% 54% 45% 30% 31%
Seconds Gained 0.5 sec 4.6 sec 4.1 sec

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

Other performance opportunities

3rd Party content & Javascript

Additional TCP based optimizations*
*Image credit: FastSoft [http://www.fastsoft.com/how-it-works/]

DNS based optimizations

Different Browsers
Performance differences across browsers

4
3.5
3
2.5
2
1.5
1
0.5
0
e4 e5 fari
x2 x3 IE 6 IE 7 IE 8 4 Sa
ro m ro m Fo Fo fari bile
Ch Ch Fire Fire Sa M o

Flow
Conversion
? ? ?
3.8 Seconds
11 Roundtrips

Performance automation market

1993 1995 1996 1998 1999 2000 2002 2003 2004 2006 2007 2008 2009 2010

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

Delivery vs Transformation
Original Delivery Transformation
9.5 seconds 5.7 seconds 2.1 seconds

63 roundtrips 63 roundtrips 9 roundtrips

Delivery market
Load Balancers (scale and

availability)
CDN (scale, availability and

Delivery TCP (Fastsoft)
performance)
Other WAN Optimization (Riverbed)
DNS (Neustar)

Delivery market
Delivery
CDN- Static and Dynamic

alancers Static object delivery  smaller greens on resources
Compression  Smaller blues on HTML and resources ESI  smaller greens on HTML
CP Optimization & Multiplexing  Smaller greens on DNS  smaller teal
HTML and some resources Compression  Smaller blues on HTML
Caching  Smaller greens on HTML and resources TCP Optimizations  smaller greens and blues on HTML
SSL Offload  Higher scale and potentially smaller greens and some resources
n HTML and smaller blues Routing Optimization  smaller blues on HTML and some
resources

Players delivery market
Delivery
Load Balancers CDN
Small object
Basic Advanced Dynamic
delivery
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


Transformation
Server Network Cloud
Platform agnostic Platform specific Basic Advanced Basic Advanced
Strangeloop
Aptimize F5 Web Acc Strangeloop Akamai Strangeloop
(Virtual)
Cisco ACE4710
Webo Acceloweb
(fineground)

Performance automation
challenges

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

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

Q&A

Web Performance Automation - NY Web Performance Meetup

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Performance Automation - NY Web Performance Meetup

Uploaded by

Copyright:

Available Formats

Performance Automation

Making pages faster automatically

© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 2

© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 5

© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 7

• Takes one packet in each

• Time is limited to the latency

• Time is limited to the latency

• Time from the request

• Includes the latency of the

• Also includes whatever

• Time it takes for the entire

• Mostly limited by the

•Blocking script don't let the

•The overall page load time and

© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 21

© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 22

© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 23

Improve performance incrementally

Not so good Awesome

* The real Velocity site is somewhere in the middle!

© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 26

© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 27

© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 28

© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 29

© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 30

© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 31

© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 32

© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 33

© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 34

© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 35

© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 36

© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 37

© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 38

© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 39

© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 40

© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 41

© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 42

© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 43

© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 44

First View Repeat View

© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 45

© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 46

© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 47

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

© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 48

© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 50

© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 51

© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 52

WebPageTest Client SERVICE (CLOUD) O’Reilly Datacenter

© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 53

© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 54

• Step by step acceleration of the page

© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 55

© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 56

© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 57

© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 58

© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 60

© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 61

© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 62

Repeat View 71% 62% 94% 51% 75%

© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 63

© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 65

© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 66