Artem Denysov
Apr 19, 2017 · 4 min read
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 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

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" 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.

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.

Hacker Noon is how hackers start their afternoons. We’re a part of the @AMI family. We are now accepting submissions and happy to discuss advertising & sponsorship opportunities.

If you enjoyed this story, we recommend reading our latest tech stories and trending tech stories. Until next time, don’t take the realities of the world for granted!

HackerNoon.com

how hackers start their afternoons.

Artem Denysov

Written by

Software Engineer: @Ciklum, @EPAMSystems • Makes developers and users lives easier helping them with #webperf • Speaker • @__treo advocate

HackerNoon.com

how hackers start their afternoons.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade