https://github.com/paulirish/speedline

Calculate the speed index from devtools performance trace
https://github.com/paulirish/speedline

Last synced: 13 days ago
JSON representation

Calculate the speed index from devtools performance trace

• Host: GitHub
• URL: https://github.com/paulirish/speedline
• Owner: paulirish
• License: mit
• Created: 2016-03-24T21:09:46.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2023-07-24T15:11:42.000Z (over 1 year ago)
• Last Synced: 2024-04-14T00:08:29.895Z (7 months ago)
• Language: JavaScript
• Homepage:
• Size: 7.38 MB
• Stars: 788
• Watchers: 24
• Forks: 63
• Open Issues: 17
• Metadata Files:
  • Readme: readme.md
  • License: license

Awesome Lists containing this project

README

        
# speedline [![Build Status](https://travis-ci.org/paulirish/speedline.svg?branch=master)](https://travis-ci.org/paulirish/speedline) [![NPM speedline package](https://img.shields.io/npm/v/speedline.svg)](https://npmjs.org/package/speedline)

![speedline screenshot](/screenshot.png?raw=true)

## Background

The [Navigation Timing API](https://developer.mozilla.org/en-US/docs/Web/API/Navigation_timing_API) provides useful data that can be used to measure the performance of a website. Unfortunately this API has never been good at capturing the actual *user experience*.

The [Speed Index](https://github.com/WPO-Foundation/webpagetest-docs/blob/master/src/metrics/SpeedIndex.md), introduced by [WebpageTest.org](http://www.webpagetest.org/), aims to solve this issue. It measures **how fast the page content is visually displayed**. The current implementation is based on the **Visual Progress from Video Capture** calculation method described on the [Speed Index](https://github.com/WPO-Foundation/webpagetest-docs/blob/master/user/Metrics/SpeedIndex.md) page. The visual progress is calculated by comparing the distance between the histogram of the current frame and the final frame.

Speedline also calculates the **perceptual speed index**, based on the same principal as the original speed index, but it computes the visual progression between frames using the [SSIM](https://en.wikipedia.org/wiki/Structural_similarity) instead of the histogram distance.

## Install the CLI

```bash

$ npm install -g speedline

```

## Usage

> **Note:** You should enable the `screenshot` options before recording the timeline.

```bash

$ speedline --help

  Usage

    $ speedline  [options]

  Options

    --pretty  Pretty print the output

    --fast    Skip parsing frames between similar ones

                Disclaimer: may result in different metrics due to skipped frames

  Examples

    $ speedline ./timeline.json

```

By default the CLI will output the same output as [visual metrics](https://github.com/WPO-Foundation/visualmetrics). You can use the `--pretty` option if you want to have the histogram.

## The `speedline-core` module

See [readme of `speedline-core`](https://github.com/paulirish/speedline/blob/master/core/readme.md).

## License

MIT © [Pierre-Marie Dartus](https://github.com/pmdartus)

## Dev

The repo is split into CLI and core. The core dependencies are duplicated in both package.json files. It is what it is.

To install: 

```sh

yarn && yarn install-all

````

#### Releasing

Releasing both CLI and core:

```sh

yarn version # and bump appropriately

# update the version in core/package.json

git commit --amend --all # to amend into the tagged commit

npm publish

cd core && npm publish

git push

```