UNPKG

web-vitals

Version:

Easily measure performance metrics in JavaScript

3 lines (2 loc) 8.95 kB
let t=-1;const n=()=>t,e=n=>{addEventListener("pageshow",e=>{e.persisted&&(t=e.timeStamp,n(e))},!0)},i=(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)))}},o=t=>{requestAnimationFrame(()=>requestAnimationFrame(t))},s=()=>{const t=performance.getEntriesByType("navigation")[0];if(t&&t.responseStart>0&&t.responseStart<performance.now())return t},a=()=>s()?.activationStart??0;let r=-1;const c=new Set,f=()=>"hidden"!==document.visibilityState||document.prerendering?1/0:0,d=t=>{if("hidden"===document.visibilityState){if("visibilitychange"===t.type)for(const t of c)t();isFinite(r)||(r="visibilitychange"===t.type?t.timeStamp:0,removeEventListener("prerenderingchange",d,!0))}},h=(t=!1)=>{if(t&&(r=1/0),r<0){const t=a(),n=document.prerendering?void 0:globalThis.performance.getEntriesByType("visibility-state").find(n=>"hidden"===n.name&&n.startTime>=t)?.startTime;r=n??f(),addEventListener("visibilitychange",d,!0),addEventListener("prerenderingchange",d,!0),e(()=>{setTimeout(()=>{r=f()})})}return{get firstHiddenTime(){return r},onHidden(t){c.add(t)}}},l=(t,e=-1,i,o=0,r,c,f)=>{const d=s(),h=d?.navigationId||0;let l="navigate";i?l=i:n()>=0?l="back-forward-cache":d&&(document.prerendering||a()>0?l="prerender":document.wasDiscarded?l="restore":d.type&&(l=d.type.replace(/_/g,"-")));return{name:t,value:e,rating:"good",delta:0,entries:[],id:`v6-${Date.now()}-${Math.floor(8999999999999*Math.random())+1e12}`,navigationType:l,navigationId:o||h,navigationInteractionId:r,navigationURL:c||d?.name,navigationStartTime:f||0}},g=new WeakMap;function u(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 v{t;i=0;o=[];h(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{}},p=t=>PerformanceObserver.supportedEntryTypes.includes("soft-navigation")&&"function"==typeof globalThis.PerformanceSoftNavigation?.prototype?.getLargestInteractionContentfulPaint&&t&&t.reportSoftNavs,b=(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 y{l}const E=t=>{document.prerendering?addEventListener("prerenderingchange",t,!0):t()},M=[1800,3e3],_=(t,s={})=>{const r=p(s);E(()=>{const c=u(s,y),f=h();let d,g=l("FCP");const v=m(["paint"],t=>{for(const n of t)"first-contentful-paint"===n.name&&(v.disconnect(),n.startTime<f.firstHiddenTime&&(g.value=Math.max(n.startTime-a(),0),g.entries.push(n),g.navigationId=n.navigationId||g.navigationId,d(!0)))});if(v&&(d=i(t,g,M,s.reportAllChanges),e(e=>{g=l("FCP",-1,"back-forward-cache",g.navigationId,g.navigationInteractionId,g.navigationURL,n()),d=i(t,g,M,s.reportAllChanges),o(()=>{g.value=performance.now()-e.timeStamp,d(!0)})})),r){m(["soft-navigation"],n=>{n.forEach(n=>{c.l&&n.navigationId&&b(c.l,n);const e=Math.max((n.presentationTime||n.paintTime||0)-n.startTime,0);g=l("FCP",e,"soft-navigation",n.navigationId,n.interactionId,n.name,n.startTime),d=i(t,g,M,s.reportAllChanges),d(!0)})},s)}})},L=[.1,.25],P=(t,s={})=>{const a=h();_(T(()=>{let r,c=l("CLS",0);const f=u(s,v),d=(n,e,o,a,d)=>{c=l("CLS",0,n,e,o,a,d),f.i=0,r=i(t,c,L,s.reportAllChanges)},h=(t=!1)=>{f.i>c.value&&(c.value=f.i,c.entries=f.o),r(t)},g=t=>{h(!0),d("soft-navigation",t.navigationId,t.interactionId,t.name,t.startTime)},b=t=>{for(const n of t)"soft-navigation"!==n.entryType?f.h(n):g(n);h()},T=["layout-shift"];p(s)&&T.push("soft-navigation");const y=m(T,b);y&&(r=i(t,c,L,s.reportAllChanges),a.onHidden(()=>{b(y.takeRecords()),r(!0)}),e(()=>{d("back-forward-cache",c.navigationId,c.navigationInteractionId,c.navigationURL,n()),o(r)}),setTimeout(r))}))};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;m;p;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:[]}}h(t){if(this.m?.(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.p?.(e)}}}const A=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})}},O=[200,500],x=(t,o={})=>{if(!globalThis.PerformanceEventTiming||!("interactionId"in PerformanceEventTiming.prototype))return;const s=h();E(()=>{N();let a,r=l("INP");const c=u(o,q),f=(n,e,s,f,d)=>{c.T(),r=l("INP",-1,n,e,s,f,d),a=i(t,r,O,o.reportAllChanges)},d=()=>{const t=c.M(r.navigationType);t&&t._!==r.value&&(r.value=t._,r.entries=t.entries,a())},h=t=>{d(),a(!0),f("soft-navigation",t.navigationId,t.interactionId,t.name,t.startTime)},g=(t,n=!1)=>{A(()=>{for(const n of t)"soft-navigation"!==n.entryType?c.h(n):h(n);d(),n&&a(!0)})},v=["event","first-input"];p(o)&&v.push("soft-navigation");const b=m(v,g,{...o,durationThreshold:o.durationThreshold??40});a=i(t,r,O,o.reportAllChanges),b&&(s.onHidden(()=>{g(b.takeRecords(),!0)}),e(()=>{f("back-forward-cache",r.navigationId,r.navigationInteractionId,r.navigationURL,n())}))})};class H{m;l;h(t){this.m?.(t)}}const U=[2500,4e3],W=(t,s={})=>{let r=!1;const c=p(s);E(()=>{let f,d=h(),g=l("LCP");const v=u(s,H),p=(n,e,o,a,c)=>{g=l("LCP",-1,n,e,o,a,c),f=i(t,g,U,s.reportAllChanges),r=!1,"soft-navigation"===n&&(d=h(!0))},T=t=>{v.l&&t.navigationId&&b(v.l,t),r||f(!0),p("soft-navigation",t.navigationId,t.interactionId,t.name,t.startTime);const n=t.getLargestInteractionContentfulPaint?.();n&&y([n])},y=t=>{s.reportAllChanges||c||(t=t.slice(-1));for(const n of t){if(!n)continue;if("soft-navigation"===n.entryType){T(n);continue}let t=0,e=[],i=n.startTime;if("largest-contentful-paint"===n.entryType)t=Math.max(n.startTime-a(),0),v.h(n),e=[n];else if("interaction-contentful-paint"===n.entryType){const o=n;if(!g.navigationId)continue;if("interactionId"in o&&o.interactionId!=g.navigationInteractionId)continue;i=o.largestContentfulPaint?.renderTime||0,t=Math.max(i-n.startTime,0),o.largestContentfulPaint&&(v.h(o.largestContentfulPaint),e=[o.largestContentfulPaint])}i<d.firstHiddenTime&&(g.value=t,g.entries=e,f())}},E=["largest-contentful-paint"];c&&E.push("interaction-contentful-paint","soft-navigation");const M=m(E,y);if(M){f=i(t,g,U,s.reportAllChanges);const a=["keydown","click","visibilitychange"],d=t=>{if(t.isTrusted&&!r){const t=g.id;A(()=>{if(!r){if(!c){M.disconnect();for(const t of a)removeEventListener(t,d,{capture:!0})}t===g.id&&(r=!0,f(!0))}})}};for(const t of a)addEventListener(t,d,{capture:!0});e(e=>{p("back-forward-cache",g.navigationId,g.navigationInteractionId,g.navigationURL,n()),f=i(t,g,U,s.reportAllChanges),o(()=>{g.value=performance.now()-e.timeStamp,r=!0,f(!0)})})}})},$=[800,1800],D=t=>{document.prerendering?E(()=>D(t)):"complete"!==document.readyState?addEventListener("load",()=>D(t),!0):setTimeout(t)},R=(t,o={})=>{const r=p(o);let c=l("TTFB"),f=i(t,c,$,o.reportAllChanges);D(()=>{const d=s();if(d){const s=d.responseStart;if(c.value=Math.max(s-a(),0),c.entries=[d],f(!0),e(()=>{c=l("TTFB",0,"back-forward-cache",c.navigationId,c.navigationInteractionId,c.navigationURL,n()),f=i(t,c,$,o.reportAllChanges),f(!0)}),r){m(["soft-navigation"],n=>{n.forEach(n=>{n.navigationId&&(c=l("TTFB",0,"soft-navigation",n.navigationId,n.interactionId,n.name,n.startTime),c.entries=[n],f=i(t,c,$,o.reportAllChanges),f(!0))})},o)}}})};export{L as CLSThresholds,M as FCPThresholds,O as INPThresholds,U as LCPThresholds,$ as TTFBThresholds,P as onCLS,_ as onFCP,x as onINP,W as onLCP,R as onTTFB}; //# sourceMappingURL=web-vitals.js.map