lets-lighthouse v1.1.4
Lets Lighthouse
Verify your page performance and improve it before it's too late.
Ease of analysis, reporting & comparison is powered by the "Let's Lighthouse" tool and backed by "Lighthouse" i.e. a proven tool to validate your page performance.
This tool helps you to generate lighthouse reports for batch URLs & compare them effortlessly.
Required Node & NPM version
node >= 19.8.1
npm >=9.5.1
Installation
Use the package manager npm to install Lets Lighthouse.
npm i lets-lighthouse
Simple setup
Now edit package.json and add following scripts to it.
"scripts": {
"init": "lets-init",
"analysis": "lets-analysis",
"compare": "lets-compare",
"compare-csv": "lets-compare-csv"
}
Below command will generate the project required folders and furnished them with dummy data.
npm run init
Heart of the project
To use this tool, you will need to edit the following configuration structure in config.yaml file Create config.yaml file (if not exits) in parallel to your project's package.json file.
Note: In YAML file, Whitespace indentation is used to indicate nesting and overall structure. Here is the read about YAML
---
- name: Dummy
items:
- name: Google
path: https://www.google.com/
- name: News
items:
- name: Times of India
path: https://timesofindia.indiatimes.com/
- name: Bhaskar
path: https://www.bhaskar.com/
- name: BBC News
path: https://www.bbc.com/news
Usage
Command 1
# Execute the below command to start lighthouse analysis on
# multiple URLs(uses config.yaml)
npm run analysis
The above command will create the tests folder under your project root with all the analysis info like as follows, you will also get consolidated report in CSV format under tests folder refer screenshot:
Command 2
# Compare 2 JSON files generated from the lighthouse.
# Refer the json path from above screenshot.
npm run compare /2023-4-27/Dummy/Google/105453.json /2023-4-27/Dummy/Google/105658.json
Command 3 - Compare 2 lighthouse reports for multiple url.
In order to use this command, you have to follow some steps: 1. Create input folder to the root of the project, for example:
Now, create compareit.csv file under input folder like as follows:
Its time to edit the compareit.csv file like as follows:
Note: Kindly follow the same header names, you can add Test Id's to compare, generated using command 1.
Execute below command, this command will use Lighthouse Report Viewer
npm run compare-csv
Execute below command if you want to use Lighthouse Report Diff Tool
npm run compare-csv v2
Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
Please make sure to update tests as appropriate.