domstat is a Puppeteer based CLI tool that runs locally and checks for webpage performance statistics.
Domstat consolidates select Chrome dev tools statistics at one place and gives a bird's eye overview on how a webpage performed at runtime.
To run this, you should have node & npm installed on your machine. You can do so by downloading node.js
Using npm
npm i -g domstat
domstat --url=example.com
Alternatively, using npx
npx domstat --url=example.com
Plot
domstat parses the browser-level API numbers like DOM user timings & code coverage. Similar to httpstat for cURL related information.
domstat also takes inspiration from this web.dev article which gives an in-detail explanation about measuring critical rendering path using the Navigation Timing API.
How does domstat help?
Let's take a look at a scenario where we want to check and compare the dom timings & coverage for different websites.
Below are the domstats for optimised "movies" web application in different frameworks. You can find the repositories on https://github.com/orgs/tastejs/repositories
Angular:
Next.js:
Nuxt:
All of the above movies web application score a 90+ on Lighthouse / Pagespeed audit, domstat on the other hand leverages the browser's API and helps further by giving insights about the loading behaviour.
These statistics are available on the Chrome's devtools but they aren't consolidated at one place. Example: The CSS & JS coverage statistics are present in the Sources tab, to get the DOM timings, you need to run the Performance audit from the Performance tab and so on.
Domstat consolidates all these numbers at one place and gives a bird's eye overview on how the webpage performed.
By default the tests don't have cpu or network throttling yet but I wish to add more such flags soon.
Building the CLI
The CLI is built using React. Yes, React! Seems that React can do a lot of things. From Desktop apps with Electron to a fullstack app with Next.js.
I used create-ink-app to build the CLI tool. The create-ink-app spins up a basic project structure for Ink apps and lets you avoid the boilerplate and get to building beautiful CLIs in no time.
Checkout ink to know more about writing CLI tools with React :)
Closing notes
I've been using the Chrome DevTools to check site's performance, running tests to check and compare runtime performance of different pages.
This CLI tool is a step closer to knowing the APIs well, the tools gives quick insights and saves the hassle of clicking around the already overwhelming browser's dev tools.
There's a good potential for improving the tool further & if you're familiar with the Node.js ecosystem and React, you're most welcome to contribute to make this better.
The goal isn't to make another lighthouse like tool, but only to consolidate the important scattered statistics from the browser's API at one place, using one command.
Top comments (1)
Maybe you could just use lighthouse cli tools with your own plugin : github.com/GoogleChrome/lighthouse
It supports headless and Json reports out of the box