web-vitals - npm Package Compare versions

Comparing version 4.0.0-beta.2 to 4.0.0-beta.3

dist/modules/attribution/onTTFB.js

@@ -21,10 +21,22 @@ /*
         const activationStart = navigationEntry.activationStart || 0;
+        // Measure from workerStart or fetchStart so any service worker startup
+        // time is included in cacheDuration (which also includes other sw time
+        // anyway, that cannot be accurately split out cross-browser).
+        const waitEnd = Math.max((navigationEntry.workerStart || navigationEntry.fetchStart) -
+            activationStart, 0);
         const dnsStart = Math.max(navigationEntry.domainLookupStart - activationStart, 0);
         const connectStart = Math.max(navigationEntry.connectStart - activationStart, 0);
-        const requestStart = Math.max(navigationEntry.requestStart - activationStart, 0);
+        const connectEnd = Math.max(navigationEntry.connectEnd - activationStart, 0);
         metric.attribution = {
-            waitingDuration: dnsStart,
+            waitingDuration: waitEnd,
+            cacheDuration: dnsStart - waitEnd,
+            // dnsEnd usually equals connectStart but use connectStart over dnsEnd
+            // for dnsDuration in case there ever is a gap.
             dnsDuration: connectStart - dnsStart,
-            connectionDuration: requestStart - connectStart,
-            requestDuration: metric.value - requestStart,
+            connectionDuration: connectEnd - connectStart,
+            // There is often a gap between connectEnd and requestStart. Attribute
+            // that to requestDuration so connectionDuration remains 0 for
+            // service worker controlled requests were connectStart and connectEnd
+            // are the same.
+            requestDuration: metric.value - connectEnd,
             navigationEntry: navigationEntry,
@@ -37,2 +49,3 @@ };
         waitingDuration: 0,
+        cacheDuration: 0,
         dnsDuration: 0,
@@ -39,0 +52,0 @@ connectionDuration: 0,

dist/modules/types/ttfb.d.ts

@@ -13,2 +13,6 @@ import type { Metric } from './base.js';
  * to help identify issues happening to real-users in the field.
+ *
+ * NOTE: these values are primarily useful for page loads not handled via
+ * service worker, as browsers differ in what they report when service worker
+ * is involved, see: https://github.com/w3c/navigation-timing/issues/199
  */
@@ -18,9 +22,17 @@ export interface TTFBAttribution {
      * The total time from when the user initiates loading the page to when the
-     * DNS lookup begins. This includes redirects, service worker startup, and
-     * HTTP cache lookup times.
+     * page starts to handle the request. Large values here are typically due
+     * to HTTP redirects, though other browser processing contributes to this
+     * duration as well (so even without redirect it's generally not zero).
      */
     waitingDuration: number;
     /**
-     * The total time to resolve the DNS for the current request.
+     * The total time spent checking the HTTP cache for a match. For navigations
+     * handled via service worker, this duration usually includes service worker
+     * start-up time as well as time processing `fetch` event listeners, with
+     * some exceptions, see: https://github.com/w3c/navigation-timing/issues/199
      */
+    cacheDuration: number;
+    /**
+     * The total time to resolve the DNS for the requested domain.
+     */
     dnsDuration: number;
@@ -39,4 +51,4 @@ /**
      * The `navigation` entry of the current page, which is useful for diagnosing
-     * general page load issues. This can be used to access `serverTiming` for example:
-     * navigationEntry?.serverTiming
+     * general page load issues. This can be used to access `serverTiming` for
+     * example: navigationEntry?.serverTiming
      */
@@ -43,0 +55,0 @@ navigationEntry?: PerformanceNavigationTiming;

dist/web-vitals.attribution.iife.js

@@ -1,1 +0,1 @@
-var webVitals=function(t){"use strict";var e,n,r=function(){return self.performance&&performance.getEntriesByType&&performance.getEntriesByType("navigation")[0]},i=function(t){if("loading"===document.readyState)return"loading";var e=r();if(e){if(t<e.domInteractive)return"loading";if(0===e.domContentLoadedEventStart||t<e.domContentLoadedEventStart)return"dom-interactive";if(0===e.domComplete||t<e.domComplete)return"dom-content-loaded"}return"complete"},a=function(t){var e=t.nodeName;return 1===t.nodeType?e.toLowerCase():e.toUpperCase().replace(/^#/,"")},o=function(t,e){var n="";try{for(;t&&9!==t.nodeType;){var r=t,i=r.id?"#"+r.id:a(r)+(r.classList&&r.classList.value&&r.classList.value.trim()&&r.classList.value.trim().length?"."+r.classList.value.trim().replace(/\s+/g,"."):"");if(n.length+i.length>(e||100)-1)return n||i;if(n=n?i+">"+n:i,r.id)break;t=r.parentNode}}catch(t){}return n},u=-1,c=function(){return u},s=function(t){addEventListener("pageshow",(function(e){e.persisted&&(u=e.timeStamp,t(e))}),!0)},f=function(){var t=r();return t&&t.activationStart||0},d=function(t,e){var n=r(),i="navigate";c()>=0?i="back-forward-cache":n&&(document.prerendering||f()>0?i="prerender":document.wasDiscarded?i="restore":n.type&&(i=n.type.replace(/_/g,"-")));return{name:t,value:void 0===e?-1:e,rating:"good",delta:0,entries:[],id:"v4-".concat(Date.now(),"-").concat(Math.floor(8999999999999*Math.random())+1e12),navigationType:i}},l=function(t,e,n){try{if(PerformanceObserver.supportedEntryTypes.includes(t)){var r=new PerformanceObserver((function(t){Promise.resolve().then((function(){e(t.getEntries())}))}));return r.observe(Object.assign({type:t,buffered:!0},n||{})),r}}catch(t){}},m=function(t,e,n,r){var i,a;return function(o){e.value>=0&&(o||r)&&((a=e.value-(i||0))||void 0===i)&&(i=e.value,e.delta=a,e.rating=function(t,e){return t>e[1]?"poor":t>e[0]?"needs-improvement":"good"}(e.value,n),t(e))}},p=function(t){requestAnimationFrame((function(){return requestAnimationFrame((function(){return t()}))}))},v=function(t){document.addEventListener("visibilitychange",(function(){"hidden"===document.visibilityState&&t()}))},h=function(t){var e=!1;return function(){e||(t(),e=!0)}},g=-1,T=function(){return"hidden"!==document.visibilityState||document.prerendering?1/0:0},y=function(t){"hidden"===document.visibilityState&&g>-1&&(g="visibilitychange"===t.type?t.timeStamp:0,S())},E=function(){addEventListener("visibilitychange",y,!0),addEventListener("prerenderingchange",y,!0)},S=function(){removeEventListener("visibilitychange",y,!0),removeEventListener("prerenderingchange",y,!0)},b=function(){return g<0&&(g=T(),E(),s((function(){setTimeout((function(){g=T(),E()}),0)}))),{get firstHiddenTime(){return g}}},L=function(t){document.prerendering?addEventListener("prerenderingchange",(function(){return t()}),!0):t()},C=[1800,3e3],M=function(t,e){e=e||{},L((function(){var n,r=b(),i=d("FCP"),a=l("paint",(function(t){t.forEach((function(t){"first-contentful-paint"===t.name&&(a.disconnect(),t.startTime<r.firstHiddenTime&&(i.value=Math.max(t.startTime-f(),0),i.entries.push(t),n(!0)))}))}));a&&(n=m(t,i,C,e.reportAllChanges),s((function(r){i=d("FCP"),n=m(t,i,C,e.reportAllChanges),p((function(){i.value=performance.now()-r.timeStamp,n(!0)}))})))}))},w=[.1,.25],D=function(t){return t<=0||t>performance.now()},F=0,P=1/0,I=0,k=function(t){t.forEach((function(t){t.interactionId&&(P=Math.min(P,t.interactionId),I=Math.max(I,t.interactionId),F=I?(I-P)/7+1:0)}))},x=function(){"interactionCount"in performance||e||(e=l("event",k,{type:"event",buffered:!0,durationThreshold:0}))},A=[],B=new Map,R=0,q=function(){return(e?F:performance.interactionCount||0)-R},N=[],H=function(t){if(N.forEach((function(e){return e(t)})),t.interactionId||"first-input"===t.entryType){var e=A[A.length-1],n=B.get(t.interactionId);if(n||A.length<10||t.duration>e.latency){if(n)t.duration>n.latency?(n.entries=[t],n.latency=t.duration):t.duration===n.latency&&t.startTime===n.entries[0].startTime&&n.entries.push(t);else{var r={id:t.interactionId,latency:t.duration,entries:[t]};B.set(r.id,r),A.push(r)}A.sort((function(t,e){return e.latency-t.latency})),A.length>10&&A.splice(10).forEach((function(t){return B.delete(t.id)}))}}},O=function(t){var e=self.requestIdleCallback||self.setTimeout,n=-1;return t=h(t),"hidden"===document.visibilityState?t():(n=e(t),v(t)),n},V=[200,500],W=function(t,e){e=e||{},L((function(){var n;x();var r,i=d("INP"),a=function(t){t.forEach(H);var e,n=(e=Math.min(A.length-1,Math.floor(q()/50)),A[e]);n&&n.latency!==i.value&&(i.value=n.latency,i.entries=n.entries,r())},o=l("event",a,{durationThreshold:null!==(n=e.durationThreshold)&&void 0!==n?n:40});r=m(t,i,V,e.reportAllChanges),o&&("PerformanceEventTiming"in self&&"interactionId"in PerformanceEventTiming.prototype&&o.observe({type:"first-input",buffered:!0}),v((function(){a(o.takeRecords()),r(!0)})),s((function(){R=0,A.length=0,B.clear(),i=d("INP"),r=m(t,i,V,e.reportAllChanges)})))}))},j=[],U=new Map,_=[],z=new WeakMap,G=-1,J=function(t){t.forEach((function(t){return j.push(t)}))},K=function(){_=_.slice(-50);var t=new Set(_.concat(A.map((function(t){return z.get(t.entries[0])}))));U.forEach((function(e,n){t.has(n)||U.delete(n)}));var e=new Set;U.forEach((function(t){$(t.startTime,t.processingEnd).forEach((function(t){e.add(t)}))})),j=Array.from(e),G=-1};N.push((function(t){for(var e,n=t.startTime+t.duration,r=_.length-1;r>=0;r--)if(e=_[r],Math.abs(n-e)<=8){var i=U.get(e);i.startTime=Math.min(t.startTime,i.startTime),i.processingStart=Math.min(t.processingStart,i.processingStart),i.processingEnd=Math.max(t.processingEnd,i.processingEnd),i.entries.push(t),n=e;break}n!==e&&(_.push(n),U.set(n,{startTime:t.startTime,processingStart:t.processingStart,processingEnd:t.processingEnd,entries:[t]})),(t.interactionId||"first-input"===t.entryType)&&z.set(t,n),G<0&&(G=O(K))}));var Q,X,Y,Z,$=function(t,e){for(var n,r=[],i=0;n=j[i];i++)if(!(n.startTime+n.duration<t)){if(n.startTime>e)break;r.push(n)}return r},tt=[2500,4e3],et={},nt=[800,1800],rt=function t(e){document.prerendering?L((function(){return t(e)})):"complete"!==document.readyState?addEventListener("load",(function(){return t(e)}),!0):setTimeout(e,0)},it=function(t,e){e=e||{};var n=d("TTFB"),i=m(t,n,nt,e.reportAllChanges);rt((function(){var a=r();if(a){var o=a.responseStart;if(D(o))return;n.value=Math.max(o-f(),0),n.entries=[a],i(!0),s((function(){n=d("TTFB",0),(i=m(t,n,nt,e.reportAllChanges))(!0)}))}}))},at={passive:!0,capture:!0},ot=new Date,ut=function(t,e){Q||(Q=e,X=t,Y=new Date,ft(removeEventListener),ct())},ct=function(){if(X>=0&&X<Y-ot){var t={entryType:"first-input",name:Q.type,target:Q.target,cancelable:Q.cancelable,startTime:Q.timeStamp,processingStart:Q.timeStamp+X};Z.forEach((function(e){e(t)})),Z=[]}},st=function(t){if(t.cancelable){var e=(t.timeStamp>1e12?new Date:performance.now())-t.timeStamp;"pointerdown"==t.type?function(t,e){var n=function(){ut(t,e),i()},r=function(){i()},i=function(){removeEventListener("pointerup",n,at),removeEventListener("pointercancel",r,at)};addEventListener("pointerup",n,at),addEventListener("pointercancel",r,at)}(e,t):ut(e,t)}},ft=function(t){["mousedown","keydown","touchstart","pointerdown"].forEach((function(e){return t(e,st,at)}))},dt=[100,300],lt=function(t,e){e=e||{},L((function(){var n,r=b(),i=d("FID"),a=function(t){t.startTime<r.firstHiddenTime&&(i.value=t.processingStart-t.startTime,i.entries.push(t),n(!0))},o=function(t){t.forEach(a)},u=l("first-input",o);n=m(t,i,dt,e.reportAllChanges),u&&(v(h((function(){o(u.takeRecords()),u.disconnect()}))),s((function(){var r;i=d("FID"),n=m(t,i,dt,e.reportAllChanges),Z=[],X=-1,Q=null,ft(addEventListener),r=a,Z.push(r),ct()})))}))};return t.CLSThresholds=w,t.FCPThresholds=C,t.FIDThresholds=dt,t.INPThresholds=V,t.LCPThresholds=tt,t.TTFBThresholds=nt,t.onCLS=function(t,e){!function(t,e){e=e||{},M(h((function(){var n,r=d("CLS",0),i=0,a=[],o=function(t){t.forEach((function(t){if(!t.hadRecentInput){var e=a[0],n=a[a.length-1];i&&t.startTime-n.startTime<1e3&&t.startTime-e.startTime<5e3?(i+=t.value,a.push(t)):(i=t.value,a=[t])}})),i>r.value&&(r.value=i,r.entries=a,n())},u=l("layout-shift",o);u&&(n=m(t,r,w,e.reportAllChanges),v((function(){o(u.takeRecords()),n(!0)})),s((function(){i=0,r=d("CLS",0),n=m(t,r,w,e.reportAllChanges),p((function(){return n()}))})),setTimeout(n,0))})))}((function(e){!function(t){if(t.entries.length){var e=t.entries.reduce((function(t,e){return t&&t.value>e.value?t:e}));if(e&&e.sources&&e.sources.length){var n=(r=e.sources).find((function(t){return t.node&&1===t.node.nodeType}))||r[0];if(n)return void(t.attribution={largestShiftTarget:o(n.node),largestShiftTime:e.startTime,largestShiftValue:e.value,largestShiftSource:n,largestShiftEntry:e,loadState:i(e.startTime)})}}var r;t.attribution={}}(e),t(e)}),e)},t.onFCP=function(t,e){M((function(e){!function(t){if(t.entries.length){var e=r(),n=t.entries[t.entries.length-1];if(e){var a=e.responseStart;if(D(a))return;var o=e.activationStart||0,u=Math.max(0,a-o);return void(t.attribution={timeToFirstByte:u,firstByteToFCP:t.value-u,loadState:i(t.entries[0].startTime),navigationEntry:e,fcpEntry:n})}}t.attribution={timeToFirstByte:0,firstByteToFCP:t.value,loadState:i(c())}}(e),t(e)}),e)},t.onFID=function(t,e){lt((function(e){!function(t){var e=t.entries[0];t.attribution={eventTarget:o(e.target),eventType:e.name,eventTime:e.startTime,eventEntry:e,loadState:i(e.startTime)}}(e),t(e)}),e)},t.onINP=function(t,e){n||(n=l("long-animation-frame",J)),W((function(e){O((function(){!function(t){var e=t.entries[0],n=z.get(e),r=U.get(n),a=e.processingStart,u=r.processingEnd,c=r.entries.sort((function(t,e){return t.processingStart-e.processingStart})),s=$(e.startTime,u),f=t.entries.find((function(t){return t.target})),d=[e.startTime+e.duration,u].concat(s.map((function(t){return t.startTime+t.duration}))),l=Math.max.apply(Math,d);t.attribution={interactionTarget:o(f&&f.target),interactionType:e.name.startsWith("key")?"keyboard":"pointer",interactionTime:e.startTime,nextPaintTime:l,processedEventEntries:c,longAnimationFrameEntries:s,inputDelay:a-e.startTime,processingDuration:u-a,presentationDelay:Math.max(l-u,0),loadState:i(e.startTime)}}(e),t(e)}))}),e)},t.onLCP=function(t,e){!function(t,e){e=e||{},L((function(){var n,r=b(),i=d("LCP"),a=function(t){var e=t[t.length-1];e&&e.startTime<r.firstHiddenTime&&(i.value=Math.max(e.startTime-f(),0),i.entries=[e],n())},o=l("largest-contentful-paint",a);if(o){n=m(t,i,tt,e.reportAllChanges);var u=h((function(){et[i.id]||(a(o.takeRecords()),o.disconnect(),et[i.id]=!0,n(!0))}));["keydown","click"].forEach((function(t){addEventListener(t,(function(){return O(u)}),!0)})),v(u),s((function(r){i=d("LCP"),n=m(t,i,tt,e.reportAllChanges),p((function(){i.value=performance.now()-r.timeStamp,et[i.id]=!0,n(!0)}))}))}}))}((function(e){!function(t){if(t.entries.length){var e=r();if(e){var n=e.responseStart;if(D(n))return;var i=e.activationStart||0,a=t.entries[t.entries.length-1],u=a.url&&performance.getEntriesByType("resource").filter((function(t){return t.name===a.url}))[0],c=Math.max(0,n-i),s=Math.max(c,u?(u.requestStart||u.startTime)-i:0),f=Math.max(s,u?u.responseEnd-i:0),d=Math.max(f,a.startTime-i),l={element:o(a.element),timeToFirstByte:c,resourceLoadDelay:s-c,resourceLoadDuration:f-s,elementRenderDelay:d-f,navigationEntry:e,lcpEntry:a};return a.url&&(l.url=a.url),u&&(l.lcpResourceEntry=u),void(t.attribution=l)}}t.attribution={timeToFirstByte:0,resourceLoadDelay:0,resourceLoadDuration:0,elementRenderDelay:t.value}}(e),t(e)}),e)},t.onTTFB=function(t,e){it((function(e){!function(t){if(t.entries.length){var e=t.entries[0],n=e.activationStart||0,r=Math.max(e.domainLookupStart-n,0),i=Math.max(e.connectStart-n,0),a=Math.max(e.requestStart-n,0);t.attribution={waitingDuration:r,dnsDuration:i-r,connectionDuration:a-i,requestDuration:t.value-a,navigationEntry:e}}else t.attribution={waitingDuration:0,dnsDuration:0,connectionDuration:0,requestDuration:0}}(e),t(e)}),e)},t}({});
+var webVitals=function(t){"use strict";var e,n,r=function(){return self.performance&&performance.getEntriesByType&&performance.getEntriesByType("navigation")[0]},i=function(t){if("loading"===document.readyState)return"loading";var e=r();if(e){if(t<e.domInteractive)return"loading";if(0===e.domContentLoadedEventStart||t<e.domContentLoadedEventStart)return"dom-interactive";if(0===e.domComplete||t<e.domComplete)return"dom-content-loaded"}return"complete"},a=function(t){var e=t.nodeName;return 1===t.nodeType?e.toLowerCase():e.toUpperCase().replace(/^#/,"")},o=function(t,e){var n="";try{for(;t&&9!==t.nodeType;){var r=t,i=r.id?"#"+r.id:a(r)+(r.classList&&r.classList.value&&r.classList.value.trim()&&r.classList.value.trim().length?"."+r.classList.value.trim().replace(/\s+/g,"."):"");if(n.length+i.length>(e||100)-1)return n||i;if(n=n?i+">"+n:i,r.id)break;t=r.parentNode}}catch(t){}return n},u=-1,c=function(){return u},s=function(t){addEventListener("pageshow",(function(e){e.persisted&&(u=e.timeStamp,t(e))}),!0)},f=function(){var t=r();return t&&t.activationStart||0},d=function(t,e){var n=r(),i="navigate";c()>=0?i="back-forward-cache":n&&(document.prerendering||f()>0?i="prerender":document.wasDiscarded?i="restore":n.type&&(i=n.type.replace(/_/g,"-")));return{name:t,value:void 0===e?-1:e,rating:"good",delta:0,entries:[],id:"v4-".concat(Date.now(),"-").concat(Math.floor(8999999999999*Math.random())+1e12),navigationType:i}},l=function(t,e,n){try{if(PerformanceObserver.supportedEntryTypes.includes(t)){var r=new PerformanceObserver((function(t){Promise.resolve().then((function(){e(t.getEntries())}))}));return r.observe(Object.assign({type:t,buffered:!0},n||{})),r}}catch(t){}},m=function(t,e,n,r){var i,a;return function(o){e.value>=0&&(o||r)&&((a=e.value-(i||0))||void 0===i)&&(i=e.value,e.delta=a,e.rating=function(t,e){return t>e[1]?"poor":t>e[0]?"needs-improvement":"good"}(e.value,n),t(e))}},p=function(t){requestAnimationFrame((function(){return requestAnimationFrame((function(){return t()}))}))},v=function(t){document.addEventListener("visibilitychange",(function(){"hidden"===document.visibilityState&&t()}))},h=function(t){var e=!1;return function(){e||(t(),e=!0)}},g=-1,T=function(){return"hidden"!==document.visibilityState||document.prerendering?1/0:0},y=function(t){"hidden"===document.visibilityState&&g>-1&&(g="visibilitychange"===t.type?t.timeStamp:0,S())},E=function(){addEventListener("visibilitychange",y,!0),addEventListener("prerenderingchange",y,!0)},S=function(){removeEventListener("visibilitychange",y,!0),removeEventListener("prerenderingchange",y,!0)},b=function(){return g<0&&(g=T(),E(),s((function(){setTimeout((function(){g=T(),E()}),0)}))),{get firstHiddenTime(){return g}}},L=function(t){document.prerendering?addEventListener("prerenderingchange",(function(){return t()}),!0):t()},C=[1800,3e3],D=function(t,e){e=e||{},L((function(){var n,r=b(),i=d("FCP"),a=l("paint",(function(t){t.forEach((function(t){"first-contentful-paint"===t.name&&(a.disconnect(),t.startTime<r.firstHiddenTime&&(i.value=Math.max(t.startTime-f(),0),i.entries.push(t),n(!0)))}))}));a&&(n=m(t,i,C,e.reportAllChanges),s((function(r){i=d("FCP"),n=m(t,i,C,e.reportAllChanges),p((function(){i.value=performance.now()-r.timeStamp,n(!0)}))})))}))},M=[.1,.25],w=function(t){return t<=0||t>performance.now()},F=0,P=1/0,I=0,k=function(t){t.forEach((function(t){t.interactionId&&(P=Math.min(P,t.interactionId),I=Math.max(I,t.interactionId),F=I?(I-P)/7+1:0)}))},x=function(){"interactionCount"in performance||e||(e=l("event",k,{type:"event",buffered:!0,durationThreshold:0}))},A=[],B=new Map,R=0,q=function(){return(e?F:performance.interactionCount||0)-R},N=[],H=function(t){if(N.forEach((function(e){return e(t)})),t.interactionId||"first-input"===t.entryType){var e=A[A.length-1],n=B.get(t.interactionId);if(n||A.length<10||t.duration>e.latency){if(n)t.duration>n.latency?(n.entries=[t],n.latency=t.duration):t.duration===n.latency&&t.startTime===n.entries[0].startTime&&n.entries.push(t);else{var r={id:t.interactionId,latency:t.duration,entries:[t]};B.set(r.id,r),A.push(r)}A.sort((function(t,e){return e.latency-t.latency})),A.length>10&&A.splice(10).forEach((function(t){return B.delete(t.id)}))}}},O=function(t){var e=self.requestIdleCallback||self.setTimeout,n=-1;return t=h(t),"hidden"===document.visibilityState?t():(n=e(t),v(t)),n},V=[200,500],W=function(t,e){e=e||{},L((function(){var n;x();var r,i=d("INP"),a=function(t){t.forEach(H);var e,n=(e=Math.min(A.length-1,Math.floor(q()/50)),A[e]);n&&n.latency!==i.value&&(i.value=n.latency,i.entries=n.entries,r())},o=l("event",a,{durationThreshold:null!==(n=e.durationThreshold)&&void 0!==n?n:40});r=m(t,i,V,e.reportAllChanges),o&&("PerformanceEventTiming"in self&&"interactionId"in PerformanceEventTiming.prototype&&o.observe({type:"first-input",buffered:!0}),v((function(){a(o.takeRecords()),r(!0)})),s((function(){R=0,A.length=0,B.clear(),i=d("INP"),r=m(t,i,V,e.reportAllChanges)})))}))},j=[],U=new Map,_=[],z=new WeakMap,G=-1,J=function(t){t.forEach((function(t){return j.push(t)}))},K=function(){_=_.slice(-50);var t=new Set(_.concat(A.map((function(t){return z.get(t.entries[0])}))));U.forEach((function(e,n){t.has(n)||U.delete(n)}));var e=new Set;U.forEach((function(t){$(t.startTime,t.processingEnd).forEach((function(t){e.add(t)}))})),j=Array.from(e),G=-1};N.push((function(t){for(var e,n=t.startTime+t.duration,r=_.length-1;r>=0;r--)if(e=_[r],Math.abs(n-e)<=8){var i=U.get(e);i.startTime=Math.min(t.startTime,i.startTime),i.processingStart=Math.min(t.processingStart,i.processingStart),i.processingEnd=Math.max(t.processingEnd,i.processingEnd),i.entries.push(t),n=e;break}n!==e&&(_.push(n),U.set(n,{startTime:t.startTime,processingStart:t.processingStart,processingEnd:t.processingEnd,entries:[t]})),(t.interactionId||"first-input"===t.entryType)&&z.set(t,n),G<0&&(G=O(K))}));var Q,X,Y,Z,$=function(t,e){for(var n,r=[],i=0;n=j[i];i++)if(!(n.startTime+n.duration<t)){if(n.startTime>e)break;r.push(n)}return r},tt=[2500,4e3],et={},nt=[800,1800],rt=function t(e){document.prerendering?L((function(){return t(e)})):"complete"!==document.readyState?addEventListener("load",(function(){return t(e)}),!0):setTimeout(e,0)},it=function(t,e){e=e||{};var n=d("TTFB"),i=m(t,n,nt,e.reportAllChanges);rt((function(){var a=r();if(a){var o=a.responseStart;if(w(o))return;n.value=Math.max(o-f(),0),n.entries=[a],i(!0),s((function(){n=d("TTFB",0),(i=m(t,n,nt,e.reportAllChanges))(!0)}))}}))},at={passive:!0,capture:!0},ot=new Date,ut=function(t,e){Q||(Q=e,X=t,Y=new Date,ft(removeEventListener),ct())},ct=function(){if(X>=0&&X<Y-ot){var t={entryType:"first-input",name:Q.type,target:Q.target,cancelable:Q.cancelable,startTime:Q.timeStamp,processingStart:Q.timeStamp+X};Z.forEach((function(e){e(t)})),Z=[]}},st=function(t){if(t.cancelable){var e=(t.timeStamp>1e12?new Date:performance.now())-t.timeStamp;"pointerdown"==t.type?function(t,e){var n=function(){ut(t,e),i()},r=function(){i()},i=function(){removeEventListener("pointerup",n,at),removeEventListener("pointercancel",r,at)};addEventListener("pointerup",n,at),addEventListener("pointercancel",r,at)}(e,t):ut(e,t)}},ft=function(t){["mousedown","keydown","touchstart","pointerdown"].forEach((function(e){return t(e,st,at)}))},dt=[100,300],lt=function(t,e){e=e||{},L((function(){var n,r=b(),i=d("FID"),a=function(t){t.startTime<r.firstHiddenTime&&(i.value=t.processingStart-t.startTime,i.entries.push(t),n(!0))},o=function(t){t.forEach(a)},u=l("first-input",o);n=m(t,i,dt,e.reportAllChanges),u&&(v(h((function(){o(u.takeRecords()),u.disconnect()}))),s((function(){var r;i=d("FID"),n=m(t,i,dt,e.reportAllChanges),Z=[],X=-1,Q=null,ft(addEventListener),r=a,Z.push(r),ct()})))}))};return t.CLSThresholds=M,t.FCPThresholds=C,t.FIDThresholds=dt,t.INPThresholds=V,t.LCPThresholds=tt,t.TTFBThresholds=nt,t.onCLS=function(t,e){!function(t,e){e=e||{},D(h((function(){var n,r=d("CLS",0),i=0,a=[],o=function(t){t.forEach((function(t){if(!t.hadRecentInput){var e=a[0],n=a[a.length-1];i&&t.startTime-n.startTime<1e3&&t.startTime-e.startTime<5e3?(i+=t.value,a.push(t)):(i=t.value,a=[t])}})),i>r.value&&(r.value=i,r.entries=a,n())},u=l("layout-shift",o);u&&(n=m(t,r,M,e.reportAllChanges),v((function(){o(u.takeRecords()),n(!0)})),s((function(){i=0,r=d("CLS",0),n=m(t,r,M,e.reportAllChanges),p((function(){return n()}))})),setTimeout(n,0))})))}((function(e){!function(t){if(t.entries.length){var e=t.entries.reduce((function(t,e){return t&&t.value>e.value?t:e}));if(e&&e.sources&&e.sources.length){var n=(r=e.sources).find((function(t){return t.node&&1===t.node.nodeType}))||r[0];if(n)return void(t.attribution={largestShiftTarget:o(n.node),largestShiftTime:e.startTime,largestShiftValue:e.value,largestShiftSource:n,largestShiftEntry:e,loadState:i(e.startTime)})}}var r;t.attribution={}}(e),t(e)}),e)},t.onFCP=function(t,e){D((function(e){!function(t){if(t.entries.length){var e=r(),n=t.entries[t.entries.length-1];if(e){var a=e.responseStart;if(w(a))return;var o=e.activationStart||0,u=Math.max(0,a-o);return void(t.attribution={timeToFirstByte:u,firstByteToFCP:t.value-u,loadState:i(t.entries[0].startTime),navigationEntry:e,fcpEntry:n})}}t.attribution={timeToFirstByte:0,firstByteToFCP:t.value,loadState:i(c())}}(e),t(e)}),e)},t.onFID=function(t,e){lt((function(e){!function(t){var e=t.entries[0];t.attribution={eventTarget:o(e.target),eventType:e.name,eventTime:e.startTime,eventEntry:e,loadState:i(e.startTime)}}(e),t(e)}),e)},t.onINP=function(t,e){n||(n=l("long-animation-frame",J)),W((function(e){O((function(){!function(t){var e=t.entries[0],n=z.get(e),r=U.get(n),a=e.processingStart,u=r.processingEnd,c=r.entries.sort((function(t,e){return t.processingStart-e.processingStart})),s=$(e.startTime,u),f=t.entries.find((function(t){return t.target})),d=[e.startTime+e.duration,u].concat(s.map((function(t){return t.startTime+t.duration}))),l=Math.max.apply(Math,d);t.attribution={interactionTarget:o(f&&f.target),interactionType:e.name.startsWith("key")?"keyboard":"pointer",interactionTime:e.startTime,nextPaintTime:l,processedEventEntries:c,longAnimationFrameEntries:s,inputDelay:a-e.startTime,processingDuration:u-a,presentationDelay:Math.max(l-u,0),loadState:i(e.startTime)}}(e),t(e)}))}),e)},t.onLCP=function(t,e){!function(t,e){e=e||{},L((function(){var n,r=b(),i=d("LCP"),a=function(t){var e=t[t.length-1];e&&e.startTime<r.firstHiddenTime&&(i.value=Math.max(e.startTime-f(),0),i.entries=[e],n())},o=l("largest-contentful-paint",a);if(o){n=m(t,i,tt,e.reportAllChanges);var u=h((function(){et[i.id]||(a(o.takeRecords()),o.disconnect(),et[i.id]=!0,n(!0))}));["keydown","click"].forEach((function(t){addEventListener(t,(function(){return O(u)}),!0)})),v(u),s((function(r){i=d("LCP"),n=m(t,i,tt,e.reportAllChanges),p((function(){i.value=performance.now()-r.timeStamp,et[i.id]=!0,n(!0)}))}))}}))}((function(e){!function(t){if(t.entries.length){var e=r();if(e){var n=e.responseStart;if(w(n))return;var i=e.activationStart||0,a=t.entries[t.entries.length-1],u=a.url&&performance.getEntriesByType("resource").filter((function(t){return t.name===a.url}))[0],c=Math.max(0,n-i),s=Math.max(c,u?(u.requestStart||u.startTime)-i:0),f=Math.max(s,u?u.responseEnd-i:0),d=Math.max(f,a.startTime-i),l={element:o(a.element),timeToFirstByte:c,resourceLoadDelay:s-c,resourceLoadDuration:f-s,elementRenderDelay:d-f,navigationEntry:e,lcpEntry:a};return a.url&&(l.url=a.url),u&&(l.lcpResourceEntry=u),void(t.attribution=l)}}t.attribution={timeToFirstByte:0,resourceLoadDelay:0,resourceLoadDuration:0,elementRenderDelay:t.value}}(e),t(e)}),e)},t.onTTFB=function(t,e){it((function(e){!function(t){if(t.entries.length){var e=t.entries[0],n=e.activationStart||0,r=Math.max((e.workerStart||e.fetchStart)-n,0),i=Math.max(e.domainLookupStart-n,0),a=Math.max(e.connectStart-n,0),o=Math.max(e.connectEnd-n,0);t.attribution={waitingDuration:r,cacheDuration:i-r,dnsDuration:a-i,connectionDuration:o-a,requestDuration:t.value-o,navigationEntry:e}}else t.attribution={waitingDuration:0,cacheDuration:0,dnsDuration:0,connectionDuration:0,requestDuration:0}}(e),t(e)}),e)},t}({});

dist/web-vitals.attribution.js

@@ -1,1 +0,1 @@
-var t,e,n=function(){return self.performance&&performance.getEntriesByType&&performance.getEntriesByType("navigation")[0]},r=function(t){if("loading"===document.readyState)return"loading";var e=n();if(e){if(t<e.domInteractive)return"loading";if(0===e.domContentLoadedEventStart||t<e.domContentLoadedEventStart)return"dom-interactive";if(0===e.domComplete||t<e.domComplete)return"dom-content-loaded"}return"complete"},i=function(t){var e=t.nodeName;return 1===t.nodeType?e.toLowerCase():e.toUpperCase().replace(/^#/,"")},a=function(t,e){var n="";try{for(;t&&9!==t.nodeType;){var r=t,a=r.id?"#"+r.id:i(r)+(r.classList&&r.classList.value&&r.classList.value.trim()&&r.classList.value.trim().length?"."+r.classList.value.trim().replace(/\s+/g,"."):"");if(n.length+a.length>(e||100)-1)return n||a;if(n=n?a+">"+n:a,r.id)break;t=r.parentNode}}catch(t){}return n},o=-1,u=function(){return o},c=function(t){addEventListener("pageshow",(function(e){e.persisted&&(o=e.timeStamp,t(e))}),!0)},s=function(){var t=n();return t&&t.activationStart||0},f=function(t,e){var r=n(),i="navigate";u()>=0?i="back-forward-cache":r&&(document.prerendering||s()>0?i="prerender":document.wasDiscarded?i="restore":r.type&&(i=r.type.replace(/_/g,"-")));return{name:t,value:void 0===e?-1:e,rating:"good",delta:0,entries:[],id:"v4-".concat(Date.now(),"-").concat(Math.floor(8999999999999*Math.random())+1e12),navigationType:i}},d=function(t,e,n){try{if(PerformanceObserver.supportedEntryTypes.includes(t)){var r=new PerformanceObserver((function(t){Promise.resolve().then((function(){e(t.getEntries())}))}));return r.observe(Object.assign({type:t,buffered:!0},n||{})),r}}catch(t){}},l=function(t,e,n,r){var i,a;return function(o){e.value>=0&&(o||r)&&((a=e.value-(i||0))||void 0===i)&&(i=e.value,e.delta=a,e.rating=function(t,e){return t>e[1]?"poor":t>e[0]?"needs-improvement":"good"}(e.value,n),t(e))}},m=function(t){requestAnimationFrame((function(){return requestAnimationFrame((function(){return t()}))}))},p=function(t){document.addEventListener("visibilitychange",(function(){"hidden"===document.visibilityState&&t()}))},v=function(t){var e=!1;return function(){e||(t(),e=!0)}},h=-1,g=function(){return"hidden"!==document.visibilityState||document.prerendering?1/0:0},T=function(t){"hidden"===document.visibilityState&&h>-1&&(h="visibilitychange"===t.type?t.timeStamp:0,E())},y=function(){addEventListener("visibilitychange",T,!0),addEventListener("prerenderingchange",T,!0)},E=function(){removeEventListener("visibilitychange",T,!0),removeEventListener("prerenderingchange",T,!0)},S=function(){return h<0&&(h=g(),y(),c((function(){setTimeout((function(){h=g(),y()}),0)}))),{get firstHiddenTime(){return h}}},b=function(t){document.prerendering?addEventListener("prerenderingchange",(function(){return t()}),!0):t()},L=[1800,3e3],C=function(t,e){e=e||{},b((function(){var n,r=S(),i=f("FCP"),a=d("paint",(function(t){t.forEach((function(t){"first-contentful-paint"===t.name&&(a.disconnect(),t.startTime<r.firstHiddenTime&&(i.value=Math.max(t.startTime-s(),0),i.entries.push(t),n(!0)))}))}));a&&(n=l(t,i,L,e.reportAllChanges),c((function(r){i=f("FCP"),n=l(t,i,L,e.reportAllChanges),m((function(){i.value=performance.now()-r.timeStamp,n(!0)}))})))}))},M=[.1,.25],w=function(t,e){!function(t,e){e=e||{},C(v((function(){var n,r=f("CLS",0),i=0,a=[],o=function(t){t.forEach((function(t){if(!t.hadRecentInput){var e=a[0],n=a[a.length-1];i&&t.startTime-n.startTime<1e3&&t.startTime-e.startTime<5e3?(i+=t.value,a.push(t)):(i=t.value,a=[t])}})),i>r.value&&(r.value=i,r.entries=a,n())},u=d("layout-shift",o);u&&(n=l(t,r,M,e.reportAllChanges),p((function(){o(u.takeRecords()),n(!0)})),c((function(){i=0,r=f("CLS",0),n=l(t,r,M,e.reportAllChanges),m((function(){return n()}))})),setTimeout(n,0))})))}((function(e){!function(t){if(t.entries.length){var e=t.entries.reduce((function(t,e){return t&&t.value>e.value?t:e}));if(e&&e.sources&&e.sources.length){var n=(i=e.sources).find((function(t){return t.node&&1===t.node.nodeType}))||i[0];if(n)return void(t.attribution={largestShiftTarget:a(n.node),largestShiftTime:e.startTime,largestShiftValue:e.value,largestShiftSource:n,largestShiftEntry:e,loadState:r(e.startTime)})}}var i;t.attribution={}}(e),t(e)}),e)},D=function(t){return t<=0||t>performance.now()},x=function(t,e){C((function(e){!function(t){if(t.entries.length){var e=n(),i=t.entries[t.entries.length-1];if(e){var a=e.responseStart;if(D(a))return;var o=e.activationStart||0,c=Math.max(0,a-o);return void(t.attribution={timeToFirstByte:c,firstByteToFCP:t.value-c,loadState:r(t.entries[0].startTime),navigationEntry:e,fcpEntry:i})}}t.attribution={timeToFirstByte:0,firstByteToFCP:t.value,loadState:r(u())}}(e),t(e)}),e)},k=0,A=1/0,F=0,I=function(t){t.forEach((function(t){t.interactionId&&(A=Math.min(A,t.interactionId),F=Math.max(F,t.interactionId),k=F?(F-A)/7+1:0)}))},P=function(){"interactionCount"in performance||t||(t=d("event",I,{type:"event",buffered:!0,durationThreshold:0}))},B=[],R=new Map,q=0,H=function(){return(t?k:performance.interactionCount||0)-q},N=[],O=function(t){if(N.forEach((function(e){return e(t)})),t.interactionId||"first-input"===t.entryType){var e=B[B.length-1],n=R.get(t.interactionId);if(n||B.length<10||t.duration>e.latency){if(n)t.duration>n.latency?(n.entries=[t],n.latency=t.duration):t.duration===n.latency&&t.startTime===n.entries[0].startTime&&n.entries.push(t);else{var r={id:t.interactionId,latency:t.duration,entries:[t]};R.set(r.id,r),B.push(r)}B.sort((function(t,e){return e.latency-t.latency})),B.length>10&&B.splice(10).forEach((function(t){return R.delete(t.id)}))}}},W=function(t){var e=self.requestIdleCallback||self.setTimeout,n=-1;return t=v(t),"hidden"===document.visibilityState?t():(n=e(t),p(t)),n},j=[200,500],U=function(t,e){e=e||{},b((function(){var n;P();var r,i=f("INP"),a=function(t){t.forEach(O);var e,n=(e=Math.min(B.length-1,Math.floor(H()/50)),B[e]);n&&n.latency!==i.value&&(i.value=n.latency,i.entries=n.entries,r())},o=d("event",a,{durationThreshold:null!==(n=e.durationThreshold)&&void 0!==n?n:40});r=l(t,i,j,e.reportAllChanges),o&&("PerformanceEventTiming"in self&&"interactionId"in PerformanceEventTiming.prototype&&o.observe({type:"first-input",buffered:!0}),p((function(){a(o.takeRecords()),r(!0)})),c((function(){q=0,B.length=0,R.clear(),i=f("INP"),r=l(t,i,j,e.reportAllChanges)})))}))},V=[],_=new Map,z=[],G=new WeakMap,J=-1,K=function(t){t.forEach((function(t){return V.push(t)}))},Q=function(){z=z.slice(-50);var t=new Set(z.concat(B.map((function(t){return G.get(t.entries[0])}))));_.forEach((function(e,n){t.has(n)||_.delete(n)}));var e=new Set;_.forEach((function(t){tt(t.startTime,t.processingEnd).forEach((function(t){e.add(t)}))})),V=Array.from(e),J=-1};N.push((function(t){for(var e,n=t.startTime+t.duration,r=z.length-1;r>=0;r--)if(e=z[r],Math.abs(n-e)<=8){var i=_.get(e);i.startTime=Math.min(t.startTime,i.startTime),i.processingStart=Math.min(t.processingStart,i.processingStart),i.processingEnd=Math.max(t.processingEnd,i.processingEnd),i.entries.push(t),n=e;break}n!==e&&(z.push(n),_.set(n,{startTime:t.startTime,processingStart:t.processingStart,processingEnd:t.processingEnd,entries:[t]})),(t.interactionId||"first-input"===t.entryType)&&G.set(t,n),J<0&&(J=W(Q))}));var X,Y,Z,$,tt=function(t,e){for(var n,r=[],i=0;n=V[i];i++)if(!(n.startTime+n.duration<t)){if(n.startTime>e)break;r.push(n)}return r},et=function(t,n){e||(e=d("long-animation-frame",K)),U((function(e){W((function(){!function(t){var e=t.entries[0],n=G.get(e),i=_.get(n),o=e.processingStart,u=i.processingEnd,c=i.entries.sort((function(t,e){return t.processingStart-e.processingStart})),s=tt(e.startTime,u),f=t.entries.find((function(t){return t.target})),d=[e.startTime+e.duration,u].concat(s.map((function(t){return t.startTime+t.duration}))),l=Math.max.apply(Math,d);t.attribution={interactionTarget:a(f&&f.target),interactionType:e.name.startsWith("key")?"keyboard":"pointer",interactionTime:e.startTime,nextPaintTime:l,processedEventEntries:c,longAnimationFrameEntries:s,inputDelay:o-e.startTime,processingDuration:u-o,presentationDelay:Math.max(l-u,0),loadState:r(e.startTime)}}(e),t(e)}))}),n)},nt=[2500,4e3],rt={},it=function(t,e){!function(t,e){e=e||{},b((function(){var n,r=S(),i=f("LCP"),a=function(t){var e=t[t.length-1];e&&e.startTime<r.firstHiddenTime&&(i.value=Math.max(e.startTime-s(),0),i.entries=[e],n())},o=d("largest-contentful-paint",a);if(o){n=l(t,i,nt,e.reportAllChanges);var u=v((function(){rt[i.id]||(a(o.takeRecords()),o.disconnect(),rt[i.id]=!0,n(!0))}));["keydown","click"].forEach((function(t){addEventListener(t,(function(){return W(u)}),!0)})),p(u),c((function(r){i=f("LCP"),n=l(t,i,nt,e.reportAllChanges),m((function(){i.value=performance.now()-r.timeStamp,rt[i.id]=!0,n(!0)}))}))}}))}((function(e){!function(t){if(t.entries.length){var e=n();if(e){var r=e.responseStart;if(D(r))return;var i=e.activationStart||0,o=t.entries[t.entries.length-1],u=o.url&&performance.getEntriesByType("resource").filter((function(t){return t.name===o.url}))[0],c=Math.max(0,r-i),s=Math.max(c,u?(u.requestStart||u.startTime)-i:0),f=Math.max(s,u?u.responseEnd-i:0),d=Math.max(f,o.startTime-i),l={element:a(o.element),timeToFirstByte:c,resourceLoadDelay:s-c,resourceLoadDuration:f-s,elementRenderDelay:d-f,navigationEntry:e,lcpEntry:o};return o.url&&(l.url=o.url),u&&(l.lcpResourceEntry=u),void(t.attribution=l)}}t.attribution={timeToFirstByte:0,resourceLoadDelay:0,resourceLoadDuration:0,elementRenderDelay:t.value}}(e),t(e)}),e)},at=[800,1800],ot=function t(e){document.prerendering?b((function(){return t(e)})):"complete"!==document.readyState?addEventListener("load",(function(){return t(e)}),!0):setTimeout(e,0)},ut=function(t,e){e=e||{};var r=f("TTFB"),i=l(t,r,at,e.reportAllChanges);ot((function(){var a=n();if(a){var o=a.responseStart;if(D(o))return;r.value=Math.max(o-s(),0),r.entries=[a],i(!0),c((function(){r=f("TTFB",0),(i=l(t,r,at,e.reportAllChanges))(!0)}))}}))},ct=function(t,e){ut((function(e){!function(t){if(t.entries.length){var e=t.entries[0],n=e.activationStart||0,r=Math.max(e.domainLookupStart-n,0),i=Math.max(e.connectStart-n,0),a=Math.max(e.requestStart-n,0);t.attribution={waitingDuration:r,dnsDuration:i-r,connectionDuration:a-i,requestDuration:t.value-a,navigationEntry:e}}else t.attribution={waitingDuration:0,dnsDuration:0,connectionDuration:0,requestDuration:0}}(e),t(e)}),e)},st={passive:!0,capture:!0},ft=new Date,dt=function(t,e){X||(X=e,Y=t,Z=new Date,pt(removeEventListener),lt())},lt=function(){if(Y>=0&&Y<Z-ft){var t={entryType:"first-input",name:X.type,target:X.target,cancelable:X.cancelable,startTime:X.timeStamp,processingStart:X.timeStamp+Y};$.forEach((function(e){e(t)})),$=[]}},mt=function(t){if(t.cancelable){var e=(t.timeStamp>1e12?new Date:performance.now())-t.timeStamp;"pointerdown"==t.type?function(t,e){var n=function(){dt(t,e),i()},r=function(){i()},i=function(){removeEventListener("pointerup",n,st),removeEventListener("pointercancel",r,st)};addEventListener("pointerup",n,st),addEventListener("pointercancel",r,st)}(e,t):dt(e,t)}},pt=function(t){["mousedown","keydown","touchstart","pointerdown"].forEach((function(e){return t(e,mt,st)}))},vt=[100,300],ht=function(t,e){e=e||{},b((function(){var n,r=S(),i=f("FID"),a=function(t){t.startTime<r.firstHiddenTime&&(i.value=t.processingStart-t.startTime,i.entries.push(t),n(!0))},o=function(t){t.forEach(a)},u=d("first-input",o);n=l(t,i,vt,e.reportAllChanges),u&&(p(v((function(){o(u.takeRecords()),u.disconnect()}))),c((function(){var r;i=f("FID"),n=l(t,i,vt,e.reportAllChanges),$=[],Y=-1,X=null,pt(addEventListener),r=a,$.push(r),lt()})))}))},gt=function(t,e){ht((function(e){!function(t){var e=t.entries[0];t.attribution={eventTarget:a(e.target),eventType:e.name,eventTime:e.startTime,eventEntry:e,loadState:r(e.startTime)}}(e),t(e)}),e)};export{M as CLSThresholds,L as FCPThresholds,vt as FIDThresholds,j as INPThresholds,nt as LCPThresholds,at as TTFBThresholds,w as onCLS,x as onFCP,gt as onFID,et as onINP,it as onLCP,ct as onTTFB};
+var t,e,n=function(){return self.performance&&performance.getEntriesByType&&performance.getEntriesByType("navigation")[0]},r=function(t){if("loading"===document.readyState)return"loading";var e=n();if(e){if(t<e.domInteractive)return"loading";if(0===e.domContentLoadedEventStart||t<e.domContentLoadedEventStart)return"dom-interactive";if(0===e.domComplete||t<e.domComplete)return"dom-content-loaded"}return"complete"},i=function(t){var e=t.nodeName;return 1===t.nodeType?e.toLowerCase():e.toUpperCase().replace(/^#/,"")},a=function(t,e){var n="";try{for(;t&&9!==t.nodeType;){var r=t,a=r.id?"#"+r.id:i(r)+(r.classList&&r.classList.value&&r.classList.value.trim()&&r.classList.value.trim().length?"."+r.classList.value.trim().replace(/\s+/g,"."):"");if(n.length+a.length>(e||100)-1)return n||a;if(n=n?a+">"+n:a,r.id)break;t=r.parentNode}}catch(t){}return n},o=-1,u=function(){return o},c=function(t){addEventListener("pageshow",(function(e){e.persisted&&(o=e.timeStamp,t(e))}),!0)},s=function(){var t=n();return t&&t.activationStart||0},f=function(t,e){var r=n(),i="navigate";u()>=0?i="back-forward-cache":r&&(document.prerendering||s()>0?i="prerender":document.wasDiscarded?i="restore":r.type&&(i=r.type.replace(/_/g,"-")));return{name:t,value:void 0===e?-1:e,rating:"good",delta:0,entries:[],id:"v4-".concat(Date.now(),"-").concat(Math.floor(8999999999999*Math.random())+1e12),navigationType:i}},d=function(t,e,n){try{if(PerformanceObserver.supportedEntryTypes.includes(t)){var r=new PerformanceObserver((function(t){Promise.resolve().then((function(){e(t.getEntries())}))}));return r.observe(Object.assign({type:t,buffered:!0},n||{})),r}}catch(t){}},l=function(t,e,n,r){var i,a;return function(o){e.value>=0&&(o||r)&&((a=e.value-(i||0))||void 0===i)&&(i=e.value,e.delta=a,e.rating=function(t,e){return t>e[1]?"poor":t>e[0]?"needs-improvement":"good"}(e.value,n),t(e))}},m=function(t){requestAnimationFrame((function(){return requestAnimationFrame((function(){return t()}))}))},p=function(t){document.addEventListener("visibilitychange",(function(){"hidden"===document.visibilityState&&t()}))},v=function(t){var e=!1;return function(){e||(t(),e=!0)}},h=-1,g=function(){return"hidden"!==document.visibilityState||document.prerendering?1/0:0},T=function(t){"hidden"===document.visibilityState&&h>-1&&(h="visibilitychange"===t.type?t.timeStamp:0,E())},y=function(){addEventListener("visibilitychange",T,!0),addEventListener("prerenderingchange",T,!0)},E=function(){removeEventListener("visibilitychange",T,!0),removeEventListener("prerenderingchange",T,!0)},S=function(){return h<0&&(h=g(),y(),c((function(){setTimeout((function(){h=g(),y()}),0)}))),{get firstHiddenTime(){return h}}},b=function(t){document.prerendering?addEventListener("prerenderingchange",(function(){return t()}),!0):t()},L=[1800,3e3],C=function(t,e){e=e||{},b((function(){var n,r=S(),i=f("FCP"),a=d("paint",(function(t){t.forEach((function(t){"first-contentful-paint"===t.name&&(a.disconnect(),t.startTime<r.firstHiddenTime&&(i.value=Math.max(t.startTime-s(),0),i.entries.push(t),n(!0)))}))}));a&&(n=l(t,i,L,e.reportAllChanges),c((function(r){i=f("FCP"),n=l(t,i,L,e.reportAllChanges),m((function(){i.value=performance.now()-r.timeStamp,n(!0)}))})))}))},M=[.1,.25],w=function(t,e){!function(t,e){e=e||{},C(v((function(){var n,r=f("CLS",0),i=0,a=[],o=function(t){t.forEach((function(t){if(!t.hadRecentInput){var e=a[0],n=a[a.length-1];i&&t.startTime-n.startTime<1e3&&t.startTime-e.startTime<5e3?(i+=t.value,a.push(t)):(i=t.value,a=[t])}})),i>r.value&&(r.value=i,r.entries=a,n())},u=d("layout-shift",o);u&&(n=l(t,r,M,e.reportAllChanges),p((function(){o(u.takeRecords()),n(!0)})),c((function(){i=0,r=f("CLS",0),n=l(t,r,M,e.reportAllChanges),m((function(){return n()}))})),setTimeout(n,0))})))}((function(e){!function(t){if(t.entries.length){var e=t.entries.reduce((function(t,e){return t&&t.value>e.value?t:e}));if(e&&e.sources&&e.sources.length){var n=(i=e.sources).find((function(t){return t.node&&1===t.node.nodeType}))||i[0];if(n)return void(t.attribution={largestShiftTarget:a(n.node),largestShiftTime:e.startTime,largestShiftValue:e.value,largestShiftSource:n,largestShiftEntry:e,loadState:r(e.startTime)})}}var i;t.attribution={}}(e),t(e)}),e)},D=function(t){return t<=0||t>performance.now()},x=function(t,e){C((function(e){!function(t){if(t.entries.length){var e=n(),i=t.entries[t.entries.length-1];if(e){var a=e.responseStart;if(D(a))return;var o=e.activationStart||0,c=Math.max(0,a-o);return void(t.attribution={timeToFirstByte:c,firstByteToFCP:t.value-c,loadState:r(t.entries[0].startTime),navigationEntry:e,fcpEntry:i})}}t.attribution={timeToFirstByte:0,firstByteToFCP:t.value,loadState:r(u())}}(e),t(e)}),e)},k=0,A=1/0,F=0,I=function(t){t.forEach((function(t){t.interactionId&&(A=Math.min(A,t.interactionId),F=Math.max(F,t.interactionId),k=F?(F-A)/7+1:0)}))},P=function(){"interactionCount"in performance||t||(t=d("event",I,{type:"event",buffered:!0,durationThreshold:0}))},B=[],R=new Map,q=0,H=function(){return(t?k:performance.interactionCount||0)-q},N=[],O=function(t){if(N.forEach((function(e){return e(t)})),t.interactionId||"first-input"===t.entryType){var e=B[B.length-1],n=R.get(t.interactionId);if(n||B.length<10||t.duration>e.latency){if(n)t.duration>n.latency?(n.entries=[t],n.latency=t.duration):t.duration===n.latency&&t.startTime===n.entries[0].startTime&&n.entries.push(t);else{var r={id:t.interactionId,latency:t.duration,entries:[t]};R.set(r.id,r),B.push(r)}B.sort((function(t,e){return e.latency-t.latency})),B.length>10&&B.splice(10).forEach((function(t){return R.delete(t.id)}))}}},W=function(t){var e=self.requestIdleCallback||self.setTimeout,n=-1;return t=v(t),"hidden"===document.visibilityState?t():(n=e(t),p(t)),n},j=[200,500],U=function(t,e){e=e||{},b((function(){var n;P();var r,i=f("INP"),a=function(t){t.forEach(O);var e,n=(e=Math.min(B.length-1,Math.floor(H()/50)),B[e]);n&&n.latency!==i.value&&(i.value=n.latency,i.entries=n.entries,r())},o=d("event",a,{durationThreshold:null!==(n=e.durationThreshold)&&void 0!==n?n:40});r=l(t,i,j,e.reportAllChanges),o&&("PerformanceEventTiming"in self&&"interactionId"in PerformanceEventTiming.prototype&&o.observe({type:"first-input",buffered:!0}),p((function(){a(o.takeRecords()),r(!0)})),c((function(){q=0,B.length=0,R.clear(),i=f("INP"),r=l(t,i,j,e.reportAllChanges)})))}))},V=[],_=new Map,z=[],G=new WeakMap,J=-1,K=function(t){t.forEach((function(t){return V.push(t)}))},Q=function(){z=z.slice(-50);var t=new Set(z.concat(B.map((function(t){return G.get(t.entries[0])}))));_.forEach((function(e,n){t.has(n)||_.delete(n)}));var e=new Set;_.forEach((function(t){tt(t.startTime,t.processingEnd).forEach((function(t){e.add(t)}))})),V=Array.from(e),J=-1};N.push((function(t){for(var e,n=t.startTime+t.duration,r=z.length-1;r>=0;r--)if(e=z[r],Math.abs(n-e)<=8){var i=_.get(e);i.startTime=Math.min(t.startTime,i.startTime),i.processingStart=Math.min(t.processingStart,i.processingStart),i.processingEnd=Math.max(t.processingEnd,i.processingEnd),i.entries.push(t),n=e;break}n!==e&&(z.push(n),_.set(n,{startTime:t.startTime,processingStart:t.processingStart,processingEnd:t.processingEnd,entries:[t]})),(t.interactionId||"first-input"===t.entryType)&&G.set(t,n),J<0&&(J=W(Q))}));var X,Y,Z,$,tt=function(t,e){for(var n,r=[],i=0;n=V[i];i++)if(!(n.startTime+n.duration<t)){if(n.startTime>e)break;r.push(n)}return r},et=function(t,n){e||(e=d("long-animation-frame",K)),U((function(e){W((function(){!function(t){var e=t.entries[0],n=G.get(e),i=_.get(n),o=e.processingStart,u=i.processingEnd,c=i.entries.sort((function(t,e){return t.processingStart-e.processingStart})),s=tt(e.startTime,u),f=t.entries.find((function(t){return t.target})),d=[e.startTime+e.duration,u].concat(s.map((function(t){return t.startTime+t.duration}))),l=Math.max.apply(Math,d);t.attribution={interactionTarget:a(f&&f.target),interactionType:e.name.startsWith("key")?"keyboard":"pointer",interactionTime:e.startTime,nextPaintTime:l,processedEventEntries:c,longAnimationFrameEntries:s,inputDelay:o-e.startTime,processingDuration:u-o,presentationDelay:Math.max(l-u,0),loadState:r(e.startTime)}}(e),t(e)}))}),n)},nt=[2500,4e3],rt={},it=function(t,e){!function(t,e){e=e||{},b((function(){var n,r=S(),i=f("LCP"),a=function(t){var e=t[t.length-1];e&&e.startTime<r.firstHiddenTime&&(i.value=Math.max(e.startTime-s(),0),i.entries=[e],n())},o=d("largest-contentful-paint",a);if(o){n=l(t,i,nt,e.reportAllChanges);var u=v((function(){rt[i.id]||(a(o.takeRecords()),o.disconnect(),rt[i.id]=!0,n(!0))}));["keydown","click"].forEach((function(t){addEventListener(t,(function(){return W(u)}),!0)})),p(u),c((function(r){i=f("LCP"),n=l(t,i,nt,e.reportAllChanges),m((function(){i.value=performance.now()-r.timeStamp,rt[i.id]=!0,n(!0)}))}))}}))}((function(e){!function(t){if(t.entries.length){var e=n();if(e){var r=e.responseStart;if(D(r))return;var i=e.activationStart||0,o=t.entries[t.entries.length-1],u=o.url&&performance.getEntriesByType("resource").filter((function(t){return t.name===o.url}))[0],c=Math.max(0,r-i),s=Math.max(c,u?(u.requestStart||u.startTime)-i:0),f=Math.max(s,u?u.responseEnd-i:0),d=Math.max(f,o.startTime-i),l={element:a(o.element),timeToFirstByte:c,resourceLoadDelay:s-c,resourceLoadDuration:f-s,elementRenderDelay:d-f,navigationEntry:e,lcpEntry:o};return o.url&&(l.url=o.url),u&&(l.lcpResourceEntry=u),void(t.attribution=l)}}t.attribution={timeToFirstByte:0,resourceLoadDelay:0,resourceLoadDuration:0,elementRenderDelay:t.value}}(e),t(e)}),e)},at=[800,1800],ot=function t(e){document.prerendering?b((function(){return t(e)})):"complete"!==document.readyState?addEventListener("load",(function(){return t(e)}),!0):setTimeout(e,0)},ut=function(t,e){e=e||{};var r=f("TTFB"),i=l(t,r,at,e.reportAllChanges);ot((function(){var a=n();if(a){var o=a.responseStart;if(D(o))return;r.value=Math.max(o-s(),0),r.entries=[a],i(!0),c((function(){r=f("TTFB",0),(i=l(t,r,at,e.reportAllChanges))(!0)}))}}))},ct=function(t,e){ut((function(e){!function(t){if(t.entries.length){var e=t.entries[0],n=e.activationStart||0,r=Math.max((e.workerStart||e.fetchStart)-n,0),i=Math.max(e.domainLookupStart-n,0),a=Math.max(e.connectStart-n,0),o=Math.max(e.connectEnd-n,0);t.attribution={waitingDuration:r,cacheDuration:i-r,dnsDuration:a-i,connectionDuration:o-a,requestDuration:t.value-o,navigationEntry:e}}else t.attribution={waitingDuration:0,cacheDuration:0,dnsDuration:0,connectionDuration:0,requestDuration:0}}(e),t(e)}),e)},st={passive:!0,capture:!0},ft=new Date,dt=function(t,e){X||(X=e,Y=t,Z=new Date,pt(removeEventListener),lt())},lt=function(){if(Y>=0&&Y<Z-ft){var t={entryType:"first-input",name:X.type,target:X.target,cancelable:X.cancelable,startTime:X.timeStamp,processingStart:X.timeStamp+Y};$.forEach((function(e){e(t)})),$=[]}},mt=function(t){if(t.cancelable){var e=(t.timeStamp>1e12?new Date:performance.now())-t.timeStamp;"pointerdown"==t.type?function(t,e){var n=function(){dt(t,e),i()},r=function(){i()},i=function(){removeEventListener("pointerup",n,st),removeEventListener("pointercancel",r,st)};addEventListener("pointerup",n,st),addEventListener("pointercancel",r,st)}(e,t):dt(e,t)}},pt=function(t){["mousedown","keydown","touchstart","pointerdown"].forEach((function(e){return t(e,mt,st)}))},vt=[100,300],ht=function(t,e){e=e||{},b((function(){var n,r=S(),i=f("FID"),a=function(t){t.startTime<r.firstHiddenTime&&(i.value=t.processingStart-t.startTime,i.entries.push(t),n(!0))},o=function(t){t.forEach(a)},u=d("first-input",o);n=l(t,i,vt,e.reportAllChanges),u&&(p(v((function(){o(u.takeRecords()),u.disconnect()}))),c((function(){var r;i=f("FID"),n=l(t,i,vt,e.reportAllChanges),$=[],Y=-1,X=null,pt(addEventListener),r=a,$.push(r),lt()})))}))},gt=function(t,e){ht((function(e){!function(t){var e=t.entries[0];t.attribution={eventTarget:a(e.target),eventType:e.name,eventTime:e.startTime,eventEntry:e,loadState:r(e.startTime)}}(e),t(e)}),e)};export{M as CLSThresholds,L as FCPThresholds,vt as FIDThresholds,j as INPThresholds,nt as LCPThresholds,at as TTFBThresholds,w as onCLS,x as onFCP,gt as onFID,et as onINP,it as onLCP,ct as onTTFB};

package.json

 {
   "name": "web-vitals",
-  "version": "4.0.0-beta.2",
+  "version": "4.0.0-beta.3",
   "description": "Easily measure performance metrics in JavaScript",
@@ -167,3 +167,4 @@ "type": "module",
     "typescript": "^5.3.3",
-    "wdio-chromedriver-service": "^8.1.1"
+    "wdio-chromedriver-service": "^8.1.1",
+    "yargs": "^17.7.2"
   },
@@ -170,0 +171,0 @@ "lint-staged": {

README.md

@@ -1025,12 +1025,20 @@ # `web-vitals`
 ```ts
-interface TTFBAttribution {
+export interface TTFBAttribution {
   /**
    * The total time from when the user initiates loading the page to when the
-   * DNS lookup begins. This includes redirects, service worker startup, and
-   * HTTP cache lookup times.
+   * page starts to handle the request. Large values here are typically due
+   * to HTTP redirects, though other browser processing contributes to this
+   * duration as well (so even without redirect it's generally not zero).
    */
   waitingDuration: number;
   /**
-   * The total time to resolve the DNS for the current request.
+   * The total time spent checking the HTTP cache for a match. For navigations
+   * handled via service worker, this duration usually includes service worker
+   * start-up time as well as time processing `fetch` event listeners, with
+   * some exceptions, see: https://github.com/w3c/navigation-timing/issues/199
    */
+  cacheDuration: number;
+  /**
+   * The total time to resolve the DNS for the requested domain.
+   */
   dnsDuration: number;
@@ -1049,4 +1057,4 @@ /**
    * The `navigation` entry of the current page, which is useful for diagnosing
-   * general page load issues. This can be used to access `serverTiming` for example:
-   * navigationEntry?.serverTiming
+   * general page load issues. This can be used to access `serverTiming` for
+   * example: navigationEntry?.serverTiming
    */
@@ -1053,0 +1061,0 @@ navigationEntry?: PerformanceNavigationTiming;

src/attribution/onTTFB.ts

@@ -31,2 +31,10 @@ /*
 
+    // Measure from workerStart or fetchStart so any service worker startup
+    // time is included in cacheDuration (which also includes other sw time
+    // anyway, that cannot be accurately split out cross-browser).
+    const waitEnd = Math.max(
+      (navigationEntry.workerStart || navigationEntry.fetchStart) -
+        activationStart,
+      0,
+    );
     const dnsStart = Math.max(
@@ -40,4 +48,4 @@ navigationEntry.domainLookupStart - activationStart,
     );
-    const requestStart = Math.max(
-      navigationEntry.requestStart - activationStart,
+    const connectEnd = Math.max(
+      navigationEntry.connectEnd - activationStart,
       0,
@@ -47,6 +55,13 @@ );
     (metric as TTFBMetricWithAttribution).attribution = {
-      waitingDuration: dnsStart,
+      waitingDuration: waitEnd,
+      cacheDuration: dnsStart - waitEnd,
+      // dnsEnd usually equals connectStart but use connectStart over dnsEnd
+      // for dnsDuration in case there ever is a gap.
       dnsDuration: connectStart - dnsStart,
-      connectionDuration: requestStart - connectStart,
-      requestDuration: metric.value - requestStart,
+      connectionDuration: connectEnd - connectStart,
+      // There is often a gap between connectEnd and requestStart. Attribute
+      // that to requestDuration so connectionDuration remains 0 for
+      // service worker controlled requests were connectStart and connectEnd
+      // are the same.
+      requestDuration: metric.value - connectEnd,
       navigationEntry: navigationEntry,
@@ -59,2 +74,3 @@ };
     waitingDuration: 0,
+    cacheDuration: 0,
     dnsDuration: 0,
@@ -61,0 +77,0 @@ connectionDuration: 0,

src/types/ttfb.ts

@@ -31,2 +31,6 @@ /*
  * to help identify issues happening to real-users in the field.
+ *
+ * NOTE: these values are primarily useful for page loads not handled via
+ * service worker, as browsers differ in what they report when service worker
+ * is involved, see: https://github.com/w3c/navigation-timing/issues/199
  */
@@ -36,9 +40,17 @@ export interface TTFBAttribution {
    * The total time from when the user initiates loading the page to when the
-   * DNS lookup begins. This includes redirects, service worker startup, and
-   * HTTP cache lookup times.
+   * page starts to handle the request. Large values here are typically due
+   * to HTTP redirects, though other browser processing contributes to this
+   * duration as well (so even without redirect it's generally not zero).
    */
   waitingDuration: number;
   /**
-   * The total time to resolve the DNS for the current request.
+   * The total time spent checking the HTTP cache for a match. For navigations
+   * handled via service worker, this duration usually includes service worker
+   * start-up time as well as time processing `fetch` event listeners, with
+   * some exceptions, see: https://github.com/w3c/navigation-timing/issues/199
    */
+  cacheDuration: number;
+  /**
+   * The total time to resolve the DNS for the requested domain.
+   */
   dnsDuration: number;
@@ -57,4 +69,4 @@ /**
    * The `navigation` entry of the current page, which is useful for diagnosing
-   * general page load issues. This can be used to access `serverTiming` for example:
-   * navigationEntry?.serverTiming
+   * general page load issues. This can be used to access `serverTiming` for
+   * example: navigationEntry?.serverTiming
    */
@@ -61,0 +73,0 @@ navigationEntry?: PerformanceNavigationTiming;

No alert changes

Improved metrics

Total package byte prevSize

384621

increased by0.99%

Lines of code

6598

increased by0.81%

Number of lines in readme file

1129

increased by0.71%

Worsened metrics

Dev dependency count

26

increased by4%

No dependency changes