UNPKG

web-vitals

Version:

Easily measure performance metrics in JavaScript

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