London Web Performance Meetup: Performance for mortal companies
-
Upload
strangeloop -
Category
Technology
-
view
5 -
download
1
description
Transcript of London Web Performance Meetup: Performance for mortal companies
Web Performance Optimization (WPO)Web Content Optimization (WCO)Web Code Optimization (WCO)Web Transformation (WT)Front end performance Optimization (FEO)…Stories from an emerging market…
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 2
Agenda
• Introduction
• What is performance automation
• Basic terminology and concepts
• Automation at work
• Performance stats and Case Studies
• Market overview
• Q&A
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 3
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 4
Web Performance
Making sites faster
without changing code
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 8
Basic terminology and concepts
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 9 9www.strangeloopnetworks.com
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 10 10www.strangeloopnetworks.com
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 11
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 12
Waterfall chart
12
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 13
Waterfall chart
13
HTML
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 14
Waterfall chart
14
Resources
HTML
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 15
Waterfall chart
15
Start Render
Document Complete
FullyLoaded
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 16
Waterfall component breakdown
16
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. 17
Waterfall component breakdown
17
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. 1818
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. 1919
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. 2020
First view vs Repeat View
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 2121
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. 22
Case Study: Automation in action
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 23
Methodology
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 24
Let’s Automate
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 25
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 26
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. 27
Performance Summary
http://bit.ly/au01VY /
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 28
Waterfall
First View Repeat View
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 29
Per Object
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 30
Content Analysis by Type
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 31
Content Analysis by Domain
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 32
Show Me Where It HurtsProblem Analysis
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 33
Performance Problems
• Too many connections (too much orange)
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 34
Too Many Connections
97 Connections(almost one per request)
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 35
Too Many Connections
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 36
Performance Problems
• Too many connections (too much orange)• Too many bytes (too much blue)
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 37
Too Many Bytes
By Type By Domain
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 38
Performance Problems
• Too many connections (too much orange)• Too many bytes (too much blue)• Concurrency
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 39
Concurrency
• Browsers can only open and use so many connections at once
• www.browserscope.org
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 40
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. 41
Bad Repeat View
Full Fetches
Validation
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 42
Bad Repeat ViewConnections Bytes
© 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)
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 44
The Green Problem #1: No CDNTTFB
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 45
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. 46
The Green Problem #2: Roundtrips
First View Repeat View
80 Requests
27 Requests
78 Requests
14 Requests
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 47
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. 48
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. 49
Examples of Other Problems
• Blocking Javascript
• 3rd party calls (http://stevesouders.com/p3pc/)
© 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
Automation 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
Before and after: Keep-alives & compression
http://www.youtube.com/watch?v=KPYBF41yiFw
© 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. 74
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. 75
Step 3:
CDN
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 76
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. 77
TTFB Problem
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 78
WebPageTest
http://bit.ly/a9ZJcF
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 79
Before and After
~10.5sec ~8.3sec
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 80
TTFB Savings
Per object TTFB savings of ~50%
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 81
How Did We Do?
KA+Comp
+CDN
First View 21% 17%22%
Improvement
0.7 sec 2.3 sec 2.7 secSeconds Gained
Before and after: Adding a CDN
http://www.youtube.com/watch?v=BR5hO5rL8lE
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 83
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. 84
Step 4:
Steroids- the Hard Stuff
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 85
We Can Get Better!
Still too many roundtrips
Still too many bytes
Not Fast Enough!!
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 86
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. 87
WebPageTest
http://bit.ly/bbT3v4
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 88
Before and After
~8.3sec
~3.8sec
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 89
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
Before and after: The final, fastest version
http://www.youtube.com/watch?v=IPn0T1UacIA
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 91
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. 92
Different Browsers
Chrome 9Chrome
10 FireFox 3
FireFox 4IE 6 IE 7 IE 8
Safari 5Series1
0
0.5
1
1.5
2
2.5
3
3.5
4Performance differences across browsers
Safari
Mobile
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 93
Flow
3.8 Seconds11 Roundtrips
Conversion
? ? ?
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 94
© 2011 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 95
© 2011 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 96
© 2011 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 97
© 2011 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 98
© 2011 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 99
© 2011 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 100
“These stats don’t apply to me.”
© 2011 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 101
Conversion Cart size Sales
9%
11%
13%
© 2011 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 102
Revenue Per visit Overall revenue
8%
6%
© 2011 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 103
“These stats don’t apply to me either.”
© 2011 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 104
How to perform a 5-minute speed/revenue benefit analysis of your site
© 2011 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 105
Step 1
Perform WebPagetests in IE7 and IE8.
Calculate the load time difference as a percentage.
© 2011 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 106
Step 2
Use Google Analytics to calculate your current order value per visit for IE7 and IE8.
© 2011 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 107
Step 3
Determine your order value per visit, by connection speed (cable, DSL, T1, dialup).
© 2011 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 108
Step 3 con’t
Determine your order value per visit, by connection speed (cable, DSL, T1, dialup).
© 2011 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 109
Step 4
Correlate the results of steps 1 to 3 in simple graphs.
© 2011 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 110
Step 5
Test your site to get a sense of how much faster it could be.
strangeloopnetworks.com/test-your-website
© 2011 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 111
Step 6
Compare these gains to your graphs from step 4.
What lift can you anticipate in value per visit?
© 2011 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 112
Caveats
• Correlation 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.
© 2011 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 113
But this trend seems to hold true in the real world.
© 2011 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 114
Case study
© 2011 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 115
How to be your company’s in-house performance evangelist
© 2011 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 116
The average exec wants to know 3 things
• What’s in it for the company?
• What’s in it for me?
• How do we compare to our competitors?
© 2011 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 117
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.
© 2011 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 118
What to say: #1
“Our site is slower than our competitors. We’re losing money.”
© 2011 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 119
© 2011 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 120
© 2011 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 121
What to say: #2
“We’ve proven that, when our site is faster for users, they spend more.”
© 2011 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 122
What to say: #3
“This is where we should be aiming.”
© 2011 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 123
What to say: #4
“Consumers expect EVERY website to load fast.”
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 124
Performance automation market
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 125
1993 20021999 20062000 200719961995 1998 20042003 20092008 2010
© 2011 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 126
“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
History of performance automation
© 2011 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 127
Original Delivery Transformation
9.5 seconds63 roundtrips
5.7 seconds63 roundtrips
2.1 seconds9 roundtrips
Delivery vs Transformation
© 2011 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 128
Delivery market
Delivery
Load Balancers (scale and availability)
CDN (scale, availability and performance)
Other
TCP (Fastsoft)
WAN Optimization (Riverbed)
DNS (Neustar)
© 2011 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 129
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
© 2011 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 130
Players delivery marketDelivery
Load Balancers
Basic
Kemp
Barracuda
Coyote Point
Advanced
F5
Citrix
Radware
Zeus
Cisco
CDN
Small object delivery
Akamai
Level 3
Limelight
CD Networks
Edgecast
Dynamic
Akamai
Level 3
CDNetworks
Contendo
© 2011 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 131
Transformation market
Transformation
Server side
Network
Cloud
Beta
Production
© 2011 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 132
Transformation market
© 2011 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 133
Transformation market
Transformation
Server
Platform agnostic
Strangeloop (Virtual)
Platform specific
Aptimize
Webo
Mod_Page speed
Network
Basic
F5 Web Acc
Cisco ACE4710
(fineground)
Advanced
Strangeloop
Aptimize (beta)
Cloud
Basic
Akamai
Limelight
Level 3
Advanced (beta)
Limelight (Acceloweb)
Torbit
Yotta
Blaze
Cotendo ( page_speed
)
Advanced (production)
Strangeloop
Level 3 (Strangeloop)
© 2011 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 134