PWMetrics

Install

$ 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.jsonpwmetrics --config

...  "pwmetrics": {    "url": "http://example.com/",    // other configuration options  }...

# run pwmetrics with config in pwmetrics-config.jspwmetrics --config=pwmetrics-config.js

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

All available configuration options

constMETRICS=require('pwmetrics/lib/metrics');module.exports={url:'http://example.com/',flags:{// AKA feature flagsruns:3,// number or runssubmit:true,// turn on submitting to Google Sheetsupload:true,// turn on uploading to Google Driveview:true,// open uploaded traces to Google Drive in DevToolsexpectations:true,// turn on assertion metrics results against provides valuesjson:true,// not required, set to true if you want json outputoutputPath:'stdout',// not required, only needed if you have specified json output, can be "stdout" or a pathchromePath:'/Applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ Canary',//optional path to specific Chrome locationchromeFlags:'',// 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 LighthouseshowOutput:true,// not required, set to false for pwmetrics not output any console.log messagesfailOnError: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_SHEETSoptions:{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

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

...  "pwmetrics": {    "url": "http://example.com/",    "expectations": {      ...    }  }...

# run pwmetrics with config in pwmetrics-config.jspwmetrics --expectations --config=pwmetrics-config.js

Defining submit

# run pwmetrics with config in package.jsonpwmetrics --submit

# run pwmetrics with config in pwmetrics-config.jspwmetrics --submit --config=pwmetrics-config.js

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

Defining upload

# run pwmetrics with config in package.jsonpwmetrics --upload

# run pwmetrics with config in pwmetrics-config.jspwmetrics --upload --config=pwmetrics-config.js

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

View Lighthouse traces in timeline-viewer

# run pwmetrics with config in package.jsonpwmetrics --upload --view

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

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

Available metrics:

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

API

constPWMetrics=require('pwmetrics');constoptions={flags:{runs:3,// number or runssubmit:true,// turn on submitting to Google Sheetsupload:true,// turn on uploading to Google Driveview:true,// open uploaded traces to Google Drive in DevToolsexpectations:true,// turn on assertation metrics results against provides valueschromeFlags:'--headless'// run in headless Chrome}};constpwMetrics=newPWMetrics('http://example.com/',options);// _All available configuration options_ can be used as `options`pwMetrics.start();// returns Promise

Options

Recipes

License