velocity 2010 workshop - the 90-minute optimization life cycle (strangeloop)
TRANSCRIPT
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
1/123
Author of presentation
90 Minute Optimization Life CycleFast by Defaultbefore our eyes
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
2/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 2
Todays Hosts
Hooman BeheshtiVP ProductsStrangeloop
Joshua BixbyPresident
Strangeloop
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
3/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 3
Agenda
Why is faster betterMaking a site faster
Measurement
Diagnosis
Demos
What did we miss
Q&A-
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
4/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 4
Methodology
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
5/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 5
Why is faster better?
:// . . / / / / - - - - -http www webperformancetoday com 2010 06 15 everything you wanted to know abou/
(http:// . /bit ly 8YB3ET )
http://www.webperformancetoday.com/2010/06/15/everything-you-wanted-to-know-about-web-performance/http://www.webperformancetoday.com/2010/06/15/everything-you-wanted-to-know-about-web-performance/http://www.webperformancetoday.com/2010/06/15/everything-you-wanted-to-know-about-web-performance/http://bit.ly/8YB3EThttp://bit.ly/8YB3EThttp://bit.ly/8YB3EThttp://bit.ly/8YB3EThttp://bit.ly/8YB3EThttp://www.webperformancetoday.com/2010/06/15/everything-you-wanted-to-know-about-web-performance/http://www.webperformancetoday.com/2010/06/15/everything-you-wanted-to-know-about-web-performance/ -
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
6/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 6
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
7/123 2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 7
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
8/123 2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 8
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
9/123 2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 9
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
10/123 2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 10
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
11/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 11
mpact of page load time onmpact of page load time onverage daily searches per userverage daily searches per user
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
12/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 12
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
13/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 13
mpact of additional delay onmpact of additional delay onusiness metricsusiness metrics
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
14/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 14
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
15/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 15
hopzilla had another anglehopzilla had another angle , -Big high trafficsite
100M impressions aday
,8 000 searches a
second -20 29M unique
visitors a month 100M products
-16 month reengineering Page load from 6
.seconds to 1 2 . %Uptime from 99 65
. %to 99 97 %10 of previous
hardware needs
:// . . / / / / /http en oreilly com velocity2009 public schedule detail 7709
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
16/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 16
5-12% increase in revenue
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
17/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 17
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
18/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 18
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
19/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 19
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
20/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 20
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
21/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 21
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
22/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 22
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
23/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 23
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
24/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 24
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
25/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 25
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
26/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 26
Measurement:
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
27/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 27
Where should we start?
lsow from
age Speedfrom
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
28/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 28
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
29/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 29
Example: Gomez
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
30/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 30
HTTP Watch
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
31/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 31
Webpagetest.org
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
32/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 32
Visualizing the problem
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
33/123
www.strangeloopnetworks.com 33 2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 33
Web Performance Problem
Definitions
Backend:Time from when the user makes therequest to when the last byte of theHTML document arrives. Includes thetime for the initial request to go up,
the Web server to stitch together theHTML, and for the response to comeback.
Frontend:Shorthand for everything after theHTML document arrives. In reality,includes backend time (primarilyreading static files) and network time,as well as true frontend activities suchas parsing HTML, CSS, and JS, and
Front end Problem is getting
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
34/123
Front-end Problem is gettingworse
14.1
93.7
312.05
498
0
100
200
300
400
500
600
Total
Bytes(K)
Av
erageNumbe
rofObjects
6050
3040
20100
.9 92
.5 7.3
Average Page Size (K)Average Number of Objects
.5 2570
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
35/123
35 2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 35
Waterfall chart
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
36/123
36 2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 36
Waterfall chartHTML
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
37/123
37 2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 37
Waterfall chart
Resources
HTML
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
38/123
38 2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 38
Waterfall chartStart
RenderDocument
CompleteFullyLoaded
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
39/123
39 2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 39
Waterfall component breakdown
DNSlookup
DNS Lookup
Takes one packet in each
directionTime is limited to the
latency of the connection( / / )DSL Cable etc for the
single round trip
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
40/123
40 2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 40
Waterfall component breakdown
TCPConnectio
nTCP Connection
3 packets
- ( )Client Server SYN- Server Client
( / )SYN ACK- ( )Client Server ACK
Time is limited to the latency ofthe connection
(DSL/Cable/etc) for thesingle round trip
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
41/123
41 2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 41
Time ToFirst
ByteTime to First Byte
Time from the request packet
( )usually 1 to the firstpacket of the response Includes the latency of the
connect ion( / / )DSL Cable etc for a
single round trip Also includes whatever
server think time wasinvolved in generatingthe response
Waterfall component breakdown
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
42/123
42 2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 42
ContentDownload
Download
Time it takes for the entire
content of the responseto get to the browser Mostly limited by the
bandwidth limit of the( / / )connection DSL Cable etc
Waterfall component breakdown
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
43/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 43
Lets Accelerate
The unsuspecting victim
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
44/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 44
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
45/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 45
A Few Points of Clarification
Were using this page because itsmore fun!
Well use it to describe whereperformance pain points are, butthat doesnt mean the pageactually has these problems
What were going to do: ot sogood( )low
Awesome( )ast
Improve performance incrementally
* he real Velocity site is somewhere in the!iddle
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
46/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 46
Performance Summary
http://bit.ly/au01VY/
http://bit.ly/au01VYhttp://www.webpagetest.org/result/100614_aacdab746259dd7c89dfe994c1997d3b/http://www.webpagetest.org/result/100614_aacdab746259dd7c89dfe994c1997d3b/http://bit.ly/au01VY -
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
47/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 47
WaterfallFirst View Repeat View
bj
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
48/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 48
Per Object
C A l i b T
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
49/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 49
Content Analysis by Type
C A l i b D i
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
50/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 50
Content Analysis by Domain
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
51/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 51
Show Me Where It Hurts
Problem Analysis
P f P bl
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
52/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 52
Performance Problems
Too many connections (too muchorange)
T M C ti
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
53/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 53
Too Many Connections
97 Connections( )almost one per request
T M C ti
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
54/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 54
Too Many Connections
P f P bl
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
55/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 55
Performance Problems
Too many connections (too muchorange)
Too many bytes (too much blue)
T M B t
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
56/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 56
Too Many Bytes
By Type By Domain
P f P bl
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
57/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 57
Performance Problems
Too many connections (too muchorange)
Too many bytes (too much blue)
Concurrency
C
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
58/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 58
Concurrency
Browsers can only open and use somany connections at once
www.browserscope.org
Performance Problems
http://www.browserscope.org/http://www.browserscope.org/ -
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
59/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 59
Performance Problems
Too many connections (too muchorange)
Too many bytes (too much blue)
Concurrency Bad Caching for repeat views
Bad Repeat View
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
60/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 60
Bad Repeat View
Full Fetches
Validation
Bad Repeat View
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
61/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 61
Bad Repeat ViewConnections Bytes
Performance Problems
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
62/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 62
Performance Problems
Too many connections (too muchorange)
Too many bytes (too much blue)
Concurrency Bad Caching for repeat views
No CDN (the greens are too big)
The Green Problem #1: No
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
63/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 63
CDN TTFB
Time To First Byte
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
64/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 64
Time To First Byte
HTTP overhead
Subjected to latency every time
The more objects, the bigger the
problem Concurrency helps, but not a lot
GET /javascripts/application.js?1276735447 HTTP/1.1Accept: */*Referer: http://en.oreilly.com/velocity2010/Accept-Language: en-usUser-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.2;
Trident/4.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR3.0.4506.2152; .NET CLR 3.5.30729)Accept-Encoding: gzip, deflateHost: en.oreilly.comCookie: _session_id=6e76e8d4a4eccc63b4be7937e719ca9e
Performance Problems
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
65/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 65
Performance Problems
Too many connections (too muchorange)
Too many bytes (too much blue)
Concurrency Bad Caching for repeat views
No CDN (the greens are too big)
Too Many Roundtrips (too manygreens)
The Green Problem #2:
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
66/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 66
Roundtrips
First View Repeat View
80 Requests
27 Requests
78 Requests
14 Requests
The Green Problem #2:
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
67/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 67
Roundtrips Every fetch still pays the HTTP
overhead penalty TTFB is still aproblem
Exacerbated by concurrency issues
Getting worse as number of objectsper page grows
Generally, the hardest problem tosolve
Performance Problems
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
68/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 68
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
Examples of Other Problems
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
69/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 69
Examples of Other Problems
Blocking Javascript
3rd party calls (http://stevesouders.com/p3pc/)
What does it look like
http://stevesouders.com/p3pc/http://stevesouders.com/p3pc/ -
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
70/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 70
What does it look like
Summary
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
71/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 71
Summary
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
72/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 72
Lets Fix It!!
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
73/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 73
-Set Up
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
74/123
Possible Deployments
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
75/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 75
Possible Deployments
( )ERVICE CLOUD VIRTUALPPLIANCE
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
76/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 76
Acceleration Methodology
Stepwise Acceleration
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
77/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 77
Stepwise Acceleration
Start from the beginning and fix theeasy stuff
Step by step acceleration of the page
Apply techniques/methods/etc andsee the result
Try to make it as fast as possible
Kind of Like a Video Game
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
78/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 78
Kind of Like a Video Game
Level
Easy Hard
Kind of Like a Video Game
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
79/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 79
Kind of Like a Video Game
Level
ot Good Enough
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
80/123
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
81/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 81
:Step 1Low Hanging Fruit
Keep-Alive
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
82/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 82
Keep Alive
Solves the too-many connectionproblem (Less Orange!)
Will help alleviate the TCP connectionsetup overhead
7Connections
Compression
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
83/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 83
Compression
Addresses the too-many-bytesproblem (Less Blue!)
Well compress textual content(html/css/etc)
Not the only solution to less blue, butthe easiest
WebPageTest
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
84/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 84
WebPageTest
http://bit.ly/cKkjGz
Before and After
http://bit.ly/cKkjGzhttp://bit.ly/cKkjGzhttp://bit.ly/cKkjGz -
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
85/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 85
Before and After
~ .7 8sec ~ .0 5sec
What We Helped: Keep-Alive
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
86/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 86
What We Helped: Keep Alive
7 Connections 19Connections
What We Helped: Compression
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
87/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 87
What We Helped: Compression
How Did We Do?
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
88/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 88
How Did We Do?
Original
+A Comp
First View
Repeat View
52%
71%
34%
94%
31%
51%
23%
75%
40%
62%
Improvement
How Does It Look
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
89/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 89
How Does It Look
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
90/123
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
91/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 91
:Step 2Repeat View Problem
Poor Client Side Caching
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
92/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 92
oo C e S de Cac g
Original
+A Comp
Problem Still Exists
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
93/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 93
~ .2sec
How Do We Get Better Caching
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
94/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 94
g
RFC 2616, Section 13
Caching headers should be used onstatic (non-changing) objects, sothey can be cached browser-side
And by intermediate caching proxies
Validators are not enough
WebPageTest
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
95/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 95
g
http://bit.ly/aCP3iX
Before and After
http://bit.ly/aCP3iXhttp://bit.ly/aCP3iX -
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
96/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 96
~ .2sec
~ .0sec
How Did We Do?
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
97/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 97
+A Comp
ith GoodCaching
Repeat View 70% 42%67%Improvement
Pros and Cons
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
98/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 98
Pros
Good caching can have a majorperformance impact on repeat visitsto a page
Sometimes its easy to do Browsers generally pay attention
(although interpretation may varyslightly)
Cons
The spec appears scary
Invalidation and stale content
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
99/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 99
:Step 3CDN
What Does a CDN do?
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
100/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 100
Global network of
proxy caches
Get cacheable
content close tousers
Reduce TTFB
(smaller greens)
TTFB Problem
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
101/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 101
WebPageTest
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
102/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 102
g
http://bit.ly/a9ZJcF
Before and After
http://bit.ly/a9ZJcFhttp://bit.ly/a9ZJcF -
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
103/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 103
~ .0 5sec ~ .3sec
TTFB Savings
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
104/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 104
Per object TTFB savings of~ %50
How Did We Do?
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
105/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 105
+A Comp
+CDN
First View 21% 17%22%Improvement
.7sec .3sec .7sececonds Gained
How Does It Look
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
106/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 106
Pros and Cons
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
107/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 107
Pro
Good mitigation of the TTFB problem
Established industry: lots of vendorsto choose from
Cons Sometimes costly
May require code change (CDNed
objects should be written to the CDNdomain)
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
108/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 108
:Step 4-Steroids the Hard Stuff
We Can Get Better!
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
109/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 109
till too manyroundtrips
till too many bytes
ot Fast!!nough
What to do Next?
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
110/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 110
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
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
111/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 111
http://bit.ly/bbT3v4
http://bit.ly/bbT3v4http://bit.ly/bbT3v4 -
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
112/123
How Did We Do?
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
113/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 113
+CDN
+Strangeloop
First View 19% 30%54%Improvement
.5sec .6sec .1sec45% 31%
econdsGained
81 107
11 37
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
114/123
Pros and Cons
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
115/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 115
Pros
Most significant benefit for thehardest part of the accelerationlifecycle
Address multiple performance points(somtimes multiple ones with thesame technique)
Cons
Its not easy
Regression
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
116/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 116
Congratulations - we are doneright?
3rd Party Content
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
117/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 117
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
118/123
Browsers?
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
119/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 119
Ch
rome 4 Ch
rome 5 Fi
reFox2 Fi
reFox
3 IE6
IE7
IE8
Sa
fari
4
Saf
ari
Mobile
Mobile Web
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
120/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 120
fast by
default
Flow
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
121/123
2010 Strangeloop Networks . . .Strangeloop Faster Websites Automatically 121
.3 8 Seconds
11 Roundtrips
Conversion
? ? ?
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
122/123
-
8/9/2019 Velocity 2010 Workshop - The 90-Minute Optimization Life Cycle (Strangeloop)
123/123