Upgrading web-vitals 2 to 3
Breaking2.1.4 → 3.5.2Breaking4Deprecated1New8Changed8Fixed16Other6
BreakingUpgrade verdict
4 breaking changes.
In plain terms
- Metric functions are now named onXXX instead of getXXX.
- Every metric function now takes an options object as its second argument.
- Time to first byte is now reported again when a page is restored from the back/forward cache.
- The LCP metric now carries only the final largest contentful paint entry instead of all entries.
Must act Top 4 of 5 that need code or config changes
What you must change
Breaking4
Renames getXXX() functions to onXXX().
getXXX()onXXX()Adds a config object parameter to all metric functions.
Reports TTFB after a bfcache restore.
TTFBOnly includes the last LCP entry in metric entries.
LCPDeprecations to plan for
Deprecated1
Adds deprecation notices for base+polyfill builds.
API changes
Generated by DepDelta from published .d.ts files. Not mixed with prose notes.
- added:
export * from './dist/modules/attribution'
- removed:
export * from './dist/modules/index' - added:
export * from './dist/modules/deprecated' - added:
export * from './dist/modules/types' - added:
export { onCLS } from './dist/modules/index' - added:
export { onFCP } from './dist/modules/index' - added:
export { onFID } from './dist/modules/index' - added:
export { onINP } from './dist/modules/index' - added:
export { onLCP } from './dist/modules/index' - added:
export { onTTFB } from './dist/modules/index'
- added:
interface Document - added:
interface LargestContentfulPaint extends PerformanceEntry - added:
interface LayoutShift extends PerformanceEntry - added:
interface LayoutShiftAttribution - added:
interface Performance - added:
interface PerformanceEventTiming extends PerformanceEntry - added:
interface PerformanceNavigationTiming - added:
interface PerformanceObserverInit - added:
method Performance.getEntriesByType<K extends keyof PerformanceEntryMap>(type: K): PerformanceEntryMap[K][] - added:
property Document.prerendering?: boolean - added:
property Document.wasDiscarded?: boolean - added:
property LargestContentfulPaint.element?: Element - added:
property LargestContentfulPaint.id: string - added:
property LargestContentfulPaint.loadTime: DOMHighResTimeStamp - added:
property LargestContentfulPaint.renderTime: DOMHighResTimeStamp - added:
property LargestContentfulPaint.size: number - added:
property LargestContentfulPaint.url: string - added:
property LayoutShift.hadRecentInput: boolean - added:
property LayoutShift.sources: LayoutShiftAttribution[] - added:
property LayoutShift.value: number - added:
property LayoutShiftAttribution.currentRect: DOMRectReadOnly - added:
property LayoutShiftAttribution.node?: Node - added:
property LayoutShiftAttribution.previousRect: DOMRectReadOnly - added:
property Performance.interactionCount: number - added:
property PerformanceEventTiming.duration: DOMHighResTimeStamp - added:
property PerformanceEventTiming.interactionId?: number - added:
property PerformanceNavigationTiming.activationStart?: number - added:
property PerformanceObserverInit.durationThreshold?: number
- added:
export * from './types' - added:
export { CLSThresholds } from './onCLS' - added:
export { FCPThresholds } from './onFCP' - added:
export { FIDThresholds } from './onFID' - added:
export { INPThresholds } from './onINP' - added:
export { LCPThresholds } from './onLCP' - added:
export { TTFBThresholds } from './onTTFB' - added:
export { onCLS } from './attribution/onCLS' - added:
export { onFCP } from './attribution/onFCP' - added:
export { onFID } from './attribution/onFID' - added:
export { onINP } from './attribution/onINP' - added:
export { onLCP } from './attribution/onLCP' - added:
export { onTTFB } from './attribution/onTTFB'
- added:
const onCLS: (onReport: CLSReportCallbackWithAttribution, opts?: ReportOpts) => void
- added:
const onFCP: (onReport: FCPReportCallbackWithAttribution, opts?: ReportOpts) => void
- added:
const onFID: (onReport: FIDReportCallbackWithAttribution, opts?: ReportOpts) => void
- added:
const onINP: (onReport: INPReportCallbackWithAttribution, opts?: ReportOpts) => void
- added:
const onLCP: (onReport: LCPReportCallbackWithAttribution, opts?: ReportOpts) => void
- added:
const onTTFB: (onReport: TTFBReportCallbackWithAttribution, opts?: ReportOpts) => void
- added:
export { ReportCallback as ReportHandler } from './types' - added:
export { onCLS as getCLS } from './onCLS' - added:
export { onFCP as getFCP } from './onFCP' - added:
export { onFID as getFID } from './onFID' - added:
export { onINP as getINP } from './onINP' - added:
export { onLCP as getLCP } from './onLCP' - added:
export { onTTFB as getTTFB } from './onTTFB'
- removed:
const getCLS: (onReport: ReportHandler, reportAllChanges?: boolean | undefined) => void
- removed:
const getFCP: (onReport: ReportHandler, reportAllChanges?: boolean | undefined) => void
- removed:
const getFID: (onReport: ReportHandler, reportAllChanges?: boolean | undefined) => void
- removed:
const getLCP: (onReport: ReportHandler, reportAllChanges?: boolean | undefined) => void
- removed:
const getTTFB: (onReport: ReportHandler) => void
- removed:
export { getCLS } from './getCLS' - removed:
export { getFCP } from './getFCP' - removed:
export { getFID } from './getFID' - removed:
export { getLCP } from './getLCP' - removed:
export { getTTFB } from './getTTFB' - added:
export * from './deprecated' - added:
export { CLSThresholds } from './onCLS' - added:
export { FCPThresholds } from './onFCP' - added:
export { FIDThresholds } from './onFID' - added:
export { INPThresholds } from './onINP' - added:
export { LCPThresholds } from './onLCP' - added:
export { TTFBThresholds } from './onTTFB' - added:
export { onCLS } from './onCLS' - added:
export { onFCP } from './onFCP' - added:
export { onFID } from './onFID' - added:
export { onINP } from './onINP' - added:
export { onLCP } from './onLCP' - added:
export { onTTFB } from './onTTFB'
- added:
const getBFCacheRestoreTime: () => number - added:
const onBFCacheRestore: (cb: onBFCacheRestoreCallback) => void
- changed:
const bindReporter: (callback: ReportHandler, metric: Metric, reportAllChanges?: boolean | undefined) => (forceReport?: boolean | undefined) => void → const bindReporter: <MetricName extends 'CLS' | 'FCP' | 'FID' | 'INP' | 'LCP' | 'TTFB'>(callback: (metric: Extract<import('../types.js').CLSMetric, { name: MetricName }> | Extract…
- added:
const doubleRAF: (cb: () => unknown) => void
- added:
const getActivationStart: () => number
- added:
const getLoadState: (timestamp: number) => LoadState
- added:
const getNavigationEntry: () => PerformanceNavigationTiming | NavigationTimingPolyfillEntry | undefined
- added:
const getSelector: (node: Node | null | undefined, maxLen?: number) => string
- changed:
const initMetric: (name: Metric['name'], value?: number | undefined) => Metric → const initMetric: <MetricName extends 'CLS' | 'FCP' | 'FID' | 'INP' | 'LCP' | 'TTFB'>(name: MetricName, value?: number) => { name: MetricName; value: number; rating: 'good'; del…
- removed:
call PerformanceEntryHandler(entry: PerformanceEntry): void - removed:
interface PerformanceEntryHandler - changed:
const observe: (type: string, callback: PerformanceEntryHandler) => PerformanceObserver | undefined → const observe: <K extends keyof PerformanceEntryMap>(type: K, callback: (entries: PerformanceEntryMap[K]) => void, opts?: PerformanceObserverInit) => PerformanceObserver | un…
- removed:
const onBFCacheRestore: (cb: onBFCacheRestoreCallback) => void
- changed:
const onHidden: (cb: OnHiddenCallback, once?: boolean | undefined) => void → const onHidden: (cb: OnHiddenCallback) => void
- added:
const getInteractionCount: () => number - added:
const initInteractionCountPolyfill: () => void - added:
declare global
- added:
call RunOnceCallback(arg: unknown): void - added:
const runOnce: (cb: RunOnceCallback) => (arg: unknown) => void - added:
interface RunOnceCallback
- added:
const whenActivated: (callback: () => void) => void
- added:
const CLSThresholds: MetricRatingThresholds - added:
const onCLS: (onReport: CLSReportCallback, opts?: ReportOpts) => void
- added:
const FCPThresholds: MetricRatingThresholds - added:
const onFCP: (onReport: FCPReportCallback, opts?: ReportOpts) => void
- added:
const FIDThresholds: MetricRatingThresholds - added:
const onFID: (onReport: FIDReportCallback, opts?: ReportOpts) => void
- added:
const INPThresholds: MetricRatingThresholds - added:
const onINP: (onReport: INPReportCallback, opts?: ReportOpts) => void
- added:
const LCPThresholds: MetricRatingThresholds - added:
const onLCP: (onReport: LCPReportCallback, opts?: ReportOpts) => void
- added:
const TTFBThresholds: MetricRatingThresholds - added:
const onTTFB: (onReport: TTFBReportCallback, opts?: ReportOpts) => void
- removed:
call FirstInputPolyfillCallback(entry: FirstInputPolyfillEntry): void - removed:
call ReportHandler(metric: Metric): void - removed:
interface FirstInputPolyfillCallback - removed:
interface Metric - removed:
interface PerformanceEventTiming extends PerformanceEntry - removed:
interface ReportHandler - removed:
property Metric.delta: number - removed:
property Metric.entries: (PerformanceEntry | FirstInputPolyfillEntry | NavigationTimingPolyfillEntry)[] - removed:
property Metric.id: string - removed:
property Metric.name: 'CLS' | 'FCP' | 'FID' | 'LCP' | 'TTFB' - removed:
property Metric.value: number - removed:
property PerformanceEventTiming.cancelable?: boolean - removed:
property PerformanceEventTiming.duration: DOMHighResTimeStamp - removed:
property PerformanceEventTiming.processingEnd: DOMHighResTimeStamp - removed:
property PerformanceEventTiming.processingStart: DOMHighResTimeStamp - removed:
property PerformanceEventTiming.target?: Element - removed:
type FirstInputPolyfillEntry = Omit<PerformanceEventTiming, 'processingEnd' | 'toJSON'> - removed:
type NavigationTimingPolyfillEntry = Omit<PerformanceNavigationTiming, 'initiatorType' | 'nextHopProtocol' | 'redirectCount' | 'transferSize' | 'encodedBodySize' | 'decodedBodySize' | 'toJSON'> - added:
export * from './types/base' - added:
export * from './types/cls' - added:
export * from './types/fcp' - added:
export * from './types/fid' - added:
export * from './types/inp' - added:
export * from './types/lcp' - added:
export * from './types/polyfills' - added:
export * from './types/ttfb'
- added:
call ReportCallback(metric: MetricType): void - added:
interface Metric - added:
interface MetricWithAttribution extends Metric - added:
interface ReportCallback - added:
interface ReportOpts - added:
property Metric.delta: number - added:
property Metric.entries: (PerformanceEntry | LayoutShift | FirstInputPolyfillEntry | NavigationTimingPolyfillEntry)[] - added:
property Metric.id: string - added:
property Metric.name: 'CLS' | 'FCP' | 'FID' | 'INP' | 'LCP' | 'TTFB' - added:
property Metric.navigationType: 'navigate' | 'reload' | 'back-forward' | 'back-forward-cache' | 'prerender' | 'restore' - added:
property Metric.rating: 'good' | 'needs-improvement' | 'poor' - added:
property Metric.value: number - added:
property MetricWithAttribution.attribution: { [key: string]: unknown } - added:
property ReportOpts.durationThreshold?: number - added:
property ReportOpts.reportAllChanges?: boolean - added:
type LoadState = 'loading' | 'dom-interactive' | 'dom-content-loaded' | 'complete' - added:
type MetricRatingThresholds = [number, number] - added:
type MetricType = CLSMetric | FCPMetric | FIDMetric | INPMetric | LCPMetric | TTFBMetric
- added:
call CLSReportCallback(metric: CLSMetric): void - added:
call CLSReportCallbackWithAttribution(metric: CLSMetricWithAttribution): void - added:
interface CLSAttribution - added:
interface CLSMetric extends Metric - added:
interface CLSMetricWithAttribution extends CLSMetric - added:
interface CLSReportCallback - added:
interface CLSReportCallbackWithAttribution - added:
property CLSAttribution.largestShiftEntry?: LayoutShift - added:
property CLSAttribution.largestShiftSource?: LayoutShiftAttribution - added:
property CLSAttribution.largestShiftTarget?: string - added:
property CLSAttribution.largestShiftTime?: DOMHighResTimeStamp - added:
property CLSAttribution.largestShiftValue?: number - added:
property CLSAttribution.loadState?: LoadState - added:
property CLSMetric.entries: LayoutShift[] - added:
property CLSMetric.name: 'CLS' - added:
property CLSMetricWithAttribution.attribution: CLSAttribution
- added:
call FCPReportCallback(metric: FCPMetric): void - added:
call FCPReportCallbackWithAttribution(metric: FCPMetricWithAttribution): void - added:
interface FCPAttribution - added:
interface FCPMetric extends Metric - added:
interface FCPMetricWithAttribution extends FCPMetric - added:
interface FCPReportCallback - added:
interface FCPReportCallbackWithAttribution - added:
property FCPAttribution.fcpEntry?: PerformancePaintTiming - added:
property FCPAttribution.firstByteToFCP: number - added:
property FCPAttribution.loadState: LoadState - added:
property FCPAttribution.navigationEntry?: PerformanceNavigationTiming | NavigationTimingPolyfillEntry - added:
property FCPAttribution.timeToFirstByte: number - added:
property FCPMetric.entries: PerformancePaintTiming[] - added:
property FCPMetric.name: 'FCP' - added:
property FCPMetricWithAttribution.attribution: FCPAttribution
- added:
call FIDReportCallback(metric: FIDMetric): void - added:
call FIDReportCallbackWithAttribution(metric: FIDMetricWithAttribution): void - added:
interface FIDAttribution - added:
interface FIDMetric extends Metric - added:
interface FIDMetricWithAttribution extends FIDMetric - added:
interface FIDReportCallback - added:
interface FIDReportCallbackWithAttribution - added:
property FIDAttribution.eventEntry: PerformanceEventTiming | FirstInputPolyfillEntry - added:
property FIDAttribution.eventTarget: string - added:
property FIDAttribution.eventTime: number - added:
property FIDAttribution.eventType: string - added:
property FIDAttribution.loadState: LoadState - added:
property FIDMetric.entries: (PerformanceEventTiming | FirstInputPolyfillEntry)[] - added:
property FIDMetric.name: 'FID' - added:
property FIDMetricWithAttribution.attribution: FIDAttribution
- added:
call INPReportCallback(metric: INPMetric): void - added:
call INPReportCallbackWithAttribution(metric: INPMetricWithAttribution): void - added:
interface INPAttribution - added:
interface INPMetric extends Metric - added:
interface INPMetricWithAttribution extends INPMetric - added:
interface INPReportCallback - added:
interface INPReportCallbackWithAttribution - added:
property INPAttribution.eventEntry?: PerformanceEventTiming - added:
property INPAttribution.eventTarget?: string - added:
property INPAttribution.eventTime?: number - added:
property INPAttribution.eventType?: string - added:
property INPAttribution.loadState?: LoadState - added:
property INPMetric.entries: PerformanceEventTiming[] - added:
property INPMetric.name: 'INP' - added:
property INPMetricWithAttribution.attribution: INPAttribution
- added:
call LCPReportCallback(metric: LCPMetric): void - added:
call LCPReportCallbackWithAttribution(metric: LCPMetricWithAttribution): void - added:
interface LCPAttribution - added:
interface LCPMetric extends Metric - added:
interface LCPMetricWithAttribution extends LCPMetric - added:
interface LCPReportCallback - added:
interface LCPReportCallbackWithAttribution - added:
property LCPAttribution.element?: string - added:
property LCPAttribution.elementRenderDelay: number - added:
property LCPAttribution.lcpEntry?: LargestContentfulPaint - added:
property LCPAttribution.lcpResourceEntry?: PerformanceResourceTiming - added:
property LCPAttribution.navigationEntry?: PerformanceNavigationTiming | NavigationTimingPolyfillEntry - added:
property LCPAttribution.resourceLoadDelay: number - added:
property LCPAttribution.resourceLoadTime: number - added:
property LCPAttribution.timeToFirstByte: number - added:
property LCPAttribution.url?: string - added:
property LCPMetric.entries: LargestContentfulPaint[] - added:
property LCPMetric.name: 'LCP' - added:
property LCPMetricWithAttribution.attribution: LCPAttribution
- added:
call FirstInputPolyfillCallback(entry: FirstInputPolyfillEntry): void - added:
interface FirstInputPolyfillCallback - added:
type FirstInputPolyfillEntry = Omit<PerformanceEventTiming, 'processingEnd'> - added:
type NavigationTimingPolyfillEntry = Omit<PerformanceNavigationTiming, 'initiatorType' | 'nextHopProtocol' | 'redirectCount' | 'transferSize' | 'encodedBodySize' | 'decodedBodySize' | 'type'> & {…
- added:
call TTFBReportCallback(metric: TTFBMetric): void - added:
call TTFBReportCallbackWithAttribution(metric: TTFBMetricWithAttribution): void - added:
interface TTFBAttribution - added:
interface TTFBMetric extends Metric - added:
interface TTFBMetricWithAttribution extends TTFBMetric - added:
interface TTFBReportCallback - added:
interface TTFBReportCallbackWithAttribution - added:
property TTFBAttribution.connectionTime: number - added:
property TTFBAttribution.dnsTime: number - added:
property TTFBAttribution.navigationEntry?: PerformanceNavigationTiming | NavigationTimingPolyfillEntry - added:
property TTFBAttribution.requestTime: number - added:
property TTFBAttribution.waitingTime: number - added:
property TTFBMetric.entries: PerformanceNavigationTiming[] | NavigationTimingPolyfillEntry[] - added:
property TTFBMetric.name: 'TTFB' - added:
property TTFBMetricWithAttribution.attribution: TTFBAttribution