• Stars
    star
    1,247
  • Rank 37,683 (Top 0.8 %)
  • Language
    TypeScript
  • License
    Apache License 2.0
  • Created about 8 years ago
  • Updated almost 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Progressive web metrics at your fingertipz

Deprecated

In favour of better support and many cool features of:

  • Lighthouse CI - is a suite of tools that make continuously running, saving, retrieving, and asserting against Lighthouse results as easy as possible.
  • Lighthouse CI Action - action integrates Lighthouse CI with Github Actions environment. Making it simple to see failed tests, upload results, run jobs in parallel, store secrets, and interpolate env variables.
  • Treo.sh - Page speed monitoring made simple.

PWMetrics

Progressive web metrics at your fingertipz. 💅

CLI tool and lib to gather performance metrics via Lighthouse.

image

Documentation on these metrics in the works. If you hit bugs in the metrics collection, report at Lighthouse issues. How to use article

Install NPM pwmetrics package

$ yarn global add pwmetrics
# or
$ yarn add --dev pwmetrics

CLI Usage

$ pwmetrics <url> <flags>

pwmetrics http://example.com/

# --runs=n     Does n runs (eg. 3, 5), and reports the median run's numbers.
#              Median run selected by run with the median TTI.
pwmetrics http://example.com/ --runs=3

# --json       Reports json details to stdout.
pwmetrics http://example.com/ --json

# returns...
# {runs: [{
#   "timings": [
#     {
#       "name": "First Contentful Paint",
#       "value": 289.642
#     },
#     {
#       "name": "Largest Contentful Paint",
#       "value": 292
#     },
#     ...

# --output-path       File path to save results.
pwmetrics http://example.com/ --output-path='pathToFile/file.json'

# --config        Provide configuration (defaults to `package.json`). See _Defining config_ below.
pwmetrics --config=pwmetrics-config.js

# --submit       Submit results to Google Sheets. See _Defining submit_ below.
pwmetrics --submit

# --upload       Upload Lighthouse traces to Google Drive. See _Defining upload_ below.
pwmetrics --upload

# --view       View Lighthouse traces, which were uploaded to Google Drive, in DevTools. See _Defining view_ below.
pwmetrics --view

##
## CLI options useful for CI
##

# --expectations  Assert metrics results against provides values. See _Defining expectations_ below.
pwmetrics --expectations

# --fail-on-error  Exit PWMetrics with an error status code after the first unfilled expectation.
pwmetrics --fail-on-error

Defining config

# run pwmetrics with config in package.json
pwmetrics --config

package.json

...
  "pwmetrics": {
    "url": "http://example.com/",
    // other configuration options
  }
...
# run pwmetrics with config in pwmetrics-config.js
pwmetrics --config=pwmetrics-config.js

pwmetrics-config.js

module.exports = {
  url: 'http://example.com/',
   // other configuration options. Read _All available configuration options_
}

All available configuration options

pwmetrics-config.js

const METRICS = require('pwmetrics/lib/metrics');

module.exports = {
  url: 'http://example.com/',
  flags: { // AKA feature flags
    runs: 3, // number or runs
    submit: true, // turn on submitting to Google Sheets
    upload: true, // turn on uploading to Google Drive
    view: true, // open uploaded traces to Google Drive in DevTools
    expectations: true, // turn on assertion metrics results against provides values
    json: true, // not required, set to true if you want json output
    outputPath: 'stdout', // not required, only needed if you have specified json output, can be "stdout" or a path
    chromePath: '/Applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ Canary', //optional path to specific Chrome location
    chromeFlags: '', // custom flags to pass to Chrome. For a full list of flags, see http://peter.sh/experiments/chromium-command-line-switches/.
    // Note: pwmetrics supports all flags from Lighthouse
    showOutput: true, // not required, set to false for pwmetrics not output any console.log messages
    failOnError: false // not required, set to true if you want to fail the process on expectations errors
  },
  expectations: {
    // these expectations values are examples, for your cases set your own
    // it's not required to use all metrics, you can use just a few of them
    // Read _Available metrics_ where all keys are defined
    [METRICS.TTFCP]: {
      warn: '>=1500',
      error: '>=2000'
    },
    [METRICS.TTLCP]: {
      warn: '>=2000',
      error: '>=3000'
    },
    [METRICS.TTI]: {
      ...
    },
    [METRICS.TBT]: {
      ...
    },
    [METRICS.SI]: {
      ...
    },
  },
  sheets: {
    type: 'GOOGLE_SHEETS', // sheets service type. Available types: GOOGLE_SHEETS
    options: {
      spreadsheetId: 'sheet_id',
      tableName: 'data',
      uploadMedian: false // not required, set to true if you want to upload only the median run
    }
  },
  clientSecret: {
    // Data object. Can be get
    // either
    // by (using everything in step 1 here)[https://developers.google.com/sheets/api/quickstart/nodejs#step_1_turn_on_the_api_name]
    //
    // example format:
    //
    // installed: {
    //   client_id: "sample_client_id",
    //   project_id: "sample_project_id",
    //   auth_uri: "https://accounts.google.com/o/oauth2/auth",
    //   token_uri: "https://accounts.google.com/o/oauth2/token",
    //   auth_provider_x509_cert_url: "https://www.googleapis.com/oauth2/v1/certs",
    //   client_secret: "sample_client_secret",
    //   redirect_uris: [
    //     "url",
    //     "http://localhost"
    //   ]
    // }
    //
    // or
    // by (using everything in step 1 here)[https://developers.google.com/drive/v3/web/quickstart/nodejs]
  }
}

Defining expectations

Recipes for using with CI

# run pwmetrics with config in package.json
pwmetrics --expectations

package.json

...
  "pwmetrics": {
    "url": "http://example.com/",
    "expectations": {
      ...
    }
  }
...
# run pwmetrics with config in pwmetrics-config.js
pwmetrics --expectations --config=pwmetrics-config.js

Defining submit

Submit results to Google Sheets

Instructions:

  • Copy this spreadsheet.
  • Copy the ID of the spreadsheet into the config as value of sheets.options.spreadsheetId property.
  • Setup Google Developer project and get credentials. (everything in step 1 here)
  • Take a client_secret and put it into the config as value of clientSecret property.
# run pwmetrics with config in package.json
pwmetrics --submit
# run pwmetrics with config in pwmetrics-config.js
pwmetrics --submit --config=pwmetrics-config.js

pwmetrics-config.js

module.exports = {
  'url': 'http://example.com/',
  'sheets': {
    ...
  },
  'clientSecret': {
    ...
  }
}

Defining upload

Upload Lighthouse traces to Google Drive

Instructions:

  • Setup Google Developer project and get credentials. (everything in step 1 here)
  • Take a client_secret and put it into the config as value of clientSecret property.
# run pwmetrics with config in package.json
pwmetrics --upload
# run pwmetrics with config in pwmetrics-config.js
pwmetrics --upload --config=pwmetrics-config.js

pwmetrics-config.js

module.exports = {
  'url': 'http://example.com/',
  'clientSecret': {
    ...
  }
}

View Lighthouse traces in timeline-viewer

Show Lighthouse traces in timeline-viewer.

Required to use upload flag

timeline-viewer - Shareable URLs for your Chrome DevTools Timeline traces.

# run pwmetrics with config in package.json
pwmetrics --upload --view
# run pwmetrics with config in your-own-file.js
pwmetrics --upload --view --config=your-own-file.js

pwmetrics-config.js

module.exports = {
  'url': 'http://example.com/',
  'clientSecret': {
    ...
  }
}

Available metrics:

All metrics now are stored in separate constant object located in pwmetrics/lib/metrics/metrics;

// lib/metrics/metrics.ts
{
  METRICS: {
    TTFCP: 'firstContentfulPaint',
    TTLCP: 'largestContentfulPaint',
    TBT: 'totalBlockingTime',
    TTI: 'interactive',
    SI: 'speedIndex'
  }
}

Read article Performance metrics. What’s this all about? which is decoding this metrics.

API

const PWMetrics = require('pwmetrics');

const options = {
  flags: {
    runs: 3, // number or runs
    submit: true, // turn on submitting to Google Sheets
    upload: true, // turn on uploading to Google Drive
    view: true, // open uploaded traces to Google Drive in DevTools
    expectations: true, // turn on assertation metrics results against provides values
    chromeFlags: '--headless' // run in headless Chrome
  }
};

const pwMetrics = new PWMetrics('http://example.com/', options); // _All available configuration options_ can be used as `options`
pwMetrics.start(); // returns Promise

Options

Option Type Default Description
flags* Object
{
  runs: 1,
  submit: false,
  upload: false,
  view: false,
  expectations: false,
  disableCpuThrottling: false,
  chromeFlags: ''
}
        
Feature flags
expectations Object {} See Defining expectations above.
sheets Object {} See Defining submit above.
clientSecret Object {} Client secrete data generated by Google API console. To setup Google Developer project and get credentials apply everything in step 1 here.

*pwmetrics supports all flags from Lighthouse. See here for the complete list.

Recipes

License

Apache 2.0. Google Inc.

More Repositories

1

lite-youtube-embed

A faster youtube embed.
JavaScript
4,633
star
2

dotfiles

paul's fish, bash, git, etc config files. good stuff.
Shell
4,106
star
3

git-open

Type `git open` to open the GitHub page or website for a repository in your browser.
Shell
3,297
star
4

matchMedia.js

matchMedia polyfill for testing media queries in JS
JavaScript
2,374
star
5

memory-stats.js

minimal monitor for JS Heap Size via performance.memory
JavaScript
2,087
star
6

break-on-access

break on access to a property
JavaScript
1,152
star
7

github-email

Get a GitHub user's email. 😎 Use this responsibly.
Shell
982
star
8

git-recent

See your latest local git branches, formatted real fancy
Shell
917
star
9

automated-chrome-profiling

Node.js recipes for automating javascript profiling in Chrome
JavaScript
863
star
10

speedline

Calculate the speed index from devtools performance trace
JavaScript
792
star
11

headless-cat-n-mouse

Is headless chrome currently detectable? Let's pit the detections and detection evasions against eachother.
JavaScript
640
star
12

css3please

use Autoprefixer instead. <3
JavaScript
386
star
13

frontend-feeds

OPML of the frontend development rss feeds
350
star
14

devtools-addons

see the wiki
292
star
15

devtools-timeline-model

Unsupported
JavaScript
172
star
16

w3fools

CSS
152
star
17

harmony

Procedural Drawing Tool - my fork reduces it down to be integrated elsewhere
JavaScript
145
star
18

es-modules-todomvc

ES modules demo app
JavaScript
127
star
19

sample-devtools-theme-extension

A sample devtools theme extension using the new API
CSS
113
star
20

web-feature-availability

estimating the % of web users that have certain web features natively supported
HTML
91
star
21

adb_trace

Android Debug Bridge + Chrome Tracing
Python
86
star
22

trace.cafe

easy webperf trace sharing
JavaScript
84
star
23

lh-scorecalc

Lighthouse perf score calculator - explaining how the perf score is composed
JavaScript
82
star
24

emulation-popup-ext

chrome extension for devtools device emulation of your current page
JavaScript
75
star
25

covfefe-coverage

Node API for DevTools JS Coverage data
JavaScript
66
star
26

mojibar-web

JavaScript
63
star
27

chrome-side-tabs-extension

Restored source of Adrian Lungu's awesome Chrome Side Tabs extension
JavaScript
57
star
28

html5readiness.com

visualization of html5 and css3 features and when they are implemented
HTML
57
star
29

font-face-detect

Detect if @font-face support is present in the browser.
JavaScript
54
star
30

commitlintbot

JavaScript
53
star
31

third-party-decode

Decode URLs into 3rd party companies & products.
JavaScript
52
star
32

caltrainschedule.io

🚄 caltrain schedules - offline first 🐬
HTML
51
star
33

39ridiculousboxshadows

39 totally ridiculous box shadows
JavaScript
51
star
34

jQuery-miniplugins

assorted snippets and plugins
JavaScript
51
star
35

google-hangouts-grid-view

chrome extension to get a basic grid view in Google Hangouts
JavaScript
46
star
36

request-capture-har

Wrapper for request module that saves all traffic as a HAR file.
JavaScript
40
star
37

mothereffingtextshadow

CUZ WE NEED SOME MOTHER EFFING TEXT SHADOW
JavaScript
37
star
38

statikk

A simple and secure server for static files.
JavaScript
36
star
39

viewport-width-visualization

what do the widths and devices of responsive design look like?
JavaScript
21
star
40

c-cli

Give your `cat` command some color
JavaScript
19
star
41

jQuery-plus

A collection of addons/plugins for jQuery - mostly overloaded jQuery methods...
JavaScript
19
star
42

pidgey-grinding

pokemon go max XP calculator thang thang
HTML
18
star
43

mothereffinghsl

we 'bout to get HSLazy up in this!!
JavaScript
15
star
44

demo

i have a /demo/ URL on my domain. this is it.
JavaScript
13
star
45

gmail-popup-extension

opens gmail in a popup window. Nice if you open a lot of new tabs from it. chrome extension. it's dirty.
JavaScript
13
star
46

email2feed

a google app engine service that takes email at [email protected] and serves a feed at domain.com/foobar
Python
12
star
47

tiny-demos-on-https

can't do a jsbin on HTTPS but sometimes you need it. gh-pages to the rescue.
HTML
12
star
48

Chrome-LikeBlock

A Chrome extension (and greasemonkey script) to block the Facebook Like buttons
JavaScript
11
star
49

fusejs

Alpha version of FuseJS
JavaScript
10
star
50

lite-googlemaps-embed

HTML
9
star
51

npm-publish-devtools-frontend

Shell
9
star
52

timeline-totals

summarize cost of all operations recorded by the devtools timeline
JavaScript
8
star
53

source-map-js

fork of 7rulnik/source-map-js (which is ultimately a fork of mozilla/[email protected] (pre-wasm))
JavaScript
7
star
54

Gmail-mailing-list-permalink-chromeext

Get a permalink of the mailing list message you're looking at in gmail
JavaScript
7
star
55

gf3hairday

ITS FUCKING GLAMOUROUS FEBRUARY 3rd!
7
star
56

CopyLink-extension

Copy link to current page into the clipboard
JavaScript
7
star
57

mydevice

what are my device specs ?
HTML
6
star
58

package-underscore

JavaScript
6
star
59

server-trace-injector-extension

JavaScript
6
star
60

trace-stuff

JavaScript
6
star
61

package-backbone

JavaScript
5
star
62

netlogbytes

JavaScript
4
star
63

lh-build-tracker

build size history for Lighthouse
JavaScript
3
star
64

bot-t-factoids

factoids from temp01's bot-t. RIP bot-t. <3
3
star
65

badge-gdrive-favicons-extension

JavaScript
2
star
66

dadi

Automatically exported from code.google.com/p/dadi
Python
2
star
67

node-imageview

preview images in a browser and set their data uri in an input field
JavaScript
2
star
68

sourcesnapper

exploring an idea
JavaScript
2
star
69

aoe-tech-tree-widget

JavaScript
1
star
70

chromedot

Some notes on chrome subsystems
Makefile
1
star
71

filesystem-api-explorer

Filesystem API explorer - chrome extension
JavaScript
1
star
72

cri-request-interception

JavaScript
1
star