Proactive WPO

Transcription

Proactive WPO

Proactive WPO
@marcelduran
[email protected]
about:me
I'm not here
I'm from here on
V is for Vigilante
http://usa-moscow.blogspot.com/2010/09/more-hot-water.html
Performance Radar
http://www.flickr.com/photos/benfrantzdale/1056282822/
“if you can’t measure it, you can’t improve it”
— Lord Kelvin
worst case: no instruments
http://www.flickr.com/photos/timothyhackworth/753783003/
build
test
reactive
deploy
review
users
better case: RUM
http://www.flickr.com/photos/pj/6116201547/
/logn
com
.
b
u
h
git
orm
al/
b
oo
m
er
an
g
Real User Measurements
http://lognormal.com/features/
build
test
reactive
deploy
monitor
users
YSlow manually
YSlow automation
http://www.flickr.com/photos/snazzyguy/3381047684/
+
+
much better: RUM + YSlow (CI)
http://donq.com/recipes/rum-sour
build
test
proactive
wpo
deploy
monitor
users
+174k users
+3.3mi downloads
Top 25 2bi add-ons downloaded
jul/07
~171k users
jul/07
mar/11
jul/07
mar/11
jun/11
~86k users
jul/07
mar/11
jun/11
aug/11
jul/07
oct/11
mar/11
jun/11
aug/11
jul/07
oct/11
mar/11
dec/11
jun/11
aug/11
first 24 hours
437
37
so far
919
jul/07
oct/11
mar/11
dec/11
feb/12
jun/11
aug/11
77
th
5 anniversary
http://www.flickr.com/photos/spool32/5045502202
jul/07
oct/11
dec/11
mar/11
jun/11
feb/12
apr/12
aug/11
jul/07
oct/11
dec/11
mar/11
jun/11
aug/11
feb/12
apr/12
jun/12
YSlow Command Line
$ npm install yslow -g
$ yslow --help
Usage: yslow [options] [file ...]
Options:
-h, --help
-V, --version
-i, --info <info>
-f, --format <format>
-r, --ruleset <ruleset>
-b, --beacon <url>
-d, --dict
-v, --verbose
output usage information
output the version number
specify the information to display/log
(basic|grade|stats|comps|all) [basic]
specify the output results format
(json|xml|plain) [json]
specify the YSlow performance ruleset to be used
(ydefault|yslow1|yblog) [ydefault]
specify an URL to log the results
include dictionary of results fields
output beacon response information
Examples:
yslow file.har
yslow -i grade -f xml -b http://server.com/beacon file1.har file2.har
yslow -info all --format plain /tmp/*.har
yslow -i basic --rulseset yslow1 -d < file.har
curl example.com/file.har | yslow -i grade -b http://server.com/beacon -v
{
"log": {
"version": "1.1",
"pages": [
{
"startedDateTime": "2012-08-16T18:27:29.000+00:00",
"id": "page_1_0",
"pageTimings": {
"onLoad": 13701,
...
HAR file
$
$
$
$
$
yslow file.har
yslow file1.har file2.har file3.har
yslow my-har-files/*.har
yslow < file.har
curl http://foo.com/file.har | yslow
(json|xml|plain)
$ yslow foo.com.har
{ w: 98725, o: 89, u: 'foo.com', r: 9, i: 'ydefault', lt: 981 }
$ yslow --format xml foo.com.har
<?xml version="1.0" encoding="UTF-8"?>
<results>
<w>98725</w>
<o>89</o>
<u>http://www.foo.com/</u>
<r>9</r>
<i>ydefault</i>
<lt>981</lt>
</results>
$ yslow --format plain foo.com.har
size: 96.4K (98725 bytes)
overall score: B (89)
url: http://www.foo.com/
# of requests: 9
ruleset: ydefault
page load time: 981
-i, --info <info> (basic|grade|stats|comps|all)
$ yslow foo.com.har
$ yslow --info grade foo.com.har
{ w: 98725, o: 89, u: 'foo.com', r: 9, i: 'ydefault', lt: 981,
g: { ynumreq: { score: 92, components: [] },
ycdn:
{ score: 80, components: ['a.com', 'b.com'] },
...
yfavicon: { score: 100, components: [] }
}
}
$ yslow --info stats foo.com.har
{ w: 98725, o: 89, u: 'foo.com', r: 9,
stats: { doc:
{ r: 1, w: 18419
css:
{ r: 2, w: 20951
image:
{ r: 3, w: 29553
js:
{ r: 2, w: 10852
cssimage: { r: 1, w: 18950
}
}
i: 'ydefault', lt: 981,
},
},
},
},
}
$ yslow --info comps foo.com.har
comps: [
{type:'doc', url:'foo.com', size:1841, resp:41, gzip:613},
{type:'css', url:'bar.css', size:3062, resp:98, gzip:989},
...
{type:'js', url:'baz.js', size:2445, resp:86, gzip:834}
]
}
$ yslow --info all foo.com.har
g: {
ynumreq: { score: 92, components: [] },
... }
stats: {
doc: { r: 1, w: 18419 }, css: { r: 2, w: 20951 },
... }
comps: [
{type:'doc', url:'foo.com', size:1841, resp:41, gzip:613},
... ]
}
-d, --dict
$ yslow -i basic --dict foo.com.har
dictionary: {
w: 'size',
o: 'overall score',
u: 'url',
r: 'total number of requests',
i: 'id of the ruleset used',
lt: 'page load time',
grades: '100 >= A >= 90 > B >= 80 > C >= 70 > D >= 60
> E >= 50 > F >= 0 > N/A = -1'
}
}
-r, --ruleset <ruleset>
(ydefault | yslow1 | yblog)
Minimize HTTP Requests
Use a Content Delivery Network
Avoid empty src or href
Add an Expires or a Cache-Control Header
Gzip Components
Put StyleSheets at the Top
Put Scripts at the Bottom
Avoid CSS Expressions
Make JavaScript and CSS External
Reduce DNS Lookups
Minify JavaScript and CSS
Avoid Redirects
Remove Duplicate Scripts
Configure ETags
Make AJAX Cacheable
Use GET for AJAX Requests
Reduce the Number of DOM Elements
No 404s
Reduce Cookie Size
Use Cookie-Free Domains for Components
Avoid Filters
Do Not Scale Images in HTML
Make favicon.ico Small and Cacheable
ydefault
(aka YSlow V2)
23 rules
Use a Content Delivery Network
Add an Expires or a Cache-Control Header
Gzip Components
Make JavaScript and CSS External
Reduce DNS Lookups
Avoid Redirects
Configure ETags
yslow1
(aka YSlow V1/classic)
13 rules
Avoid empty src or href
Gzip Components
Reduce DNS Lookups
Avoid Redirects
Reduce the Number of DOM Elements
No 404s
Avoid Filters
Do Not Scale Images in HTML
Make favicon.ico Small and Cacheable
yblog
(aka small site/blog)
15 rules
-b, --beacon <url>
-v, --verbose
$ yslow --beacon http://server.com/ foo.com.har
$ yslow -b http://server.com/ --verbose foo.com.har
beacon: {
status: 200,
headers: {
"content-type": 'text/html; charset=utf-8',
"date": 'Thu, 02 Aug 2012 17:23:33 GMT',
"content-length": '3',
"connection": 'close'
},
body: 'ok\n'
}
}
Case: Y! Continuous
Deployment
before
after
No Performance Test Suite
before
after
!
O
BO
YSlow for PhantomJS
http://www.flickr.com/photos/pedroferrer/3615212504
$ phantomjs yslow.js http://yslow.org
( json | xml | plain | tap | junit )
$ phantomjs yslow.js -i basic --format tap http://yslow.org
TAP version 13
1..1
ok 1 B (88) overall score
$ phantomjs yslow.js -i grade --format tap http://yslow.org
TAP version 13
1..24
ok 1 B (88) overall score
not ok 2 C (72) ynumreq: Make fewer HTTP requests
--message: This page has 7 external Javascript scripts
...
ok 3 C (70) ycdn: Use a Content Delivery Network (CDN)
--message: There are 3 static components not on CDN.
offenders:
- "yslow.org: 1 component, 8.0K (8.0K GZip)"
- "fonts.googleapis.com: 1 component, 1.0K (1.0K GZip)"
- "widgets.twimg.com: 1 component, 0.8K"
...
ok 4 A (100) yemptysrc: Avoid empty src or href
not ok 5 F (12) yexpires: Add Expires headers
--message: There are 5 static components without a far-future expiration date.
offenders:
- "http://yslow.org/stylesheets/styles-min.css"
...
$ phantomjs yslow.js -i basic --format junit http://yslow.org
<?xml version="1.0" encoding="UTF-8" ?>
<testsuites>
<testsuite name="YSlow" tests="1" failures="1">
<testcase name="overall score" status="C (79)">
<failure/>
</testcase>
</testsuite>
</testsuites>
-t, --threshold <score>
( [0-100] | [A-F] | {json} )
default: 80
-t B
-t 75
-t '{"overall": "C", "ycdn": "F"}'
-t '{"ycdn": "F", "yexpires": 75}'
-u, --ua "<user agent>"
e.g: -u "Mozilla/4.0 (compatible; MSIE 6)"
-vp, --viewport <WxH>
e.g: -vp 640x960
-ch, --headers <JSON>
e.g: -ch '{"Cookie": "foo=bar"}'
-c, --console <level>
(0: none | 1: msg | 2: msg+line+source)
YSlow + CI = BFF
node.js server
remote HAR file
curl 'http://yslow.nodester.com/?har=http://server.com/foo.har'
local HAR file upload
curl http://yslow.nodester.com/ -F '[email protected]'
HAR {json} string
curl http://yslow.nodester.com/ -d 'har={"log":{"version":"1.1", ... }}'
+
+
curl "
http://yslow.nodester.com/
?har=http%3A%2F%2Fwww.webpagetest.org%2Fexport.php%3Ftest%3D120627_MC_5WD
&i=grade
&b=http%3A%2F%2Fwww.showslow.com%2Fbeacon%2Fyslow%2F
&v=1
"
A A A A
High Performance
...
+
+
best: RUM + (YSlow + WPT) CI
http://donq.com/recipes/rum-sour/
WebPageTest
test
build
proactive
wpo
monitor
perf
users
deploy
prod
branch A branch B
...
performance boxes
prod
branch A
branch B
vs
X+100ms
X-50ms
Xms
branches comparison
http://marcelduran.com/webpagetest-api
github.com/marcelduran/webpagetest-api
+
vs
+
+
谢谢
yslow.org
@yslow
/getyslow
slides icons: http://www.iconfinder.com/

Proactive WPO

Transcription

Similar documents

Visualisierungstechniken in der Landschaftsplanung am