web-vitals/dist/web-vitals.attribution.js

Easily measure performance metrics in JavaScript

class t{t;o=0;i=[];u(t){if(t.hadRecentInput)return;const e=this.i[0],n=this.i.at(-1);this.o&&e&&n&&t.startTime-n.startTime<1e3&&t.startTime-e.startTime<5e3?(this.o+=t.value,this.i.push(t)):(this.o=t.value,this.i=[t]),this.t?.(t)}}const e=()=>{const t=performance.getEntriesByType("navigation")[0];if(t&&t.responseStart>0&&t.responseStart<performance.now())return t},n=t=>{if("loading"===document.readyState)return"loading";const n=e();if(n){if(t<n.domInteractive)return"loading";if(0===n.domContentLoadedEventStart||t<n.domContentLoadedEventStart)return"dom-interactive";if(0===n.domComplete||t<n.domComplete)return"dom-content-loaded"}return"complete"},o=t=>{const e=t.nodeName;return 1===t.nodeType?e.toLowerCase():e.toUpperCase().replace(/^#/,"")},i=t=>{let e="";try{for(;9!==t?.nodeType;){const n=t,i=n.id?"#"+n.id:[o(n),...Array.from(n.classList).sort()].join(".");if(e.length+i.length>99)return e||i;if(e=e?i+">"+e:i,n.id)break;t=n.parentNode}}catch{}return e},r=new WeakMap;function s(t,e){return r.get(t)||r.set(t,new e),r.get(t)}let a=-1;const c=()=>a,u=t=>{addEventListener("pageshow",e=>{e.persisted&&(a=e.timeStamp,t(e))},!0)},f=(t,e,n,o)=>{let i,r;return s=>{e.value>=0&&(s||o)&&(r=e.value-(i??0),(r||void 0===i)&&(i=e.value,e.delta=r,e.rating=((t,e)=>t>e[1]?"poor":t>e[0]?"needs-improvement":"good")(e.value,n),t(e)))}},d=t=>{requestAnimationFrame(()=>requestAnimationFrame(t))},l=()=>e()?.activationStart??0,h=(t,n=-1)=>{const o=e();let i="navigate";c()>=0?i="back-forward-cache":o&&(document.prerendering||l()>0?i="prerender":document.wasDiscarded?i="restore":o.type&&(i=o.type.replace(/_/g,"-")));return{name:t,value:n,rating:"good",delta:0,entries:[],id:`v5-${Date.now()}-${Math.floor(8999999999999*Math.random())+1e12}`,navigationType:i}},m=(t,e,n={})=>{try{if(PerformanceObserver.supportedEntryTypes.includes(t)){const o=new PerformanceObserver(t=>{queueMicrotask(()=>{e(t.getEntries())})});return o.observe({type:t,buffered:!0,...n}),o}}catch{}},g=t=>{let e=!1;return()=>{e||(t(),e=!0)}};let p=-1;const y=new Set,v=()=>"hidden"!==document.visibilityState||document.prerendering?1/0:0,b=t=>{if("hidden"===document.visibilityState){if("visibilitychange"===t.type)for(const t of y)t();isFinite(p)||(p="visibilitychange"===t.type?t.timeStamp:0,removeEventListener("prerenderingchange",b,!0))}},M=()=>{if(p<0){const t=l(),e=document.prerendering?void 0:globalThis.performance.getEntriesByType("visibility-state").find(e=>"hidden"===e.name&&e.startTime>=t)?.startTime;p=e??v(),addEventListener("visibilitychange",b,!0),addEventListener("prerenderingchange",b,!0),u(()=>{setTimeout(()=>{p=v()})})}return{get firstHiddenTime(){return p},onHidden(t){y.add(t)}}},T=t=>{document.prerendering?addEventListener("prerenderingchange",t,!0):t()},E=[1800,3e3],D=(t,e={})=>{T(()=>{const n=M();let o,i=h("FCP");const r=m("paint",t=>{for(const e of t)"first-contentful-paint"===e.name&&(r.disconnect(),e.startTime<n.firstHiddenTime&&(i.value=Math.max(e.startTime-l(),0),i.entries.push(e),o(!0)))});r&&(o=f(t,i,E,e.reportAllChanges),u(n=>{i=h("FCP"),o=f(t,i,E,e.reportAllChanges),d(()=>{i.value=performance.now()-n.timeStamp,o(!0)})}))})},L=[.1,.25],S=t=>t.find(t=>1===t.node?.nodeType)||t[0],P=(e,o={})=>{const r=s(o=Object.assign({},o),t),a=new WeakMap;r.t=t=>{if(t?.sources?.length){const e=S(t.sources),n=e?.node;if(n){const t=o.generateTarget?.(n)??i(n);a.set(e,t)}}};((e,n={})=>{const o=M();D(g(()=>{let i,r=h("CLS",0);const a=s(n,t),c=t=>{for(const e of t)a.u(e);a.o>r.value&&(r.value=a.o,r.entries=a.i,i())},l=m("layout-shift",c);l&&(i=f(e,r,L,n.reportAllChanges),o.onHidden(()=>{c(l.takeRecords()),i(!0)}),u(()=>{a.o=0,r=h("CLS",0),i=f(e,r,L,n.reportAllChanges),d(i)}),setTimeout(i))}))})(t=>{e((t=>{let e={};if(t.entries.length){const o=t.entries.reduce((t,e)=>t.value>e.value?t:e);if(o?.sources?.length){const t=S(o.sources);t&&(e={largestShiftTarget:a.get(t),largestShiftTime:o.startTime,largestShiftValue:o.value,largestShiftSource:t,largestShiftEntry:o,loadState:n(o.startTime)})}}return Object.assign(t,{attribution:e})})(t))},o)},w=(t,o={})=>{D(o=>{t((t=>{let o={timeToFirstByte:0,firstByteToFCP:t.value,loadState:n(c())};if(t.entries.length){const i=e(),r=t.entries.at(-1);if(i){const e=i.activationStart||0,s=Math.max(0,i.responseStart-e);o={timeToFirstByte:s,firstByteToFCP:t.value-s,loadState:n(t.entries[0].startTime),navigationEntry:i,fcpEntry:r}}}return Object.assign(t,{attribution:o})})(o))},o)};let _=0,k=1/0,F=0;const B=t=>{for(const e of t)e.interactionId&&(k=Math.min(k,e.interactionId),F=Math.max(F,e.interactionId),_=F?(F-k)/7+1:0)};let C;const O=()=>C?_:performance.interactionCount??0,j=()=>{"interactionCount"in performance||C||(C=m("event",B,{durationThreshold:0}))};let I=0;class A{l=[];h=new Map;m;p;v(){I=O(),this.l.length=0,this.h.clear()}M(){const t=Math.min(this.l.length-1,Math.floor((O()-I)/50));return this.l[t]}u(t){if(this.m?.(t),!t.interactionId&&"first-input"!==t.entryType)return;const e=this.l.at(-1);let n=this.h.get(t.interactionId);if(n||this.l.length<10||t.duration>e.T){if(n?t.duration>n.T?(n.entries=[t],n.T=t.duration):t.duration===n.T&&t.startTime===n.entries[0].startTime&&n.entries.push(t):(n={id:t.interactionId,entries:[t],T:t.duration},this.h.set(n.id,n),this.l.push(n)),this.l.sort((t,e)=>e.T-t.T),this.l.length>10){const t=this.l.splice(10);for(const e of t)this.h.delete(e.id)}this.p?.(n)}}}const q=t=>{const e=globalThis.requestIdleCallback||setTimeout,n=globalThis.cancelIdleCallback||clearTimeout;if("hidden"===document.visibilityState)t();else{const o=g(t);let i=-1;const r=()=>{n(i),o()};addEventListener("visibilitychange",r,{once:!0,capture:!0}),i=e(()=>{removeEventListener("visibilitychange",r,{capture:!0}),o()})}},W=[200,500],x=(t,e={})=>{const o=s(e=Object.assign({},e),A);let r=[],a=[],c=0;const d=new WeakMap,l=new WeakMap;let g=!1;const p=()=>{g||(q(y),g=!0)},y=()=>{const t=new Set(o.l.map(t=>d.get(t.entries[0]))),e=a.length-10;a=a.filter((n,o)=>o>=e||t.has(n));const n=new Set;for(const t of a){const e=v(t.startTime,t.processingEnd);for(const t of e)n.add(t)}r=r.filter(t=>t.startTime>c||n.has(t)),g=!1};o.m=t=>{const n=t.startTime+t.duration;let o;c=Math.max(c,t.processingEnd);for(let i=a.length-1;i>=0;i--){const r=a[i];if(Math.abs(n-r.renderTime)<=8){o=r,o.startTime=Math.min(t.startTime,o.startTime),o.processingStart=Math.min(t.processingStart,o.processingStart),o.processingEnd=Math.max(t.processingEnd,o.processingEnd),!1!==e.includeProcessedEventEntries&&o.entries.push(t);break}}o||(o={startTime:t.startTime,processingStart:t.processingStart,processingEnd:t.processingEnd,renderTime:n,entries:!1!==e.includeProcessedEventEntries?[t]:[]},a.push(o)),(t.interactionId||"first-input"===t.entryType)&&d.set(t,o),p()},o.p=t=>{if(!l.get(t)){const n=t.entries[0].target;if(n){const o=e.generateTarget?.(n)??i(n);l.set(t,o)}}};const v=(t,e)=>{const n=[];for(const o of r)if(!(o.startTime+o.duration<t)){if(o.startTime>e)break;n.push(o)}return n},b=t=>{const e=t.entries[0],i=d.get(e),r=e.processingStart,s=Math.max(e.startTime+e.duration,r),a=Math.min(i.processingEnd,s),c=i.entries.sort((t,e)=>t.processingStart-e.processingStart),u=v(e.startTime,a),f=o.h.get(e.interactionId),h={interactionTarget:l.get(f),interactionType:e.name.startsWith("key")?"keyboard":"pointer",interactionTime:e.startTime,nextPaintTime:s,processedEventEntries:c,longAnimationFrameEntries:u,inputDelay:r-e.startTime,processingDuration:a-r,presentationDelay:s-a,loadState:n(e.startTime),longestScript:void 0,totalScriptDuration:void 0,totalStyleAndLayoutDuration:void 0,totalPaintDuration:void 0,totalUnattributedDuration:void 0};return(t=>{if(!t.longAnimationFrameEntries?.length)return;const e=t.interactionTime,n=t.inputDelay,o=t.processingDuration;let i,r,s=0,a=0,c=0,u=0;for(const c of t.longAnimationFrameEntries){a=a+c.startTime+c.duration-c.styleAndLayoutStart;for(const t of c.scripts){const c=t.startTime+t.duration;if(c<e)continue;const f=c-Math.max(e,t.startTime),d=t.duration?f/t.duration*t.forcedStyleAndLayoutDuration:0;s+=f-d,a+=d,f>u&&(r=t.startTime<e+n?"input-delay":t.startTime>=e+n+o?"presentation-delay":"processing-duration",i=t,u=f)}}const f=t.longAnimationFrameEntries.at(-1),d=f?f.startTime+f.duration:0;d>=e+n+o&&(c=t.nextPaintTime-d),i&&r&&(t.longestScript={entry:i,subpart:r,intersectingDuration:u}),t.totalScriptDuration=s,t.totalStyleAndLayoutDuration=a,t.totalPaintDuration=c,t.totalUnattributedDuration=t.nextPaintTime-e-s-a-c})(h),Object.assign(t,{attribution:h})};m("long-animation-frame",t=>{r=r.concat(t),p()}),((t,e={})=>{if(!globalThis.PerformanceEventTiming||!("interactionId"in PerformanceEventTiming.prototype))return;const n=M();T(()=>{j();let o,i=h("INP");const r=s(e,A),a=t=>{q(()=>{for(const e of t)r.u(e);const e=r.M();e&&e.T!==i.value&&(i.value=e.T,i.entries=e.entries,o())})},c=m("event",a,{durationThreshold:e.durationThreshold??40});o=f(t,i,W,e.reportAllChanges),c&&(c.observe({type:"first-input",buffered:!0}),n.onHidden(()=>{a(c.takeRecords()),o(!0)}),u(()=>{r.v(),i=h("INP"),o=f(t,i,W,e.reportAllChanges)}))})})(e=>{t(b(e))},e)};class N{m;u(t){this.m?.(t)}}const $=[2500,4e3],H=(t,n={})=>{const o=s(n=Object.assign({},n),N),r=new WeakMap;o.m=t=>{const e=t.element;if(e){const o=n.generateTarget?.(e)??i(e);r.set(t,o)}else t.id&&r.set(t,`#${t.id}`)};((t,e={})=>{T(()=>{const n=M();let o,i=h("LCP");const r=s(e,N),a=t=>{e.reportAllChanges||(t=t.slice(-1));for(const e of t)r.u(e),e.startTime<n.firstHiddenTime&&(i.value=Math.max(e.startTime-l(),0),i.entries=[e],o())},c=m("largest-contentful-paint",a);if(c){o=f(t,i,$,e.reportAllChanges);const n=g(()=>{a(c.takeRecords()),c.disconnect(),o(!0)}),r=t=>{t.isTrusted&&(q(n),removeEventListener(t.type,r,{capture:!0}))};for(const t of["keydown","click","visibilitychange"])addEventListener(t,r,{capture:!0});u(n=>{i=h("LCP"),o=f(t,i,$,e.reportAllChanges),d(()=>{i.value=performance.now()-n.timeStamp,o(!0)})})}})})(n=>{t((t=>{let n={timeToFirstByte:0,resourceLoadDelay:0,resourceLoadDuration:0,elementRenderDelay:t.value};if(t.entries.length){const o=t.entries.at(-1),i=o.url&&performance.getEntriesByType("resource").find(t=>t.name===o.url);n.target=r.get(o),n.lcpEntry=o,o.url&&(n.url=o.url),i&&(n.lcpResourceEntry=i);const s=e();if(s){const e=s.activationStart||0,o=Math.max(0,s.responseStart-e),r=Math.max(o,i?(i.requestStart||i.startTime)-e:0),a=Math.min(t.value,Math.max(r,i?i.responseEnd-e:0));n={...n,timeToFirstByte:o,resourceLoadDelay:r-o,resourceLoadDuration:a-r,elementRenderDelay:t.value-a,navigationEntry:s}}}return Object.assign(t,{attribution:n})})(n))},n)},R=[800,1800],U=t=>{document.prerendering?T(()=>U(t)):"complete"!==document.readyState?addEventListener("load",()=>U(t),!0):setTimeout(t)},V=(t,n={})=>{((t,n={})=>{let o=h("TTFB"),i=f(t,o,R,n.reportAllChanges);U(()=>{const r=e();r&&(o.value=Math.max(r.responseStart-l(),0),o.entries=[r],i(!0),u(()=>{o=h("TTFB",0),i=f(t,o,R,n.reportAllChanges),i(!0)}))})})(e=>{t((t=>{let e={waitingDuration:0,cacheDuration:0,dnsDuration:0,connectionDuration:0,requestDuration:0};if(t.entries.length){const n=t.entries[0],o=n.activationStart||0,i=Math.max((n.workerStart||n.fetchStart)-o,0),r=Math.max(n.domainLookupStart-o,0),s=Math.max(n.connectStart-o,0),a=Math.max(n.connectEnd-o,0);e={waitingDuration:i,cacheDuration:r-i,dnsDuration:s-r,connectionDuration:a-s,requestDuration:t.value-a,navigationEntry:n}}return Object.assign(t,{attribution:e})})(e))},n)};export{L as CLSThresholds,E as FCPThresholds,W as INPThresholds,$ as LCPThresholds,R as TTFBThresholds,P as onCLS,w as onFCP,x as onINP,H as onLCP,V as onTTFB};