Easy Progressive Web Metrics

Improving your web page loading is not a trivial task. It takes a lot of time and requires a lot of knowledge. To make it easier we have pwmetrics library which should help you with that.

How do you always measure? Let me guess — you open chrome, timeline tab and so on and so far.

What do we provide you with? Command in console — pwmetrics.

pwmetrics uses Lighthouse API for getting metrics values like [First Contentful Paint](https://docs.google.com/document/d/1kKGZO3qlBBVOSZTf-T8BOMETzk3bY15SC-jsMJWv4IE/mobilebasic?pref=2&pli=1), [First Meaningful Paint](https://developers.google.com/web/tools/lighthouse/audits/first-meaningful-paint), [First Interactive](https://docs.google.com/document/d/1GGiI9-7KeY3TPqS3YT271upUVimo-XiL5mwWorDUD4c/edit#heading=h.k1h25blerz3i), Perceptual Speed Index ([more about it](https://www.instartlogic.com/blog/perceptual-speed-index-psi-measuring-above-fold-visual-performance-web-pages)), First Visual Changing, Visually Complete 100% and Visually Complete 85%.

Those values you can get in json format using

pwmetrics https://example.com --json.

{"runs": [{"timings": [{"title": "First Contentful Paint","id": "ttfcp","timestamp": 82750857804,"timing": 838.263,"color": "green"}, {"title": "First Meaningful Paint","id": "ttfmp","timestamp": 82750857814,"timing": 838.273,"color": "green"}, {"title": "Perceptual Speed Index","id": "psi","timestamp": 82750873600,"timing": 854.059,"color": "blue"}, {"title": "First Visual Change","id": "fv","timestamp": 82750873541,"timing": 854,"color": "blue"}, {"title": "Visually Complete 85%","id": "vc85","timestamp": 82750873600,"timing": 854.059,"color": "blue"}, {"title": "Visually Complete 100%","id": "vc100","timestamp": 82750873541,"timing": 854,"color": "blue"}, {"title": "First Interactive (vBeta)","id": "ttfi","timestamp": 82750859471,"timing": 839.93,"color": "yellow"}, {"title": "Time to Consistently Interactive (vBeta)","id": "ttci","timestamp": 82750859471,"timing": 839.93,"color": "yellow"}],"timestamps": [{"title": "Navigation Start", "id": "navstart", "timestamp": 82750019541}],"generatedTime": "2017-05-17T11:50:08.096Z","lighthouseVersion": "2.1.0","initialUrl": "http://example.com","url": "http://example.com/"}]}

Or you can use

pwmetrics [http://example.com](http://example.com)

to see fancy chart with First Contentful Paint, First Meaningful Paint, Perceptual Speed Index, Time to Interactive values.

Results of run “pwmetrics [http://example.com](http://example.com)" command

Note: Results are measured with Nexus 5X device emulation, _5x_ CPU throttling, _1.6 Mbps_ download speed and _750 Kbps_ upload speed.

To get approximated results use median run option.

pwmetrics http://example.com --runs=3

It will get 3 different metrics and approximate them.

Note: As far as _pwmetrics_ depends on _Lighthouse_ you can pass all flags to it, using CLI. Available Lighthouse flags - are described here.

Example_:_ _pwmetrics --disableDeviceEmulation "chrome://history/" --save-assets_

CI usage

Lets go further and decide to use it with CI. You really don’t wanna accept new changes which downgrade your site/app performance. We took care of it too.

Run

pwmetrics --expectations

What do you need before running that, is to set up some config either in your package.json or in your own file?

Other then package.json , configuration file can be used. See more at docs

pwmetrics --config=./path-to-file.js

package.json

"pwmetrics": {  "url": "http://example.com/",  "expectations": {    "ttfmp": {      "warn": ">=500",      "error": ">=1000"    },    "ttfcp": {      "warn": ">=500",      "error": ">=1000"    }  }}

Result of its work

You also can look a recipe we’ve made for integrating it with build tools.

Show results in a DevTools Timeline Viewer

DevTools Timeline Viewer it’s standalone project helping developers share their traces between each other.

How it works together:

pwmetrics --view --config=./pwmetrics-config.js

Read docs how to configure.

https://goo.gl/4opmye

What a background of this? We just get traces, upload them to your Google Drive and open Timeline Viewer with these traces.

Ok. That’s it you might think. But not. We prepared one more cool feature.

Analytics purposes

It’s really helpful when you can submit metrics results into service/docs/sheets, make some graphics and share these results with others.

Here it is

pwmetrics --submit

Read more to configure config.

This command will submit all received metrics into Google Sheets.

Note: For now we support just Google Sheets, but are open to new contribution to make it works with other services :)

Example:

pwmetrics --submit --config=./pwmetrics-config.js

Results:

See at Google Sheets.

Enjoy! :)

Thanks to @paul_irish ‏ @samccone @pedro93_ !

UPD: Article was updated due to version 3 release.