• Stars
    star
    110
  • Rank 316,770 (Top 7 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created about 7 years ago
  • Updated 10 months ago

Reviews

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

Repository Details

Compare HAR files.

Compare HAR files

Make it easier to find regressions by comparing your HAR files. Test it out https://compare.sitespeed.io or look at the video: https://youtu.be/dCThwpglIeE

Logo

First: Shout out!

We couldn't built compare without the support or inspiration from the following people:

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

Comparing

Compare two different HAR files

How it works

As long as your HAR files follow the HAR specification you can use them in Compare. Standard HARs will give you some basic functionality and HARs from WebPageTest and sitespeed.io will give you more.

HARs from Firefox/Chrome/Safari (and other browsers).

For all HARs we will show the waterfall (using PerfCascade) and statistics for the page (using PageXray).

WebPageTest

If you add a WebPageTest HAR we will show SpeedIndex and FirstVisualChange and if you used Chrome to collect CPU stats, we will show that too. You will get some extra sugar if your HAR is from WebPageTest! Do you have something else that we should add? Create an issue or send a PR!

sitespeed.io/Browsertime

If you want even more sugar, you should use HAR files from sitespeed.io or Browsertime: SpeedIndex, FirstVisualChange, LastVisualChange and a graph for VisualProgress.

If you deploy your result from your sitespeed.io run to a server and use --resultBaseURL when you run sitespeed.io, we will also pickup the screenshot, video and a link to the result page.

If you also run with --firstParty (adding a regex that show which assets that are first/third parties) we will will show data grouped by party.

First Party vs Third Party!

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.

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:

{
  "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:

{
  "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
  "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.

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 so that compare.sitespeed.io can get the HAR file.

Github gist

You can also use host your configuration file on a Github gist 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

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

Thank you Matt Hobbs 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

To run the project locally start a server with:

npm run develop

Send us a PR/create an issue. If you have 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 [email protected]:sitespeedio/compare.git
  2. Build: cd compare && npm run build
  3. Copy everything in build/ to your server

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. The page do no call home.

And you can deploy your own version of 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, you can find his stuff at http://www.mochawalk.com/.

More Repositories

1

sitespeed.io

sitespeed.io is an open-source tool for comprehensive web performance analysis, enabling you to test, monitor, and optimize your websiteโ€™s speed using real browsers in various environments.
JavaScript
4,716
star
2

coach

Clear Eyes. Full Hearts. Canโ€™t Lose.
JavaScript
1,204
star
3

browsertime

Measure and Optimize Web Performance
JavaScript
602
star
4

throttle

Throttle your network connection [Linux/Mac OS X]
JavaScript
332
star
5

chrome-har

Create HAR files from Chrome Debugging Protocol data
JavaScript
138
star
6

pagexray

Xray your HAR file and know all about the page
JavaScript
83
star
7

grafana-bootstrap-docker

Shell
60
star
8

sitespeed.io-docker

Shell
52
star
9

dashboard.sitespeed.io

Example how to use sitespeed.io to monitor the performance of your web site
JavaScript
45
star
10

jenkins.sitespeed.io

A Jenkins plugin for sitespeed.io
Java
31
star
11

grunt-sitespeedio

Test performance budgets and performance best practice rules using sitespeed.io
JavaScript
28
star
12

plugin-lighthouse

Lighthouse plugin for sitespeed.io
JavaScript
26
star
13

chrome-trace

Process Chrome trace logs in Node.
JavaScript
14
star
14

plugins

List of 3rd party plugins for sitespeed.io
10
star
15

run.sitespeed.io

Online version of sitespeed.io
JavaScript
9
star
16

docker-browsers

Dockerfile
8
star
17

plugin-gpsi

GPSI plugin for sitespeed.io
JavaScript
7
star
18

humble

Raspberry Pi WiFi network link conditioner
6
star
19

plugin-third-party-decode

Run Paul Irish Third Party Decode library to categorise third parties
JavaScript
5
star
20

chromedriver

Install and launch Chromedriver for Mac, Linux or Windows.
JavaScript
4
star
21

sltc

JavaScript
4
star
22

browsertime-extension

Extension that runs in Firefox/Chrome to get some extra fire for Browsertime
JavaScript
3
star
23

logo

All the logos for sitespeed.io
3
star
24

plugin-webpagetest

sitespeed.io plugin for running WebPageTest
JavaScript
2
star
25

travis

Example repo for using sitespeed.io budget using Travis
HTML
2
star
26

docker-node

Base Docker container for sitespeed.io with Ubuntu & NodeJS
Dockerfile
1
star
27

raspberrypi

Pre-made raspberry pi image to drive Android phones
1
star
28

geckodriver

Install and launch Geckodriver for Mac, Linux or Windows.
JavaScript
1
star