psi-ngrok

PageSpeed Insights with local project

Uses psi and ngrok for running PageSpeed Insights for locally run web application.

Inspired by

• @addyosmany's psi
• Grunt Local PSI
• Gulp Local PSI

Install

$ npm install --save-dev psi-ngrok

Usage

const psiNgrok = require('psi-ngrok');

psiNgrok();

Usage with configuration

const psiNgrok = require('psi-ngrok');

const config = {
  pages: ['page1.html', 'page2.html'],
  onBeforeConnect: function() {
    // do somtheng before ngrok is connected to your host
  },
  //called if page passed `threshold` limit
  onSuccess: function(data) {
    console.log(data); // all PSI data about page
  },
  //called if page didn't pass `threshold` limit
  onError: function(error) {
    console.log(error); // error message
  },
  options: {
    threshold: 85
  }
};

psiNgrok(config);

Also look at recipes.

Usage with Grunt

Here example of using psi-ngrok with grunt-connect

var psiNgrok = require('psi-ngrok');

module.exports = function(grunt) {

  grunt.initConfig({
    connect: {
      server: {
        options: {
          port: 8000,
          base: 'public'
        }
      }
    },
  });

  grunt.loadNpmTasks('grunt-contrib-connect');

  grunt.registerTask('pagespeed', function() {
    var async = this.async;

    grunt.event.once('connect.server.listening', function(host, port) {
      psiNgrok({
        port: port,
        pages: ['index.html', 'slow.html'],
        onError: function(error) {
          grunt.fatal(error);
        },
        options: {
          threshold: 80
        }
      }).then(async());
    });
  });

  grunt.registerTask('default', ['pagespeed', 'connect:server:keepalive']);
};

Want to test it?

Run

• git clone https://github.com/denar90/psi-ngrok && cd psi-ngrok && npm i
• npm run grunt-example

Usage with Gulp

Here example of using psi-ngrok with gulp-connect

var gulp = require('gulp');
var connect = require('gulp-connect');
var psiNgrok = require('psi-ngrok');
var port = 8000;

var connectServer = function() {
  return connect.server({
    root: 'public',
    port: port
  });
};

function handleError(err) {
  console.log(err.toString());
  process.exit(-1);
}

gulp.task('pagespeed', function () {
  psiNgrok({
    pages: ['index.html', 'slow.html'],
    port: port,
    onBeforeConnect: connectServer,
    onError: handleError,
    options: {
      threshold: 80
    }
  });
});

gulp.task('default', ['pagespeed']);

Want to test it?

Run

• git clone https://github.com/denar90/psi-ngrok && cd psi-ngrok && npm i
• npm run gulp-example

API

psiNgrok([config])

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

config

Type: object

strategies

Type: array Default: ['mobile', 'desktop'] Values: mobile, desktop

Strategies to use when analyzing the page.

pages

Type: array Default: ['/']

List of local pages which will be analyzed.

port

Type: number Default: 8000

Port local server running at.

onBeforeConnect

Type: function Default: Function.prototype

Function called before ngrok is started.

Useful for running local server.

onSuccess

Type: function Default: Function.prototype

Function called each time page(s) passed threshold limit. Has data argument which consist of all PSI data about page.

onError

Type: function Default: Function.prototype

Function called each time page(s) didn't pass threshold limit. Has error argument - message about what went wrong.

options

Type: object

Pretty the same as psi options

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.

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.

MIT © Artem Denysov