web-vitals-distribution

Probability Distribution Utility for Web Vitals

Many Web Vitals metrics are said to follow a lognormal distribution. This utility provides various features for working with the probability distributions of Web Vitals.

Installation

npm i web-vitals-distribution

Usage

Chrome UX Report provides data about your site’s Web Vitals performance, including the percentage of “good” thresholds, the percentage of “bad” thresholds, and the 75th percentile value.

This library reconstructs a lognormal distribution model for Web Vitals based on the percentages of the “good” threshold and the “bad” threshold.

You can then use the reconstructed lognormal distribution model for tasks such as estimating statistics like the mode, or drawing the PDF (probability density function).

For example, if the percentage of the “good” threshold for LCP is 61% and the “bad” threshold is 18%, you can reconstruct the lognormal distribution model as follows:

import { createWebVitalsDistribution } from 'web-vitals-distribution'

const logNormalDistribution = createWebVitalsDistribution('lcp', 0.61, 0.18)

// Draw PDF up to the 99th percentile
const p99 = logNormalDistribution.percentile(0.99)
for (let i = 0; i < 100; i++) {
  const x = (p99 * i) / 100
  const probability = logNormalDistribution.pdf(x)
}

// Get mode, median, mean
const mode = logNormalDistribution.mode()
const median = logNormalDistribution.median()
const mean = logNormalDistribution.mean()