compare - GitLite

KO | EN

gitlite — search

#python #go #golang #android #rust #deep-learning #nodejs #awesome #kubernetes #vue #awesome-list #mcp #ios #openai

compare

(★ 119)

Compare HAR files.

File Explorer

Download Latest Version (.zip)

- - lint.yml
- ISSUE_TEMPLATE.md
- - compare.png
  - firstparty.png
- - compare.png
- _headers
- manifest.json
- service-worker.js
- - buttons.css
  - domains.css
  - elements.css
  - filmstrip.css
  - grid.css
  - header.css
  - home.css
  - lightbox.css
  - main.css
  - page-xray.css
  - request-diff.css
  - result-header.css
  - tokens.css
  - typography.css
  - visual-progress.css
  - waterfall.css
- - loader.css
- main.js
- waterfall-tools-overrides.js
- - browsertime-chrome-wikipedia.har.gz
  - browsertime-firefox-wikipedia.har.gz
  - en.wikipedia.org-webpagetes-firefox.har
  - en.wikipedia.org-webpagetest-chrome.har
.eslintignore
.gitignore
.netlify
CHANGELOG.md
CONTRIBUTORS.md
CREDIT.md
index.html
LICENSE
netlify.toml
package-lock.json
package.json
README.md
release.sh
vite.config.js

# Installation Guide

1. Get the code

git clone https://github.com/sitespeedio/compare

Downloads the entire project code from GitHub to your computer.

cd compare

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

npm run develop

Starts the development/run server.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Compare HAR files
Make it easier to find regressions by comparing your [HAR](http://www.softwareishard.com/blog/har-12-spec/) files. Test it out https://compare.sitespeed.io.

![Logo](https://raw.githubusercontent.com/sitespeedio/compare/main/img/compare.png)

## First: Shout out!
We couldn't have built compare without the support or inspiration from the following people:
 * Thank you [Patrick Meenan](https://twitter.com/patmeenan) :bow:. The waterfall is rendered with Pat's [waterfall-tools](https://github.com/pmeenan/waterfall-tools), and the WebPageTest HAR compare viewer is what inspired the blend slider.
 * Thank you [Michael Mrowetz](https://twitter.com/MicMro) :bow:. Earlier versions of compare used Michael's [PerfCascade](https://github.com/micmro/PerfCascade) and it carried us for years.

If you like our project, please give them also some extra love :)

## Comparing
![Compare two different HAR files](https://raw.githubusercontent.com/sitespeedio/compare/main/docs/img/compare.png)

## How it works
As long as your HAR files follow the [HAR specification](http://www.softwareishard.com/blog/har-12-spec/) you can use them in compare. Standard HARs give you the basics; HARs from WebPageTest and sitespeed.io/Browsertime unlock the extras.

The result page is the same for every HAR — sections that don't apply silently stay hidden, so a plain Chrome HAR doesn't show a half-empty "filmstrip" or "CPU" block.

### What you get for every HAR
* A **stacked waterfall** rendered by [waterfall-tools](https://github.com/pmeenan/waterfall-tools). Both HARs share the same time axis so widths are comparable at a glance. A **blend slider** fades HAR2 over HAR1, and a per-result toggle switches between **side-by-side** and **overlay**. Hovering a request highlights its peer in the other waterfall.
* A **Page X-ray** table (powered by [PageXray](https://github.com/sitespeedio/pagexray)) grouped into sections — Content, Render blocking, Visual metrics, Core Web Vitals, CPU and First/Third party. A **Δ column** shows the HAR2−HAR1 delta with regressions in red and improvements in green. An **"Only differences"** toggle hides rows where the two HARs match.
* A **request/response diff** when both HARs are for the same URL — added requests, removed requests, and (per-request) size, status and timing changes. Tick **"Strip version parameters"** on the start page (or set `"stripVersion": true` in your config) to ignore cache-busting query strings.
* A **domains** breakdown.
* Chrome HARs with priority hints also produce a **Render blocking** row (blocking / potentially blocking / in-body parser blocking).
* `.har` and `.har.gz` are both accepted on drag/drop and via URL.

### Extras for WebPageTest HARs
SpeedIndex, FirstVisualChange and, if the run was captured on Chrome with the CPU profile enabled, CPU timings.

### Extras for sitespeed.io / Browsertime HARs
* **Visual progress chart** with a line per HAR and vertical timing markers (First Visual Change, FCP, LCP and Speed Index) so a regressed metric shows up as two side-by-side guide lines.
* A **filmstrip** section sampled from the VisualProgress change points, with a lightbox for full-size frames, plus a small thumbnail strip under the visual-progress chart.
* The full set of visual metrics (FirstVisualChange, LargestImage, Logo, Heading, Speed Index, LastVisualChange, Visual Readiness).
* **Core Web Vitals**: First Contentful Paint, Largest Contentful Paint, Total Blocking Time, Cumulative Layout Shift.
* CPU details when sitespeed.io ran Lighthouse: Long Tasks, Total Blocking Time, Max Potential FID.

If you deploy your sitespeed.io result with **--resultBaseURL**, compare will pick up the screenshot, video and a link to the result page.

PageXray auto-detects first-party hosts from the page URL. If you want to override it (e.g. multi-domain sites), pass a regex via **--firstParty** when running sitespeed.io, or set `"firstParty"` in the config below; the result page then shows a first-vs-third party breakdown.

![First Party vs Third Party!](https://raw.githubusercontent.com/sitespeedio/compare/main/docs/img/firstparty.png)

## How to use it
You can either upload two HAR files (drag/drop) or give the URL to two URLs hosted online. If your HAR got multiple pages/runs, you can use just one HAR file.

Or you can just copy/paste your HAR file into the start page of [compare.sitespeed.io](https://compare.sitespeed.io/).

If you host your sitespeed.io result pages, you can copy/paste the URL to a page or to a specific run and Compare will automagically find the URL to the HAR file.

### Configuration
You can use a configuration JSON to choose which HAR files that will be tested. The minimal configuration needed:

```json
{
  "har1": {
    "url": "https://www.url.com/page1.har"
  },
  "har2": {
    "url": "https://www.url.com/page2.har"
  }
}
```

But you can also add some extra sugar. All the extras are optional:
```json
{
  "har1": {
    "url": "https://www.url.com/page1.har",
    "label": "Before change",
    "run": 1
  },
  "har2": {
    "url": "https://www.url.com/page2.har",
    "label": "After change",
    "run": 2
  },
  "title": "The page title used in the title bar",
  "firstParty" : " (.*wikipedia.*||.*wikimedia.*)", // RegEx that defines first party requests
  "stripVersion": true, // ignore query-string version params when diffing requests
  "comments": {
    "intro": "Extra information put at the top of the page",
    "waterfall": "Text displayed at top of the waterfall",
    "visualProgress": "Text displayed at the top of visual progress",
    "domains": "Text displayed at the top of domains",
    "requestDiff": "Text displayed at the top of request/response diff",
    "firstParty": "Text displayed at the top of first/third party"
  }
}
```

And then you can use your configuration file in different ways. You can copy/paste the configuration into the start page of [compare.sitespeed.io](https://compare.sitespeed.io).

Or you can use it like this: https://compare.sitespeed.io/?config=https://URL_TO_THE_CONFIG_FILE

Make sure that your server has correct [CORS settings](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing) so that compare.sitespeed.io can get the HAR file.

### Github gist
You can also use host your configuration file on a [Github gist](https://gist.github.com/) and use the gist id https://compare.sitespeed.io?gist=GIST_ID to get the configuration file.

You can checkout out our example:
[https://gist.github.com/soulgalore/94e4d997a78e03b32b939fcea63eae8e](https://gist.github.com/soulgalore/94e4d997a78e03b32b939fcea63eae8e)

You can also copy/paste gist id (or the full URL to the gist) into [compare.sitespeed.io](https://compare.sitespeed.io).

Thank you [Matt Hobbs](https://github.com/Nooshu) for sharing the gist idea!

### Compare on the fly
You can also compare two HAR files on the fly without using a configuration file.

Add the parameters **?har1=FULL_URL1&har2=FULL_URL2&compare=1** and the two HAR files will be compared.

## Developers

The project is built with [Vite](https://vitejs.dev/). Compare uses a small Vite-bundled entry (`src/main.js`, which pulls in the CSS and the waterfall-tools wrapper) plus a set of classic-script modules in `public/js/compare/` that share globals on `window`. Vite serves `public/` verbatim in both dev and production, so editing a file under `public/js/compare/` is a hard reload away from running.

Run the dev server:
```
npm run develop
```

Send us a PR / create an issue. If you have a big change coming up, please discuss it with us in an issue first.

## Deploy your own version
Deploying your own version is easy:
1. Clone the repo: `git clone git@github.com:sitespeedio/compare.git`
2. Build: `cd compare && npm install && npm run build`
3. Copy everything in `dist/` to your server.

The build version-stamps the classic compare scripts so a new deploy invalidates any stale copies cached by visitors.

## Privacy
We take your privacy really serious: We do not use any tracking software at all (no Google Analytics or any other tracking software) in [compare.sitespeed.io](https://compare.sitespeed.io). The page do no call home.

And you can deploy your own version of [compare.sitespeed.io](https://compare.sitespeed.io) if you want to be 100% in control.

### Be kind
If you deploy your own version: please keep the original logo and the link to the project. We have spent a lot of our free time to work on this!

## The logo
The compare logo (and the rest of the sitespeed.io logos) are made by [Mochamad Arief](https://twitter.com/mochawalk),
you can find his stuff at http://www.mochawalk.com/.