kanmi-perf
Version:
In-browser JavaScript tool for real-time Core Web Vitals insights
3 lines (2 loc) • 3.67 kB
JavaScript
var KanmiPerf=function(){"use strict";return(()=>{const e={log:(e,n)=>{console.groupCollapsed(`[KanmiPerf 🚀] ⚠️ ${e}`),n.forEach((e=>console.log(`- ${e}`))),console.groupEnd()},domAnalysis:()=>{const n=[...document.querySelectorAll("img:not([width]), img:not([height])")];n.length&&e.log("DOM Issues",[`${n.length} image${n.length>1?"s":""} missing dimensions (causes CLS)`])},headAnalysis:()=>{const n=[...document.head.querySelectorAll("script[src]")].filter((e=>!e.defer&&!e.async));n.length&&e.log("<head> Issues",[`${n.length} blocking script${n.length>1?"s":""} without async/defer`,...n.map((e=>`Suggest moving ${e.src} lower or load it with async/defer`))])},thirdPartyAnalysis:()=>{const n=location.hostname,r=[...document.scripts].filter((e=>e.src&&!e.src.includes(n))).filter((e=>!e.defer&&!e.async));r.length&&e.log("Third-party Issues",r.map((e=>`${new URL(e.src).hostname} synchronously loaded, delays rendering → Suggest loading async/defer or using Partytown`)))},monitorLongTasks:()=>{if(!("PerformanceObserver"in window))return;new PerformanceObserver((n=>{n.getEntries().forEach((n=>{n.duration>125&&e.log("Long Task",[`Duration: ${Math.round(n.duration)}ms`,"→ Consider breaking into smaller tasks or deferring heavy JS"])}))})).observe({type:"longtask",buffered:!0})},monitorLoAF:()=>{if(!PerformanceObserver.supportedEntryTypes.includes("long-animation-frame"))return;new PerformanceObserver((n=>{n.getEntries().forEach((n=>{const{duration:r,blockingDuration:t,renderTime:o,styleAndLayoutDuration:s}=n,i=e=>Number.isFinite(e)?Math.round(e):"N/A";let a=[`Duration: ${i(r)}ms, Blocking: ${i(t)}ms`,`Render: ${i(o)}ms, Layout: ${i(s)}ms`];void 0!==o&&void 0!==s||a.push("Note: Browser does not support detailed render/layout metrics for LoAF entries."),a.push("→ Investigate heavy scripts or CSS causing recalculations"),e.log("LoAF Detected",a)}))})).observe({type:"long-animation-frame",buffered:!0})},monitorINP:()=>{if(!PerformanceObserver.supportedEntryTypes.includes("event"))return;new PerformanceObserver((n=>{n.getEntries().forEach((n=>{n.duration>300&&e.log("INP Interaction Issue",[`${n.name} delayed interaction response by ${Math.round(n.duration)}ms`,"→ Consider simplifying event handlers or deferring tasks"])}))})).observe({type:"event",durationThreshold:300,buffered:!0})},monitorLCP:()=>{if(!PerformanceObserver.supportedEntryTypes.includes("largest-contentful-paint"))return;let n;new PerformanceObserver((e=>{e.getEntries().forEach((e=>n=e))})).observe({type:"largest-contentful-paint",buffered:!0}),document.addEventListener("visibilitychange",(()=>{"hidden"===document.visibilityState&&n&&e.log("LCP",[`Largest Contentful Paint: ${n.renderTime?Math.round(n.renderTime):Math.round(n.loadTime)}ms`,`Element: ${n.element?n.element.tagName:"N/A"}`,"→ Optimize images, text, and video content for faster loading"])}))},monitorCLS:()=>{if(!PerformanceObserver.supportedEntryTypes.includes("layout-shift"))return;let n=0;new PerformanceObserver((e=>{e.getEntries().forEach((e=>{e.hadRecentInput||(n+=e.value)}))})).observe({type:"layout-shift",buffered:!0}),document.addEventListener("visibilitychange",(()=>{"hidden"===document.visibilityState&&e.log("CLS",[`Cumulative Layout Shift: ${n.toFixed(2)}`,"→ Add size attributes to images and videos, reserve space for ads/embeds, and avoid dynamic content injection"])}))},run:()=>{e.domAnalysis(),e.headAnalysis(),e.thirdPartyAnalysis(),e.monitorLongTasks(),e.monitorLoAF(),e.monitorINP(),e.monitorLCP(),e.monitorCLS()},init:()=>{"complete"===document.readyState?e.run():window.addEventListener("load",e.run)}};return e})()}();
//# sourceMappingURL=kanmi-perf.js.map