• Stars
    star
    358
  • Rank 118,855 (Top 3 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created over 4 years ago
  • Updated 5 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A Node.js command line tool that crawls a domain and gathers lighthouse performance data for every page.

Lighthouse Parade Hero Image

Lighthouse Parade CI npm

A Node.js command line tool that crawls a domain and compiles a report with lighthouse performance data for every page.

Why?

There are great tools for doing performance analysis on a single web page. We use Lighthouse and WebPageTest for this all the time. But what if you want to evaluate the performance characteristics of an entire site? It is tedious to manually run a report for each page and then the output is a jumble of individual reports that have to be analyzed one-by-one. This tool was created to solve this problem.

How?

With a single command, the tool will crawl an entire site, run a Lighthouse report for each page, and then output a spreadsheet with the aggregated data. There is an example of the generated spreadsheet in the examples/ directory of this project. Each row in the spreadsheet is a page on the site, and each individual performance metric is a column. This makes it very easy to perform high-level analysis because you can sort the rows by whichever metric you are analyzing. This immediately shows the best and worst performing pages. In the following example, the rows are sorted by first contentful paint.

Lighthouse data from multiple reports aggregated into a single spreadsheet

It is also easy to graph data in this format. The following example is a histogram showing a problematic distribution of largest contentful paint scores.

Histogram showing LCP scores

Usage

(Check to make sure you are using Node 14+)

$ npx lighthouse-parade <url> [dataDirectory] [options]

Ex: npx lighthouse-parade http://www.dfwfreeways.com/

Runs a crawler on the provided URL. Discovers all URLs and runs a lighthouse report on each HTML page, then writes them to a CSV file located in ./lighthouse-parade-data/<timestamp>/urls.csv. The individual reports are written to ./lighthouse-parade-data/<timestamp>/reports/. At the end, each report file is bundled into one aggregated report CSV with each row representing a URL and each column is a metric.

Options

--ignore-robots             Crawl pages even if they are listed in the site's robots.txt  (default false)
--crawler-user-agent        Pass a user agent string to be used by the crawler (not by Lighthouse)
--lighthouse-concurrency    Control the maximum number of ligthhouse reports to run concurrently  (default number of CPU cores minus one)
--max-crawl-depth           Control the maximum depth of crawled links. 1 means only the entry page will be used. 2 means the entry page and any page linked directly from the entry page will be used.
--include-path-glob         Specify a glob (in quotes) for paths to match. Links to non-matched paths will not be crawled. The entry page will be crawled regardless of this flag. This flag can be specified multiple times to allow multiple paths. `*` matches one url segment, `**` matches multiple segments. Trailing slashes are ignored.
--exclude-path-glob         Specify a glob (in quotes) for paths to exclude. Links to matched paths will not be crawled. The entry page will be crawled regardless of this flag. This flag can be specified multiple times to exclude multiple paths. `*` matches one url segment, `**` matches multiple segments. Trailing slashes are ignored.
-v, --version               Displays current version
-h, --help                  Displays help text

Analysis spreadsheet template

After running a scan, you can import your aggregated report data into this Google Sheet template, which includes the following features:

  • Basic formatting
  • The three web core vitals columns are highlighted
  • Histograms for each web core vital metrics are automatically generated
  • Averages and median scores for the web core vitals are also calculated next to each histogram

Instructions

To use this template, it is important to follow these instructions very carefully when importing:

  1. Visit the template and choose File > Make a copy. You will now have your own writable copy.
  2. Click cell A:1 in the top left corner.
  3. File > Import...
  4. In the following dialogue, upload the aggregatedMobileReport.csv file that was generated by the script.
  5. Under Import Location, select Replace data at selected cell.
  6. Click Import Data

Mac M1 Note

Users running virtualized x64 versions of Node on Macs with M1 chips may see anomalous results. For best results on an M1 chip, ensure you are running the native arm version of Node 16+.

When you run the command node -p process.arch you should see arm64. If you see x86, try uninstalling and reinstalling Node. More details here.

Shout-outs

  • auto-lighthouse is a similar project that provided early inspiration for this one.
  • Lighthouse is handling emulation and performance metrics.
  • Node CSV is the library handling CSV logic.
  • simplecrawler is the library handling URL discovery.

More Repositories

1

hideShowPassword

Because life's too short to waste time re-typing passwords.
JavaScript
736
star
2

drizzle

A streamlined tool for developing, documenting and presenting UI pattern libraries.
HTML
666
star
3

SimpleSlideView

A nifty little jQuery or Zepto plugin for the simplest of sliding views.
HTML
258
star
4

pleasantest

⛵ Write real-browser tests with Testing Library in Jest
TypeScript
172
star
5

simple-svg-placeholder

A very simple placeholder image generator with zero dependencies.
JavaScript
170
star
6

offCanvasMenu

A jQuery/Zepto plugin that provides an easy way to implement an off-canvas toggling menu, a navigation metaphor made popular by mobile applications.
CoffeeScript
139
star
7

pwastats

A directory of Progressive Web App case studies.
HTML
101
star
8

image-compare

A web component for comparing images with a slider.
HTML
62
star
9

transition-hidden-element

A JavaScript utility to help you use CSS transitions when showing and hiding elements with the `hidden` attribute.
JavaScript
52
star
10

elastic-textarea

A web component for progressively-enhanced auto-expanding textareas
JavaScript
35
star
11

image-breakpoints

Given a source image, generate a series of related images at various file sizes.
PHP
28
star
12

guides

Conventions, processes and notes about how we do things
24
star
13

cloudfour.com-patterns

The design system, component library and documentation for cloudfour.com and related projects
MDX
24
star
14

core-hbs-helpers

Handlebars helpers that we usually need
JavaScript
11
star
15

leveller

A jQuery plugin for equalizing element heights.
HTML
10
star
16

lite-model-viewer

A lazy-loaded model-viewer web component
HTML
9
star
17

core-gulp-tasks

⛔️ DEPRECATED Gulp tasks that we usually need
JavaScript
9
star
18

svg-icon-example

JavaScript
8
star
19

constraint-validation-api-demo

Astro
7
star
20

pwa-workshop

The Progressive Web App workshop files
HTML
7
star
21

svg-icon-stress-test

Test page accompanying an article about performance of way too many SVG icons at once.
JavaScript
7
star
22

drizzle-builder

The tool for building a Drizzle.
JavaScript
6
star
23

slides-svg-101

SVG! ♥‿♥
JavaScript
5
star
24

tpp-research-monorepo

JavaScript
5
star
25

stylelint-config-cloudfour-suit

Cloud Four's shareable config + SUIT naming
JavaScript
4
star
26

eleventy-patterns

(WIP) A boilerplate template used to quickly generate pattern libraries and prototyping environments
JavaScript
4
star
27

eslint-config

JavaScript
4
star
28

smashing-mag-sw

CSS
2
star
29

stylelint-config-cloudfour

Cloud Four's shareable config
JavaScript
2
star
30

code-transform-sandbox

TypeScript
1
star
31

pleasantest-site-sandbox

A design and prototyping sandbox for the new Pleasantest site
Nunjucks
1
star
32

generator-drizzle

Yeoman generator for Drizzle-based projects
JavaScript
1
star
33

generator-core-webapp

Yeoman Generator for core web apps
JavaScript
1
star
34

workshop-here-everywhere

Workshop: How to get from Here to Everywhere (Taking your web skills mobile)
PHP
1
star
35

vite-vue-testing-library

Adding Vue Testing Library to a Vite + Vue 3 installation
Vue
1
star
36

scaffolding-example

A demo of how to write your own automated scaffolding script
JavaScript
1
star
37

sky-nav-cls-pe

Demos for the Sky Nav Cumulative Layout Shift + Progressive Enhancement article
Astro
1
star
38

js-sunrise

Study material and workshop for JavaScript
JavaScript
1
star
39

stencil-backbone-example

TypeScript
1
star