Find the slowest pages in a Stati build

Build metrics, the HTML report, and two jq one-liners.

SNP 130 #316 Filed stati cmd

shell
npx stati build --force --metrics --metrics-detailed --metrics-html

That writes .stati/metrics/build-<timestamp>.json and an HTML report next to it, with the build's phases on a timeline and, thanks to --metrics-detailed, the render time of every page. --force renders every page; without it, cached pages show up with 0 ms.

shell
latest=$(ls -t .stati/metrics/*.json | head -1)

# The ten slowest pages, and how many templates each one loaded
jq -r '.pageTimings | map(select(.cached | not)) | sort_by(-.durationMs) | .[:10][] | "\(.durationMs) ms  \(.templatesLoaded) templates  \(.url)"' "$latest"

# The five slowest phases
jq -r '.phases | to_entries | sort_by(-.value) | .[:5][] | "\(.value | round) ms  \(.key)"' "$latest"

templatesLoaded counts the layout and every partial the page can see, because Stati renders all of them for every page. A crowded root _partials/ costs every page a little. In the same file, isg.cacheHitRate says how much of an ordinary build came from the cache.

STATI_METRICS=1 npm run build turns metrics on without touching the build script, which is handy for keeping a history of build times in CI.

In the Stati docs: Build metrics and stati build.