phantomas by Maciej Brencz is an NPM installed utility for collecting various statistics of web pages ranging from load times, number of request, caching strategies to inline styles and duplicate CSS declarations.
npm install phantomas
Usage
To produce a basic report you just have to point phantomas in the right direction:
$ phantomas http://npmawesome.com
This generates exhaustive human readable details about the destination and you can see the full version. Below is a short snippet:
phantomas v1.7.0 metrics for <http://npmawesome.com/>: * requests: 55 * gzipRequests: 19 * postRequests: 0 * httpsRequests: 17 * notFound: 0 * bodySize: 702000 * contentLength: 3157610 * httpTrafficCompleted: 5468 * timeToFirstByte: 263 * timeToLastByte: 272 * ajaxRequests: 0 * htmlCount: 1 * htmlSize: 44581 * cssCount: 2 * cssSize: 43200 * jsCount: 17 * jsSize: 198951 ... Offenders for gzipRequests (19): * http://npmawesome.com/ (gzip: 43.54 kB / uncompressed: 43.54 kB) * http://npmawesome.com/wp-content/themes/npmawesome-wordpress-theme/style.css?t=1415123085&ver=3.9.3 (gzip: 41.15 kB / uncompressed: 41.15 kB) * http://npmawesome.com/wp-content/themes/npmawesome-wordpress-theme/js/navigation.js?ver=1406592009 (gzip: 0.55 kB / uncompressed: 0.55 kB) ... Offenders for httpsRequests (17): * https://avatars.githubusercontent.com/u/54666?v=3 * https://avatars.githubusercontent.com/u/944406?v=3 * https://avatars.githubusercontent.com/u/819518?v=2 * https://avatars.githubusercontent.com/u/867?v=2 ...
You can also get details over a certain number of runs to avoid false positives:
$ phantomas http://npmawesome.com --runs 5
This time you get a table with min/max, average and median results. You can see full results here.
.-----------------------------------------------------------------------------------------------------------. | Report from 5 run(s) for <http://npmawesome.com/> using phantomas v1.7.0 | |-----------------------------------------------------------------------------------------------------------| | Metric | min | max | average | median | stddev | |--------------------------------|--------------|--------------|--------------|--------------|--------------| | requests | 54 | 54 | 54 | 54 | 0 | | gzipRequests | 19 | 19 | 19 | 19 | 0 | | postRequests | 0 | 0 | 0 | 0 | 0 | | httpsRequests | 17 | 17 | 17 | 17 | 0 | | notFound | 0 | 0 | 0 | 0 | 0 | | bodySize | 588900 | 864988 | 701249.4 | 685799 | 92951.34 | | contentLength | 3153937 | 3175465 | 3166706.2 | 3168381 | 7011.64 | | httpTrafficCompleted | 922 | 1300 | 1073.8 | 972 | 156.34 | | timeToFirstByte | 231 | 337 | 262.4 | 248 | 38.63 | | timeToLastByte | 241 | 345 | 272.6 | 259 | 37.91 | | ajaxRequests | 0 | 0 | 0 | 0 | 0 | | htmlCount | 1 | 1 | 1 | 1 | 0 | | htmlSize | 44581 | 44581 | 44581 | 44581 | 0 | | cssCount | 2 | 2 | 2 | 2 | 0 | | cssSize | 43200 | 43200 | 43200 | 43200 | 0 | | jsCount | 17 | 17 | 17 | 17 | 0 | | jsSize | 195313 | 216841 | 208082.2 | 209757 | ...
What else?
Of course reports could be generated in JSON format. However, it gets much more interested with startsd reporter. Assuming you have it hooked up to graphite you could be seeing some great charts. Alternatively you can send results straight to elasticsearch database for manual processing.
phantomas is highly configurable and can do things like take screenshots and pretend to be a tablet or a phone. Run phantomas to see full list of options.
