web performance automation - ny web performance meetup
DESCRIPTION
Slide deck from a presentation made by Strangeloop president Joshua BixbyTRANSCRIPT
Performance AutomationMaking pages faster automatically
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 2
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. 3
Web Performance
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 5
Making sites faster
without changing code
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 7
Basic terminology and concepts
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 8
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 9
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 10
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 11
Waterfall chart
11
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 12
Waterfall chart
12
HTML
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 13
Waterfall chart
13
Resources
HTML
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 14
Waterfall chart
14
Start Render
Document Complete
FullyLoaded
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 15
Waterfall component breakdown
15
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. 16
Waterfall component breakdown
16
TCP Connection
TCP Connection
• 3 packets
- ClientServer (SYN) - ServerClient (SYN/ACK) - ClientServer (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. 1717
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
Waterfall component breakdown
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 1818
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)
Waterfall component breakdown
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 1919
First view vs Repeat View
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 2020
Concurrency
Blocking
Concurrent
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
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 21
Case Study: Automation in action
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 22
Methodology
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 23
Let’s Automate
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 24
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 25
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:
Not so good(slow)
Awesome(fast)
Improve performance incrementally
* The real Velocity site is somewhere in the middle!
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 26
Performance Summary
http://bit.ly/au01VY /
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 27
WaterfallFirst View Repeat View
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 28
Per Object
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 29
Content Analysis by Type
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 30
Content Analysis by Domain
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 31
Show Me Where It HurtsProblem Analysis
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 32
Performance Problems
• Too many connections (too much orange)
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 33
Too Many Connections
97 Connections(almost one per request)
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 34
Too Many Connections
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 35
Performance Problems
• Too many connections (too much orange)• Too many bytes (too much blue)
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 36
Too Many Bytes
By Type By Domain
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 37
Performance Problems
• Too many connections (too much orange)• Too many bytes (too much blue)• Concurrency
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 38
Concurrency
• Browsers can only open and use so many connections at once
• www.browserscope.org
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 39
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. 40
Bad Repeat View
Full Fetches
Validation
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 41
Bad Repeat ViewConnections Bytes
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 42
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. 43
The Green Problem #1: No CDNTTFB
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 44
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. 45
The Green Problem #2: Roundtrips
First View Repeat View
80 Requests
27 Requests
78 Requests
14 Requests
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 46
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. 47
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. 48
Examples of Other Problems
• Blocking Javascript
• 3rd party calls (http://stevesouders.com/p3pc/)
What it looks like
http://bit.ly/velocity-original
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 50
Summary
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 51
Let’s Fix It!!
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 52
Set-Up
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 53
Testing Environment
SERVICE (CLOUD)WebPageTest Client(East Coast)
O’Reilly Datacenter (West Coast)
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 54
Acceleration Methodology
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 55
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. 56
Step 1: Low Hanging Fruit
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 57
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. 58
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. 59
WebPageTest
http://bit.ly/cKkjGz
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 60
Before and After
~17.8sec ~10.5sec
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 61
What We Helped: Keep-Alive
97 Connections 19 Connections
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 62
What We Helped: Compression
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 63
How Did We Do?
Original
KA+Comp
First View
Repeat View
52%
71%
34%
94%
31%
51%
23%
75%
40%
62%
Improvement
What it looks like
http://bit.ly/velocity-keep-alives
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 65
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. 66
Step 2: Repeat View Problem
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 67
Poor Client Side Caching
Original
KA+Comp
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 68
Problem Still Exists
~6.2sec
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 69
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
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 70
WebPageTest
http://bit.ly/aCP3iX
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 71
Before and After
~6.2sec
~2.0sec
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 72
How Did We Do?
KA+Comp
With Good Caching
Repeat View 70% 42%67%
Improvement
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 73
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. 74
Step 3: CDN
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 75
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. 76
TTFB Problem
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 77
WebPageTest
http://bit.ly/a9ZJcF
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 78
Before and After
~10.5sec ~8.3sec
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 79
TTFB Savings
Per object TTFB savings of ~50%
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 80
How Did We Do?
KA+Comp
+CDN
First View 21% 17%22%
Improvement
0.7 sec 2.3 sec 2.7 secSeconds Gained
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 82
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. 83
Step 4: Steroids - the Hard Stuff
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 84
We Can Get Better!
Still too many roundtrips
Still too many bytes
Not Fast Enough!!
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 85
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. 86
WebPageTest
http://bit.ly/bbT3v4
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 87
Before and After
~8.3sec
~3.8sec
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 88
How Did We Do?
+CDN
+Strangeloop
First View 19% 30%54%
Improvement
0.5 sec 4.6 sec 4.1 sec
45% 31%
Seconds Gained
81 107
11 37
What it looks like
http://bit.ly/velocity-awesomest
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 90
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. 91
Other performance opportunities
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 92
3rd Party content & Javascript
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 93
Additional TCP based optimizations*
*Image credit: FastSoft [http://www.fastsoft.com/how-it-works/]
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 94
DNS based optimizations
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 95
Different Browsers
Chrome 4
Chrome 5
FireFox 2
FireFox 3 IE 6 IE 7 IE 8Safari 4
Series10
0.51
1.52
2.53
3.54
Performance differences across browsers
Safari
Mobile
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 96
Flow
3.8 Seconds11 Roundtrips
Conversion
? ? ?
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 97
Performance automation market
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 98
1993 20021999 20062000 200719961995 1998 20042003 20092008 2010
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 99
“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”
History of performance automation
Delivery
Transformation
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 100
Original Delivery Transformation
9.5 seconds63 roundtrips
5.7 seconds63 roundtrips
2.1 seconds9 roundtrips
Delivery vs Transformation
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 101
Delivery market
Delivery
Load Balancers (scale and availability)
CDN (scale, availability and performance)
Other
TCP (Fastsoft)
WAN Optimization (Riverbed)
DNS (Neustar)
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 102
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. 103
Players delivery marketDelivery
Load Balancers
Basic
Kemp
Barracuda
Coyote Point
Advanced
F5
Citrix
Radware
Zeus
Cisco
CDN
Small object delivery
Akamai
Limelight
Level 3
AT&T
Edgecast
Dynamic
Akamai
CDNetworks
Contendo
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 104
Transformation market
Transformation
Server side
Network
Cloud
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 105
Transformation market
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 106
Transformation market
Transformation
Server
Platform agnostic
Strangeloop (Virtual)
Platform specific
Aptimize
Webo
Network
Basic
F5 Web Acc
Cisco ACE4710 (fineground)
Advanced
Strangeloop
Acceloweb
Cloud
Basic
Akamai
Advanced
Strangeloop
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 107
Performance automation challenges
- Javascript- Ajax- Flash- Mobile- Third Party Content- Browsers- Bad code- no standardization- Measurment- How and What
Challenges
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 109
Opportunity
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 110
“Speed is the next competitive advantage.” - Steve Souders, Google
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 111
Q&A