Skip to content
marcelduran edited this page Apr 19, 2012 · 15 revisions

PhantomJS is a headless WebKit with JavaScript API. YSlow for PhantomJS is a command line script that allows page performance analysis from live URLs, unlike YSlow for Command Line (HAR) where a pre-generated HAR file is needed in order to analyze page performance.

YSlow for PhantomJS also introduces a new output format for testing purposes, TAP (Test Anything Protocol), other formats as well as hook for custom formatters will be available soon. See examples below.

Installation

  1. Check steps to install PhantomJS or alternatively build it from source.
  2. Assuming PhantomJS is properly installed and executable from your PATH:
    Download YSlow for PhantomJS
  3. Extract the content into any directory.

Help

$ phantomjs yslow.js --help
  Usage: phantomjs [phantomjs options] yslow.js [yslow options] [url ...]

  PhantomJS Options:

    http://y.ahoo.it/phantomjs/options

  YSlow Options:

    -h, --help               output usage information
    -V, --version            output the version number
    -i, --info <info>        specify the information to display/log (basic|grade|stats|comps|all) [all]
    -f, --format <format>    specify the output results format (json|xml|plain|tap) [json]
    -r, --ruleset <ruleset>  specify the YSlow performance ruleset to be used (ydefault|yslow1|yblog) [ydefault]
    -b, --beacon <url>       specify an URL to log the results
    -d, --dict               include dictionary of results fields
    -v, --verbose            output beacon response information
    -t, --threshold <score>  for test formats, the threshold to test scores ([0-100]|[A-F]|{JSON}) [80]
                             e.g.: -t B or -t 75 or -t '{"overall": "B", "ycdn": "F", "yexpires": 85}'
    -u, --ua "<user agent>"  specify the user agent string sent to server when the page requests resources
    -vp, --viewport <WxH>    specify page viewport size WxY, where W = width and H = height [400x300]
    -ch, --headers <JSON>    specify custom request headers, e.g.: -ch '{"Cookie": "foo=bar"}'
    -c, --console <level>    output page console messages (0: none, 1: message, 2: message + line + source) [0]

  Examples:

    phantomjs yslow.js http://yslow.org
    phantomjs yslow.js -i grade -f xml www.yahoo.com www.cnn.com www.nytimes.com
    phantomjs yslow.js -info all --format plain --ua "MSIE 9.0" http://yslow.org
    phantomjs yslow.js -i basic --rulseset yslow1 -d http://yslow.org
    phantomjs yslow.js -i grade -b http://www.showslow.com/beacon/yslow/ -v yslow.org
    phantomjs --load-plugins=yes yslow.js -vp 800x600 http://www.yahoo.com
    phantomjs yslow.js -i grade -f tap -t 85 http://yslow.org

Examples

Basic information with JSON output

$ phantomjs yslow.js --info basic http://www.yahoo.com
{"w":491065,"o":95,"u":"http%3A%2F%2Fwww.yahoo.com","r":60,"i":"ydefault","lt":966}

Basic information with plain text (human readable) output

$ phantomjs yslow.js --info basic --format plain http://www.cnn.com
size: 561.4K (561458 bytes)
overall score: D (64)
url: http://www.cnn.com/
# of requests: 137
ruleset: ydefault
page load time: 2576

Basic test (overall score only) with TAP output

$ phantomjs yslow.js --info basic --format tap --threshold B http://yslow.org
1..1
ok 1 - B(86) overall score

Full test with TAP output

$ phantomjs yslow.js --info grade --format tap --threshold '{"overall": "B", "ycdn": 65}' http://yslow.org
1..24
ok 1 - B(88) overall score
not ok 2 - C(72) ynumreq: Make fewer HTTP requests
ok 3 - C(70) ycdn: Use a Content Delivery Network (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
#	Offenders:
#	http://yslow.org/stylesheets/styles-min.css
#	https://fonts.googleapis.com/css?family=Lato:300italic,700italic,300,700
#	http://widgets.twimg.com/j/2/widget.css
#	http://www.google-analytics.com/ga.js
#	http://widgets.twimg.com/j/2/widget.js
#	http://d.yimg.com/jc/ydn/yslow-ss.png
#	http://widgets.twimg.com/i/widget-logo.png
#	http://yslow.org/favicon.ico
ok 6 - A(100) ycompress: Compress components with gzip
ok 7 - A(100) ycsstop: Put CSS at top
ok 8 - A(100) yjsbottom: Put JavaScript at bottom
ok 9 - A(100) yexpressions: Avoid CSS expressions
ok 10 - N/A(-1) yexternal: Make JavaScript and CSS external # SKIP score N/A
#	Offenders:
#	There are a total of 2 inline css
#	There are a total of 2 inline scripts
not ok 11 - C(70) ydns: Reduce DNS lookups
#	Offenders:
#	yslow.org: 3 components, 17.5K (17.5K GZip)
#	fonts.googleapis.com: 1 component, 1.0K (1.0K GZip)
#	themes.googleusercontent.com: 4 components, 0.0K
#	widgets.twimg.com: 3 components, 49.2K (48.4K GZip)
#	www.google-analytics.com: 1 component, 36.4K (36.4K GZip)
#	d.yimg.com: 2 components, 49.5K
#	a0.twimg.com: 1 component, 3.6K
#	www.facebook.com: 1 component, 10.8K (10.8K GZip)
#	static.ak.fbcdn.net: 10 components, 948.4K (354.1K GZip)
#	profile.ak.fbcdn.net: 1 component, 2.4K
ok 12 - A(90) yminify: Minify JavaScript and CSS
#	Offenders:
#	inline <style> tag #2
ok 13 - A(100) yredirects: Avoid URL redirects
ok 14 - A(100) ydupes: Remove duplicate JavaScript and CSS
ok 15 - A(100) yetags: Configure entity tags (ETags)
ok 16 - A(100) yxhr: Make AJAX cacheable
ok 17 - A(100) yxhrmethod: Use GET for AJAX requests
ok 18 - A(100) ymindom: Reduce the number of DOM elements
ok 19 - A(100) yno404: Avoid HTTP 404 (Not Found) error
ok 20 - A(100) ymincookie: Reduce cookie size
ok 21 - A(100) ycookiefree: Use cookie-free domains
ok 22 - A(100) ynofilter: Avoid AlphaImageLoader filter
ok 23 - A(100) yimgnoscale: Do not scale images in HTML
ok 24 - A(95) yfavicon: Make favicon small and cacheable

Sample screenshot of TAP results in Jenkins

TAP results in Jenkins screenshot

Clone this wiki locally