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 library which should help you with that. pwmetrics 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 uses API for getting metrics values like , , , , and . pwmetrics Lighthouse [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% Visually Complete 85% Those values you can get in format using json . 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 , , , values. First Contentful Paint First Meaningful Paint Perceptual Speed Index Time to Interactive Results of run “ pwmetrics [http://example.com](http://example.com)" command Nexus 5X Note: Results are measured with 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 . We took care of it too. performance Run pwmetrics --expectations What do you need before running that, is to set up some config either in your or in your own file? package.json Other then , configuration file can be used. See more at package.json 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 we’ve made for integrating it with build . recipe tools Show results in a DevTools Timeline Viewer it’s standalone project helping developers share their traces between each other. DevTools Timeline Viewer How it works together: pwmetrics --view --config=./pwmetrics-config.js Read how to configure. docs 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 to configure config. more 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.
