Giter Site home page Giter Site logo

psi's Introduction

psi Build Status NPM psi package

PageSpeed Insights with reporting

Run mobile and desktop performance tests for your deployed site using Google PageSpeed Insights v5 with tidy reporting for your build process.

Install

$ npm install psi

Usage

const psi = require('psi');

(async () => {
  // Get the PageSpeed Insights report
  const { data } = await psi('https://theverge.com');
  console.log('Speed score:', data.lighthouseResult.categories.performance.score);

  // Output a formatted report to the terminal
  await psi.output('https://theverge.com');
  console.log('Done');

  // Supply options to PSI and get back speed
  const data2 = await psi('https://theverge.com', {
    nokey: 'true',
    strategy: 'desktop'
  });
  console.log('Speed score:', data2.data.lighthouseResult.categories.performance.score);
})();

As of PSI 2.x, we expose both the PageSpeed Insights speed and usability scores. The latter is based on usability rules that score a page based on factors like the presence of a sensible mobile viewport.

API

psi(url, [options])

Returns a promise for the response data from Google PageSpeed Insights.

url

Type: string

URL of the page for which the PageSpeed Insights API should generate results.

options

Type: Object

key

Type: string
Default: Free tier

When using this module for a production-level build process, registering for an API key from the Google Developer Console is recommended.

strategy

Type: string
Default: mobile
Values: mobile desktop

Strategy to use when analyzing the page.

locale

Type: string
Default: en_US

Locale results should be generated in.

threshold

Type: number
Default: 70

Threshold score to pass the PageSpeed test. Useful for setting a performance budget.

links

Type: boolean
Default: false

If passed adds links with more info about opportunities. Useful for checking documentation about opportunities.

psi.output(url, [options])

Output the formatted report to the terminal.

Returns a promise for the response data from Google PageSpeed Insights.

url and options are the same as psi().

CLI

$ npm install --global psi
$ psi --help

  Usage
    $ psi <url>

  Options
    --key        Google API Key. By default the free tier is used
    --strategy   Strategy to use when analyzing the page: mobile|desktop
    --format     Output format: cli|json|tap
    --locale     Locale results should be generated in
    --threshold  Threshold score to pass the PageSpeed test

  Example
    $ psi https://addyosmani.com --strategy=mobile

Common Use cases

Getting PSI into your build process.

A sample Gulp project using PSI is available.

If you use Grunt, grunt-pagespeed is a task by James Cryer that uses PSI under the hood.

For testing local projects, we recommend using psi-ngrok or ngrok.

Getting filmstrips

Filmstrips are returned by the v5 API as data uri's but the psi tool does not expose them on the cli. If you want to get filmstrips (or any audit details) you can require psi and get them from the audits object:

const psi = require('psi');

(async () => {
  // Get the PageSpeed Insights report
  const {data} = await psi('https://theverge.com');
  console.log(data.lighthouseResult.audits['screenshot-thumbnails'].details.items);
})();

License

Apache-2.0 - Copyright 2015 Google Inc

psi's People

Contributors

addyosmani avatar anselmbradford avatar benwiley4000 avatar callumlocke avatar christianhaller avatar danielruf avatar dcorb avatar denar90 avatar exterkamp avatar hemanth avatar joews avatar jrcryer avatar juanmaruiz avatar luisangonzalez avatar midudev avatar samccone avatar sindresorhus avatar tombailey avatar tonysan avatar yashko avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

psi's Issues

psi CLI always reports "connect ETIMEDOUT"

I'm in China and my network is fine(I tested it both in company and my home).And I tried both Chinese website and google.com, it always takes a long time with nothing and then reports "connect ETIMEDOUT" in terminal. But I can use PageSpeed Insights, the website page to analyse my website. I need help~

1437181384

Gulp-util deprecation warning

gulp-util has been deprecated and now throws a warning when installing psi:
npm WARN deprecated [email protected]: gulp-util is deprecated - replace it, following the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5

The dependency tree that results in this warning is:

The package 'download' (in recent versions) no longer uses 'gulp-decompress' and no longer installs 'gulp-util' as a dependency in the tree - see kevva/download#150

I think updating the 'download' dependency to a more recent version should remove the warning and solve the issue though it looks like it might require changing psi/lib/output.js since the syntax appears to have changed.

Using PSI with nodeJS

Hello, maybe I'm doing it wrong, but when I try to get PSI results as json from my nodejs script, the same output of the CLI version is displayed, even when using a callback... Can we prevent this ?
thx

Google APIs screenshot

Hi,
Google APIs is supporting retrieving a screenshot from the result.
Is this supported on your plugin?
screen shot 2017-08-28 at 2 36 47 pm

dns.js ENOTFOUND error

using the default settings from the sample,

there is a
Error: getaddrinfo ENOTFOUND
at errnoException (dns.js:37:11)
at Object.onanswer as oncomplete

probably because of the firewall proxy.

Any idea how to fix this?

basic auth support

We are trying to run psi against a site that hasn't been released yet. The platform we are on requires us to have basic http authentication on the site before it is released. I would expect psi to work with url's of the type http(s)?://username:[email protected]. This fails for our site, despite working in browsers and even curl.

Total size?

I ran psi on remysharp.com and jsbin.com - two very different sites, but the total size reads up around 2K, is that right? I'd expect this to be the sum total of assets, or is it something else?

» psi https://remysharp.com
--------------------------------------------------------

URL:       remysharp.com
Strategy:  mobile
Score:     76

CSS size                                   | 11.79 kB
HTML size                                  | 9.3 kB
Image size                                 | 128.32 kB
JavaScript size                            | 165.96 kB
CSS resources                              | 2
Hosts                                      | 6
JS resouces                                | 7
Resources                                  | 25
Static resources                           | 22
Total size                                 | 2.18 kB

Leverage browser caching                   | 6.6
Minify HTML                                | 0.08
Minimize render blocking resources         | 24
Size tap targets appropriately             | 0.01

--------------------------------------------------------

» psi http://jsbin.com

--------------------------------------------------------

URL:       jsbin.com/?html%2Coutput=
Strategy:  mobile
Score:     59

CSS size                                   | 180.14 kB
HTML size                                  | 26.46 kB
Image size                                 | 37.12 kB
JavaScript size                            | 1.46 MB
CSS resources                              | 3
Hosts                                      | 5
JS resouces                                | 8
Resources                                  | 20
Static resources                           | 16
Total size                                 | 2.16 kB

Configure viewport                         | 10
Leverage browser caching                   | 1.49
Minify CSS                                 | 0.86
Minimize render blocking resources         | 64
Optimize images                            | 0.09
Prioritize visible content                 | 8
Size tap targets appropriately             | 21.87
Use legible font sizes                     | 40

--------------------------------------------------------

File sizes without gzip?

Hi,

I just realised that the reported file sizes of gzipped documents seem to be the ones without gzip.
E.g., the html file of www.mgrossklaus.de is about 16kb without gzip, 6kb with gzip (which is activated) and psi reports a file size of 16kb. Same for css and html5rocks.com, e.g.

Indeed I have no idea if it's actually a bug / fixable since you request the files via command line.

Thanks a lot!

bildschirmfoto 2014-09-16 um 18 49 59
bildschirmfoto 2014-09-16 um 18 51 53

No install

npm ERR! error installing [email protected]

npm ERR! Error: No compatible version found: minimist@'^0.1.0'
npm ERR! Valid install targets:
npm ERR! ["0.0.0","0.0.1","0.0.2","0.0.3","0.0.4","0.0.5","0.0.6","0.0.7","0.0.8","0.0.9","0.0.10","0.1.0"]
npm ERR! at installTargetsError (/usr/share/npm/lib/cache.js:488:10)
npm ERR! at /usr/share/npm/lib/cache.js:375:15
npm ERR! at saved (/usr/share/npm/lib/utils/npm-registry-client/get.js:147:7)
npm ERR! at Object.oncomplete (/usr/lib/nodejs/graceful-fs.js:230:7)
npm ERR! You may report this log at:
npm ERR! http://bugs.debian.org/npm
npm ERR! or use
npm ERR! reportbug --attach /home/gdjkj/npm-debug.log npm
npm ERR!
npm ERR! System Linux 3.8.0-42-generic
npm ERR! command "node" "/usr/bin/npm" "install" "-f" "psi"
npm ERR! cwd /home/gdjkj
npm ERR! node -v v0.6.12
npm ERR! npm -v 1.1.4
npm ERR! message No compatible version found: minimist@'^0.1.0'
npm ERR! message Valid install targets:
npm ERR! message ["0.0.0","0.0.1","0.0.2","0.0.3","0.0.4","0.0.5","0.0.6","0.0.7","0.0.8","0.0.9","0.0.10","0.1.0"]
npm ERR!
npm ERR! Additional logging details can be found in:
npm ERR! /home/gdjkj/npm-debug.log
npm not ok

How to get localized formattedOutput?

When I use the following code with locale: 'de_DE' I don´t get localized messages, just the english ones. How can I fix this?

var sites = ['http://www.html5rocks.com'];
gulp.task('mobile', function () {
    sites.forEach(function (site) {
        return psi.output(site, {
            // key: key
            nokey: 'true',
            strategy: 'mobile',
            locale: 'de_DE'
        }, function (err) {
            console.log(err);
        });
    })

});

Install not working for me.

I am probably doing something wrong here. Please advice:

➜ austinpeterson git:(master) ✗ sudo npm install --save psi
Password:
npm WARN deprecated [email protected]: Security update: Versions below 3.0.0 are deprecated.
[email protected] node_modules/psi
├── [email protected]
├── [email protected]
├── [email protected] ([email protected])
├── [email protected] ([email protected])
├── [email protected] ([email protected], [email protected], [email protected])
├── [email protected] ([email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected])
├── [email protected]
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected])
└── [email protected] ([email protected], [email protected], [email protected], [email protected])
➜ austinpeterson git:(master) ✗ psi
zsh: command not found: psi
➜ austinpeterson git:(master) ✗

Improved UX for the numbers

I have no idea what these numbers means:

Leverage browser caching                   | 9
Minimize render blocking resources         | 24
Optimize images                            | 2.82
Size tap targets appropriately             | 0.01

Login/Session management?

Any way to use with a system that has a login page with session cookies? This is a SPA built using AngularJS, so most of the resources are loaded when the login is loaded, but would like to see how the rest of the application rates once we are past the login page.

Page paint time graph?

Is there any way that I could get specs on the page paint times? This would be especially helpful for me since I can find no other performance testing modules that include mobile support.

Threshold of 70 not met with score of 53

Is the website I tested that bad?

Error: Threshold of 70 not met with score of 53
    at Object.exports.process (/Users/peter/.nvm/v0.10.26/lib/node_modules/psi/output.js:72:13)
    at /Users/peter/.nvm/v0.10.26/lib/node_modules/psi/index.js:26:12
    at Request._callback (/Users/peter/.nvm/v0.10.26/lib/node_modules/psi/node_modules/gpagespeed/index.js:24:12)
    at Request.self.callback (/Users/peter/.nvm/v0.10.26/lib/node_modules/psi/node_modules/gpagespeed/node_modules/request/request.js:122:22)
    at Request.EventEmitter.emit (events.js:98:17)
    at Request.<anonymous> (/Users/peter/.nvm/v0.10.26/lib/node_modules/psi/node_modules/gpagespeed/node_modules/request/request.js:1019:14)
    at Request.EventEmitter.emit (events.js:117:20)
    at IncomingMessage.<anonymous> (/Users/peter/.nvm/v0.10.26/lib/node_modules/psi/node_modules/gpagespeed/node_modules/request/request.js:970:12)
    at IncomingMessage.EventEmitter.emit (events.js:117:20)
    at _stream_readable.js:920:16

Add TAP output format

Hi,

It would be great to have the option to generate TAP compliant output. Generating a failure in case the threshold is not meet.

Any suggestions on how and where to integrate this?

Thanks!

question

Can i use the "PSI" work as a part of my experiment? =)

Add promise API option?

Would you consider an optional promise API (in addition to the Node callback-style API)?

For example:

var psi = require('psi');

// get the PageSpeed Insights report
psi('html5rocks.com', function (err, data) {
  console.log(data.score);
  console.log(data.pageStats);
});

// OR: same thing, but promise-style
psi('html5rocks.com').then(function (data) {
  console.log(data.score);
  console.log(data.pageStats);
});


// output a formatted report to the terminal
psi.output('html5rocks.com', function (err) {
  console.log('done');
});

// OR promise-style
psi.output('html5rocks.com').then(function () {
  console.log('done');
});

(I want this mainly for easy interoperability with other Promise-driven code, so I don't have to manually promisify it first.)

Happy to PR if you agree.

Error: Threshold of 70 not met with score of 60

When I run the cli version of psi on certain sites, I am getting an error.


--------------------------------------------------------

URL:       bbc.com
Strategy:  mobile
Speed:     69
Usability: 98

CSS size                                   | 271 kB
HTML size                                  | 209 kB
Image size                                 | 125 kB
JavaScript size                            | 1.49 MB
CSS resources                              | 8
Hosts                                      | 27
JS resources                               | 33
Resources                                  | 80
Static resources                           | 54
Other size                                 | 4.44 kB
Total size of request bytes sent           | 15 kB

Enable GZIP compression                    | 0.56
Leverage browser caching                   | 7.19
Minimize render blocking resources         | 32
Optimize images                            | 6.16
Size tap targets appropriately             | 1.03

--------------------------------------------------------

Error: Threshold of 70 not met with score of 69
    at Promise.resolve.then (/usr/local/lib/node_modules/psi/lib/output.js:93:13)
    at process._tickCallback (internal/process/next_tick.js:103:7)```

0.1.0 fails on install

Yo dawg, I got this error. Thought you'd like to know! Thanks for building awesome stuff. 😄

npm ERR! Error: ENOENT, chmod '/Users/lyzidiamond/Lexington/lexington-qold/node_modules/psi/bin/cli.js'
npm ERR! If you need help, you may report this *entire* log,
npm ERR! including the npm and node versions, at:
npm ERR!     <http://github.com/npm/npm/issues>

npm ERR! System Darwin 13.1.0
npm ERR! command "node" "/usr/local/bin/npm" "install"
npm ERR! cwd /Users/lyzidiamond/Lexington/lexington-qold
npm ERR! node -v v0.10.29
npm ERR! npm -v 1.5.0-alpha-1
npm ERR! path /Users/lyzidiamond/Lexington/lexington-qold/node_modules/psi/bin/cli.js
npm ERR! code ENOENT
npm ERR! errno 34
npm ERR! 
npm ERR! Additional logging details can be found in:
npm ERR!     /Users/lyzidiamond/Lexington/lexington-qold/npm-debug.log
npm ERR! not ok code 0

input file?

Would a parameter like:

-i file #or 
 --input-file=file

be useful, say in case one has a list of URLs.

Yes, it could be do with something: cat links | xargs -L1 psi > analysis.report but have -i would be useful :) ?

//cc @addyosmani

Generate and save junit and tap formarts.

Hi,

It would be nice to have an option to generate and save locally JUNIT and/or TAP formats. The ideia is save each rule as a test.

It's nice to integrate with CI tools like jenkins or CircleCI.

Thanks!

Adding fonts as a separate response type

I'm using this awesome tool as part of a project perf tester and it's great! The only thing is I can't see where fonts are included. Do they come under otherResponseBytes?

I notice that in the Page Speed docs they have a separate response for flash resources(!?) but not fonts. I think this would be a useful thing to measure with some of the heavy font-loading sites I've seen recently.

I'm not sure if this is something for this tool or PageSPeed Insights itself so apologies if this is the wrong place to ask.

Add some colors

https://github.com/sindresorhus/chalk

It's a bit bland right now.

  • Like the Score number could be colored depending how good it is. <20 red,<80 yellow, >80 green (just quasi amounts, but you get the idea).
  • The separator could be gray.
  • The numbers on the right could get a color.

And probably more.

Get the same default output from terminal but in gulp

Is there a way to console log from gulp and get the same output that I get when I run psi example.com straight from the terminal?
I see it returns an object that I can log but it seems like psi has a built in way to format this already. How can I access this?

PSI behind a corporate proxy

How to run PSI behind a proxy? Currently i am getting the below error.

"tunneling socket could not be established, cause=Parse Error"

Drop the `nokey` option

You can just do it by default if key is not specified. No need to have an option. Less is more.

psi doesn't return usability score for desktop strategy

psi(url, {strategy: 'mobile'}) return both speed and usability scores:
ruleGroups: { SPEED: { score: 58 }, USABILITY: { score: 93 } }

But
psi(url, {strategy: 'desktop'}) return just speed score:
ruleGroups: { SPEED: { score: 74 } }

It doesn't return usability score for desktop strategy.

How to return the data received from PageSpeed Insight from node in a route?

I am using the PSI npm package in a simple route. Used the psi method from the library. However, the script does not wait for the expected result. It works Ok in console. However, I need to return the response to browser and display it there. How can I do this?
Note: psi method a Promise.

app.get('/psi', function(req, res){
    res.type('text/html');
    return psi('example.com',{ key: '*Iz*Sy*****PiZ***wz7****sy*****', strategy: 'desktop'}).then( data => {
        console.log('Speed score: ' + data.ruleGroup.SPEED.score);
        console.log('done');
        res.json({ 'results' : data.ruleGroup.SPEED.score });
    });

});

gulp PSI stuck and not working

I tried to use gulp to automate this step, But for some reason it is stuck with psi-desktop task and not moving forward. Below is the result

C:\Codes\dxd-codemig-test>gulp psi
[18:24:35] Using gulpfile C:\Codes\dxd-codemig-test\gulpfile.js
[18:24:35] Starting 'psi-seq'...
[18:24:35] Starting 'browser-sync-psi'...
[18:24:35] Finished 'browser-sync-psi' after 50 ms
[18:24:35] Starting 'ngrok-url'...
[Browsersync] Access URLs:

   Local: http://localhost:3020
External: http://169.254.87.88:3020

      UI: http://localhost:3001

UI External: http://169.254.87.88:3001

[Browsersync] Serving files from: app
serving your tunnel from: https://ec3992f5.ngrok.io
[18:24:38] Finished 'ngrok-url' after 2.3 s
[18:24:38] Starting 'psi-desktop'...


URL: ec3992f5.ngrok.io
Strategy: desktop
Speed: 98

Hosts | 1
Resources | 1
Other size | 1.71 kB
Total size of request bytes sent | 39 B

Main resource server response time | 1.35


My gulpfile.js

// this is where your server task goes. I'm using browser sync
gulp.task('browser-sync-psi', function() {
    browserSync({
        port: portVal,
        open: false,
        server: {
            baseDir: 'app'
        }
    });
});

// psi sequence with 'browser-sync-psi' instead
gulp.task('psi-seq', function(cb) {
    return sequence(
        'browser-sync-psi',
        'ngrok-url',
        'psi-desktop',
        'psi-mobile',
        cb
    );
});

// psi task runs and exits
gulp.task('psi', ['psi-seq'], function() {
    console.log('Woohoo! Check out your page speed scores!')
    process.exit();
})

gulp.task('ngrok-url', function(cb) {
    return ngrok.connect(3000, function(err, url) {
        site = url;
        console.log('serving your tunnel from: ' + site);
        cb();
    });
});

gulp.task('psi-desktop', function(cb) {
    psi.output(site, {
        nokey: 'true',
        strategy: 'desktop'
    }, cb);
});

gulp.task('psi-mobile', function(cb) {
    psi.output(site, {
        nokey: 'true',
        strategy: 'mobile'
    }, cb);
});

Default values in docs

You should include the default values for each option.

Example:

threshold

Type: Number
Default: 80

You should also merge Supported properties and Options.

Tool for tracking history of values to monitor for regressions?

We'd like to run this every time a component is updated, and track all numbers through time.

My goal is to be alerted when any numbers jump sharply.

For example: A sudden growth in Javascript Response Bytes could might mean a developer unknowingly added JS dependency significantly larger than we were expecting.

Include link to OR option to fetch optimised resources

The PageSpeed Insights service can now output optimised resources based on the same strategy options supported for reporting (mobile, desktop).

If we wanted, we could output a link to download resources as part of the report or some sort of --download flag for fetching the output of the optimisation routine.

Mobile:

https://developers.google.com/speed/pagespeed/insights/optimizeContents?url=YOUR_URL_HERE&strategy=mobile

Desktop:

https://developers.google.com/speed/pagespeed/insights/optimizeContents?url=YOUR_URL_HERE&strategy=desktop

Threshold option broken?

Hey hey,

I just wanted to play around with the --threshold option, but unfortunately it is not working.

I'm running

> psi www.smashingmagazine.com --threshold=99                                               [9:50:44]

--------------------------------------------------------

URL:       smashingmagazine.com
Strategy:  mobile
Score:     98

CSS size                                   | 559.91 kB
HTML size                                  | 65.81 kB
Image size                                 | 385.25 kB
JavaScript size                            | 161.88 kB
CSS resources                              | 3
Hosts                                      | 8
JS resources                               | 8
Resources                                  | 55
Static resources                           | 32
Total size                                 | 8.07 kB

Leverage browser caching                   | 0.75
Optimize images                            | 0.28

--------------------------------------------------------

I already a had look into the code, and there is no special treatment for threshold inside of psi and also the docs about the API doesn't say anything about threshold handling?

https://developers.google.com/speed/docs/insights/v1/getting_started#examples

Do I miss something?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.