Comments (2)
[email protected]
adds beforeSend
option, which you can use to customize final output. Use logic from lighthouse-plugin-field-performance and Lighthouse's computeLogNormal to get the final score.
Working example:
import { getCLS, getFID, getLCP } from 'web-vitals'
import { createApiReporter } from 'web-vitals-reporter'
const report = createApiReporter('/analytics', {
beforeSend: (result) => {
const lcpScore = computeLogNormalScore({ p10: 2500, median: 4500 }, result.LCP)
const fidScore = computeLogNormalScore({ p10: 100, median: 300 }, result.FID || 0)
const clsScore = computeLogNormalScore({ p10: 0.1, median: 0.25 }, result.CLS)
const score = Math.min(lcpScore, fidScore, clsScore)
return { lcpScore, fidScore, clsScore, score }
},
})
getLCP(report)
getFID(report)
getCLS(report)
// helpers extracted from Lighthouse
// https://github.com/GoogleChrome/lighthouse/blob/b36b694f12b668cc64d232b8fe7c0507011bfdb7/lighthouse-core/audits/audit.js#L79
/** @param {{median: number, p10: number}} controlPoints @param {number} value */
function computeLogNormalScore(controlPoints, value) {
const percentile = getLogNormalScore(controlPoints, value)
return clampTo2Decimals(percentile)
}
/** @param {{median: number, p10: number}} parameters @param {number} value */
function getLogNormalScore({ median, p10 }, value) {
// Required for the log-normal distribution.
if (median <= 0) throw new Error('median must be greater than zero')
if (p10 <= 0) throw new Error('p10 must be greater than zero')
// Not required, but if p10 > median, it flips around and becomes the p90 point.
if (p10 >= median) throw new Error('p10 must be less than the median')
// Non-positive values aren't in the distribution, so always 1.
if (value <= 0) return 1
// Closest double to `erfc-1(2 * 1/10)`.
const INVERSE_ERFC_ONE_FIFTH = 0.9061938024368232
// Shape (σ) is `log(p10/median) / (sqrt(2)*erfc^-1(2 * 1/10))` and
// standardizedX is `1/2 erfc(log(value/median) / (sqrt(2)*σ))`, so simplify a bit.
const xLogRatio = Math.log(value / median)
const p10LogRatio = -Math.log(p10 / median) // negate to keep σ positive.
const standardizedX = (xLogRatio * INVERSE_ERFC_ONE_FIFTH) / p10LogRatio
const complementaryPercentile = (1 - erf(standardizedX)) / 2
// Clamp to [0, 1] to avoid any floating-point out-of-bounds issues.
return Math.min(1, Math.max(0, complementaryPercentile))
}
/** @param {number} x */
function erf(x) {
// erf(-x) = -erf(x);
const sign = Math.sign(x)
x = Math.abs(x)
const a1 = 0.254829592
const a2 = -0.284496736
const a3 = 1.421413741
const a4 = -1.453152027
const a5 = 1.061405429
const p = 0.3275911
const t = 1 / (1 + p * x)
const y = t * (a1 + t * (a2 + t * (a3 + t * (a4 + t * a5))))
return sign * (1 - y * Math.exp(-x * x))
}
/** @param {number} val */
function clampTo2Decimals(val) {
return Math.round(val * 100) / 100
}
from web-vitals-reporter.
Maybe we could calculate a number similar to https://googlechrome.github.io/lighthouse/scorecalc/
from web-vitals-reporter.
Related Issues (6)
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from web-vitals-reporter.