web-vitals
Advanced tools
Comparing version 2.1.4 to 3.0.0-beta.0
@@ -1,6 +0,8 @@ | ||
export { getCLS } from './getCLS.js'; | ||
export { getFCP } from './getFCP.js'; | ||
export { getFID } from './getFID.js'; | ||
export { getLCP } from './getLCP.js'; | ||
export { getTTFB } from './getTTFB.js'; | ||
export { onCLS } from './onCLS.js'; | ||
export { onFCP } from './onFCP.js'; | ||
export { onFID } from './onFID.js'; | ||
export { onINP } from './onINP.js'; | ||
export { onLCP } from './onLCP.js'; | ||
export { onTTFB } from './onTTFB.js'; | ||
export * from './deprecated.js'; | ||
export * from './types.js'; |
@@ -16,7 +16,9 @@ /* | ||
*/ | ||
export { getCLS } from './getCLS.js'; | ||
export { getFCP } from './getFCP.js'; | ||
export { getFID } from './getFID.js'; | ||
export { getLCP } from './getLCP.js'; | ||
export { getTTFB } from './getTTFB.js'; | ||
export { onCLS } from './onCLS.js'; | ||
export { onFCP } from './onFCP.js'; | ||
export { onFID } from './onFID.js'; | ||
export { onINP } from './onINP.js'; | ||
export { onLCP } from './onLCP.js'; | ||
export { onTTFB } from './onTTFB.js'; | ||
export * from './deprecated.js'; | ||
export * from './types.js'; |
@@ -16,3 +16,3 @@ /* | ||
*/ | ||
import { onBFCacheRestore } from './onBFCacheRestore.js'; | ||
import { onBFCacheRestore } from './bfcache.js'; | ||
import { onHidden } from './onHidden.js'; | ||
@@ -19,0 +19,0 @@ let firstHiddenTime = -1; |
@@ -16,4 +16,7 @@ /* | ||
*/ | ||
import { isBFCacheRestore } from './bfcache.js'; | ||
import { generateUniqueID } from './generateUniqueID.js'; | ||
import { getNavigationEntry } from './getNavigationEntry.js'; | ||
export const initMetric = (name, value) => { | ||
const navigationEntry = getNavigationEntry(); | ||
return { | ||
@@ -24,4 +27,6 @@ name, | ||
entries: [], | ||
id: generateUniqueID() | ||
id: generateUniqueID(), | ||
navigationType: isBFCacheRestore() ? 'back_forward_cache' : | ||
navigationEntry && navigationEntry.type, | ||
}; | ||
}; |
@@ -1,3 +0,4 @@ | ||
export interface PerformanceEntryHandler { | ||
(entry: PerformanceEntry): void; | ||
import { Metric } from '../types.js'; | ||
interface PerformanceEntriesHandler { | ||
(entries: Metric['entries']): void; | ||
} | ||
@@ -12,2 +13,3 @@ /** | ||
*/ | ||
export declare const observe: (type: string, callback: PerformanceEntryHandler) => PerformanceObserver | undefined; | ||
export declare const observe: (type: string, callback: PerformanceEntriesHandler, opts?: PerformanceObserverInit | undefined) => PerformanceObserver | undefined; | ||
export {}; |
@@ -24,12 +24,12 @@ /* | ||
*/ | ||
export const observe = (type, callback) => { | ||
export const observe = (type, callback, opts) => { | ||
try { | ||
if (PerformanceObserver.supportedEntryTypes.includes(type)) { | ||
// More extensive feature detect needed for Firefox due to: | ||
// https://github.com/GoogleChrome/web-vitals/issues/142 | ||
if (type === 'first-input' && !('PerformanceEventTiming' in self)) { | ||
return; | ||
} | ||
const po = new PerformanceObserver((l) => l.getEntries().map(callback)); | ||
po.observe({ type, buffered: true }); | ||
const po = new PerformanceObserver((list) => { | ||
callback(list.getEntries()); | ||
}); | ||
po.observe(Object.assign({ | ||
type, | ||
buffered: true, | ||
}, opts || {})); | ||
return po; | ||
@@ -36,0 +36,0 @@ } |
export interface Metric { | ||
name: 'CLS' | 'FCP' | 'FID' | 'LCP' | 'TTFB'; | ||
name: 'CLS' | 'FCP' | 'FID' | 'INP' | 'LCP' | 'TTFB'; | ||
value: number; | ||
delta: number; | ||
id: string; | ||
entries: (PerformanceEntry | FirstInputPolyfillEntry | NavigationTimingPolyfillEntry)[]; | ||
entries: (PerformanceEntry | LayoutShift | FirstInputPolyfillEntry | NavigationTimingPolyfillEntry)[]; | ||
navigationType: NavigationType | 'back_forward_cache' | undefined; | ||
} | ||
@@ -11,2 +12,12 @@ export interface ReportHandler { | ||
} | ||
interface PerformanceEntryMap { | ||
'navigation': PerformanceNavigationTiming; | ||
'resource': PerformanceResourceTiming; | ||
'paint': PerformancePaintTiming; | ||
} | ||
declare global { | ||
interface Performance { | ||
getEntriesByType<K extends keyof PerformanceEntryMap>(type: K): PerformanceEntryMap[K][]; | ||
} | ||
} | ||
export interface PerformanceEventTiming extends PerformanceEntry { | ||
@@ -18,8 +29,16 @@ processingStart: DOMHighResTimeStamp; | ||
target?: Element; | ||
interactionId?: number; | ||
} | ||
export declare type FirstInputPolyfillEntry = Omit<PerformanceEventTiming, 'processingEnd' | 'toJSON'>; | ||
export interface LayoutShift extends PerformanceEntry { | ||
value: number; | ||
hadRecentInput: boolean; | ||
} | ||
export interface PerformanceObserverInit { | ||
durationThreshold?: number; | ||
} | ||
export declare type FirstInputPolyfillEntry = Omit<PerformanceEventTiming, 'processingEnd'>; | ||
export interface FirstInputPolyfillCallback { | ||
(entry: FirstInputPolyfillEntry): void; | ||
} | ||
export declare type NavigationTimingPolyfillEntry = Omit<PerformanceNavigationTiming, 'initiatorType' | 'nextHopProtocol' | 'redirectCount' | 'transferSize' | 'encodedBodySize' | 'decodedBodySize' | 'toJSON'>; | ||
export declare type NavigationTimingPolyfillEntry = Omit<PerformanceNavigationTiming, 'initiatorType' | 'nextHopProtocol' | 'redirectCount' | 'transferSize' | 'encodedBodySize' | 'decodedBodySize'>; | ||
export interface WebVitalsGlobal { | ||
@@ -36,1 +55,2 @@ firstInputPolyfill: (onFirstInput: FirstInputPolyfillCallback) => void; | ||
} | ||
export {}; |
@@ -1,1 +0,1 @@ | ||
!function(e){"use strict";var t=function(e,t){return{name:e,value:void 0===t?-1:t,delta:0,entries:[],id:"v2-".concat(Date.now(),"-").concat(Math.floor(8999999999999*Math.random())+1e12)}},n=function(e,t){try{if(PerformanceObserver.supportedEntryTypes.includes(e)){if("first-input"===e&&!("PerformanceEventTiming"in self))return;var n=new PerformanceObserver((function(e){return e.getEntries().map(t)}));return n.observe({type:e,buffered:!0}),n}}catch(e){}},i=function(e,t){var n=function n(i){"pagehide"!==i.type&&"hidden"!==document.visibilityState||(e(i),t&&(removeEventListener("visibilitychange",n,!0),removeEventListener("pagehide",n,!0)))};addEventListener("visibilitychange",n,!0),addEventListener("pagehide",n,!0)},r=function(e){addEventListener("pageshow",(function(t){t.persisted&&e(t)}),!0)},a=function(e,t,n){var i;return function(r){t.value>=0&&(r||n)&&(t.delta=t.value-(i||0),(t.delta||void 0===i)&&(i=t.value,e(t)))}},o=-1,u=function(){i((function(e){var t=e.timeStamp;o=t}),!0)},c=function(){return o<0&&((o=window.webVitals.firstHiddenTime)===1/0&&u(),r((function(){setTimeout((function(){o="hidden"===document.visibilityState?0:1/0,u()}),0)}))),{get firstHiddenTime(){return o}}},s=function(e,i){var o,u=c(),s=t("FCP"),f=function(e){"first-contentful-paint"===e.name&&(m&&m.disconnect(),e.startTime<u.firstHiddenTime&&(s.value=e.startTime,s.entries.push(e),o(!0)))},d=window.performance&&performance.getEntriesByName&&performance.getEntriesByName("first-contentful-paint")[0],m=d?null:n("paint",f);(d||m)&&(o=a(e,s,i),d&&f(d),r((function(n){s=t("FCP"),o=a(e,s,i),requestAnimationFrame((function(){requestAnimationFrame((function(){s.value=performance.now()-n.timeStamp,o(!0)}))}))})))},f=!1,d=-1,m={};e.getCLS=function(e,o){f||(s((function(e){d=e.value})),f=!0);var u,c=function(t){d>-1&&e(t)},m=t("CLS",0),v=0,l=[],p=function(e){if(!e.hadRecentInput){var t=l[0],n=l[l.length-1];v&&e.startTime-n.startTime<1e3&&e.startTime-t.startTime<5e3?(v+=e.value,l.push(e)):(v=e.value,l=[e]),v>m.value&&(m.value=v,m.entries=l,u())}},T=n("layout-shift",p);T&&(u=a(c,m,o),i((function(){T.takeRecords().map(p),u(!0)})),r((function(){v=0,d=-1,m=t("CLS",0),u=a(c,m,o)})))},e.getFCP=s,e.getFID=function(e,o){var u,s=c(),f=t("FID"),d=function(e){e.startTime<s.firstHiddenTime&&(f.value=e.processingStart-e.startTime,f.entries.push(e),u(!0))},m=n("first-input",d);u=a(e,f,o),m&&i((function(){m.takeRecords().map(d),m.disconnect()}),!0),m||window.webVitals.firstInputPolyfill(d),r((function(){f=t("FID"),u=a(e,f,o),window.webVitals.resetFirstInputPolyfill(),window.webVitals.firstInputPolyfill(d)}))},e.getLCP=function(e,o){var u,s=c(),f=t("LCP"),d=function(e){var t=e.startTime;t<s.firstHiddenTime&&(f.value=t,f.entries.push(e),u())},v=n("largest-contentful-paint",d);if(v){u=a(e,f,o);var l=function(){m[f.id]||(v.takeRecords().map(d),v.disconnect(),m[f.id]=!0,u(!0))};["keydown","click"].forEach((function(e){addEventListener(e,l,{once:!0,capture:!0})})),i(l,!0),r((function(n){f=t("LCP"),u=a(e,f,o),requestAnimationFrame((function(){requestAnimationFrame((function(){f.value=performance.now()-n.timeStamp,m[f.id]=!0,u(!0)}))}))}))}},e.getTTFB=function(e){var n,i=t("TTFB");n=function(){try{var t=performance.getEntriesByType("navigation")[0]||function(){var e=performance.timing,t={entryType:"navigation",startTime:0};for(var n in e)"navigationStart"!==n&&"toJSON"!==n&&(t[n]=Math.max(e[n]-e.navigationStart,0));return t}();if(i.value=i.delta=t.responseStart,i.value<0||i.value>performance.now())return;i.entries=[t],e(i)}catch(e){}},"complete"===document.readyState?setTimeout(n,0):addEventListener("load",(function(){return setTimeout(n,0)}))},Object.defineProperty(e,"__esModule",{value:!0})}(this.webVitals=this.webVitals||{}); | ||
!function(n){"use strict";var e,t=!1,i=function(n){addEventListener("pageshow",(function(e){e.persisted&&(t=!0,n(e))}),!0)},r=function(){return window.performance&&(performance.getEntriesByType&&performance.getEntriesByType("navigation")[0]||function(){var n=performance.timing,e={entryType:"navigation",startTime:0};for(var t in n)"navigationStart"!==t&&"toJSON"!==t&&(e[t]=Math.max(n[t]-n.navigationStart,0));return e}())},a=function(n,e){var i=r();return{name:n,value:void 0===e?-1:e,delta:0,entries:[],id:"v2-".concat(Date.now(),"-").concat(Math.floor(8999999999999*Math.random())+1e12),navigationType:t?"back_forward_cache":i&&i.type}},o=function(n,e,t){try{if(PerformanceObserver.supportedEntryTypes.includes(n)){var i=new PerformanceObserver((function(n){e(n.getEntries())}));return i.observe(Object.assign({type:n,buffered:!0},t||{})),i}}catch(n){}},c=function(n,e){var t=function t(i){"pagehide"!==i.type&&"hidden"!==document.visibilityState||(n(i),e&&(removeEventListener("visibilitychange",t,!0),removeEventListener("pagehide",t,!0)))};addEventListener("visibilitychange",t,!0),addEventListener("pagehide",t,!0)},u=function(n,e,t){var i;return function(r){e.value>=0&&(r||t)&&(e.delta=e.value-(i||0),(e.delta||void 0===i)&&(i=e.value,n(e)))}},f=-1,s=function(){c((function(n){var e=n.timeStamp;f=e}),!0)},d=function(){return f<0&&((f=window.webVitals.firstHiddenTime)===1/0&&s(),i((function(){setTimeout((function(){f="hidden"===document.visibilityState?0:1/0,s()}),0)}))),{get firstHiddenTime(){return f}}},l=function(n,e){var t,r=d(),c=a("FCP"),f=function(n){n.forEach((function(n){"first-contentful-paint"===n.name&&(l&&l.disconnect(),n.startTime<r.firstHiddenTime&&(c.value=n.startTime,c.entries.push(n),t(!0)))}))},s=window.performance&&window.performance.getEntriesByName&&window.performance.getEntriesByName("first-contentful-paint")[0],l=s?null:o("paint",f);(s||l)&&(t=u(n,c,e),s&&f([s]),i((function(i){c=a("FCP"),t=u(n,c,e),requestAnimationFrame((function(){requestAnimationFrame((function(){c.value=performance.now()-i.timeStamp,t(!0)}))}))})))},v=!1,m=-1,p=function(n,e){v||(l((function(n){m=n.value})),v=!0);var t,r=function(e){m>-1&&n(e)},f=a("CLS",0),s=0,d=[],p=function(n){n.forEach((function(n){if(!n.hadRecentInput){var e=d[0],i=d[d.length-1];s&&n.startTime-i.startTime<1e3&&n.startTime-e.startTime<5e3?(s+=n.value,d.push(n)):(s=n.value,d=[n]),s>f.value&&(f.value=s,f.entries=d,t())}}))},h=o("layout-shift",p);h&&(t=u(r,f,e),c((function(){p(h.takeRecords()),t(!0)})),i((function(){s=0,m=-1,f=a("CLS",0),t=u(r,f,e)})))},h=function(n,e){var t,r=d(),f=a("FID"),s=function(n){n.startTime<r.firstHiddenTime&&(f.value=n.processingStart-n.startTime,f.entries.push(n),t(!0))},l=function(n){n.forEach(s)},v=o("first-input",l);t=u(n,f,e),v&&c((function(){l(v.takeRecords()),v.disconnect()}),!0),v||window.webVitals.firstInputPolyfill(s),i((function(){f=a("FID"),t=u(n,f,e),window.webVitals.resetFirstInputPolyfill(),window.webVitals.firstInputPolyfill(s)}))},y=0,g=1/0,T=0,w=function(n){n.forEach((function(n){n.interactionId&&(g=Math.min(g,n.interactionId),T=Math.max(T,n.interactionId),y=T?(T-g)/7+1:0)}))},E=function(){return e?y:performance.interactionCount||0},b=function(){"interactionCount"in performance||e||(e=o("event",w,{type:"event",buffered:!0,durationThreshold:0}))},I=0,P=function(){return E()-I},F=[],S={},L=function(n,e){b();var t,r=a("INP"),f=function(n){n.forEach((function(n){n.interactionId&&function(n){var e=F[F.length-1],t=S[n.interactionId];if(t||F.length<10||n.duration>e.latency){if(t)t.entries.push(n),t.latency=Math.max(t.latency,n.duration);else{var i={id:n.interactionId,latency:n.duration,entries:[n]};S[i.id]=i,F.push(i)}F.sort((function(n,e){return e.latency-n.latency})),F.splice(10).forEach((function(n){delete S[n.id]}))}}(n)}));var e,i=(e=Math.min(F.length-1,Math.floor(P()/50)),F[e]);i&&i.latency!==r.value&&(r.value=i.latency,r.entries=i.entries,t())},s=o("event",f,{durationThreshold:40});t=u(n,r,e),s&&(c((function(){f(s.takeRecords()),r.value<0&&P()>0&&(r.value=0,r.entries=[]),t(!0)})),i((function(){F=[],I=E(),r=a("INP"),t=u(n,r,e)})))},C={},M=function(n,e){var t,r=d(),f=a("LCP"),s=function(n){var e=n[n.length-1];if(e){var i=e.startTime;i<r.firstHiddenTime&&(f.value=i,f.entries=[e],t())}},l=o("largest-contentful-paint",s);if(l){t=u(n,f,e);var v=function(){C[f.id]||(s(l.takeRecords()),l.disconnect(),C[f.id]=!0,t(!0))};["keydown","click"].forEach((function(n){addEventListener(n,v,{once:!0,capture:!0})})),c(v,!0),i((function(i){f=a("LCP"),t=u(n,f,e),requestAnimationFrame((function(){requestAnimationFrame((function(){f.value=performance.now()-i.timeStamp,C[f.id]=!0,t(!0)}))}))}))}},B=function(n,e){var t,o=a("TTFB"),c=u(n,o,e);t=function(){var n=r();if(n){if(o.value=n.responseStart,o.value<0||o.value>performance.now())return;o.entries=[n],c(!0)}},"complete"===document.readyState?setTimeout(t,0):addEventListener("load",(function(){return setTimeout(t,0)})),i((function(t){o=a("TTFB"),c=u(n,o,e),o.value=performance.now()-t.timeStamp,c(!0)}))};n.getCLS=p,n.getFCP=l,n.getFID=h,n.getINP=L,n.getLCP=M,n.getTFB=B,n.onCLS=p,n.onFCP=l,n.onFID=h,n.onINP=L,n.onLCP=M,n.onTTFB=B,Object.defineProperty(n,"__esModule",{value:!0})}(this.webVitals=this.webVitals||{}); |
@@ -1,1 +0,1 @@ | ||
var e=function(e,t){return{name:e,value:void 0===t?-1:t,delta:0,entries:[],id:"v2-".concat(Date.now(),"-").concat(Math.floor(8999999999999*Math.random())+1e12)}},t=function(e,t){try{if(PerformanceObserver.supportedEntryTypes.includes(e)){if("first-input"===e&&!("PerformanceEventTiming"in self))return;var n=new PerformanceObserver((function(e){return e.getEntries().map(t)}));return n.observe({type:e,buffered:!0}),n}}catch(e){}},n=function(e,t){var n=function n(i){"pagehide"!==i.type&&"hidden"!==document.visibilityState||(e(i),t&&(removeEventListener("visibilitychange",n,!0),removeEventListener("pagehide",n,!0)))};addEventListener("visibilitychange",n,!0),addEventListener("pagehide",n,!0)},i=function(e){addEventListener("pageshow",(function(t){t.persisted&&e(t)}),!0)},r=function(e,t,n){var i;return function(r){t.value>=0&&(r||n)&&(t.delta=t.value-(i||0),(t.delta||void 0===i)&&(i=t.value,e(t)))}},a=-1,o=function(){n((function(e){var t=e.timeStamp;a=t}),!0)},u=function(){return a<0&&((a=window.webVitals.firstHiddenTime)===1/0&&o(),i((function(){setTimeout((function(){a="hidden"===document.visibilityState?0:1/0,o()}),0)}))),{get firstHiddenTime(){return a}}},c=function(n,a){var o,c=u(),s=e("FCP"),f=function(e){"first-contentful-paint"===e.name&&(d&&d.disconnect(),e.startTime<c.firstHiddenTime&&(s.value=e.startTime,s.entries.push(e),o(!0)))},m=window.performance&&performance.getEntriesByName&&performance.getEntriesByName("first-contentful-paint")[0],d=m?null:t("paint",f);(m||d)&&(o=r(n,s,a),m&&f(m),i((function(t){s=e("FCP"),o=r(n,s,a),requestAnimationFrame((function(){requestAnimationFrame((function(){s.value=performance.now()-t.timeStamp,o(!0)}))}))})))},s=!1,f=-1,m=function(a,o){s||(c((function(e){f=e.value})),s=!0);var u,m=function(e){f>-1&&a(e)},d=e("CLS",0),v=0,l=[],p=function(e){if(!e.hadRecentInput){var t=l[0],n=l[l.length-1];v&&e.startTime-n.startTime<1e3&&e.startTime-t.startTime<5e3?(v+=e.value,l.push(e)):(v=e.value,l=[e]),v>d.value&&(d.value=v,d.entries=l,u())}},T=t("layout-shift",p);T&&(u=r(m,d,o),n((function(){T.takeRecords().map(p),u(!0)})),i((function(){v=0,f=-1,d=e("CLS",0),u=r(m,d,o)})))},d=function(a,o){var c,s=u(),f=e("FID"),m=function(e){e.startTime<s.firstHiddenTime&&(f.value=e.processingStart-e.startTime,f.entries.push(e),c(!0))},d=t("first-input",m);c=r(a,f,o),d&&n((function(){d.takeRecords().map(m),d.disconnect()}),!0),d||window.webVitals.firstInputPolyfill(m),i((function(){f=e("FID"),c=r(a,f,o),window.webVitals.resetFirstInputPolyfill(),window.webVitals.firstInputPolyfill(m)}))},v={},l=function(a,o){var c,s=u(),f=e("LCP"),m=function(e){var t=e.startTime;t<s.firstHiddenTime&&(f.value=t,f.entries.push(e),c())},d=t("largest-contentful-paint",m);if(d){c=r(a,f,o);var l=function(){v[f.id]||(d.takeRecords().map(m),d.disconnect(),v[f.id]=!0,c(!0))};["keydown","click"].forEach((function(e){addEventListener(e,l,{once:!0,capture:!0})})),n(l,!0),i((function(t){f=e("LCP"),c=r(a,f,o),requestAnimationFrame((function(){requestAnimationFrame((function(){f.value=performance.now()-t.timeStamp,v[f.id]=!0,c(!0)}))}))}))}},p=function(t){var n,i=e("TTFB");n=function(){try{var e=performance.getEntriesByType("navigation")[0]||function(){var e=performance.timing,t={entryType:"navigation",startTime:0};for(var n in e)"navigationStart"!==n&&"toJSON"!==n&&(t[n]=Math.max(e[n]-e.navigationStart,0));return t}();if(i.value=i.delta=e.responseStart,i.value<0||i.value>performance.now())return;i.entries=[e],t(i)}catch(e){}},"complete"===document.readyState?setTimeout(n,0):addEventListener("load",(function(){return setTimeout(n,0)}))};export{m as getCLS,c as getFCP,d as getFID,l as getLCP,p as getTTFB}; | ||
var n,e=!1,t=function(n){addEventListener("pageshow",(function(t){t.persisted&&(e=!0,n(t))}),!0)},i=function(){return window.performance&&(performance.getEntriesByType&&performance.getEntriesByType("navigation")[0]||function(){var n=performance.timing,e={entryType:"navigation",startTime:0};for(var t in n)"navigationStart"!==t&&"toJSON"!==t&&(e[t]=Math.max(n[t]-n.navigationStart,0));return e}())},a=function(n,t){var a=i();return{name:n,value:void 0===t?-1:t,delta:0,entries:[],id:"v2-".concat(Date.now(),"-").concat(Math.floor(8999999999999*Math.random())+1e12),navigationType:e?"back_forward_cache":a&&a.type}},r=function(n,e,t){try{if(PerformanceObserver.supportedEntryTypes.includes(n)){var i=new PerformanceObserver((function(n){e(n.getEntries())}));return i.observe(Object.assign({type:n,buffered:!0},t||{})),i}}catch(n){}},o=function(n,e){var t=function t(i){"pagehide"!==i.type&&"hidden"!==document.visibilityState||(n(i),e&&(removeEventListener("visibilitychange",t,!0),removeEventListener("pagehide",t,!0)))};addEventListener("visibilitychange",t,!0),addEventListener("pagehide",t,!0)},c=function(n,e,t){var i;return function(a){e.value>=0&&(a||t)&&(e.delta=e.value-(i||0),(e.delta||void 0===i)&&(i=e.value,n(e)))}},u=-1,f=function(){o((function(n){var e=n.timeStamp;u=e}),!0)},s=function(){return u<0&&((u=window.webVitals.firstHiddenTime)===1/0&&f(),t((function(){setTimeout((function(){u="hidden"===document.visibilityState?0:1/0,f()}),0)}))),{get firstHiddenTime(){return u}}},d=function(n,e){var i,o=s(),u=a("FCP"),f=function(n){n.forEach((function(n){"first-contentful-paint"===n.name&&(l&&l.disconnect(),n.startTime<o.firstHiddenTime&&(u.value=n.startTime,u.entries.push(n),i(!0)))}))},d=window.performance&&window.performance.getEntriesByName&&window.performance.getEntriesByName("first-contentful-paint")[0],l=d?null:r("paint",f);(d||l)&&(i=c(n,u,e),d&&f([d]),t((function(t){u=a("FCP"),i=c(n,u,e),requestAnimationFrame((function(){requestAnimationFrame((function(){u.value=performance.now()-t.timeStamp,i(!0)}))}))})))},l=!1,v=-1,m=function(n,e){l||(d((function(n){v=n.value})),l=!0);var i,u=function(e){v>-1&&n(e)},f=a("CLS",0),s=0,m=[],p=function(n){n.forEach((function(n){if(!n.hadRecentInput){var e=m[0],t=m[m.length-1];s&&n.startTime-t.startTime<1e3&&n.startTime-e.startTime<5e3?(s+=n.value,m.push(n)):(s=n.value,m=[n]),s>f.value&&(f.value=s,f.entries=m,i())}}))},h=r("layout-shift",p);h&&(i=c(u,f,e),o((function(){p(h.takeRecords()),i(!0)})),t((function(){s=0,v=-1,f=a("CLS",0),i=c(u,f,e)})))},p=function(n,e){var i,u=s(),f=a("FID"),d=function(n){n.startTime<u.firstHiddenTime&&(f.value=n.processingStart-n.startTime,f.entries.push(n),i(!0))},l=function(n){n.forEach(d)},v=r("first-input",l);i=c(n,f,e),v&&o((function(){l(v.takeRecords()),v.disconnect()}),!0),v||window.webVitals.firstInputPolyfill(d),t((function(){f=a("FID"),i=c(n,f,e),window.webVitals.resetFirstInputPolyfill(),window.webVitals.firstInputPolyfill(d)}))},h=0,y=1/0,g=0,T=function(n){n.forEach((function(n){n.interactionId&&(y=Math.min(y,n.interactionId),g=Math.max(g,n.interactionId),h=g?(g-y)/7+1:0)}))},w=function(){return n?h:performance.interactionCount||0},E=function(){"interactionCount"in performance||n||(n=r("event",T,{type:"event",buffered:!0,durationThreshold:0}))},I=0,b=function(){return w()-I},S=[],F={},P=function(n,e){E();var i,u=a("INP"),f=function(n){n.forEach((function(n){n.interactionId&&function(n){var e=S[S.length-1],t=F[n.interactionId];if(t||S.length<10||n.duration>e.latency){if(t)t.entries.push(n),t.latency=Math.max(t.latency,n.duration);else{var i={id:n.interactionId,latency:n.duration,entries:[n]};F[i.id]=i,S.push(i)}S.sort((function(n,e){return e.latency-n.latency})),S.splice(10).forEach((function(n){delete F[n.id]}))}}(n)}));var e,t=(e=Math.min(S.length-1,Math.floor(b()/50)),S[e]);t&&t.latency!==u.value&&(u.value=t.latency,u.entries=t.entries,i())},s=r("event",f,{durationThreshold:40});i=c(n,u,e),s&&(o((function(){f(s.takeRecords()),u.value<0&&b()>0&&(u.value=0,u.entries=[]),i(!0)})),t((function(){S=[],I=w(),u=a("INP"),i=c(n,u,e)})))},L={},C=function(n,e){var i,u=s(),f=a("LCP"),d=function(n){var e=n[n.length-1];if(e){var t=e.startTime;t<u.firstHiddenTime&&(f.value=t,f.entries=[e],i())}},l=r("largest-contentful-paint",d);if(l){i=c(n,f,e);var v=function(){L[f.id]||(d(l.takeRecords()),l.disconnect(),L[f.id]=!0,i(!0))};["keydown","click"].forEach((function(n){addEventListener(n,v,{once:!0,capture:!0})})),o(v,!0),t((function(t){f=a("LCP"),i=c(n,f,e),requestAnimationFrame((function(){requestAnimationFrame((function(){f.value=performance.now()-t.timeStamp,L[f.id]=!0,i(!0)}))}))}))}},M=function(n,e){var r,o=a("TTFB"),u=c(n,o,e);r=function(){var n=i();if(n){if(o.value=n.responseStart,o.value<0||o.value>performance.now())return;o.entries=[n],u(!0)}},"complete"===document.readyState?setTimeout(r,0):addEventListener("load",(function(){return setTimeout(r,0)})),t((function(t){o=a("TTFB"),u=c(n,o,e),o.value=performance.now()-t.timeStamp,u(!0)}))};export{m as getCLS,d as getFCP,p as getFID,P as getINP,C as getLCP,M as getTFB,m as onCLS,d as onFCP,p as onFID,P as onINP,C as onLCP,M as onTTFB}; |
@@ -1,1 +0,1 @@ | ||
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).webVitals=e.webVitals||{})}(this,(function(e){"use strict";var t=function(e,t){return{name:e,value:void 0===t?-1:t,delta:0,entries:[],id:"v2-".concat(Date.now(),"-").concat(Math.floor(8999999999999*Math.random())+1e12)}},n=function(e,t){try{if(PerformanceObserver.supportedEntryTypes.includes(e)){if("first-input"===e&&!("PerformanceEventTiming"in self))return;var n=new PerformanceObserver((function(e){return e.getEntries().map(t)}));return n.observe({type:e,buffered:!0}),n}}catch(e){}},i=function(e,t){var n=function n(i){"pagehide"!==i.type&&"hidden"!==document.visibilityState||(e(i),t&&(removeEventListener("visibilitychange",n,!0),removeEventListener("pagehide",n,!0)))};addEventListener("visibilitychange",n,!0),addEventListener("pagehide",n,!0)},r=function(e){addEventListener("pageshow",(function(t){t.persisted&&e(t)}),!0)},a=function(e,t,n){var i;return function(r){t.value>=0&&(r||n)&&(t.delta=t.value-(i||0),(t.delta||void 0===i)&&(i=t.value,e(t)))}},o=-1,u=function(){i((function(e){var t=e.timeStamp;o=t}),!0)},f=function(){return o<0&&((o=window.webVitals.firstHiddenTime)===1/0&&u(),r((function(){setTimeout((function(){o="hidden"===document.visibilityState?0:1/0,u()}),0)}))),{get firstHiddenTime(){return o}}},s=function(e,i){var o,u=f(),s=t("FCP"),c=function(e){"first-contentful-paint"===e.name&&(m&&m.disconnect(),e.startTime<u.firstHiddenTime&&(s.value=e.startTime,s.entries.push(e),o(!0)))},d=window.performance&&performance.getEntriesByName&&performance.getEntriesByName("first-contentful-paint")[0],m=d?null:n("paint",c);(d||m)&&(o=a(e,s,i),d&&c(d),r((function(n){s=t("FCP"),o=a(e,s,i),requestAnimationFrame((function(){requestAnimationFrame((function(){s.value=performance.now()-n.timeStamp,o(!0)}))}))})))},c=!1,d=-1,m={};e.getCLS=function(e,o){c||(s((function(e){d=e.value})),c=!0);var u,f=function(t){d>-1&&e(t)},m=t("CLS",0),l=0,v=[],p=function(e){if(!e.hadRecentInput){var t=v[0],n=v[v.length-1];l&&e.startTime-n.startTime<1e3&&e.startTime-t.startTime<5e3?(l+=e.value,v.push(e)):(l=e.value,v=[e]),l>m.value&&(m.value=l,m.entries=v,u())}},T=n("layout-shift",p);T&&(u=a(f,m,o),i((function(){T.takeRecords().map(p),u(!0)})),r((function(){l=0,d=-1,m=t("CLS",0),u=a(f,m,o)})))},e.getFCP=s,e.getFID=function(e,o){var u,s=f(),c=t("FID"),d=function(e){e.startTime<s.firstHiddenTime&&(c.value=e.processingStart-e.startTime,c.entries.push(e),u(!0))},m=n("first-input",d);u=a(e,c,o),m&&i((function(){m.takeRecords().map(d),m.disconnect()}),!0),m||window.webVitals.firstInputPolyfill(d),r((function(){c=t("FID"),u=a(e,c,o),window.webVitals.resetFirstInputPolyfill(),window.webVitals.firstInputPolyfill(d)}))},e.getLCP=function(e,o){var u,s=f(),c=t("LCP"),d=function(e){var t=e.startTime;t<s.firstHiddenTime&&(c.value=t,c.entries.push(e),u())},l=n("largest-contentful-paint",d);if(l){u=a(e,c,o);var v=function(){m[c.id]||(l.takeRecords().map(d),l.disconnect(),m[c.id]=!0,u(!0))};["keydown","click"].forEach((function(e){addEventListener(e,v,{once:!0,capture:!0})})),i(v,!0),r((function(n){c=t("LCP"),u=a(e,c,o),requestAnimationFrame((function(){requestAnimationFrame((function(){c.value=performance.now()-n.timeStamp,m[c.id]=!0,u(!0)}))}))}))}},e.getTTFB=function(e){var n,i=t("TTFB");n=function(){try{var t=performance.getEntriesByType("navigation")[0]||function(){var e=performance.timing,t={entryType:"navigation",startTime:0};for(var n in e)"navigationStart"!==n&&"toJSON"!==n&&(t[n]=Math.max(e[n]-e.navigationStart,0));return t}();if(i.value=i.delta=t.responseStart,i.value<0||i.value>performance.now())return;i.entries=[t],e(i)}catch(e){}},"complete"===document.readyState?setTimeout(n,0):addEventListener("load",(function(){return setTimeout(n,0)}))},Object.defineProperty(e,"__esModule",{value:!0})})); | ||
!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports):"function"==typeof define&&define.amd?define(["exports"],n):n((e="undefined"!=typeof globalThis?globalThis:e||self).webVitals=e.webVitals||{})}(this,(function(e){"use strict";var n,t=!1,i=function(e){addEventListener("pageshow",(function(n){n.persisted&&(t=!0,e(n))}),!0)},r=function(){return window.performance&&(performance.getEntriesByType&&performance.getEntriesByType("navigation")[0]||function(){var e=performance.timing,n={entryType:"navigation",startTime:0};for(var t in e)"navigationStart"!==t&&"toJSON"!==t&&(n[t]=Math.max(e[t]-e.navigationStart,0));return n}())},a=function(e,n){var i=r();return{name:e,value:void 0===n?-1:n,delta:0,entries:[],id:"v2-".concat(Date.now(),"-").concat(Math.floor(8999999999999*Math.random())+1e12),navigationType:t?"back_forward_cache":i&&i.type}},o=function(e,n,t){try{if(PerformanceObserver.supportedEntryTypes.includes(e)){var i=new PerformanceObserver((function(e){n(e.getEntries())}));return i.observe(Object.assign({type:e,buffered:!0},t||{})),i}}catch(e){}},c=function(e,n){var t=function t(i){"pagehide"!==i.type&&"hidden"!==document.visibilityState||(e(i),n&&(removeEventListener("visibilitychange",t,!0),removeEventListener("pagehide",t,!0)))};addEventListener("visibilitychange",t,!0),addEventListener("pagehide",t,!0)},u=function(e,n,t){var i;return function(r){n.value>=0&&(r||t)&&(n.delta=n.value-(i||0),(n.delta||void 0===i)&&(i=n.value,e(n)))}},f=-1,s=function(){c((function(e){var n=e.timeStamp;f=n}),!0)},d=function(){return f<0&&((f=window.webVitals.firstHiddenTime)===1/0&&s(),i((function(){setTimeout((function(){f="hidden"===document.visibilityState?0:1/0,s()}),0)}))),{get firstHiddenTime(){return f}}},l=function(e,n){var t,r=d(),c=a("FCP"),f=function(e){e.forEach((function(e){"first-contentful-paint"===e.name&&(l&&l.disconnect(),e.startTime<r.firstHiddenTime&&(c.value=e.startTime,c.entries.push(e),t(!0)))}))},s=window.performance&&window.performance.getEntriesByName&&window.performance.getEntriesByName("first-contentful-paint")[0],l=s?null:o("paint",f);(s||l)&&(t=u(e,c,n),s&&f([s]),i((function(i){c=a("FCP"),t=u(e,c,n),requestAnimationFrame((function(){requestAnimationFrame((function(){c.value=performance.now()-i.timeStamp,t(!0)}))}))})))},v=!1,m=-1,p=function(e,n){v||(l((function(e){m=e.value})),v=!0);var t,r=function(n){m>-1&&e(n)},f=a("CLS",0),s=0,d=[],p=function(e){e.forEach((function(e){if(!e.hadRecentInput){var n=d[0],i=d[d.length-1];s&&e.startTime-i.startTime<1e3&&e.startTime-n.startTime<5e3?(s+=e.value,d.push(e)):(s=e.value,d=[e]),s>f.value&&(f.value=s,f.entries=d,t())}}))},h=o("layout-shift",p);h&&(t=u(r,f,n),c((function(){p(h.takeRecords()),t(!0)})),i((function(){s=0,m=-1,f=a("CLS",0),t=u(r,f,n)})))},h=function(e,n){var t,r=d(),f=a("FID"),s=function(e){e.startTime<r.firstHiddenTime&&(f.value=e.processingStart-e.startTime,f.entries.push(e),t(!0))},l=function(e){e.forEach(s)},v=o("first-input",l);t=u(e,f,n),v&&c((function(){l(v.takeRecords()),v.disconnect()}),!0),v||window.webVitals.firstInputPolyfill(s),i((function(){f=a("FID"),t=u(e,f,n),window.webVitals.resetFirstInputPolyfill(),window.webVitals.firstInputPolyfill(s)}))},y=0,g=1/0,T=0,w=function(e){e.forEach((function(e){e.interactionId&&(g=Math.min(g,e.interactionId),T=Math.max(T,e.interactionId),y=T?(T-g)/7+1:0)}))},b=function(){return n?y:performance.interactionCount||0},E=function(){"interactionCount"in performance||n||(n=o("event",w,{type:"event",buffered:!0,durationThreshold:0}))},I=0,P=function(){return b()-I},F=[],S={},L=function(e,n){E();var t,r=a("INP"),f=function(e){e.forEach((function(e){e.interactionId&&function(e){var n=F[F.length-1],t=S[e.interactionId];if(t||F.length<10||e.duration>n.latency){if(t)t.entries.push(e),t.latency=Math.max(t.latency,e.duration);else{var i={id:e.interactionId,latency:e.duration,entries:[e]};S[i.id]=i,F.push(i)}F.sort((function(e,n){return n.latency-e.latency})),F.splice(10).forEach((function(e){delete S[e.id]}))}}(e)}));var n,i=(n=Math.min(F.length-1,Math.floor(P()/50)),F[n]);i&&i.latency!==r.value&&(r.value=i.latency,r.entries=i.entries,t())},s=o("event",f,{durationThreshold:40});t=u(e,r,n),s&&(c((function(){f(s.takeRecords()),r.value<0&&P()>0&&(r.value=0,r.entries=[]),t(!0)})),i((function(){F=[],I=b(),r=a("INP"),t=u(e,r,n)})))},C={},M=function(e,n){var t,r=d(),f=a("LCP"),s=function(e){var n=e[e.length-1];if(n){var i=n.startTime;i<r.firstHiddenTime&&(f.value=i,f.entries=[n],t())}},l=o("largest-contentful-paint",s);if(l){t=u(e,f,n);var v=function(){C[f.id]||(s(l.takeRecords()),l.disconnect(),C[f.id]=!0,t(!0))};["keydown","click"].forEach((function(e){addEventListener(e,v,{once:!0,capture:!0})})),c(v,!0),i((function(i){f=a("LCP"),t=u(e,f,n),requestAnimationFrame((function(){requestAnimationFrame((function(){f.value=performance.now()-i.timeStamp,C[f.id]=!0,t(!0)}))}))}))}},B=function(e,n){var t,o=a("TTFB"),c=u(e,o,n);t=function(){var e=r();if(e){if(o.value=e.responseStart,o.value<0||o.value>performance.now())return;o.entries=[e],c(!0)}},"complete"===document.readyState?setTimeout(t,0):addEventListener("load",(function(){return setTimeout(t,0)})),i((function(t){o=a("TTFB"),c=u(e,o,n),o.value=performance.now()-t.timeStamp,c(!0)}))};e.getCLS=p,e.getFCP=l,e.getFID=h,e.getINP=L,e.getLCP=M,e.getTFB=B,e.onCLS=p,e.onFCP=l,e.onFID=h,e.onINP=L,e.onLCP=M,e.onTTFB=B,Object.defineProperty(e,"__esModule",{value:!0})})); |
@@ -1,1 +0,1 @@ | ||
var webVitals=function(e){"use strict";var t,n,i,r,a=function(e,t){return{name:e,value:void 0===t?-1:t,delta:0,entries:[],id:"v2-".concat(Date.now(),"-").concat(Math.floor(8999999999999*Math.random())+1e12)}},o=function(e,t){try{if(PerformanceObserver.supportedEntryTypes.includes(e)){if("first-input"===e&&!("PerformanceEventTiming"in self))return;var n=new PerformanceObserver((function(e){return e.getEntries().map(t)}));return n.observe({type:e,buffered:!0}),n}}catch(e){}},u=function(e,t){var n=function n(i){"pagehide"!==i.type&&"hidden"!==document.visibilityState||(e(i),t&&(removeEventListener("visibilitychange",n,!0),removeEventListener("pagehide",n,!0)))};addEventListener("visibilitychange",n,!0),addEventListener("pagehide",n,!0)},c=function(e){addEventListener("pageshow",(function(t){t.persisted&&e(t)}),!0)},f=function(e,t,n){var i;return function(r){t.value>=0&&(r||n)&&(t.delta=t.value-(i||0),(t.delta||void 0===i)&&(i=t.value,e(t)))}},s=-1,m=function(){return"hidden"===document.visibilityState?0:1/0},v=function(){u((function(e){var t=e.timeStamp;s=t}),!0)},d=function(){return s<0&&(s=m(),v(),c((function(){setTimeout((function(){s=m(),v()}),0)}))),{get firstHiddenTime(){return s}}},p=function(e,t){var n,i=d(),r=a("FCP"),u=function(e){"first-contentful-paint"===e.name&&(m&&m.disconnect(),e.startTime<i.firstHiddenTime&&(r.value=e.startTime,r.entries.push(e),n(!0)))},s=window.performance&&performance.getEntriesByName&&performance.getEntriesByName("first-contentful-paint")[0],m=s?null:o("paint",u);(s||m)&&(n=f(e,r,t),s&&u(s),c((function(i){r=a("FCP"),n=f(e,r,t),requestAnimationFrame((function(){requestAnimationFrame((function(){r.value=performance.now()-i.timeStamp,n(!0)}))}))})))},l=!1,g=-1,T={passive:!0,capture:!0},h=new Date,y=function(e,r){t||(t=r,n=e,i=new Date,S(removeEventListener),E())},E=function(){if(n>=0&&n<i-h){var e={entryType:"first-input",name:t.type,target:t.target,cancelable:t.cancelable,startTime:t.timeStamp,processingStart:t.timeStamp+n};r.forEach((function(t){t(e)})),r=[]}},L=function(e){if(e.cancelable){var t=(e.timeStamp>1e12?new Date:performance.now())-e.timeStamp;"pointerdown"==e.type?function(e,t){var n=function(){y(e,t),r()},i=function(){r()},r=function(){removeEventListener("pointerup",n,T),removeEventListener("pointercancel",i,T)};addEventListener("pointerup",n,T),addEventListener("pointercancel",i,T)}(t,e):y(t,e)}},S=function(e){["mousedown","keydown","touchstart","pointerdown"].forEach((function(t){return e(t,L,T)}))},w={};return e.getCLS=function(e,t){l||(p((function(e){g=e.value})),l=!0);var n,i=function(t){g>-1&&e(t)},r=a("CLS",0),s=0,m=[],v=function(e){if(!e.hadRecentInput){var t=m[0],i=m[m.length-1];s&&e.startTime-i.startTime<1e3&&e.startTime-t.startTime<5e3?(s+=e.value,m.push(e)):(s=e.value,m=[e]),s>r.value&&(r.value=s,r.entries=m,n())}},d=o("layout-shift",v);d&&(n=f(i,r,t),u((function(){d.takeRecords().map(v),n(!0)})),c((function(){s=0,g=-1,r=a("CLS",0),n=f(i,r,t)})))},e.getFCP=p,e.getFID=function(e,i){var s,m=d(),v=a("FID"),p=function(e){e.startTime<m.firstHiddenTime&&(v.value=e.processingStart-e.startTime,v.entries.push(e),s(!0))},l=o("first-input",p);s=f(e,v,i),l&&u((function(){l.takeRecords().map(p),l.disconnect()}),!0),l&&c((function(){var o;v=a("FID"),s=f(e,v,i),r=[],n=-1,t=null,S(addEventListener),o=p,r.push(o),E()}))},e.getLCP=function(e,t){var n,i=d(),r=a("LCP"),s=function(e){var t=e.startTime;t<i.firstHiddenTime&&(r.value=t,r.entries.push(e),n())},m=o("largest-contentful-paint",s);if(m){n=f(e,r,t);var v=function(){w[r.id]||(m.takeRecords().map(s),m.disconnect(),w[r.id]=!0,n(!0))};["keydown","click"].forEach((function(e){addEventListener(e,v,{once:!0,capture:!0})})),u(v,!0),c((function(i){r=a("LCP"),n=f(e,r,t),requestAnimationFrame((function(){requestAnimationFrame((function(){r.value=performance.now()-i.timeStamp,w[r.id]=!0,n(!0)}))}))}))}},e.getTTFB=function(e){var t,n=a("TTFB");t=function(){try{var t=performance.getEntriesByType("navigation")[0]||function(){var e=performance.timing,t={entryType:"navigation",startTime:0};for(var n in e)"navigationStart"!==n&&"toJSON"!==n&&(t[n]=Math.max(e[n]-e.navigationStart,0));return t}();if(n.value=n.delta=t.responseStart,n.value<0||n.value>performance.now())return;n.entries=[t],e(n)}catch(e){}},"complete"===document.readyState?setTimeout(t,0):addEventListener("load",(function(){return setTimeout(t,0)}))},Object.defineProperty(e,"__esModule",{value:!0}),e}({}); | ||
var webVitals=function(e){"use strict";var n,t,i,r,a,o=!1,c=function(e){addEventListener("pageshow",(function(n){n.persisted&&(o=!0,e(n))}),!0)},u=function(){return window.performance&&(performance.getEntriesByType&&performance.getEntriesByType("navigation")[0]||function(){var e=performance.timing,n={entryType:"navigation",startTime:0};for(var t in e)"navigationStart"!==t&&"toJSON"!==t&&(n[t]=Math.max(e[t]-e.navigationStart,0));return n}())},f=function(e,n){var t=u();return{name:e,value:void 0===n?-1:n,delta:0,entries:[],id:"v2-".concat(Date.now(),"-").concat(Math.floor(8999999999999*Math.random())+1e12),navigationType:o?"back_forward_cache":t&&t.type}},s=function(e,n,t){try{if(PerformanceObserver.supportedEntryTypes.includes(e)){var i=new PerformanceObserver((function(e){n(e.getEntries())}));return i.observe(Object.assign({type:e,buffered:!0},t||{})),i}}catch(e){}},d=function(e,n){var t=function t(i){"pagehide"!==i.type&&"hidden"!==document.visibilityState||(e(i),n&&(removeEventListener("visibilitychange",t,!0),removeEventListener("pagehide",t,!0)))};addEventListener("visibilitychange",t,!0),addEventListener("pagehide",t,!0)},v=function(e,n,t){var i;return function(r){n.value>=0&&(r||t)&&(n.delta=n.value-(i||0),(n.delta||void 0===i)&&(i=n.value,e(n)))}},m=-1,l=function(){return"hidden"===document.visibilityState?0:1/0},p=function(){d((function(e){var n=e.timeStamp;m=n}),!0)},h=function(){return m<0&&(m=l(),p(),c((function(){setTimeout((function(){m=l(),p()}),0)}))),{get firstHiddenTime(){return m}}},y=function(e,n){var t,i=h(),r=f("FCP"),a=function(e){e.forEach((function(e){"first-contentful-paint"===e.name&&(u&&u.disconnect(),e.startTime<i.firstHiddenTime&&(r.value=e.startTime,r.entries.push(e),t(!0)))}))},o=window.performance&&window.performance.getEntriesByName&&window.performance.getEntriesByName("first-contentful-paint")[0],u=o?null:s("paint",a);(o||u)&&(t=v(e,r,n),o&&a([o]),c((function(i){r=f("FCP"),t=v(e,r,n),requestAnimationFrame((function(){requestAnimationFrame((function(){r.value=performance.now()-i.timeStamp,t(!0)}))}))})))},g=!1,T=-1,E=function(e,n){g||(y((function(e){T=e.value})),g=!0);var t,i=function(n){T>-1&&e(n)},r=f("CLS",0),a=0,o=[],u=function(e){e.forEach((function(e){if(!e.hadRecentInput){var n=o[0],i=o[o.length-1];a&&e.startTime-i.startTime<1e3&&e.startTime-n.startTime<5e3?(a+=e.value,o.push(e)):(a=e.value,o=[e]),a>r.value&&(r.value=a,r.entries=o,t())}}))},m=s("layout-shift",u);m&&(t=v(i,r,n),d((function(){u(m.takeRecords()),t(!0)})),c((function(){a=0,T=-1,r=f("CLS",0),t=v(i,r,n)})))},w={passive:!0,capture:!0},L=new Date,S=function(e,r){n||(n=r,t=e,i=new Date,I(removeEventListener),b())},b=function(){if(t>=0&&t<i-L){var e={entryType:"first-input",name:n.type,target:n.target,cancelable:n.cancelable,startTime:n.timeStamp,processingStart:n.timeStamp+t};r.forEach((function(n){n(e)})),r=[]}},F=function(e){if(e.cancelable){var n=(e.timeStamp>1e12?new Date:performance.now())-e.timeStamp;"pointerdown"==e.type?function(e,n){var t=function(){S(e,n),r()},i=function(){r()},r=function(){removeEventListener("pointerup",t,w),removeEventListener("pointercancel",i,w)};addEventListener("pointerup",t,w),addEventListener("pointercancel",i,w)}(n,e):S(n,e)}},I=function(e){["mousedown","keydown","touchstart","pointerdown"].forEach((function(n){return e(n,F,w)}))},P=function(e,i){var a,o=h(),u=f("FID"),m=function(e){e.startTime<o.firstHiddenTime&&(u.value=e.processingStart-e.startTime,u.entries.push(e),a(!0))},l=function(e){e.forEach(m)},p=s("first-input",l);a=v(e,u,i),p&&d((function(){l(p.takeRecords()),p.disconnect()}),!0),p&&c((function(){var o;u=f("FID"),a=v(e,u,i),r=[],t=-1,n=null,I(addEventListener),o=m,r.push(o),b()}))},C=0,M=1/0,k=0,B=function(e){e.forEach((function(e){e.interactionId&&(M=Math.min(M,e.interactionId),k=Math.max(k,e.interactionId),C=k?(k-M)/7+1:0)}))},D=function(){return a?C:performance.interactionCount||0},N=function(){"interactionCount"in performance||a||(a=s("event",B,{type:"event",buffered:!0,durationThreshold:0}))},O=0,R=function(){return D()-O},q=[],A={},H=function(e,n){N();var t,i=f("INP"),r=function(e){e.forEach((function(e){e.interactionId&&function(e){var n=q[q.length-1],t=A[e.interactionId];if(t||q.length<10||e.duration>n.latency){if(t)t.entries.push(e),t.latency=Math.max(t.latency,e.duration);else{var i={id:e.interactionId,latency:e.duration,entries:[e]};A[i.id]=i,q.push(i)}q.sort((function(e,n){return n.latency-e.latency})),q.splice(10).forEach((function(e){delete A[e.id]}))}}(e)}));var n,r=(n=Math.min(q.length-1,Math.floor(R()/50)),q[n]);r&&r.latency!==i.value&&(i.value=r.latency,i.entries=r.entries,t())},a=s("event",r,{durationThreshold:40});t=v(e,i,n),a&&(d((function(){r(a.takeRecords()),i.value<0&&R()>0&&(i.value=0,i.entries=[]),t(!0)})),c((function(){q=[],O=D(),i=f("INP"),t=v(e,i,n)})))},_={},x=function(e,n){var t,i=h(),r=f("LCP"),a=function(e){var n=e[e.length-1];if(n){var a=n.startTime;a<i.firstHiddenTime&&(r.value=a,r.entries=[n],t())}},o=s("largest-contentful-paint",a);if(o){t=v(e,r,n);var u=function(){_[r.id]||(a(o.takeRecords()),o.disconnect(),_[r.id]=!0,t(!0))};["keydown","click"].forEach((function(e){addEventListener(e,u,{once:!0,capture:!0})})),d(u,!0),c((function(i){r=f("LCP"),t=v(e,r,n),requestAnimationFrame((function(){requestAnimationFrame((function(){r.value=performance.now()-i.timeStamp,_[r.id]=!0,t(!0)}))}))}))}},j=function(e,n){var t,i=f("TTFB"),r=v(e,i,n);t=function(){var e=u();if(e){if(i.value=e.responseStart,i.value<0||i.value>performance.now())return;i.entries=[e],r(!0)}},"complete"===document.readyState?setTimeout(t,0):addEventListener("load",(function(){return setTimeout(t,0)})),c((function(t){i=f("TTFB"),r=v(e,i,n),i.value=performance.now()-t.timeStamp,r(!0)}))};return e.getCLS=E,e.getFCP=y,e.getFID=P,e.getINP=H,e.getLCP=x,e.getTFB=j,e.onCLS=E,e.onFCP=y,e.onFID=P,e.onINP=H,e.onLCP=x,e.onTTFB=j,Object.defineProperty(e,"__esModule",{value:!0}),e}({}); |
@@ -1,1 +0,1 @@ | ||
var e,t,n,i,r=function(e,t){return{name:e,value:void 0===t?-1:t,delta:0,entries:[],id:"v2-".concat(Date.now(),"-").concat(Math.floor(8999999999999*Math.random())+1e12)}},a=function(e,t){try{if(PerformanceObserver.supportedEntryTypes.includes(e)){if("first-input"===e&&!("PerformanceEventTiming"in self))return;var n=new PerformanceObserver((function(e){return e.getEntries().map(t)}));return n.observe({type:e,buffered:!0}),n}}catch(e){}},o=function(e,t){var n=function n(i){"pagehide"!==i.type&&"hidden"!==document.visibilityState||(e(i),t&&(removeEventListener("visibilitychange",n,!0),removeEventListener("pagehide",n,!0)))};addEventListener("visibilitychange",n,!0),addEventListener("pagehide",n,!0)},u=function(e){addEventListener("pageshow",(function(t){t.persisted&&e(t)}),!0)},c=function(e,t,n){var i;return function(r){t.value>=0&&(r||n)&&(t.delta=t.value-(i||0),(t.delta||void 0===i)&&(i=t.value,e(t)))}},f=-1,s=function(){return"hidden"===document.visibilityState?0:1/0},m=function(){o((function(e){var t=e.timeStamp;f=t}),!0)},v=function(){return f<0&&(f=s(),m(),u((function(){setTimeout((function(){f=s(),m()}),0)}))),{get firstHiddenTime(){return f}}},d=function(e,t){var n,i=v(),o=r("FCP"),f=function(e){"first-contentful-paint"===e.name&&(m&&m.disconnect(),e.startTime<i.firstHiddenTime&&(o.value=e.startTime,o.entries.push(e),n(!0)))},s=window.performance&&performance.getEntriesByName&&performance.getEntriesByName("first-contentful-paint")[0],m=s?null:a("paint",f);(s||m)&&(n=c(e,o,t),s&&f(s),u((function(i){o=r("FCP"),n=c(e,o,t),requestAnimationFrame((function(){requestAnimationFrame((function(){o.value=performance.now()-i.timeStamp,n(!0)}))}))})))},p=!1,l=-1,h=function(e,t){p||(d((function(e){l=e.value})),p=!0);var n,i=function(t){l>-1&&e(t)},f=r("CLS",0),s=0,m=[],v=function(e){if(!e.hadRecentInput){var t=m[0],i=m[m.length-1];s&&e.startTime-i.startTime<1e3&&e.startTime-t.startTime<5e3?(s+=e.value,m.push(e)):(s=e.value,m=[e]),s>f.value&&(f.value=s,f.entries=m,n())}},h=a("layout-shift",v);h&&(n=c(i,f,t),o((function(){h.takeRecords().map(v),n(!0)})),u((function(){s=0,l=-1,f=r("CLS",0),n=c(i,f,t)})))},T={passive:!0,capture:!0},y=new Date,g=function(i,r){e||(e=r,t=i,n=new Date,w(removeEventListener),E())},E=function(){if(t>=0&&t<n-y){var r={entryType:"first-input",name:e.type,target:e.target,cancelable:e.cancelable,startTime:e.timeStamp,processingStart:e.timeStamp+t};i.forEach((function(e){e(r)})),i=[]}},S=function(e){if(e.cancelable){var t=(e.timeStamp>1e12?new Date:performance.now())-e.timeStamp;"pointerdown"==e.type?function(e,t){var n=function(){g(e,t),r()},i=function(){r()},r=function(){removeEventListener("pointerup",n,T),removeEventListener("pointercancel",i,T)};addEventListener("pointerup",n,T),addEventListener("pointercancel",i,T)}(t,e):g(t,e)}},w=function(e){["mousedown","keydown","touchstart","pointerdown"].forEach((function(t){return e(t,S,T)}))},L=function(n,f){var s,m=v(),d=r("FID"),p=function(e){e.startTime<m.firstHiddenTime&&(d.value=e.processingStart-e.startTime,d.entries.push(e),s(!0))},l=a("first-input",p);s=c(n,d,f),l&&o((function(){l.takeRecords().map(p),l.disconnect()}),!0),l&&u((function(){var a;d=r("FID"),s=c(n,d,f),i=[],t=-1,e=null,w(addEventListener),a=p,i.push(a),E()}))},b={},F=function(e,t){var n,i=v(),f=r("LCP"),s=function(e){var t=e.startTime;t<i.firstHiddenTime&&(f.value=t,f.entries.push(e),n())},m=a("largest-contentful-paint",s);if(m){n=c(e,f,t);var d=function(){b[f.id]||(m.takeRecords().map(s),m.disconnect(),b[f.id]=!0,n(!0))};["keydown","click"].forEach((function(e){addEventListener(e,d,{once:!0,capture:!0})})),o(d,!0),u((function(i){f=r("LCP"),n=c(e,f,t),requestAnimationFrame((function(){requestAnimationFrame((function(){f.value=performance.now()-i.timeStamp,b[f.id]=!0,n(!0)}))}))}))}},P=function(e){var t,n=r("TTFB");t=function(){try{var t=performance.getEntriesByType("navigation")[0]||function(){var e=performance.timing,t={entryType:"navigation",startTime:0};for(var n in e)"navigationStart"!==n&&"toJSON"!==n&&(t[n]=Math.max(e[n]-e.navigationStart,0));return t}();if(n.value=n.delta=t.responseStart,n.value<0||n.value>performance.now())return;n.entries=[t],e(n)}catch(e){}},"complete"===document.readyState?setTimeout(t,0):addEventListener("load",(function(){return setTimeout(t,0)}))};export{h as getCLS,d as getFCP,L as getFID,F as getLCP,P as getTTFB}; | ||
var e,n,t,i,a,r=!1,o=function(e){addEventListener("pageshow",(function(n){n.persisted&&(r=!0,e(n))}),!0)},c=function(){return window.performance&&(performance.getEntriesByType&&performance.getEntriesByType("navigation")[0]||function(){var e=performance.timing,n={entryType:"navigation",startTime:0};for(var t in e)"navigationStart"!==t&&"toJSON"!==t&&(n[t]=Math.max(e[t]-e.navigationStart,0));return n}())},u=function(e,n){var t=c();return{name:e,value:void 0===n?-1:n,delta:0,entries:[],id:"v2-".concat(Date.now(),"-").concat(Math.floor(8999999999999*Math.random())+1e12),navigationType:r?"back_forward_cache":t&&t.type}},f=function(e,n,t){try{if(PerformanceObserver.supportedEntryTypes.includes(e)){var i=new PerformanceObserver((function(e){n(e.getEntries())}));return i.observe(Object.assign({type:e,buffered:!0},t||{})),i}}catch(e){}},s=function(e,n){var t=function t(i){"pagehide"!==i.type&&"hidden"!==document.visibilityState||(e(i),n&&(removeEventListener("visibilitychange",t,!0),removeEventListener("pagehide",t,!0)))};addEventListener("visibilitychange",t,!0),addEventListener("pagehide",t,!0)},d=function(e,n,t){var i;return function(a){n.value>=0&&(a||t)&&(n.delta=n.value-(i||0),(n.delta||void 0===i)&&(i=n.value,e(n)))}},v=-1,m=function(){return"hidden"===document.visibilityState?0:1/0},p=function(){s((function(e){var n=e.timeStamp;v=n}),!0)},l=function(){return v<0&&(v=m(),p(),o((function(){setTimeout((function(){v=m(),p()}),0)}))),{get firstHiddenTime(){return v}}},h=function(e,n){var t,i=l(),a=u("FCP"),r=function(e){e.forEach((function(e){"first-contentful-paint"===e.name&&(s&&s.disconnect(),e.startTime<i.firstHiddenTime&&(a.value=e.startTime,a.entries.push(e),t(!0)))}))},c=window.performance&&window.performance.getEntriesByName&&window.performance.getEntriesByName("first-contentful-paint")[0],s=c?null:f("paint",r);(c||s)&&(t=d(e,a,n),c&&r([c]),o((function(i){a=u("FCP"),t=d(e,a,n),requestAnimationFrame((function(){requestAnimationFrame((function(){a.value=performance.now()-i.timeStamp,t(!0)}))}))})))},y=!1,g=-1,T=function(e,n){y||(h((function(e){g=e.value})),y=!0);var t,i=function(n){g>-1&&e(n)},a=u("CLS",0),r=0,c=[],v=function(e){e.forEach((function(e){if(!e.hadRecentInput){var n=c[0],i=c[c.length-1];r&&e.startTime-i.startTime<1e3&&e.startTime-n.startTime<5e3?(r+=e.value,c.push(e)):(r=e.value,c=[e]),r>a.value&&(a.value=r,a.entries=c,t())}}))},m=f("layout-shift",v);m&&(t=d(i,a,n),s((function(){v(m.takeRecords()),t(!0)})),o((function(){r=0,g=-1,a=u("CLS",0),t=d(i,a,n)})))},E={passive:!0,capture:!0},w=new Date,S=function(i,a){e||(e=a,n=i,t=new Date,F(removeEventListener),L())},L=function(){if(n>=0&&n<t-w){var a={entryType:"first-input",name:e.type,target:e.target,cancelable:e.cancelable,startTime:e.timeStamp,processingStart:e.timeStamp+n};i.forEach((function(e){e(a)})),i=[]}},b=function(e){if(e.cancelable){var n=(e.timeStamp>1e12?new Date:performance.now())-e.timeStamp;"pointerdown"==e.type?function(e,n){var t=function(){S(e,n),a()},i=function(){a()},a=function(){removeEventListener("pointerup",t,E),removeEventListener("pointercancel",i,E)};addEventListener("pointerup",t,E),addEventListener("pointercancel",i,E)}(n,e):S(n,e)}},F=function(e){["mousedown","keydown","touchstart","pointerdown"].forEach((function(n){return e(n,b,E)}))},I=function(t,a){var r,c=l(),v=u("FID"),m=function(e){e.startTime<c.firstHiddenTime&&(v.value=e.processingStart-e.startTime,v.entries.push(e),r(!0))},p=function(e){e.forEach(m)},h=f("first-input",p);r=d(t,v,a),h&&s((function(){p(h.takeRecords()),h.disconnect()}),!0),h&&o((function(){var o;v=u("FID"),r=d(t,v,a),i=[],n=-1,e=null,F(addEventListener),o=m,i.push(o),L()}))},C=0,P=1/0,k=0,M=function(e){e.forEach((function(e){e.interactionId&&(P=Math.min(P,e.interactionId),k=Math.max(k,e.interactionId),C=k?(k-P)/7+1:0)}))},B=function(){return a?C:performance.interactionCount||0},D=function(){"interactionCount"in performance||a||(a=f("event",M,{type:"event",buffered:!0,durationThreshold:0}))},N=0,R=function(){return B()-N},q=[],x={},A=function(e,n){D();var t,i=u("INP"),a=function(e){e.forEach((function(e){e.interactionId&&function(e){var n=q[q.length-1],t=x[e.interactionId];if(t||q.length<10||e.duration>n.latency){if(t)t.entries.push(e),t.latency=Math.max(t.latency,e.duration);else{var i={id:e.interactionId,latency:e.duration,entries:[e]};x[i.id]=i,q.push(i)}q.sort((function(e,n){return n.latency-e.latency})),q.splice(10).forEach((function(e){delete x[e.id]}))}}(e)}));var n,a=(n=Math.min(q.length-1,Math.floor(R()/50)),q[n]);a&&a.latency!==i.value&&(i.value=a.latency,i.entries=a.entries,t())},r=f("event",a,{durationThreshold:40});t=d(e,i,n),r&&(s((function(){a(r.takeRecords()),i.value<0&&R()>0&&(i.value=0,i.entries=[]),t(!0)})),o((function(){q=[],N=B(),i=u("INP"),t=d(e,i,n)})))},H={},O=function(e,n){var t,i=l(),a=u("LCP"),r=function(e){var n=e[e.length-1];if(n){var r=n.startTime;r<i.firstHiddenTime&&(a.value=r,a.entries=[n],t())}},c=f("largest-contentful-paint",r);if(c){t=d(e,a,n);var v=function(){H[a.id]||(r(c.takeRecords()),c.disconnect(),H[a.id]=!0,t(!0))};["keydown","click"].forEach((function(e){addEventListener(e,v,{once:!0,capture:!0})})),s(v,!0),o((function(i){a=u("LCP"),t=d(e,a,n),requestAnimationFrame((function(){requestAnimationFrame((function(){a.value=performance.now()-i.timeStamp,H[a.id]=!0,t(!0)}))}))}))}},_=function(e,n){var t,i=u("TTFB"),a=d(e,i,n);t=function(){var e=c();if(e){if(i.value=e.responseStart,i.value<0||i.value>performance.now())return;i.entries=[e],a(!0)}},"complete"===document.readyState?setTimeout(t,0):addEventListener("load",(function(){return setTimeout(t,0)})),o((function(t){i=u("TTFB"),a=d(e,i,n),i.value=performance.now()-t.timeStamp,a(!0)}))};export{T as getCLS,h as getFCP,I as getFID,A as getINP,O as getLCP,_ as getTFB,T as onCLS,h as onFCP,I as onFID,A as onINP,O as onLCP,_ as onTTFB}; |
@@ -1,1 +0,1 @@ | ||
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).webVitals={})}(this,(function(e){"use strict";var t,n,i,r,a=function(e,t){return{name:e,value:void 0===t?-1:t,delta:0,entries:[],id:"v2-".concat(Date.now(),"-").concat(Math.floor(8999999999999*Math.random())+1e12)}},o=function(e,t){try{if(PerformanceObserver.supportedEntryTypes.includes(e)){if("first-input"===e&&!("PerformanceEventTiming"in self))return;var n=new PerformanceObserver((function(e){return e.getEntries().map(t)}));return n.observe({type:e,buffered:!0}),n}}catch(e){}},u=function(e,t){var n=function n(i){"pagehide"!==i.type&&"hidden"!==document.visibilityState||(e(i),t&&(removeEventListener("visibilitychange",n,!0),removeEventListener("pagehide",n,!0)))};addEventListener("visibilitychange",n,!0),addEventListener("pagehide",n,!0)},c=function(e){addEventListener("pageshow",(function(t){t.persisted&&e(t)}),!0)},f=function(e,t,n){var i;return function(r){t.value>=0&&(r||n)&&(t.delta=t.value-(i||0),(t.delta||void 0===i)&&(i=t.value,e(t)))}},s=-1,m=function(){return"hidden"===document.visibilityState?0:1/0},d=function(){u((function(e){var t=e.timeStamp;s=t}),!0)},v=function(){return s<0&&(s=m(),d(),c((function(){setTimeout((function(){s=m(),d()}),0)}))),{get firstHiddenTime(){return s}}},p=function(e,t){var n,i=v(),r=a("FCP"),u=function(e){"first-contentful-paint"===e.name&&(m&&m.disconnect(),e.startTime<i.firstHiddenTime&&(r.value=e.startTime,r.entries.push(e),n(!0)))},s=window.performance&&performance.getEntriesByName&&performance.getEntriesByName("first-contentful-paint")[0],m=s?null:o("paint",u);(s||m)&&(n=f(e,r,t),s&&u(s),c((function(i){r=a("FCP"),n=f(e,r,t),requestAnimationFrame((function(){requestAnimationFrame((function(){r.value=performance.now()-i.timeStamp,n(!0)}))}))})))},l=!1,g=-1,y={passive:!0,capture:!0},T=new Date,h=function(e,r){t||(t=r,n=e,i=new Date,S(removeEventListener),E())},E=function(){if(n>=0&&n<i-T){var e={entryType:"first-input",name:t.type,target:t.target,cancelable:t.cancelable,startTime:t.timeStamp,processingStart:t.timeStamp+n};r.forEach((function(t){t(e)})),r=[]}},L=function(e){if(e.cancelable){var t=(e.timeStamp>1e12?new Date:performance.now())-e.timeStamp;"pointerdown"==e.type?function(e,t){var n=function(){h(e,t),r()},i=function(){r()},r=function(){removeEventListener("pointerup",n,y),removeEventListener("pointercancel",i,y)};addEventListener("pointerup",n,y),addEventListener("pointercancel",i,y)}(t,e):h(t,e)}},S=function(e){["mousedown","keydown","touchstart","pointerdown"].forEach((function(t){return e(t,L,y)}))},w={};e.getCLS=function(e,t){l||(p((function(e){g=e.value})),l=!0);var n,i=function(t){g>-1&&e(t)},r=a("CLS",0),s=0,m=[],d=function(e){if(!e.hadRecentInput){var t=m[0],i=m[m.length-1];s&&e.startTime-i.startTime<1e3&&e.startTime-t.startTime<5e3?(s+=e.value,m.push(e)):(s=e.value,m=[e]),s>r.value&&(r.value=s,r.entries=m,n())}},v=o("layout-shift",d);v&&(n=f(i,r,t),u((function(){v.takeRecords().map(d),n(!0)})),c((function(){s=0,g=-1,r=a("CLS",0),n=f(i,r,t)})))},e.getFCP=p,e.getFID=function(e,i){var s,m=v(),d=a("FID"),p=function(e){e.startTime<m.firstHiddenTime&&(d.value=e.processingStart-e.startTime,d.entries.push(e),s(!0))},l=o("first-input",p);s=f(e,d,i),l&&u((function(){l.takeRecords().map(p),l.disconnect()}),!0),l&&c((function(){var o;d=a("FID"),s=f(e,d,i),r=[],n=-1,t=null,S(addEventListener),o=p,r.push(o),E()}))},e.getLCP=function(e,t){var n,i=v(),r=a("LCP"),s=function(e){var t=e.startTime;t<i.firstHiddenTime&&(r.value=t,r.entries.push(e),n())},m=o("largest-contentful-paint",s);if(m){n=f(e,r,t);var d=function(){w[r.id]||(m.takeRecords().map(s),m.disconnect(),w[r.id]=!0,n(!0))};["keydown","click"].forEach((function(e){addEventListener(e,d,{once:!0,capture:!0})})),u(d,!0),c((function(i){r=a("LCP"),n=f(e,r,t),requestAnimationFrame((function(){requestAnimationFrame((function(){r.value=performance.now()-i.timeStamp,w[r.id]=!0,n(!0)}))}))}))}},e.getTTFB=function(e){var t,n=a("TTFB");t=function(){try{var t=performance.getEntriesByType("navigation")[0]||function(){var e=performance.timing,t={entryType:"navigation",startTime:0};for(var n in e)"navigationStart"!==n&&"toJSON"!==n&&(t[n]=Math.max(e[n]-e.navigationStart,0));return t}();if(n.value=n.delta=t.responseStart,n.value<0||n.value>performance.now())return;n.entries=[t],e(n)}catch(e){}},"complete"===document.readyState?setTimeout(t,0):addEventListener("load",(function(){return setTimeout(t,0)}))},Object.defineProperty(e,"__esModule",{value:!0})})); | ||
!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports):"function"==typeof define&&define.amd?define(["exports"],n):n((e="undefined"!=typeof globalThis?globalThis:e||self).webVitals={})}(this,(function(e){"use strict";var n,t,i,r,a,o=!1,c=function(e){addEventListener("pageshow",(function(n){n.persisted&&(o=!0,e(n))}),!0)},u=function(){return window.performance&&(performance.getEntriesByType&&performance.getEntriesByType("navigation")[0]||function(){var e=performance.timing,n={entryType:"navigation",startTime:0};for(var t in e)"navigationStart"!==t&&"toJSON"!==t&&(n[t]=Math.max(e[t]-e.navigationStart,0));return n}())},f=function(e,n){var t=u();return{name:e,value:void 0===n?-1:n,delta:0,entries:[],id:"v2-".concat(Date.now(),"-").concat(Math.floor(8999999999999*Math.random())+1e12),navigationType:o?"back_forward_cache":t&&t.type}},s=function(e,n,t){try{if(PerformanceObserver.supportedEntryTypes.includes(e)){var i=new PerformanceObserver((function(e){n(e.getEntries())}));return i.observe(Object.assign({type:e,buffered:!0},t||{})),i}}catch(e){}},d=function(e,n){var t=function t(i){"pagehide"!==i.type&&"hidden"!==document.visibilityState||(e(i),n&&(removeEventListener("visibilitychange",t,!0),removeEventListener("pagehide",t,!0)))};addEventListener("visibilitychange",t,!0),addEventListener("pagehide",t,!0)},v=function(e,n,t){var i;return function(r){n.value>=0&&(r||t)&&(n.delta=n.value-(i||0),(n.delta||void 0===i)&&(i=n.value,e(n)))}},m=-1,l=function(){return"hidden"===document.visibilityState?0:1/0},p=function(){d((function(e){var n=e.timeStamp;m=n}),!0)},h=function(){return m<0&&(m=l(),p(),c((function(){setTimeout((function(){m=l(),p()}),0)}))),{get firstHiddenTime(){return m}}},y=function(e,n){var t,i=h(),r=f("FCP"),a=function(e){e.forEach((function(e){"first-contentful-paint"===e.name&&(u&&u.disconnect(),e.startTime<i.firstHiddenTime&&(r.value=e.startTime,r.entries.push(e),t(!0)))}))},o=window.performance&&window.performance.getEntriesByName&&window.performance.getEntriesByName("first-contentful-paint")[0],u=o?null:s("paint",a);(o||u)&&(t=v(e,r,n),o&&a([o]),c((function(i){r=f("FCP"),t=v(e,r,n),requestAnimationFrame((function(){requestAnimationFrame((function(){r.value=performance.now()-i.timeStamp,t(!0)}))}))})))},g=!1,T=-1,E=function(e,n){g||(y((function(e){T=e.value})),g=!0);var t,i=function(n){T>-1&&e(n)},r=f("CLS",0),a=0,o=[],u=function(e){e.forEach((function(e){if(!e.hadRecentInput){var n=o[0],i=o[o.length-1];a&&e.startTime-i.startTime<1e3&&e.startTime-n.startTime<5e3?(a+=e.value,o.push(e)):(a=e.value,o=[e]),a>r.value&&(r.value=a,r.entries=o,t())}}))},m=s("layout-shift",u);m&&(t=v(i,r,n),d((function(){u(m.takeRecords()),t(!0)})),c((function(){a=0,T=-1,r=f("CLS",0),t=v(i,r,n)})))},w={passive:!0,capture:!0},L=new Date,S=function(e,r){n||(n=r,t=e,i=new Date,I(removeEventListener),b())},b=function(){if(t>=0&&t<i-L){var e={entryType:"first-input",name:n.type,target:n.target,cancelable:n.cancelable,startTime:n.timeStamp,processingStart:n.timeStamp+t};r.forEach((function(n){n(e)})),r=[]}},F=function(e){if(e.cancelable){var n=(e.timeStamp>1e12?new Date:performance.now())-e.timeStamp;"pointerdown"==e.type?function(e,n){var t=function(){S(e,n),r()},i=function(){r()},r=function(){removeEventListener("pointerup",t,w),removeEventListener("pointercancel",i,w)};addEventListener("pointerup",t,w),addEventListener("pointercancel",i,w)}(n,e):S(n,e)}},I=function(e){["mousedown","keydown","touchstart","pointerdown"].forEach((function(n){return e(n,F,w)}))},P=function(e,i){var a,o=h(),u=f("FID"),m=function(e){e.startTime<o.firstHiddenTime&&(u.value=e.processingStart-e.startTime,u.entries.push(e),a(!0))},l=function(e){e.forEach(m)},p=s("first-input",l);a=v(e,u,i),p&&d((function(){l(p.takeRecords()),p.disconnect()}),!0),p&&c((function(){var o;u=f("FID"),a=v(e,u,i),r=[],t=-1,n=null,I(addEventListener),o=m,r.push(o),b()}))},C=0,M=1/0,k=0,B=function(e){e.forEach((function(e){e.interactionId&&(M=Math.min(M,e.interactionId),k=Math.max(k,e.interactionId),C=k?(k-M)/7+1:0)}))},D=function(){return a?C:performance.interactionCount||0},N=function(){"interactionCount"in performance||a||(a=s("event",B,{type:"event",buffered:!0,durationThreshold:0}))},x=0,O=function(){return D()-x},R=[],q={},A=function(e,n){N();var t,i=f("INP"),r=function(e){e.forEach((function(e){e.interactionId&&function(e){var n=R[R.length-1],t=q[e.interactionId];if(t||R.length<10||e.duration>n.latency){if(t)t.entries.push(e),t.latency=Math.max(t.latency,e.duration);else{var i={id:e.interactionId,latency:e.duration,entries:[e]};q[i.id]=i,R.push(i)}R.sort((function(e,n){return n.latency-e.latency})),R.splice(10).forEach((function(e){delete q[e.id]}))}}(e)}));var n,r=(n=Math.min(R.length-1,Math.floor(O()/50)),R[n]);r&&r.latency!==i.value&&(i.value=r.latency,i.entries=r.entries,t())},a=s("event",r,{durationThreshold:40});t=v(e,i,n),a&&(d((function(){r(a.takeRecords()),i.value<0&&O()>0&&(i.value=0,i.entries=[]),t(!0)})),c((function(){R=[],x=D(),i=f("INP"),t=v(e,i,n)})))},H={},_=function(e,n){var t,i=h(),r=f("LCP"),a=function(e){var n=e[e.length-1];if(n){var a=n.startTime;a<i.firstHiddenTime&&(r.value=a,r.entries=[n],t())}},o=s("largest-contentful-paint",a);if(o){t=v(e,r,n);var u=function(){H[r.id]||(a(o.takeRecords()),o.disconnect(),H[r.id]=!0,t(!0))};["keydown","click"].forEach((function(e){addEventListener(e,u,{once:!0,capture:!0})})),d(u,!0),c((function(i){r=f("LCP"),t=v(e,r,n),requestAnimationFrame((function(){requestAnimationFrame((function(){r.value=performance.now()-i.timeStamp,H[r.id]=!0,t(!0)}))}))}))}},j=function(e,n){var t,i=f("TTFB"),r=v(e,i,n);t=function(){var e=u();if(e){if(i.value=e.responseStart,i.value<0||i.value>performance.now())return;i.entries=[e],r(!0)}},"complete"===document.readyState?setTimeout(t,0):addEventListener("load",(function(){return setTimeout(t,0)})),c((function(t){i=f("TTFB"),r=v(e,i,n),i.value=performance.now()-t.timeStamp,r(!0)}))};e.getCLS=E,e.getFCP=y,e.getFID=P,e.getINP=A,e.getLCP=_,e.getTFB=j,e.onCLS=E,e.onFCP=y,e.onFID=P,e.onINP=A,e.onLCP=_,e.onTTFB=j,Object.defineProperty(e,"__esModule",{value:!0})})); |
{ | ||
"name": "web-vitals", | ||
"version": "2.1.4", | ||
"version": "3.0.0-beta.0", | ||
"description": "Easily measure performance metrics in JavaScript", | ||
@@ -65,27 +65,27 @@ "main": "dist/web-vitals.umd.js", | ||
"devDependencies": { | ||
"@babel/core": "^7.16.10", | ||
"@babel/core": "^7.17.9", | ||
"@babel/preset-env": "^7.16.11", | ||
"@rollup/plugin-replace": "^3.0.1", | ||
"@typescript-eslint/eslint-plugin": "^5.10.0", | ||
"@typescript-eslint/parser": "^5.10.0", | ||
"@wdio/cli": "^7.16.13", | ||
"@wdio/local-runner": "^7.16.13", | ||
"@wdio/mocha-framework": "^7.16.13", | ||
"@wdio/selenium-standalone-service": "^7.16.13", | ||
"@wdio/spec-reporter": "^7.16.13", | ||
"body-parser": "^1.19.1", | ||
"chromedriver": "^97.0.0", | ||
"eslint": "^8.7.0", | ||
"@rollup/plugin-replace": "^4.0.0", | ||
"@typescript-eslint/eslint-plugin": "^5.20.0", | ||
"@typescript-eslint/parser": "^5.20.0", | ||
"@wdio/cli": "^7.19.6", | ||
"@wdio/local-runner": "^7.19.5", | ||
"@wdio/mocha-framework": "^7.19.5", | ||
"@wdio/selenium-standalone-service": "^7.19.5", | ||
"@wdio/spec-reporter": "^7.19.5", | ||
"body-parser": "^1.20.0", | ||
"chromedriver": "^100.0.0", | ||
"eslint": "^8.14.0", | ||
"eslint-config-google": "^0.14.0", | ||
"express": "^4.17.2", | ||
"fs-extra": "^10.0.0", | ||
"express": "^4.17.3", | ||
"fs-extra": "^10.1.0", | ||
"husky": "^7.0.4", | ||
"npm-run-all": "^4.1.5", | ||
"nunjucks": "^3.2.3", | ||
"rollup": "^2.64.0", | ||
"rollup": "^2.70.2", | ||
"rollup-plugin-babel": "^4.4.0", | ||
"rollup-plugin-terser": "^7.0.2", | ||
"typescript": "^4.5.5", | ||
"wdio-chromedriver-service": "^7.2.6" | ||
"typescript": "^4.6.3", | ||
"wdio-chromedriver-service": "^7.3.2" | ||
} | ||
} |
188
README.md
@@ -29,5 +29,5 @@ # `web-vitals` | ||
The `web-vitals` library is a tiny (~1K), modular library for measuring all the [Web Vitals](https://web.dev/vitals/) metrics on real users, in a way that accurately matches how they're measured by Chrome and reported to other Google tools (e.g. [Chrome User Experience Report](https://developers.google.com/web/tools/chrome-user-experience-report), [Page Speed Insights](https://developers.google.com/speed/pagespeed/insights/), [Search Console's Speed Report](https://webmasters.googleblog.com/2019/11/search-console-speed-report.html)). | ||
The `web-vitals` library is a tiny (~1K, brotli'd), modular library for measuring all the [Web Vitals](https://web.dev/vitals/) metrics on real users, in a way that accurately matches how they're measured by Chrome and reported to other Google tools (e.g. [Chrome User Experience Report](https://developers.google.com/web/tools/chrome-user-experience-report), [Page Speed Insights](https://developers.google.com/speed/pagespeed/insights/), [Search Console's Speed Report](https://webmasters.googleblog.com/2019/11/search-console-speed-report.html)). | ||
The library supports all of the [Core Web Vitals](https://web.dev/vitals/#core-web-vitals) as well as all of the [other Web Vitals](https://web.dev/vitals/#other-web-vitals) that can be measured [in the field](https://web.dev/user-centric-performance-metrics/#how-metrics-are-measured): | ||
The library supports all of the [Core Web Vitals](https://web.dev/vitals/#core-web-vitals) as well as a number of other metrics that are useful in diagnosing [real-user](https://web.dev/user-centric-performance-metrics/) performance issues. | ||
@@ -40,4 +40,5 @@ ### Core Web Vitals | ||
### Other Web Vitals | ||
### Other metrics | ||
- [Interaction to next Paint (INP)](https://web.dev/responsiveness/) _(experimental)_ | ||
- [First Contentful Paint (FCP)](https://web.dev/fcp/) | ||
@@ -58,2 +59,6 @@ - [Time to First Byte (TTFB)](https://web.dev/ttfb/) | ||
```sh | ||
# Install the latest version 3 beta (which includes INP). | ||
npm install web-vitals@next | ||
# Install the current stable version (version 2). | ||
npm install web-vitals | ||
@@ -73,9 +78,11 @@ ``` | ||
```js | ||
import {getLCP, getFID, getCLS} from 'web-vitals'; | ||
import {onLCP, onFID, onCLS} from 'web-vitals'; | ||
getCLS(console.log); | ||
getFID(console.log); | ||
getLCP(console.log); | ||
onCLS(console.log); | ||
onFID(console.log); | ||
onLCP(console.log); | ||
``` | ||
_**Note:** in version 2, these functioned were named `getXXX()` rather than `onXXX()`. They've [been renamed](https://github.com/GoogleChrome/web-vitals/pull/222) in version 3 to reduce confusion (see [#217](https://github.com/GoogleChrome/web-vitals/pull/217) for details) and will continue to be available using the `getXXX()` until at least version 4. Users are encouraged to switch to the new names, though, for future compatibility._ | ||
<a name="how-to-use-the-polyfill"><a> | ||
@@ -90,4 +97,4 @@ | ||
```diff | ||
- import {getLCP, getFID, getCLS} from 'web-vitals'; | ||
+ import {getLCP, getFID, getCLS} from 'web-vitals/base'; | ||
- import {onLCP, onFID, onCLS} from 'web-vitals'; | ||
+ import {onLCP, onFID, onCLS} from 'web-vitals/base'; | ||
``` | ||
@@ -123,2 +130,4 @@ | ||
_**Important!** users who want to load version 3 beta from the unpkg CDN should specify a version number or link to the [web-vitals@next](https://unpkg.com/web-vitals@next?module) tag._ | ||
**Load the "standard" version** _(using a module script)_ | ||
@@ -129,7 +138,7 @@ | ||
<script type="module"> | ||
import {getCLS, getFID, getLCP} from 'https://unpkg.com/web-vitals?module'; | ||
import {onCLS, onFID, onLCP} from 'https://unpkg.com/web-vitals?module'; | ||
getCLS(console.log); | ||
getFID(console.log); | ||
getLCP(console.log); | ||
onCLS(console.log); | ||
onFID(console.log); | ||
onLCP(console.log); | ||
</script> | ||
@@ -148,5 +157,5 @@ ``` | ||
// methods can be found on the `webVitals` global namespace. | ||
webVitals.getCLS(console.log); | ||
webVitals.getFID(console.log); | ||
webVitals.getLCP(console.log); | ||
webVitals.onCLS(console.log); | ||
webVitals.onFID(console.log); | ||
webVitals.onLCP(console.log); | ||
} | ||
@@ -178,5 +187,5 @@ document.head.appendChild(script); | ||
// methods can be found on the `webVitals` global namespace. | ||
webVitals.getCLS(console.log); | ||
webVitals.getFID(console.log); | ||
webVitals.getLCP(console.log); | ||
webVitals.onCLS(console.log); | ||
webVitals.onFID(console.log); | ||
webVitals.onLCP(console.log); | ||
} | ||
@@ -201,7 +210,7 @@ document.head.appendChild(script); | ||
```js | ||
import {getCLS, getFID, getLCP} from 'web-vitals'; | ||
import {onCLS, onFID, onLCP} from 'web-vitals'; | ||
getCLS(console.log); | ||
getFID(console.log); | ||
getLCP(console.log); | ||
onCLS(console.log); | ||
onFID(console.log); | ||
onLCP(console.log); | ||
``` | ||
@@ -214,3 +223,3 @@ | ||
- FID is not reported if the user never interacts with the page. | ||
- FCP, FID, and LCP are not reported if the page was loaded in the background. | ||
- CLS, FCP, FID, and LCP are not reported if the page was loaded in the background. | ||
@@ -220,5 +229,5 @@ In other cases, a metric callback may be called more than once: | ||
- CLS should be reported any time the [page's `visibilityState` changes to hidden](https://developers.google.com/web/updates/2018/07/page-lifecycle-api#advice-hidden). | ||
- CLS, FCP, FID, and LCP are reported again after a page is restored from the [back/forward cache](https://web.dev/bfcache/). | ||
- All metrics are reported again (with the above exceptions) after a page is restored from the [back/forward cache](https://web.dev/bfcache/). | ||
_**Warning:** do not call any of the Web Vitals functions (e.g. `getCLS()`, `getFID()`, `getLCP()`) more than once per page load. Each of these functions creates a `PerformanceObserver` instance and registers event listeners for the lifetime of the page. While the overhead of calling these functions once is negligible, calling them repeatedly on the same page may eventually result in a memory leak._ | ||
_**Warning:** do not call any of the Web Vitals functions (e.g. `onCLS()`, `onFID()`, `onLCP()`) more than once per page load. Each of these functions creates a `PerformanceObserver` instance and registers event listeners for the lifetime of the page. While the overhead of calling these functions once is negligible, calling them repeatedly on the same page may eventually result in a memory leak._ | ||
@@ -232,6 +241,6 @@ ### Report the value on every change | ||
```js | ||
import {getCLS} from 'web-vitals'; | ||
import {onCLS} from 'web-vitals'; | ||
// Logs CLS as the value changes. | ||
getCLS(console.log, true); | ||
onCLS(console.log, true); | ||
``` | ||
@@ -248,3 +257,3 @@ | ||
```js | ||
import {getCLS, getFID, getLCP} from 'web-vitals'; | ||
import {onCLS, onFID, onLCP} from 'web-vitals'; | ||
@@ -255,5 +264,5 @@ function logDelta({name, id, delta}) { | ||
getCLS(logDelta); | ||
getFID(logDelta); | ||
getLCP(logDelta); | ||
onCLS(logDelta); | ||
onFID(logDelta); | ||
onLCP(logDelta); | ||
``` | ||
@@ -272,3 +281,3 @@ | ||
```js | ||
import {getCLS, getFID, getLCP} from 'web-vitals'; | ||
import {onCLS, onFID, onLCP} from 'web-vitals'; | ||
@@ -285,5 +294,5 @@ function sendToAnalytics(metric) { | ||
getCLS(sendToAnalytics); | ||
getFID(sendToAnalytics); | ||
getLCP(sendToAnalytics); | ||
onCLS(sendToAnalytics); | ||
onFID(sendToAnalytics); | ||
onLCP(sendToAnalytics); | ||
``` | ||
@@ -304,3 +313,3 @@ | ||
```js | ||
import {getCLS, getFID, getLCP} from 'web-vitals'; | ||
import {onCLS, onFID, onLCP} from 'web-vitals'; | ||
@@ -335,5 +344,5 @@ function sendToGoogleAnalytics({name, delta, id}) { | ||
getCLS(sendToGoogleAnalytics); | ||
getFID(sendToGoogleAnalytics); | ||
getLCP(sendToGoogleAnalytics); | ||
onCLS(sendToGoogleAnalytics); | ||
onFID(sendToGoogleAnalytics); | ||
onLCP(sendToGoogleAnalytics); | ||
``` | ||
@@ -344,3 +353,3 @@ | ||
```js | ||
import {getCLS, getFID, getLCP} from 'web-vitals'; | ||
import {onCLS, onFID, onLCP} from 'web-vitals'; | ||
@@ -372,5 +381,5 @@ function sendToGoogleAnalytics({name, delta, id}) { | ||
getCLS(sendToGoogleAnalytics); | ||
getFID(sendToGoogleAnalytics); | ||
getLCP(sendToGoogleAnalytics); | ||
onCLS(sendToGoogleAnalytics); | ||
onFID(sendToGoogleAnalytics); | ||
onLCP(sendToGoogleAnalytics); | ||
``` | ||
@@ -383,3 +392,3 @@ | ||
```js | ||
import {getCLS, getFID, getLCP} from 'web-vitals'; | ||
import {onCLS, onFID, onLCP} from 'web-vitals'; | ||
@@ -405,5 +414,5 @@ function sendToGoogleAnalytics({name, delta, value, id}) { | ||
getCLS(sendToGoogleAnalytics); | ||
getFID(sendToGoogleAnalytics); | ||
getLCP(sendToGoogleAnalytics); | ||
onCLS(sendToGoogleAnalytics); | ||
onFID(sendToGoogleAnalytics); | ||
onLCP(sendToGoogleAnalytics); | ||
``` | ||
@@ -426,3 +435,3 @@ | ||
```js | ||
import {getCLS, getFID, getLCP} from 'web-vitals'; | ||
import {onCLS, onFID, onLCP} from 'web-vitals'; | ||
@@ -448,5 +457,5 @@ const queue = new Set(); | ||
getCLS(addToQueue); | ||
getFID(addToQueue); | ||
getLCP(addToQueue); | ||
onCLS(addToQueue); | ||
onFID(addToQueue); | ||
onLCP(addToQueue); | ||
@@ -563,3 +572,3 @@ // Report all available metrics whenever the page is backgrounded or unloaded. | ||
// The name of the metric (in acronym form). | ||
name: 'CLS' | 'FCP' | 'FID' | 'LCP' | 'TTFB'; | ||
name: 'CLS' | 'FCP' | 'FID' | 'INP' | 'LCP' | 'TTFB'; | ||
@@ -579,5 +588,12 @@ // The current value of the metric. | ||
// Any performance entries used in the metric value calculation. | ||
// Note, entries will be added to the array as the value changes. | ||
entries: (PerformanceEntry | FirstInputPolyfillEntry | NavigationTimingPolyfillEntry)[]; | ||
// Any performance entries relevant to the metric value calculation. | ||
// The array may also be empty if the metric value was not based on any | ||
// entries (e.g. a CLS value of 0 given no layout shifts). | ||
entries: (PerformanceEntry | LayoutShift | FirstInputPolyfillEntry | NavigationTimingPolyfillEntry)[]; | ||
// For regular navigations, the type will be the same as the type indicated | ||
// by the Navigation Timing API (or `undefined` if the browser doesn't | ||
// support that API). For pages that are restored from the bfcache, this | ||
// value will be 'back_forward_cache'. | ||
navigationType: NavigationType | 'back_forward_cache' | undefined; | ||
} | ||
@@ -599,4 +615,3 @@ ``` | ||
```ts | ||
type FirstInputPolyfillEntry = Omit<PerformanceEventTiming, | ||
'processingEnd' | 'processingEnd' | 'toJSON'> | ||
type FirstInputPolyfillEntry = Omit<PerformanceEventTiming, 'processingEnd' | 'toJSON'> | ||
``` | ||
@@ -614,3 +629,3 @@ | ||
When calling `getTTFB()`, if the browser doesn't support the [Navigation Timing API Level 2](https://www.w3.org/TR/navigation-timing-2/) interface, it will polyfill the entry object using timings from `performance.timing`: | ||
When calling `onTTFB()`, if the browser doesn't support the [Navigation Timing API Level 2](https://www.w3.org/TR/navigation-timing-2/) interface, it will polyfill the entry object using timings from `performance.timing`: | ||
@@ -637,6 +652,6 @@ ```ts | ||
#### `getCLS()` | ||
#### `onCLS()` | ||
```ts | ||
type getCLS = (onReport: ReportHandler, reportAllChanges?: boolean) => void | ||
type onCLS = (onReport: ReportHandler, reportAllChanges?: boolean) => void | ||
``` | ||
@@ -646,10 +661,10 @@ | ||
If the `reportAllChanges` param is `true`, the `onReport` function will be called any time a new `layout-shift` performance entry is dispatched, or once the final value of the metric has been determined. | ||
If the `reportAllChanges` param is `true`, the `onReport` function will be called as soon as the value is initially determined as well as any time the value changes throughout the page lifespan. | ||
_**Important:** unlike other metrics, CLS continues to monitor changes for the entire lifespan of the page—including if the user returns to the page after it's been hidden/backgrounded. However, since browsers often [will not fire additional callbacks once the user has backgrounded a page](https://developers.google.com/web/updates/2018/07/page-lifecycle-api#advice-hidden), `onReport` is always called when the page's visibility state changes to hidden. As a result, the `onReport` function might be called multiple times during the same page load (see [Reporting only the delta of changes](#report-only-the-delta-of-changes) for how to manage this)._ | ||
_**Important:** CLS should be continually monitored for changes throughout the entire lifespan of a page—including if the user returns to the page after it's been hidden/backgrounded. However, since browsers often [will not fire additional callbacks once the user has backgrounded a page](https://developers.google.com/web/updates/2018/07/page-lifecycle-api#advice-hidden), `onReport` is always called when the page's visibility state changes to hidden. As a result, the `onReport` function might be called multiple times during the same page load (see [Reporting only the delta of changes](#report-only-the-delta-of-changes) for how to manage this)._ | ||
#### `getFCP()` | ||
#### `onFCP()` | ||
```ts | ||
type getFCP = (onReport: ReportHandler, reportAllChanges?: boolean) => void | ||
type onFCP = (onReport: ReportHandler, reportAllChanges?: boolean) => void | ||
``` | ||
@@ -659,6 +674,6 @@ | ||
#### `getFID()` | ||
#### `onFID()` | ||
```ts | ||
type getFID = (onReport: ReportHandler, reportAllChanges?: boolean) => void | ||
type onFID = (onReport: ReportHandler, reportAllChanges?: boolean) => void | ||
``` | ||
@@ -670,16 +685,28 @@ | ||
#### `getLCP()` | ||
#### `onINP()` | ||
```ts | ||
type getLCP = (onReport: ReportHandler, reportAllChanges?: boolean) => void | ||
type onINP = (onReport: ReportHandler, reportAllChanges?: boolean) => void | ||
``` | ||
Calculates the [LCP](https://web.dev/lcp/) value for the current page and calls the `onReport` function once the value is ready (along with the relevant `largest-contentful-paint` performance entries used to determine the value). The reported value is a [`DOMHighResTimeStamp`](https://developer.mozilla.org/en-US/docs/Web/API/DOMHighResTimeStamp). | ||
Calculates the [INP](https://web.dev/responsiveness/) value for the current page and calls the `onReport` function once the value is ready, along with the `event` performance entries reported for that interaction. The reported value is a [`DOMHighResTimeStamp`](https://developer.mozilla.org/en-US/docs/Web/API/DOMHighResTimeStamp). | ||
If the `reportAllChanges` param is `true`, the `onReport` function will be called as soon as the value is initially determined as well as any time the value changes throughout the page lifespan. | ||
_**Important:** INP should be continually monitored for changes throughout the entire lifespan of a page—including if the user returns to the page after it's been hidden/backgrounded. However, since browsers often [will not fire additional callbacks once the user has backgrounded a page](https://developers.google.com/web/updates/2018/07/page-lifecycle-api#advice-hidden), `onReport` is always called when the page's visibility state changes to hidden. As a result, the `onReport` function might be called multiple times during the same page load (see [Reporting only the delta of changes](#report-only-the-delta-of-changes) for how to manage this)._ | ||
#### `onLCP()` | ||
```ts | ||
type onLCP = (onReport: ReportHandler, reportAllChanges?: boolean) => void | ||
``` | ||
Calculates the [LCP](https://web.dev/lcp/) value for the current page and calls the `onReport` function once the value is ready (along with the relevant `largest-contentful-paint` performance entry used to determine the value). The reported value is a [`DOMHighResTimeStamp`](https://developer.mozilla.org/en-US/docs/Web/API/DOMHighResTimeStamp). | ||
If the `reportAllChanges` param is `true`, the `onReport` function will be called any time a new `largest-contentful-paint` performance entry is dispatched, or once the final value of the metric has been determined. | ||
#### `getTTFB()` | ||
#### `onTTFB()` | ||
```ts | ||
type getTTFB = (onReport: ReportHandler, reportAllChanges?: boolean) => void | ||
type onTTFB = (onReport: ReportHandler, reportAllChanges?: boolean) => void | ||
``` | ||
@@ -694,5 +721,5 @@ | ||
```js | ||
import {getTTFB} from 'web-vitals'; | ||
import {onTTFB} from 'web-vitals'; | ||
getTTFB((metric) => { | ||
onTTFB((metric) => { | ||
// Calculate the request time by subtracting from TTFB | ||
@@ -714,7 +741,8 @@ // everything that happened prior to the request starting. | ||
- `getCLS()`: Chromium, | ||
- `getFCP()`: Chromium, Firefox, Safari | ||
- `getFID()`: Chromium, Firefox, Safari, Internet Explorer (with the [polyfill](#how-to-use-the-polyfill)) | ||
- `getLCP()`: Chromium | ||
- `getTTFB()`: Chromium, Firefox, Safari, Internet Explorer | ||
- `onCLS()`: Chromium, | ||
- `onFCP()`: Chromium, Firefox, Safari | ||
- `onFID()`: Chromium, Firefox, Safari, Internet Explorer (with the [polyfill](#how-to-use-the-polyfill)) | ||
- `onINP()`: Chromium | ||
- `onLCP()`: Chromium | ||
- `onTTFB()`: Chromium, Firefox, Safari, Internet Explorer | ||
@@ -731,3 +759,3 @@ ## Limitations | ||
_**Note:** given the lack of iframe support, the `getCLS()` function technically measures [DCLS](https://github.com/wicg/layout-instability#cumulative-scores) (Document Cumulative Layout Shift) rather than CLS, if the page includes iframes)._ | ||
_**Note:** given the lack of iframe support, the `onCLS()` function technically measures [DCLS](https://github.com/wicg/layout-instability#cumulative-scores) (Document Cumulative Layout Shift) rather than CLS, if the page includes iframes)._ | ||
@@ -734,0 +762,0 @@ ## Development |
@@ -17,8 +17,10 @@ /* | ||
export {getCLS} from './getCLS.js'; | ||
export {getFCP} from './getFCP.js'; | ||
export {getFID} from './getFID.js'; | ||
export {getLCP} from './getLCP.js'; | ||
export {getTTFB} from './getTTFB.js'; | ||
export {onCLS} from './onCLS.js'; | ||
export {onFCP} from './onFCP.js'; | ||
export {onFID} from './onFID.js'; | ||
export {onINP} from './onINP.js'; | ||
export {onLCP} from './onLCP.js'; | ||
export {onTTFB} from './onTTFB.js'; | ||
export * from './deprecated.js'; | ||
export * from './types.js'; |
@@ -17,3 +17,3 @@ /* | ||
import {onBFCacheRestore} from './onBFCacheRestore.js'; | ||
import {onBFCacheRestore} from './bfcache.js'; | ||
import {onHidden} from './onHidden.js'; | ||
@@ -20,0 +20,0 @@ |
@@ -17,7 +17,10 @@ /* | ||
import {isBFCacheRestore} from './bfcache.js'; | ||
import {generateUniqueID} from './generateUniqueID.js'; | ||
import {getNavigationEntry} from './getNavigationEntry.js'; | ||
import {Metric} from '../types.js'; | ||
import {generateUniqueID} from './generateUniqueID.js'; | ||
export const initMetric = (name: Metric['name'], value?: number): Metric => { | ||
const navigationEntry = getNavigationEntry(); | ||
return { | ||
@@ -28,4 +31,6 @@ name, | ||
entries: [], | ||
id: generateUniqueID() | ||
id: generateUniqueID(), | ||
navigationType: isBFCacheRestore() ? 'back_forward_cache' : | ||
navigationEntry && navigationEntry.type, | ||
}; | ||
}; |
@@ -17,4 +17,7 @@ /* | ||
export interface PerformanceEntryHandler { | ||
(entry: PerformanceEntry): void; | ||
import {Metric} from '../types.js'; | ||
interface PerformanceEntriesHandler { | ||
(entries: Metric['entries']): void; | ||
} | ||
@@ -31,17 +34,15 @@ | ||
export const observe = ( | ||
type: string, | ||
callback: PerformanceEntryHandler, | ||
type: string, | ||
callback: PerformanceEntriesHandler, | ||
opts?: PerformanceObserverInit, | ||
): PerformanceObserver | undefined => { | ||
try { | ||
if (PerformanceObserver.supportedEntryTypes.includes(type)) { | ||
// More extensive feature detect needed for Firefox due to: | ||
// https://github.com/GoogleChrome/web-vitals/issues/142 | ||
if (type === 'first-input' && !('PerformanceEventTiming' in self)) { | ||
return; | ||
} | ||
const po: PerformanceObserver = | ||
new PerformanceObserver((l) => l.getEntries().map(callback)); | ||
po.observe({type, buffered: true}); | ||
const po: PerformanceObserver = new PerformanceObserver((list) => { | ||
callback(list.getEntries()); | ||
}); | ||
po.observe(Object.assign({ | ||
type, | ||
buffered: true, | ||
}, opts || {}) as PerformanceObserverInit); | ||
return po; | ||
@@ -48,0 +49,0 @@ } |
@@ -19,3 +19,3 @@ /* | ||
// The name of the metric (in acronym form). | ||
name: 'CLS' | 'FCP' | 'FID' | 'LCP' | 'TTFB'; | ||
name: 'CLS' | 'FCP' | 'FID' | 'INP' | 'LCP' | 'TTFB'; | ||
@@ -38,5 +38,12 @@ // The current value of the metric. | ||
// Any performance entries used in the metric value calculation. | ||
// Note, entries will be added to the array as the value changes. | ||
entries: (PerformanceEntry | FirstInputPolyfillEntry | NavigationTimingPolyfillEntry)[]; | ||
// Any performance entries relevant to the metric value calculation. | ||
// The array may also be empty if the metric value was not based on any | ||
// entries (e.g. a CLS value of 0 given no layout shifts). | ||
entries: (PerformanceEntry | LayoutShift | FirstInputPolyfillEntry | NavigationTimingPolyfillEntry)[]; | ||
// For regular navigations, the type will be the same as the type indicated | ||
// by the Navigation Timing API (or `undefined` if the browser doesn't | ||
// support that API). For pages that are restored from the bfcache, this | ||
// value will be 'back_forward_cache'. | ||
navigationType: NavigationType | 'back_forward_cache' | undefined; | ||
} | ||
@@ -48,2 +55,14 @@ | ||
interface PerformanceEntryMap { | ||
'navigation': PerformanceNavigationTiming; | ||
'resource': PerformanceResourceTiming; | ||
'paint': PerformancePaintTiming; | ||
} | ||
declare global { | ||
interface Performance { | ||
getEntriesByType<K extends keyof PerformanceEntryMap>(type: K): PerformanceEntryMap[K][] | ||
} | ||
} | ||
// https://wicg.github.io/event-timing/#sec-performance-event-timing | ||
@@ -56,6 +75,17 @@ export interface PerformanceEventTiming extends PerformanceEntry { | ||
target?: Element; | ||
interactionId?: number; | ||
} | ||
// https://wicg.github.io/layout-instability/#sec-layout-shift | ||
export interface LayoutShift extends PerformanceEntry { | ||
value: number; | ||
hadRecentInput: boolean; | ||
} | ||
export interface PerformanceObserverInit { | ||
durationThreshold?: number; | ||
} | ||
export type FirstInputPolyfillEntry = | ||
Omit<PerformanceEventTiming, 'processingEnd' | 'toJSON'> | ||
Omit<PerformanceEventTiming, 'processingEnd'> | ||
@@ -68,3 +98,3 @@ export interface FirstInputPolyfillCallback { | ||
'initiatorType' | 'nextHopProtocol' | 'redirectCount' | 'transferSize' | | ||
'encodedBodySize' | 'decodedBodySize' | 'toJSON'> | ||
'encodedBodySize' | 'decodedBodySize'> | ||
@@ -71,0 +101,0 @@ export interface WebVitalsGlobal { |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
179850
75
2526
769
2
1