Before you go, check out these stories!

Hackernoon logoEasy Progressive Web Metrics by@denysov.artem

Easy Progressive Web Metrics

Author profile picture

@denysov.artemArtem Denysov

Lighthouse for 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, First Meaningful Paint, First Interactive, Perceptual Speed Index (more about it), First Visual Changing, Visually Complete 100% and Visually Complete 85%.

Those values you can get in json format using

pwmetrics --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": "",
"url": ""

Or you can use


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

Results of run “pwmetrics" 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 --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
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.


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


"pwmetrics": {
"url": "",
"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.
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 :)


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


See at Google Sheets.

Enjoy! :)

Thanks to @paul_irish @samccone @pedro93_ !

UPD: Article was updated due to version 3 release.


The Noonification banner

Subscribe to get your daily round-up of top tech stories!