web-vitals - npm Package Compare versions

Comparing version 2.0.0-beta.1 to 2.0.0-beta.2

dist/modules/getCLS.js

@@ -16,3 +16,2 @@ /*
  */
-import { getVisibilityWatcher } from './lib/getVisibilityWatcher.js';
 import { initMetric } from './lib/initMetric.js';
@@ -23,12 +22,16 @@ import { observe } from './lib/observe.js';
 import { bindReporter } from './lib/bindReporter.js';
+import { getFCP } from './getFCP.js';
+let isMonitoringFCP = false;
+let fcpValue = -1;
 export const getCLS = (onReport, reportAllChanges) => {
-    const visibilityWatcher = getVisibilityWatcher();
+    // Start monitoring FCP so we can only report CLS if FCP is also reported.
+    // Note: this is done to match the current behavior of CrUX.
+    if (!isMonitoringFCP) {
+        getFCP((metric) => {
+            fcpValue = metric.value;
+        });
+        isMonitoringFCP = true;
+    }
     const onReportWrapped = (arg) => {
-        // Only report if the page was visible at some point in its lifecycle.
-        // Note: this doesn't technically match the current behavior of CrUX, which
-        // only includes pages that report FCP. However, we plan to change the
-        // behavior of CrUX in the future, and matching it would couple CLS to FCP
-        // in an awkward way, so in this library we only ignore CLS if the page
-        // was never visible (which should be the same as CrUX in most)
-        if (visibilityWatcher.firstVisibleTime < performance.now()) {
+        if (fcpValue > -1) {
             onReport(arg);
@@ -74,2 +77,3 @@ }
             sessionValue = 0;
+            fcpValue = -1;
             metric = initMetric('CLS', 0);
@@ -76,0 +80,0 @@ report = bindReporter(onReportWrapped, metric, reportAllChanges);

dist/modules/lib/getVisibilityWatcher.d.ts

@@ -1,6 +0,3 @@
-interface VisibilityWatcher {
-    firstHiddenTime: number;
-    firstVisibleTime: number;
-}
-export declare const getVisibilityWatcher: () => VisibilityWatcher;
-export {};
+export declare const getVisibilityWatcher: () => {
+    readonly firstHiddenTime: number;
+};

dist/modules/lib/getVisibilityWatcher.js

@@ -17,25 +17,29 @@ /*
 import { onBFCacheRestore } from './onBFCacheRestore.js';
-let timeStamps;
-const initTimeStamps = () => {
-    // Assume the visibilityState when this code is run was the visibilityState
-    // since page load. This isn't a perfect heuristic, but it's the best we can
-    // do until an API is available to support querying past visibilityState.
-    timeStamps = {
-        'visible': document.visibilityState === 'visible' ? 0 : Infinity,
-        'hidden': document.visibilityState === 'hidden' ? 0 : Infinity,
-    };
+import { onHidden } from './onHidden.js';
+let firstHiddenTime = -1;
+const initHiddenTime = () => {
+    return document.visibilityState === 'hidden' ? 0 : Infinity;
 };
-const onVisibilityChange = (event) => {
-    timeStamps[document.visibilityState] = event.timeStamp;
-    if (timeStamps.hidden + timeStamps.visible > 0) {
-        removeEventListener('visibilitychange', onVisibilityChange, true);
-    }
-};
 const trackChanges = () => {
-    addEventListener('visibilitychange', onVisibilityChange, true);
+    // Update the time if/when the document becomes hidden.
+    onHidden(({ timeStamp }) => {
+        firstHiddenTime = timeStamp;
+    }, true);
 };
 export const getVisibilityWatcher = () => {
-    if (!timeStamps) {
-        initTimeStamps();
-        trackChanges();
+    if (firstHiddenTime < 0) {
+        // If the document is hidden when this code runs, assume it was hidden
+        // since navigation start. This isn't a perfect heuristic, but it's the
+        // best we can do until an API is available to support querying past
+        // visibilityState.
+        if (self.__WEB_VITALS_POLYFILL__) {
+            firstHiddenTime = self.webVitals.firstHiddenTime;
+            if (firstHiddenTime === Infinity) {
+                trackChanges();
+            }
+        }
+        else {
+            firstHiddenTime = initHiddenTime();
+            trackChanges();
+        }
         // Reset the time on bfcache restores.
@@ -47,3 +51,3 @@ onBFCacheRestore(() => {
             setTimeout(() => {
-                initTimeStamps();
+                firstHiddenTime = initHiddenTime();
                 trackChanges();
@@ -55,8 +59,5 @@ }, 0);
         get firstHiddenTime() {
-            return timeStamps.hidden;
-        },
-        get firstVisibleTime() {
-            return timeStamps.visible;
-        },
+            return firstHiddenTime;
+        }
     };
 };

dist/modules/polyfill.js

@@ -17,2 +17,3 @@ /*
 import { firstInputPolyfill, resetFirstInputPolyfill } from './lib/polyfills/firstInputPolyfill.js';
+import { getFirstHiddenTime } from './lib/polyfills/getFirstHiddenTimePolyfill.js';
 resetFirstInputPolyfill();
@@ -22,2 +23,5 @@ self.webVitals = {
     resetFirstInputPolyfill: resetFirstInputPolyfill,
+    get firstHiddenTime() {
+        return getFirstHiddenTime();
+    },
 };

dist/modules/types.d.ts

@@ -26,2 +26,3 @@ export interface Metric {
     resetFirstInputPolyfill: () => void;
+    firstHiddenTime: number;
 }
@@ -28,0 +29,0 @@ declare global {

dist/polyfill.js

@@ -1,1 +0,1 @@
-!function(){var e,n,t,i,r={passive:!0,capture:!0},o=new Date,a=function(){i=[],n=-1,e=null,p(addEventListener)},c=function(i,r){e||(e=r,n=i,t=new Date,p(removeEventListener),u())},u=function(){if(n>=0&&n<t-o){var r={entryType:"first-input",name:e.type,target:e.target,cancelable:e.cancelable,startTime:e.timeStamp,processingStart:e.timeStamp+n};i.forEach((function(e){e(r)})),i=[]}},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(){c(e,n),o()},i=function(){o()},o=function(){removeEventListener("pointerup",t,r),removeEventListener("pointercancel",i,r)};addEventListener("pointerup",t,r),addEventListener("pointercancel",i,r)}(n,e):c(n,e)}},p=function(e){["mousedown","keydown","touchstart","pointerdown"].forEach((function(n){return e(n,f,r)}))};a(),self.webVitals={firstInputPolyfill:function(e){i.push(e),u()},resetFirstInputPolyfill:a}}();
+!function(){var e,t,n,i,r={passive:!0,capture:!0},a=new Date,o=function(){i=[],t=-1,e=null,f(addEventListener)},c=function(i,r){e||(e=r,t=i,n=new Date,f(removeEventListener),u())},u=function(){if(t>=0&&t<n-a){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(){c(e,t),a()},i=function(){a()},a=function(){removeEventListener("pointerup",n,r),removeEventListener("pointercancel",i,r)};addEventListener("pointerup",n,r),addEventListener("pointercancel",i,r)}(t,e):c(t,e)}},f=function(e){["mousedown","keydown","touchstart","pointerdown"].forEach((function(t){return e(t,s,r)}))},p="hidden"===document.visibilityState?0:1/0;addEventListener("visibilitychange",(function e(t){"hidden"===document.visibilityState&&(p=t.timeStamp,removeEventListener("visibilitychange",e,!0))}),!0);o(),self.webVitals={firstInputPolyfill:function(e){i.push(e),u()},resetFirstInputPolyfill:o,get firstHiddenTime(){return p}}}();

dist/web-vitals.base.js

@@ -1,1 +0,1 @@
-var e,t=function(e){addEventListener("pageshow",(function(t){t.persisted&&e(t)}),!0)},n=function(){e={visible:"visible"===document.visibilityState?0:1/0,hidden:"hidden"===document.visibilityState?0:1/0}},i=function t(n){e[document.visibilityState]=n.timeStamp,e.hidden+e.visible>0&&removeEventListener("visibilitychange",t,!0)},a=function(){addEventListener("visibilitychange",i,!0)},r=function(){return e||(n(),a(),t((function(){setTimeout((function(){n(),a()}),0)}))),{get firstHiddenTime(){return e.hidden},get firstVisibleTime(){return e.visible}}},o=function(e,t){return{name:e,value:void 0===t?-1:t,delta:0,entries:[],id:"v1-".concat(Date.now(),"-").concat(Math.floor(8999999999999*Math.random())+1e12)}},u=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){}},s=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"==typeof WeakSet?new WeakSet:new Set,f=function(e,t,n){var i;return function(){t.value>=0&&(n||c.has(t)||"hidden"===document.visibilityState)&&(t.delta=t.value-(i||0),(t.delta||void 0===i)&&(i=t.value,e(t)))}},d=function(e,n){var i,a=r(),c=function(t){a.firstVisibleTime<performance.now()&&e(t)},d=o("CLS",0),v=0,m=[],l=function(e){if(!e.hadRecentInput){var t=m[0],n=m[m.length-1];v&&e.startTime-n.startTime<1e3&&e.startTime-t.startTime<5e3?(v+=e.value,m.push(e)):(v=e.value,m=[e]),v>d.value&&(d.value=v,d.entries=m,i())}},p=u("layout-shift",l);p&&(i=f(c,d,n),s((function(){p.takeRecords().map(l),i()})),t((function(){v=0,d=o("CLS",0),i=f(c,d,n)})))},v=function(e,n){var i,a=r(),s=o("FCP"),d=function(e){"first-contentful-paint"===e.name&&(m&&m.disconnect(),e.startTime<a.firstHiddenTime&&(s.value=e.startTime,s.entries.push(e),c.add(s),i()))},v=performance.getEntriesByName("first-contentful-paint")[0],m=v?null:u("paint",d);(v||m)&&(i=f(e,s,n),v&&d(v),t((function(t){s=o("FCP"),i=f(e,s,n),requestAnimationFrame((function(){requestAnimationFrame((function(){s.value=performance.now()-t.timeStamp,c.add(s),i()}))}))})))},m=function(e,n){var i,a=r(),d=o("FID"),v=function(e){e.startTime<a.firstHiddenTime&&(d.value=e.processingStart-e.startTime,d.entries.push(e),c.add(d),i())},m=u("first-input",v);i=f(e,d,n),m&&s((function(){m.takeRecords().map(v),m.disconnect()}),!0),m||window.webVitals.firstInputPolyfill(v),t((function(){d=o("FID"),i=f(e,d,n),window.webVitals.resetFirstInputPolyfill(),window.webVitals.firstInputPolyfill(v)}))},l=function(e,n){var i,a=r(),d=o("LCP"),v=function(e){var t=e.startTime;t<a.firstHiddenTime&&(d.value=t,d.entries.push(e)),i()},m=u("largest-contentful-paint",v);if(m){i=f(e,d,n);var l=function(){c.has(d)||(m.takeRecords().map(v),m.disconnect(),c.add(d),i())};["keydown","click"].forEach((function(e){addEventListener(e,l,{once:!0,capture:!0})})),s(l,!0),t((function(t){d=o("LCP"),i=f(e,d,n),requestAnimationFrame((function(){requestAnimationFrame((function(){d.value=performance.now()-t.timeStamp,c.add(d),i()}))}))}))}},p=function(e){var t,n=o("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)return;n.entries=[t],e(n)}catch(e){}},"complete"===document.readyState?setTimeout(t,0):addEventListener("pageshow",t)};export{d as getCLS,v as getFCP,m as getFID,l as getLCP,p as getTTFB};
+var e=function(e,t){return{name:e,value:void 0===t?-1:t,delta:0,entries:[],id:"v1-".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)},a="function"==typeof WeakSet?new WeakSet:new Set,r=function(e,t,n){var i;return function(){t.value>=0&&(n||a.has(t)||"hidden"===document.visibilityState)&&(t.delta=t.value-(i||0),(t.delta||void 0===i)&&(i=t.value,e(t)))}},o=-1,u=function(){n((function(e){var t=e.timeStamp;o=t}),!0)},s=function(){return o<0&&((o=self.webVitals.firstHiddenTime)===1/0&&u(),i((function(){setTimeout((function(){o="hidden"===document.visibilityState?0:1/0,u()}),0)}))),{get firstHiddenTime(){return o}}},c=function(n,o){var u,c=s(),f=e("FCP"),d=function(e){"first-contentful-paint"===e.name&&(v&&v.disconnect(),e.startTime<c.firstHiddenTime&&(f.value=e.startTime,f.entries.push(e),a.add(f),u()))},m=performance.getEntriesByName("first-contentful-paint")[0],v=m?null:t("paint",d);(m||v)&&(u=r(n,f,o),m&&d(m),i((function(t){f=e("FCP"),u=r(n,f,o),requestAnimationFrame((function(){requestAnimationFrame((function(){f.value=performance.now()-t.timeStamp,a.add(f),u()}))}))})))},f=!1,d=-1,m=function(a,o){f||(c((function(e){d=e.value})),f=!0);var u,s=function(e){d>-1&&a(e)},m=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>m.value&&(m.value=v,m.entries=l,u())}},h=t("layout-shift",p);h&&(u=r(s,m,o),n((function(){h.takeRecords().map(p),u()})),i((function(){v=0,d=-1,m=e("CLS",0),u=r(s,m,o)})))},v=function(o,u){var c,f=s(),d=e("FID"),m=function(e){e.startTime<f.firstHiddenTime&&(d.value=e.processingStart-e.startTime,d.entries.push(e),a.add(d),c())},v=t("first-input",m);c=r(o,d,u),v&&n((function(){v.takeRecords().map(m),v.disconnect()}),!0),v||window.webVitals.firstInputPolyfill(m),i((function(){d=e("FID"),c=r(o,d,u),window.webVitals.resetFirstInputPolyfill(),window.webVitals.firstInputPolyfill(m)}))},l=function(o,u){var c,f=s(),d=e("LCP"),m=function(e){var t=e.startTime;t<f.firstHiddenTime&&(d.value=t,d.entries.push(e)),c()},v=t("largest-contentful-paint",m);if(v){c=r(o,d,u);var l=function(){a.has(d)||(v.takeRecords().map(m),v.disconnect(),a.add(d),c())};["keydown","click"].forEach((function(e){addEventListener(e,l,{once:!0,capture:!0})})),n(l,!0),i((function(t){d=e("LCP"),c=r(o,d,u),requestAnimationFrame((function(){requestAnimationFrame((function(){d.value=performance.now()-t.timeStamp,a.add(d),c()}))}))}))}},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)return;i.entries=[e],t(i)}catch(e){}},"complete"===document.readyState?setTimeout(n,0):addEventListener("pageshow",n)};export{m as getCLS,c as getFCP,v as getFID,l as getLCP,p as getTTFB};

dist/web-vitals.base.umd.js

@@ -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,n=function(e){addEventListener("pageshow",(function(t){t.persisted&&e(t)}),!0)},i=function(){t={visible:"visible"===document.visibilityState?0:1/0,hidden:"hidden"===document.visibilityState?0:1/0}},a=function e(n){t[document.visibilityState]=n.timeStamp,t.hidden+t.visible>0&&removeEventListener("visibilitychange",e,!0)},r=function(){addEventListener("visibilitychange",a,!0)},o=function(){return t||(i(),r(),n((function(){setTimeout((function(){i(),r()}),0)}))),{get firstHiddenTime(){return t.hidden},get firstVisibleTime(){return t.visible}}},s=function(e,t){return{name:e,value:void 0===t?-1:t,delta:0,entries:[],id:"v1-".concat(Date.now(),"-").concat(Math.floor(8999999999999*Math.random())+1e12)}},u=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){}},c=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)},f="function"==typeof WeakSet?new WeakSet:new Set,d=function(e,t,n){var i;return function(){t.value>=0&&(n||f.has(t)||"hidden"===document.visibilityState)&&(t.delta=t.value-(i||0),(t.delta||void 0===i)&&(i=t.value,e(t)))}};e.getCLS=function(e,t){var i,a=o(),r=function(t){a.firstVisibleTime<performance.now()&&e(t)},f=s("CLS",0),l=0,v=[],m=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>f.value&&(f.value=l,f.entries=v,i())}},p=u("layout-shift",m);p&&(i=d(r,f,t),c((function(){p.takeRecords().map(m),i()})),n((function(){l=0,f=s("CLS",0),i=d(r,f,t)})))},e.getFCP=function(e,t){var i,a=o(),r=s("FCP"),c=function(e){"first-contentful-paint"===e.name&&(v&&v.disconnect(),e.startTime<a.firstHiddenTime&&(r.value=e.startTime,r.entries.push(e),f.add(r),i()))},l=performance.getEntriesByName("first-contentful-paint")[0],v=l?null:u("paint",c);(l||v)&&(i=d(e,r,t),l&&c(l),n((function(n){r=s("FCP"),i=d(e,r,t),requestAnimationFrame((function(){requestAnimationFrame((function(){r.value=performance.now()-n.timeStamp,f.add(r),i()}))}))})))},e.getFID=function(e,t){var i,a=o(),r=s("FID"),l=function(e){e.startTime<a.firstHiddenTime&&(r.value=e.processingStart-e.startTime,r.entries.push(e),f.add(r),i())},v=u("first-input",l);i=d(e,r,t),v&&c((function(){v.takeRecords().map(l),v.disconnect()}),!0),v||window.webVitals.firstInputPolyfill(l),n((function(){r=s("FID"),i=d(e,r,t),window.webVitals.resetFirstInputPolyfill(),window.webVitals.firstInputPolyfill(l)}))},e.getLCP=function(e,t){var i,a=o(),r=s("LCP"),l=function(e){var t=e.startTime;t<a.firstHiddenTime&&(r.value=t,r.entries.push(e)),i()},v=u("largest-contentful-paint",l);if(v){i=d(e,r,t);var m=function(){f.has(r)||(v.takeRecords().map(l),v.disconnect(),f.add(r),i())};["keydown","click"].forEach((function(e){addEventListener(e,m,{once:!0,capture:!0})})),c(m,!0),n((function(n){r=s("LCP"),i=d(e,r,t),requestAnimationFrame((function(){requestAnimationFrame((function(){r.value=performance.now()-n.timeStamp,f.add(r),i()}))}))}))}},e.getTTFB=function(e){var t,n=s("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)return;n.entries=[t],e(n)}catch(e){}},"complete"===document.readyState?setTimeout(t,0):addEventListener("pageshow",t)},Object.defineProperty(e,"__esModule",{value:!0})}));
+!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:"v1-".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)},a=function(e){addEventListener("pageshow",(function(t){t.persisted&&e(t)}),!0)},r="function"==typeof WeakSet?new WeakSet:new Set,o=function(e,t,n){var i;return function(){t.value>=0&&(n||r.has(t)||"hidden"===document.visibilityState)&&(t.delta=t.value-(i||0),(t.delta||void 0===i)&&(i=t.value,e(t)))}},u=-1,s=function(){i((function(e){var t=e.timeStamp;u=t}),!0)},f=function(){return u<0&&((u=self.webVitals.firstHiddenTime)===1/0&&s(),a((function(){setTimeout((function(){u="hidden"===document.visibilityState?0:1/0,s()}),0)}))),{get firstHiddenTime(){return u}}},c=function(e,i){var u,s=f(),c=t("FCP"),d=function(e){"first-contentful-paint"===e.name&&(m&&m.disconnect(),e.startTime<s.firstHiddenTime&&(c.value=e.startTime,c.entries.push(e),r.add(c),u()))},l=performance.getEntriesByName("first-contentful-paint")[0],m=l?null:n("paint",d);(l||m)&&(u=o(e,c,i),l&&d(l),a((function(n){c=t("FCP"),u=o(e,c,i),requestAnimationFrame((function(){requestAnimationFrame((function(){c.value=performance.now()-n.timeStamp,r.add(c),u()}))}))})))},d=!1,l=-1;e.getCLS=function(e,r){d||(c((function(e){l=e.value})),d=!0);var u,s=function(t){l>-1&&e(t)},f=t("CLS",0),m=0,v=[],p=function(e){if(!e.hadRecentInput){var t=v[0],n=v[v.length-1];m&&e.startTime-n.startTime<1e3&&e.startTime-t.startTime<5e3?(m+=e.value,v.push(e)):(m=e.value,v=[e]),m>f.value&&(f.value=m,f.entries=v,u())}},h=n("layout-shift",p);h&&(u=o(s,f,r),i((function(){h.takeRecords().map(p),u()})),a((function(){m=0,l=-1,f=t("CLS",0),u=o(s,f,r)})))},e.getFCP=c,e.getFID=function(e,u){var s,c=f(),d=t("FID"),l=function(e){e.startTime<c.firstHiddenTime&&(d.value=e.processingStart-e.startTime,d.entries.push(e),r.add(d),s())},m=n("first-input",l);s=o(e,d,u),m&&i((function(){m.takeRecords().map(l),m.disconnect()}),!0),m||window.webVitals.firstInputPolyfill(l),a((function(){d=t("FID"),s=o(e,d,u),window.webVitals.resetFirstInputPolyfill(),window.webVitals.firstInputPolyfill(l)}))},e.getLCP=function(e,u){var s,c=f(),d=t("LCP"),l=function(e){var t=e.startTime;t<c.firstHiddenTime&&(d.value=t,d.entries.push(e)),s()},m=n("largest-contentful-paint",l);if(m){s=o(e,d,u);var v=function(){r.has(d)||(m.takeRecords().map(l),m.disconnect(),r.add(d),s())};["keydown","click"].forEach((function(e){addEventListener(e,v,{once:!0,capture:!0})})),i(v,!0),a((function(n){d=t("LCP"),s=o(e,d,u),requestAnimationFrame((function(){requestAnimationFrame((function(){d.value=performance.now()-n.timeStamp,r.add(d),s()}))}))}))}},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)return;i.entries=[t],e(i)}catch(e){}},"complete"===document.readyState?setTimeout(n,0):addEventListener("pageshow",n)},Object.defineProperty(e,"__esModule",{value:!0})}));

dist/web-vitals.js

@@ -1,1 +0,1 @@
-var e,t,n,i,a,r=function(e){addEventListener("pageshow",(function(t){t.persisted&&e(t)}),!0)},o=function(){e={visible:"visible"===document.visibilityState?0:1/0,hidden:"hidden"===document.visibilityState?0:1/0}},c=function t(n){e[document.visibilityState]=n.timeStamp,e.hidden+e.visible>0&&removeEventListener("visibilitychange",t,!0)},u=function(){addEventListener("visibilitychange",c,!0)},s=function(){return e||(o(),u(),r((function(){setTimeout((function(){o(),u()}),0)}))),{get firstHiddenTime(){return e.hidden},get firstVisibleTime(){return e.visible}}},f=function(e,t){return{name:e,value:void 0===t?-1:t,delta:0,entries:[],id:"v1-".concat(Date.now(),"-").concat(Math.floor(8999999999999*Math.random())+1e12)}},d=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){}},v=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)},m="function"==typeof WeakSet?new WeakSet:new Set,p=function(e,t,n){var i;return function(){t.value>=0&&(n||m.has(t)||"hidden"===document.visibilityState)&&(t.delta=t.value-(i||0),(t.delta||void 0===i)&&(i=t.value,e(t)))}},l=function(e,t){var n,i=s(),a=function(t){i.firstVisibleTime<performance.now()&&e(t)},o=f("CLS",0),c=0,u=[],m=function(e){if(!e.hadRecentInput){var t=u[0],i=u[u.length-1];c&&e.startTime-i.startTime<1e3&&e.startTime-t.startTime<5e3?(c+=e.value,u.push(e)):(c=e.value,u=[e]),c>o.value&&(o.value=c,o.entries=u,n())}},l=d("layout-shift",m);l&&(n=p(a,o,t),v((function(){l.takeRecords().map(m),n()})),r((function(){c=0,o=f("CLS",0),n=p(a,o,t)})))},h=function(e,t){var n,i=s(),a=f("FCP"),o=function(e){"first-contentful-paint"===e.name&&(u&&u.disconnect(),e.startTime<i.firstHiddenTime&&(a.value=e.startTime,a.entries.push(e),m.add(a),n()))},c=performance.getEntriesByName("first-contentful-paint")[0],u=c?null:d("paint",o);(c||u)&&(n=p(e,a,t),c&&o(c),r((function(i){a=f("FCP"),n=p(e,a,t),requestAnimationFrame((function(){requestAnimationFrame((function(){a.value=performance.now()-i.timeStamp,m.add(a),n()}))}))})))},y={passive:!0,capture:!0},g=new Date,T=function(e,a){t||(t=a,n=e,i=new Date,b(removeEventListener),S())},S=function(){if(n>=0&&n<i-g){var e={entryType:"first-input",name:t.type,target:t.target,cancelable:t.cancelable,startTime:t.timeStamp,processingStart:t.timeStamp+n};a.forEach((function(t){t(e)})),a=[]}},E=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(){T(e,t),a()},i=function(){a()},a=function(){removeEventListener("pointerup",n,y),removeEventListener("pointercancel",i,y)};addEventListener("pointerup",n,y),addEventListener("pointercancel",i,y)}(t,e):T(t,e)}},b=function(e){["mousedown","keydown","touchstart","pointerdown"].forEach((function(t){return e(t,E,y)}))},L=function(e,i){var o,c=s(),u=f("FID"),l=function(e){e.startTime<c.firstHiddenTime&&(u.value=e.processingStart-e.startTime,u.entries.push(e),m.add(u),o())},h=d("first-input",l);o=p(e,u,i),h&&v((function(){h.takeRecords().map(l),h.disconnect()}),!0),h&&r((function(){var r;u=f("FID"),o=p(e,u,i),a=[],n=-1,t=null,b(addEventListener),r=l,a.push(r),S()}))},w=function(e,t){var n,i=s(),a=f("LCP"),o=function(e){var t=e.startTime;t<i.firstHiddenTime&&(a.value=t,a.entries.push(e)),n()},c=d("largest-contentful-paint",o);if(c){n=p(e,a,t);var u=function(){m.has(a)||(c.takeRecords().map(o),c.disconnect(),m.add(a),n())};["keydown","click"].forEach((function(e){addEventListener(e,u,{once:!0,capture:!0})})),v(u,!0),r((function(i){a=f("LCP"),n=p(e,a,t),requestAnimationFrame((function(){requestAnimationFrame((function(){a.value=performance.now()-i.timeStamp,m.add(a),n()}))}))}))}},F=function(e){var t,n=f("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)return;n.entries=[t],e(n)}catch(e){}},"complete"===document.readyState?setTimeout(t,0):addEventListener("pageshow",t)};export{l as getCLS,h as getFCP,L as getFID,w as getLCP,F as getTTFB};
+var e,t,n,i,a=function(e,t){return{name:e,value:void 0===t?-1:t,delta:0,entries:[],id:"v1-".concat(Date.now(),"-").concat(Math.floor(8999999999999*Math.random())+1e12)}},r=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"==typeof WeakSet?new WeakSet:new Set,f=function(e,t,n){var i;return function(){t.value>=0&&(n||c.has(t)||"hidden"===document.visibilityState)&&(t.delta=t.value-(i||0),(t.delta||void 0===i)&&(i=t.value,e(t)))}},s=-1,d=function(){return"hidden"===document.visibilityState?0:1/0},m=function(){o((function(e){var t=e.timeStamp;s=t}),!0)},v=function(){return s<0&&(s=d(),m(),u((function(){setTimeout((function(){s=d(),m()}),0)}))),{get firstHiddenTime(){return s}}},p=function(e,t){var n,i=v(),o=a("FCP"),s=function(e){"first-contentful-paint"===e.name&&(m&&m.disconnect(),e.startTime<i.firstHiddenTime&&(o.value=e.startTime,o.entries.push(e),c.add(o),n()))},d=performance.getEntriesByName("first-contentful-paint")[0],m=d?null:r("paint",s);(d||m)&&(n=f(e,o,t),d&&s(d),u((function(i){o=a("FCP"),n=f(e,o,t),requestAnimationFrame((function(){requestAnimationFrame((function(){o.value=performance.now()-i.timeStamp,c.add(o),n()}))}))})))},l=!1,h=-1,y=function(e,t){l||(p((function(e){h=e.value})),l=!0);var n,i=function(t){h>-1&&e(t)},c=a("CLS",0),s=0,d=[],m=function(e){if(!e.hadRecentInput){var t=d[0],i=d[d.length-1];s&&e.startTime-i.startTime<1e3&&e.startTime-t.startTime<5e3?(s+=e.value,d.push(e)):(s=e.value,d=[e]),s>c.value&&(c.value=s,c.entries=d,n())}},v=r("layout-shift",m);v&&(n=f(i,c,t),o((function(){v.takeRecords().map(m),n()})),u((function(){s=0,h=-1,c=a("CLS",0),n=f(i,c,t)})))},T={passive:!0,capture:!0},g=new Date,S=function(i,a){e||(e=a,t=i,n=new Date,L(removeEventListener),E())},E=function(){if(t>=0&&t<n-g){var a={entryType:"first-input",name:e.type,target:e.target,cancelable:e.cancelable,startTime:e.timeStamp,processingStart:e.timeStamp+t};i.forEach((function(e){e(a)})),i=[]}},w=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(){S(e,t),a()},i=function(){a()},a=function(){removeEventListener("pointerup",n,T),removeEventListener("pointercancel",i,T)};addEventListener("pointerup",n,T),addEventListener("pointercancel",i,T)}(t,e):S(t,e)}},L=function(e){["mousedown","keydown","touchstart","pointerdown"].forEach((function(t){return e(t,w,T)}))},b=function(n,s){var d,m=v(),p=a("FID"),l=function(e){e.startTime<m.firstHiddenTime&&(p.value=e.processingStart-e.startTime,p.entries.push(e),c.add(p),d())},h=r("first-input",l);d=f(n,p,s),h&&o((function(){h.takeRecords().map(l),h.disconnect()}),!0),h&&u((function(){var r;p=a("FID"),d=f(n,p,s),i=[],t=-1,e=null,L(addEventListener),r=l,i.push(r),E()}))},F=function(e,t){var n,i=v(),s=a("LCP"),d=function(e){var t=e.startTime;t<i.firstHiddenTime&&(s.value=t,s.entries.push(e)),n()},m=r("largest-contentful-paint",d);if(m){n=f(e,s,t);var p=function(){c.has(s)||(m.takeRecords().map(d),m.disconnect(),c.add(s),n())};["keydown","click"].forEach((function(e){addEventListener(e,p,{once:!0,capture:!0})})),o(p,!0),u((function(i){s=a("LCP"),n=f(e,s,t),requestAnimationFrame((function(){requestAnimationFrame((function(){s.value=performance.now()-i.timeStamp,c.add(s),n()}))}))}))}},k=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)return;n.entries=[t],e(n)}catch(e){}},"complete"===document.readyState?setTimeout(t,0):addEventListener("pageshow",t)};export{y as getCLS,p as getFCP,b as getFID,F as getLCP,k as getTTFB};

dist/web-vitals.umd.js

@@ -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,a,r,o=function(e){addEventListener("pageshow",(function(t){t.persisted&&e(t)}),!0)},u=function(){t={visible:"visible"===document.visibilityState?0:1/0,hidden:"hidden"===document.visibilityState?0:1/0}},c=function e(n){t[document.visibilityState]=n.timeStamp,t.hidden+t.visible>0&&removeEventListener("visibilitychange",e,!0)},s=function(){addEventListener("visibilitychange",c,!0)},f=function(){return t||(u(),s(),o((function(){setTimeout((function(){u(),s()}),0)}))),{get firstHiddenTime(){return t.hidden},get firstVisibleTime(){return t.visible}}},d=function(e,t){return{name:e,value:void 0===t?-1:t,delta:0,entries:[],id:"v1-".concat(Date.now(),"-").concat(Math.floor(8999999999999*Math.random())+1e12)}},v=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){}},m=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)},p="function"==typeof WeakSet?new WeakSet:new Set,l=function(e,t,n){var i;return function(){t.value>=0&&(n||p.has(t)||"hidden"===document.visibilityState)&&(t.delta=t.value-(i||0),(t.delta||void 0===i)&&(i=t.value,e(t)))}},h={passive:!0,capture:!0},y=new Date,g=function(e,t){n||(n=t,i=e,a=new Date,S(removeEventListener),T())},T=function(){if(i>=0&&i<a-y){var e={entryType:"first-input",name:n.type,target:n.target,cancelable:n.cancelable,startTime:n.timeStamp,processingStart:n.timeStamp+i};r.forEach((function(t){t(e)})),r=[]}},b=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),a()},i=function(){a()},a=function(){removeEventListener("pointerup",n,h),removeEventListener("pointercancel",i,h)};addEventListener("pointerup",n,h),addEventListener("pointercancel",i,h)}(t,e):g(t,e)}},S=function(e){["mousedown","keydown","touchstart","pointerdown"].forEach((function(t){return e(t,b,h)}))};e.getCLS=function(e,t){var n,i=f(),a=function(t){i.firstVisibleTime<performance.now()&&e(t)},r=d("CLS",0),u=0,c=[],s=function(e){if(!e.hadRecentInput){var t=c[0],i=c[c.length-1];u&&e.startTime-i.startTime<1e3&&e.startTime-t.startTime<5e3?(u+=e.value,c.push(e)):(u=e.value,c=[e]),u>r.value&&(r.value=u,r.entries=c,n())}},p=v("layout-shift",s);p&&(n=l(a,r,t),m((function(){p.takeRecords().map(s),n()})),o((function(){u=0,r=d("CLS",0),n=l(a,r,t)})))},e.getFCP=function(e,t){var n,i=f(),a=d("FCP"),r=function(e){"first-contentful-paint"===e.name&&(c&&c.disconnect(),e.startTime<i.firstHiddenTime&&(a.value=e.startTime,a.entries.push(e),p.add(a),n()))},u=performance.getEntriesByName("first-contentful-paint")[0],c=u?null:v("paint",r);(u||c)&&(n=l(e,a,t),u&&r(u),o((function(i){a=d("FCP"),n=l(e,a,t),requestAnimationFrame((function(){requestAnimationFrame((function(){a.value=performance.now()-i.timeStamp,p.add(a),n()}))}))})))},e.getFID=function(e,t){var a,u=f(),c=d("FID"),s=function(e){e.startTime<u.firstHiddenTime&&(c.value=e.processingStart-e.startTime,c.entries.push(e),p.add(c),a())},h=v("first-input",s);a=l(e,c,t),h&&m((function(){h.takeRecords().map(s),h.disconnect()}),!0),h&&o((function(){var o;c=d("FID"),a=l(e,c,t),r=[],i=-1,n=null,S(addEventListener),o=s,r.push(o),T()}))},e.getLCP=function(e,t){var n,i=f(),a=d("LCP"),r=function(e){var t=e.startTime;t<i.firstHiddenTime&&(a.value=t,a.entries.push(e)),n()},u=v("largest-contentful-paint",r);if(u){n=l(e,a,t);var c=function(){p.has(a)||(u.takeRecords().map(r),u.disconnect(),p.add(a),n())};["keydown","click"].forEach((function(e){addEventListener(e,c,{once:!0,capture:!0})})),m(c,!0),o((function(i){a=d("LCP"),n=l(e,a,t),requestAnimationFrame((function(){requestAnimationFrame((function(){a.value=performance.now()-i.timeStamp,p.add(a),n()}))}))}))}},e.getTTFB=function(e){var t,n=d("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)return;n.entries=[t],e(n)}catch(e){}},"complete"===document.readyState?setTimeout(t,0):addEventListener("pageshow",t)},Object.defineProperty(e,"__esModule",{value:!0})}));
+!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,a,r=function(e,t){return{name:e,value:void 0===t?-1:t,delta:0,entries:[],id:"v1-".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"==typeof WeakSet?new WeakSet:new Set,s=function(e,t,n){var i;return function(){t.value>=0&&(n||f.has(t)||"hidden"===document.visibilityState)&&(t.delta=t.value-(i||0),(t.delta||void 0===i)&&(i=t.value,e(t)))}},d=-1,m=function(){return"hidden"===document.visibilityState?0:1/0},v=function(){u((function(e){var t=e.timeStamp;d=t}),!0)},p=function(){return d<0&&(d=m(),v(),c((function(){setTimeout((function(){d=m(),v()}),0)}))),{get firstHiddenTime(){return d}}},l=function(e,t){var n,i=p(),a=r("FCP"),u=function(e){"first-contentful-paint"===e.name&&(m&&m.disconnect(),e.startTime<i.firstHiddenTime&&(a.value=e.startTime,a.entries.push(e),f.add(a),n()))},d=performance.getEntriesByName("first-contentful-paint")[0],m=d?null:o("paint",u);(d||m)&&(n=s(e,a,t),d&&u(d),c((function(i){a=r("FCP"),n=s(e,a,t),requestAnimationFrame((function(){requestAnimationFrame((function(){a.value=performance.now()-i.timeStamp,f.add(a),n()}))}))})))},h=!1,g=-1,y={passive:!0,capture:!0},T=new Date,S=function(e,a){t||(t=a,n=e,i=new Date,w(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};a.forEach((function(t){t(e)})),a=[]}},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(){S(e,t),a()},i=function(){a()},a=function(){removeEventListener("pointerup",n,y),removeEventListener("pointercancel",i,y)};addEventListener("pointerup",n,y),addEventListener("pointercancel",i,y)}(t,e):S(t,e)}},w=function(e){["mousedown","keydown","touchstart","pointerdown"].forEach((function(t){return e(t,L,y)}))};e.getCLS=function(e,t){h||(l((function(e){g=e.value})),h=!0);var n,i=function(t){g>-1&&e(t)},a=r("CLS",0),f=0,d=[],m=function(e){if(!e.hadRecentInput){var t=d[0],i=d[d.length-1];f&&e.startTime-i.startTime<1e3&&e.startTime-t.startTime<5e3?(f+=e.value,d.push(e)):(f=e.value,d=[e]),f>a.value&&(a.value=f,a.entries=d,n())}},v=o("layout-shift",m);v&&(n=s(i,a,t),u((function(){v.takeRecords().map(m),n()})),c((function(){f=0,g=-1,a=r("CLS",0),n=s(i,a,t)})))},e.getFCP=l,e.getFID=function(e,i){var d,m=p(),v=r("FID"),l=function(e){e.startTime<m.firstHiddenTime&&(v.value=e.processingStart-e.startTime,v.entries.push(e),f.add(v),d())},h=o("first-input",l);d=s(e,v,i),h&&u((function(){h.takeRecords().map(l),h.disconnect()}),!0),h&&c((function(){var o;v=r("FID"),d=s(e,v,i),a=[],n=-1,t=null,w(addEventListener),o=l,a.push(o),E()}))},e.getLCP=function(e,t){var n,i=p(),a=r("LCP"),d=function(e){var t=e.startTime;t<i.firstHiddenTime&&(a.value=t,a.entries.push(e)),n()},m=o("largest-contentful-paint",d);if(m){n=s(e,a,t);var v=function(){f.has(a)||(m.takeRecords().map(d),m.disconnect(),f.add(a),n())};["keydown","click"].forEach((function(e){addEventListener(e,v,{once:!0,capture:!0})})),u(v,!0),c((function(i){a=r("LCP"),n=s(e,a,t),requestAnimationFrame((function(){requestAnimationFrame((function(){a.value=performance.now()-i.timeStamp,f.add(a),n()}))}))}))}},e.getTTFB=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)return;n.entries=[t],e(n)}catch(e){}},"complete"===document.readyState?setTimeout(t,0):addEventListener("pageshow",t)},Object.defineProperty(e,"__esModule",{value:!0})}));

package.json

 {
   "name": "web-vitals",
-  "version": "2.0.0-beta.1",
+  "version": "2.0.0-beta.2",
   "description": "Easily measure performance metrics in JavaScript",
@@ -5,0 +5,0 @@ "main": "dist/web-vitals.umd.js",

README.md

@@ -447,7 +447,10 @@ # `web-vitals`
 
-However, developers willing to manage the additional usage complexity should consider the "base+polyfill" bundle if they would like to measure FID in all browsers.
+However, there are a few good reasons to consider using the "base+polyfill" version, for example:
 
+- FID can be measured in all browsers.
+- CLS, FCP, FID, and LCP will be more accurate in some cases (since the polyfill detects the page's initial `visibilityState` earlier).
+
 ### How the polyfill works
 
-The `polyfill.js` script adds event listeners that record the event processing delay of the first input, and then removes those event listeners after the first input occurs.
+The `polyfill.js` script adds event listeners (to track FID cross-browser), and it records initial page visibility state as well as the timestamp of the first visibility change to hidden (to improve the accuracy of CLS, FCP, LCP, and FID).
 
@@ -531,2 +534,3 @@ In order for it to work properly, the script must be the first script added to the page, and it must run before the browser renders any content to the screen. This is why it needs to be added to the `<head>` of the document.
   resetFirstInputPolyfill: () => void;
+  firstHiddenTime: number;
 }
@@ -533,0 +537,0 @@ ```

src/getCLS.ts

@@ -17,3 +17,2 @@ /*
 
-import {getVisibilityWatcher} from './lib/getVisibilityWatcher.js';
 import {initMetric} from './lib/initMetric.js';
@@ -24,2 +23,3 @@ import {observe, PerformanceEntryHandler} from './lib/observe.js';
 import {bindReporter} from './lib/bindReporter.js';
+import {getFCP} from './getFCP.js';
 import {ReportHandler} from './types.js';
@@ -34,13 +34,18 @@
 
+
+let isMonitoringFCP = false;
+let fcpValue = -1;
+
 export const getCLS = (onReport: ReportHandler, reportAllChanges?: boolean) => {
-  const visibilityWatcher = getVisibilityWatcher();
+  // Start monitoring FCP so we can only report CLS if FCP is also reported.
+  // Note: this is done to match the current behavior of CrUX.
+  if (!isMonitoringFCP) {
+    getFCP((metric) => {
+      fcpValue = metric.value;
+    });
+    isMonitoringFCP = true;
+  }
 
   const onReportWrapped: ReportHandler = (arg) => {
-    // Only report if the page was visible at some point in its lifecycle.
-    // Note: this doesn't technically match the current behavior of CrUX, which
-    // only includes pages that report FCP. However, we plan to change the
-    // behavior of CrUX in the future, and matching it would couple CLS to FCP
-    // in an awkward way, so in this library we only ignore CLS if the page
-    // was never visible (which should be the same as CrUX in most)
-    if (visibilityWatcher.firstVisibleTime < performance.now()) {
+    if (fcpValue > -1) {
       onReport(arg);
@@ -77,3 +82,2 @@ }
         metric.entries = sessionEntries;
-
         report();
@@ -95,2 +99,3 @@ }
       sessionValue = 0;
+      fcpValue = -1;
       metric = initMetric('CLS', 0);
@@ -97,0 +102,0 @@ report = bindReporter(onReportWrapped, metric, reportAllChanges);

src/lib/getVisibilityWatcher.ts

@@ -18,42 +18,32 @@ /*
 import {onBFCacheRestore} from './onBFCacheRestore.js';
+import {onHidden} from './onHidden.js';
 
+let firstHiddenTime = -1;
 
-interface TimeStamps {
-  hidden?: number;
-  visible?: number;
+const initHiddenTime = () => {
+  return document.visibilityState === 'hidden' ? 0 : Infinity;
 }
 
-interface VisibilityWatcher {
-  firstHiddenTime: number;
-  firstVisibleTime: number;
-}
-
-
-let timeStamps: TimeStamps;
-
-const initTimeStamps = () => {
-  // Assume the visibilityState when this code is run was the visibilityState
-  // since page load. This isn't a perfect heuristic, but it's the best we can
-  // do until an API is available to support querying past visibilityState.
-  timeStamps = {
-    'visible': document.visibilityState === 'visible' ? 0 : Infinity,
-    'hidden': document.visibilityState === 'hidden' ? 0 : Infinity,
-  };
-}
-
-const onVisibilityChange = (event: Event) => {
-  timeStamps[document.visibilityState] = event.timeStamp;
-  if (timeStamps.hidden! + timeStamps.visible! > 0) {
-    removeEventListener('visibilitychange', onVisibilityChange, true);
-  }
-}
-
 const trackChanges = () => {
-  addEventListener('visibilitychange', onVisibilityChange, true);
+  // Update the time if/when the document becomes hidden.
+  onHidden(({timeStamp}) => {
+    firstHiddenTime = timeStamp
+  }, true);
 };
 
-export const getVisibilityWatcher = () : VisibilityWatcher => {
-  if (!timeStamps) {
-    initTimeStamps();
-    trackChanges();
+export const getVisibilityWatcher = () => {
+  if (firstHiddenTime < 0) {
+    // If the document is hidden when this code runs, assume it was hidden
+    // since navigation start. This isn't a perfect heuristic, but it's the
+    // best we can do until an API is available to support querying past
+    // visibilityState.
+    if (self.__WEB_VITALS_POLYFILL__) {
+      firstHiddenTime = self.webVitals.firstHiddenTime;
+      if (firstHiddenTime === Infinity) {
+        trackChanges();
+      }
+    } else {
+      firstHiddenTime = initHiddenTime();
+      trackChanges();
+    }
 
@@ -66,3 +56,3 @@ // Reset the time on bfcache restores.
       setTimeout(() => {
-        initTimeStamps();
+        firstHiddenTime = initHiddenTime();
         trackChanges();
@@ -74,8 +64,5 @@ }, 0);
     get firstHiddenTime() {
-      return timeStamps.hidden!;
-    },
-    get firstVisibleTime() {
-      return timeStamps.visible!;
-    },
-  };
+      return firstHiddenTime;
+    }
+  }
 };

src/polyfill.ts

@@ -18,2 +18,3 @@ /*
 import {firstInputPolyfill, resetFirstInputPolyfill} from './lib/polyfills/firstInputPolyfill.js';
+import {getFirstHiddenTime} from './lib/polyfills/getFirstHiddenTimePolyfill.js';
 
@@ -24,2 +25,5 @@ resetFirstInputPolyfill();
   resetFirstInputPolyfill: resetFirstInputPolyfill,
+  get firstHiddenTime() {
+    return getFirstHiddenTime();
+  },
 };

src/types.ts

@@ -69,2 +69,3 @@ /*
   resetFirstInputPolyfill: () => void;
+  firstHiddenTime: number;
 }
@@ -71,0 +72,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

135990

increased by1.08%

Number of package files

65

increased by4.84%

Lines of code

1913

increased by3.18%

Number of lines in readme file

666

increased by0.6%

No dependency changes