UNPKG

web-vitals

Version:

Easily measure performance metrics in JavaScript

3 lines (2 loc) 9.16 kB
!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports):"function"==typeof define&&define.amd?define(["exports"],n):n((t="undefined"!=typeof globalThis?globalThis:t||self).webVitals={})}(this,function(t){"use strict";let n=-1;const e=()=>n,i=t=>{addEventListener("pageshow",e=>{e.persisted&&(n=e.timeStamp,t(e))},!0)},o=(t,n,e,i)=>{let o,s;return a=>{n.value>=0&&(a||i)&&(s=n.value-(o??0),(s||void 0===o)&&(o=n.value,n.delta=s,n.rating=((t,n)=>t>n[1]?"poor":t>n[0]?"needs-improvement":"good")(n.value,e),t(n)))}},s=t=>{requestAnimationFrame(()=>requestAnimationFrame(t))},a=()=>{const t=performance.getEntriesByType("navigation")[0];if(t&&t.responseStart>0&&t.responseStart<performance.now())return t},r=()=>a()?.activationStart??0;let c=-1;const f=new Set,d=()=>"hidden"!==document.visibilityState||document.prerendering?1/0:0,l=t=>{if("hidden"===document.visibilityState){if("visibilitychange"===t.type)for(const t of f)t();isFinite(c)||(c="visibilitychange"===t.type?t.timeStamp:0,removeEventListener("prerenderingchange",l,!0))}},h=(t=!1)=>{if(t&&(c=1/0),c<0){const t=r(),n=document.prerendering?void 0:globalThis.performance.getEntriesByType("visibility-state").find(n=>"hidden"===n.name&&n.startTime>=t)?.startTime;c=n??d(),addEventListener("visibilitychange",l,!0),addEventListener("prerenderingchange",l,!0),i(()=>{setTimeout(()=>{c=d()})})}return{get firstHiddenTime(){return c},onHidden(t){f.add(t)}}},u=(t,n=-1,i,o=0,s,c,f)=>{const d=a(),l=d?.navigationId||0;let h="navigate";i?h=i:e()>=0?h="back-forward-cache":d&&(document.prerendering||r()>0?h="prerender":document.wasDiscarded?h="restore":d.type&&(h=d.type.replace(/_/g,"-")));return{name:t,value:n,rating:"good",delta:0,entries:[],id:`v6-${Date.now()}-${Math.floor(8999999999999*Math.random())+1e12}`,navigationType:h,navigationId:o||l,navigationInteractionId:s,navigationURL:c||d?.name,navigationStartTime:f||0}},g=new WeakMap;function v(t,n){let e=g.get(n);return e||(e=new WeakMap,g.set(n,e)),e.get(t)||e.set(t,new n),e.get(t)}class p{t;i=0;o=[];l(t){if(t.hadRecentInput)return;const n=this.o[0],e=this.o.at(-1);this.i&&n&&e&&t.startTime-e.startTime<1e3&&t.startTime-n.startTime<5e3?(this.i+=t.value,this.o.push(t)):(this.i=t.value,this.o=[t]),this.t?.(t)}}const m=(t,n,e={})=>{try{const i=t.filter(t=>PerformanceObserver.supportedEntryTypes.includes(t));if(i.length>0){const t=new PerformanceObserver(t=>{queueMicrotask(()=>{const e=t.getEntries();i.length>1&&e.sort((t,n)=>t.startTime+t.duration-(n.startTime+n.duration)),n(e)})});for(const n of i)t.observe({type:n,buffered:!0,...e});return t}}catch{}},b=t=>PerformanceObserver.supportedEntryTypes.includes("soft-navigation")&&"function"==typeof globalThis.PerformanceSoftNavigation?.prototype?.getLargestInteractionContentfulPaint&&t&&t.reportSoftNavs,y=(t,n)=>{if(t.set(n.navigationId,n),t.size>2){const n=t.keys().next().value;void 0!==n&&t.delete(n)}},T=t=>{let n=!1;return()=>{n||(t(),n=!0)}};class E{h}const M=t=>{document.prerendering?addEventListener("prerenderingchange",t,!0):t()},_=[1800,3e3],L=(t,n={})=>{const a=b(n);M(()=>{const c=v(n,E),f=h();let d,l=u("FCP");const g=m(["paint"],t=>{for(const n of t)"first-contentful-paint"===n.name&&(g.disconnect(),n.startTime<f.firstHiddenTime&&(l.value=Math.max(n.startTime-r(),0),l.entries.push(n),l.navigationId=n.navigationId||l.navigationId,d(!0)))});if(g&&(d=o(t,l,_,n.reportAllChanges),i(i=>{l=u("FCP",-1,"back-forward-cache",l.navigationId,l.navigationInteractionId,l.navigationURL,e()),d=o(t,l,_,n.reportAllChanges),s(()=>{l.value=performance.now()-i.timeStamp,d(!0)})})),a){m(["soft-navigation"],e=>{e.forEach(e=>{c.h&&e.navigationId&&y(c.h,e);const i=Math.max((e.presentationTime||e.paintTime||0)-e.startTime,0);l=u("FCP",i,"soft-navigation",e.navigationId,e.interactionId,e.name,e.startTime),d=o(t,l,_,n.reportAllChanges),d(!0)})},n)}})},P=[.1,.25];let w=0,k=1/0,I=0;const C=t=>{for(const n of t)n.interactionId&&(k=Math.min(k,n.interactionId),I=Math.max(I,n.interactionId),w=I?(I-k)/7+1:0)};let F;const B=()=>F?w:performance.interactionCount??0,N=()=>{"interactionCount"in performance||F||(F=m(["event"],C,{durationThreshold:0}))};let S=0;class q{u=[];v=new Map;p;m;T(){S=B(),this.u.length=0,this.v.clear()}M(t){const n=B()-S,e=Math.min(this.u.length-1,Math.floor(n/50));return!n||-1!==e||"soft-navigation"!==t&&"back-forward-cache"!==t?this.u[e]:{_:8,id:-1,entries:[]}}l(t){if(this.p?.(t),!t.interactionId&&"first-input"!==t.entryType)return;const n=this.u.at(-1);let e=this.v.get(t.interactionId);if(e||this.u.length<10||t.duration>n._){if(e?t.duration>e._?(e.entries=[t],e._=t.duration):t.duration===e._&&t.startTime===e.entries[0].startTime&&e.entries.push(t):(e={id:t.interactionId,entries:[t],_:t.duration},this.v.set(e.id,e),this.u.push(e)),this.u.sort((t,n)=>n._-t._),this.u.length>10){const t=this.u.splice(10);for(const n of t)this.v.delete(n.id)}this.m?.(e)}}}const x=t=>{const n="requestIdleCallback"in globalThis?1e3:0,e=globalThis.requestIdleCallback||setTimeout,i=globalThis.cancelIdleCallback||clearTimeout;if("hidden"===document.visibilityState)t();else{const o=T(t);let s=-1;const a=()=>{i(s),o()};addEventListener("visibilitychange",a,{once:!0,capture:!0}),s=e(()=>{removeEventListener("visibilitychange",a,{capture:!0}),o()},{timeout:n})}},A=[200,500];class O{p;h;l(t){this.p?.(t)}}const H=[2500,4e3],U=[800,1800],W=t=>{document.prerendering?M(()=>W(t)):"complete"!==document.readyState?addEventListener("load",()=>W(t),!0):setTimeout(t)};t.CLSThresholds=P,t.FCPThresholds=_,t.INPThresholds=A,t.LCPThresholds=H,t.TTFBThresholds=U,t.onCLS=(t,n={})=>{const a=h();L(T(()=>{let r,c=u("CLS",0);const f=v(n,p),d=(e,i,s,a,d)=>{c=u("CLS",0,e,i,s,a,d),f.i=0,r=o(t,c,P,n.reportAllChanges)},l=(t=!1)=>{f.i>c.value&&(c.value=f.i,c.entries=f.o),r(t)},h=t=>{l(!0),d("soft-navigation",t.navigationId,t.interactionId,t.name,t.startTime)},g=t=>{for(const n of t)"soft-navigation"!==n.entryType?f.l(n):h(n);l()},y=["layout-shift"];b(n)&&y.push("soft-navigation");const T=m(y,g);T&&(r=o(t,c,P,n.reportAllChanges),a.onHidden(()=>{g(T.takeRecords()),r(!0)}),i(()=>{d("back-forward-cache",c.navigationId,c.navigationInteractionId,c.navigationURL,e()),s(r)}),setTimeout(r))}))},t.onFCP=L,t.onINP=(t,n={})=>{if(!globalThis.PerformanceEventTiming||!("interactionId"in PerformanceEventTiming.prototype))return;const s=h();M(()=>{N();let a,r=u("INP");const c=v(n,q),f=(e,i,s,f,d)=>{c.T(),r=u("INP",-1,e,i,s,f,d),a=o(t,r,A,n.reportAllChanges)},d=()=>{const t=c.M(r.navigationType);t&&t._!==r.value&&(r.value=t._,r.entries=t.entries,a())},l=t=>{d(),a(!0),f("soft-navigation",t.navigationId,t.interactionId,t.name,t.startTime)},h=(t,n=!1)=>{x(()=>{for(const n of t)"soft-navigation"!==n.entryType?c.l(n):l(n);d(),n&&a(!0)})},g=["event","first-input"];b(n)&&g.push("soft-navigation");const p=m(g,h,{...n,durationThreshold:n.durationThreshold??40});a=o(t,r,A,n.reportAllChanges),p&&(s.onHidden(()=>{h(p.takeRecords(),!0)}),i(()=>{f("back-forward-cache",r.navigationId,r.navigationInteractionId,r.navigationURL,e())}))})},t.onLCP=(t,n={})=>{let a=!1;const c=b(n);M(()=>{let f,d=h(),l=u("LCP");const g=v(n,O),p=(e,i,s,r,c)=>{l=u("LCP",-1,e,i,s,r,c),f=o(t,l,H,n.reportAllChanges),a=!1,"soft-navigation"===e&&(d=h(!0))},b=t=>{g.h&&t.navigationId&&y(g.h,t),a||f(!0),p("soft-navigation",t.navigationId,t.interactionId,t.name,t.startTime);const n=t.getLargestInteractionContentfulPaint?.();n&&T([n])},T=t=>{n.reportAllChanges||c||(t=t.slice(-1));for(const n of t){if(!n)continue;if("soft-navigation"===n.entryType){b(n);continue}let t=0,e=[],i=n.startTime;if("largest-contentful-paint"===n.entryType)t=Math.max(n.startTime-r(),0),g.l(n),e=[n];else if("interaction-contentful-paint"===n.entryType){const o=n;if(!l.navigationId)continue;if("interactionId"in o&&o.interactionId!=l.navigationInteractionId)continue;i=o.largestContentfulPaint?.renderTime||0,t=Math.max(i-n.startTime,0),o.largestContentfulPaint&&(g.l(o.largestContentfulPaint),e=[o.largestContentfulPaint])}i<d.firstHiddenTime&&(l.value=t,l.entries=e,f())}},E=["largest-contentful-paint"];c&&E.push("interaction-contentful-paint","soft-navigation");const M=m(E,T);if(M){f=o(t,l,H,n.reportAllChanges);const r=["keydown","click","visibilitychange"],d=t=>{if(t.isTrusted&&!a){const t=l.id;x(()=>{if(!a){if(!c){M.disconnect();for(const t of r)removeEventListener(t,d,{capture:!0})}t===l.id&&(a=!0,f(!0))}})}};for(const t of r)addEventListener(t,d,{capture:!0});i(i=>{p("back-forward-cache",l.navigationId,l.navigationInteractionId,l.navigationURL,e()),f=o(t,l,H,n.reportAllChanges),s(()=>{l.value=performance.now()-i.timeStamp,a=!0,f(!0)})})}})},t.onTTFB=(t,n={})=>{const s=b(n);let c=u("TTFB"),f=o(t,c,U,n.reportAllChanges);W(()=>{const d=a();if(d){const a=d.responseStart;if(c.value=Math.max(a-r(),0),c.entries=[d],f(!0),i(()=>{c=u("TTFB",0,"back-forward-cache",c.navigationId,c.navigationInteractionId,c.navigationURL,e()),f=o(t,c,U,n.reportAllChanges),f(!0)}),s){m(["soft-navigation"],e=>{e.forEach(e=>{e.navigationId&&(c=u("TTFB",0,"soft-navigation",e.navigationId,e.interactionId,e.name,e.startTime),c.entries=[e],f=o(t,c,U,n.reportAllChanges),f(!0))})},n)}}})}}); //# sourceMappingURL=web-vitals.umd.cjs.map