webperf-snippets 0.1.0

package/snippets/Interaction/Long-Animation-Frames-Script-Attribution.js

@@ -0,0 +1,137 @@
+// Long Animation Frames - Script Attribution Analysis
+// https://webperf-snippets.nucliweb.net
+
+(() => {
+  // Check browser support
+  if (!PerformanceObserver.supportedEntryTypes?.includes("long-animation-frame")) {
+    console.log("%c⚠️ Long Animation Frames not supported", "color: #f59e0b; font-weight: bold;");
+    console.log("Chrome 116+ required.");
+    return { script: "Long-Animation-Frames-Script-Attribution", status: "unsupported", error: "long-animation-frame not supported. Chrome 116+ required." };
+  }
+
+  // Read buffered LoAF entries immediately
+  const frames = performance.getEntriesByType("long-animation-frame").map((entry) => ({
+    duration: entry.duration,
+    blockingDuration: entry.blockingDuration || 0,
+    scripts: (entry.scripts || []).map((s) => ({
+      sourceURL: s.sourceURL || "unknown",
+      sourceFunctionName: s.sourceFunctionName || "anonymous",
+      invoker: s.invoker || "unknown",
+      duration: s.duration || 0,
+    })),
+  }));
+
+  if (frames.length === 0) {
+    console.log("%c✅ No long frames detected", "color: #22c55e; font-weight: bold;");
+    return { script: "Long-Animation-Frames-Script-Attribution", status: "ok",
+      details: { frameCount: 0, totalBlockingMs: 0, byCategory: {} }, items: [] };
+  }
+
+  const allScripts = frames.flatMap((f) => f.scripts);
+  const totalBlocking = frames.reduce((sum, f) => sum + f.blockingDuration, 0);
+  const totalDuration = frames.reduce((sum, f) => sum + f.duration, 0);
+
+  const categorize = (url) => {
+    const u = url.toLowerCase();
+    const origin = location.origin.toLowerCase();
+    if (u === "" || u === "unknown") return "unknown";
+    if (["react", "vue", "angular", "svelte", "framework", "chunk", "webpack", "vite"].some((fw) => u.includes(fw))) return "framework";
+    if (["google-analytics", "gtag", "gtm", "analytics", "facebook", "twitter", "ads", "cdn", "unpkg", "jsdelivr", "segment", "amplitude"].some((tp) => u.includes(tp))) return "third-party";
+    if (u.startsWith("chrome-extension://") || u.startsWith("moz-extension://")) return "extension";
+    if (u.startsWith("http") && !u.includes(origin.replace(/^https?:\/\//, ""))) return "third-party";
+    return "first-party";
+  };
+
+  const byCategory = {};
+  allScripts.forEach((script) => {
+    const cat = categorize(script.sourceURL);
+    if (!byCategory[cat]) byCategory[cat] = { durationMs: 0, count: 0 };
+    byCategory[cat].durationMs += script.duration;
+    byCategory[cat].count++;
+  });
+
+  const byFile = {};
+  allScripts.forEach((script) => {
+    const file = script.sourceURL.split("/").pop() || "unknown";
+    if (!byFile[file]) byFile[file] = { duration: 0, count: 0, category: categorize(script.sourceURL), functions: [] };
+    byFile[file].duration += script.duration;
+    byFile[file].count++;
+    byFile[file].functions.push({ name: script.sourceFunctionName, invoker: script.invoker, duration: script.duration });
+  });
+
+  const topFiles = Object.entries(byFile).sort((a, b) => b[1].duration - a[1].duration).slice(0, 10);
+  const totalScript = Object.values(byCategory).reduce((sum, cat) => sum + cat.durationMs, 0);
+
+  const categories = [
+    { name: "Your Code", key: "first-party", icon: "🔵", color: "#3b82f6" },
+    { name: "Framework", key: "framework", icon: "🟣", color: "#8b5cf6" },
+    { name: "Third-Party", key: "third-party", icon: "🟠", color: "#f59e0b" },
+    { name: "Extensions", key: "extension", icon: "🟤", color: "#92400e" },
+    { name: "Unknown", key: "unknown", icon: "⚫", color: "#6b7280" },
+  ];
+
+  console.log("%c━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━", "color: #6b7280;");
+  console.log("%c📊 Blocking Time by Category", "font-weight: bold; font-size: 13px;");
+  console.log("");
+
+  categories.forEach(({ name, key, icon, color }) => {
+    const data = byCategory[key];
+    if (data?.durationMs > 0) {
+      const pct = totalScript > 0 ? (data.durationMs / totalScript) * 100 : 0;
+      const barLen = Math.round(pct / 2);
+      const bar = "█".repeat(barLen) + "░".repeat(Math.max(0, 50 - barLen));
+      console.log(
+        `%c${icon} ${name.padEnd(12)} %c${bar} %c${pct.toFixed(1)}% %c(${data.durationMs.toFixed(0)}ms, ${data.count} scripts)`,
+        `color: ${color}; font-weight: bold;`, `color: ${color};`, `color: ${color}; font-weight: bold;`, "color: #6b7280;",
+      );
+    }
+  });
+
+  console.log("");
+  console.log(`%cTotal Script: ${totalScript.toFixed(0)}ms | Blocking: ${totalBlocking.toFixed(0)}ms | Duration: ${totalDuration.toFixed(0)}ms`, "color: #6b7280;");
+  console.log(`%cFrames captured: ${frames.length}`, "color: #6b7280;");
+
+  console.log("");
+  console.log("%c━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━", "color: #6b7280;");
+  console.log("%c🔥 Top 10 Blocking Scripts", "font-weight: bold; font-size: 13px;");
+  console.log("");
+
+  topFiles.forEach(([file, data], idx) => {
+    const pct = totalScript > 0 ? (data.duration / totalScript) * 100 : 0;
+    const icon = categories.find((c) => c.key === data.category)?.icon || "⚫";
+    console.group(
+      `%c${idx + 1}. ${icon} ${file} %c(${data.duration.toFixed(0)}ms, ${pct.toFixed(1)}%)`,
+      "font-weight: bold;", "color: #6b7280;",
+    );
+    console.log(`Category: ${data.category}`);
+    console.log(`Executions: ${data.count}`);
+    console.log(`Avg duration: ${(data.duration / data.count).toFixed(0)}ms`);
+    const topFns = data.functions.sort((a, b) => b.duration - a.duration).slice(0, 3);
+    if (topFns.length > 0) {
+      console.log("Top functions:");
+      topFns.forEach((fn, i) => console.log(`  ${i + 1}. ${fn.name} (${fn.duration.toFixed(0)}ms) - ${fn.invoker}`));
+    }
+    console.groupEnd();
+  });
+
+  console.log("");
+  console.log("%c✅ Analysis complete!", "color: #22c55e; font-weight: bold;");
+
+  return {
+    script: "Long-Animation-Frames-Script-Attribution",
+    status: "ok",
+    details: {
+      frameCount: frames.length,
+      totalBlockingMs: Math.round(totalBlocking),
+      byCategory: Object.fromEntries(
+        Object.entries(byCategory).map(([k, v]) => [k, { durationMs: Math.round(v.durationMs), count: v.count }])
+      ),
+    },
+    items: topFiles.map(([file, data]) => ({
+      file,
+      category: data.category,
+      durationMs: Math.round(data.duration),
+      count: data.count,
+    })),
+  };
+})();

package/snippets/Interaction/Long-Animation-Frames.js

@@ -0,0 +1,298 @@
+// Long Animation Frames Analysis
+// https://webperf-snippets.nucliweb.net
+
+(() => {
+  const formatMs = (ms) => `${Math.round(ms)}ms`;
+
+  // Rating based on blocking duration
+  const valueToRating = (blockingDuration) =>
+    blockingDuration === 0 ? "good" : blockingDuration <= 100 ? "needs-improvement" : "poor";
+
+  const RATING_COLORS = {
+    good: "#0CCE6A",
+    "needs-improvement": "#FFA400",
+    poor: "#FF4E42",
+  };
+
+  const RATING_ICONS = {
+    good: "🟢",
+    "needs-improvement": "🟡",
+    poor: "🔴",
+  };
+
+  // Track all LoAFs and events
+  const allLoAFs = [];
+  const allEvents = [];
+
+  const getScriptSummary = (script) => {
+    const invoker = script.invoker || script.name || "(anonymous)";
+    const source = script.sourceURL
+      ? script.sourceURL.split("/").pop()?.split("?")[0] || script.sourceURL
+      : "";
+    return { invoker, source, type: script.invokerType || "unknown" };
+  };
+
+  const processLoAF = (entry) => {
+    const endTime = entry.startTime + entry.duration;
+
+    // Calculate derived metrics
+    const workDuration = entry.renderStart
+      ? entry.renderStart - entry.startTime
+      : entry.duration;
+
+    const renderDuration = entry.renderStart
+      ? endTime - entry.renderStart
+      : 0;
+
+    const styleAndLayoutDuration = entry.styleAndLayoutStart
+      ? endTime - entry.styleAndLayoutStart
+      : 0;
+
+    const totalForcedStyleAndLayout = entry.scripts.reduce(
+      (sum, script) => sum + (script.forcedStyleAndLayoutDuration || 0),
+      0
+    );
+
+    // Process scripts
+    const scripts = entry.scripts.map((script) => ({
+      ...getScriptSummary(script),
+      duration: Math.round(script.duration),
+      execDuration: Math.round(script.executionStart
+        ? script.startTime + script.duration - script.executionStart
+        : script.duration),
+      forcedStyleAndLayout: Math.round(script.forcedStyleAndLayoutDuration || 0),
+      startTime: Math.round(script.startTime),
+    }));
+
+    return {
+      startTime: Math.round(entry.startTime),
+      duration: Math.round(entry.duration),
+      blockingDuration: Math.round(entry.blockingDuration),
+      workDuration: Math.round(workDuration),
+      renderDuration: Math.round(renderDuration),
+      styleAndLayoutDuration: Math.round(styleAndLayoutDuration),
+      totalForcedStyleAndLayout: Math.round(totalForcedStyleAndLayout),
+      scripts,
+      entry,
+    };
+  };
+
+  const overlap = (e1, e2) =>
+    e1.startTime < e2.startTime + e2.duration &&
+    e2.startTime < e1.startTime + e1.duration;
+
+  // LoAF Observer
+  const loafObserver = new PerformanceObserver((list) => {
+    for (const entry of list.getEntries()) {
+      const processed = processLoAF(entry);
+      allLoAFs.push(processed);
+
+      // Only log frames with blocking duration
+      if (entry.blockingDuration > 0) {
+        const rating = valueToRating(entry.blockingDuration);
+        const icon = RATING_ICONS[rating];
+        const color = RATING_COLORS[rating];
+
+        console.groupCollapsed(
+          `%c${icon} Long Animation Frame: ${formatMs(entry.duration)} (blocking: ${formatMs(entry.blockingDuration)})`,
+          `font-weight: bold; color: ${color};`
+        );
+
+        // Time breakdown
+        console.log("%cTime Breakdown:", "font-weight: bold;");
+        const breakdown = [
+          { Phase: "Work (JS)", Duration: formatMs(processed.workDuration) },
+          { Phase: "Render", Duration: formatMs(processed.renderDuration) },
+          { Phase: "Style & Layout", Duration: formatMs(processed.styleAndLayoutDuration) },
+        ];
+        console.table(breakdown);
+
+        // Visual bar
+        const total = processed.duration;
+        const barWidth = 40;
+        const workBar = "█".repeat(Math.round((processed.workDuration / total) * barWidth));
+        const renderBar = "░".repeat(Math.round((processed.renderDuration / total) * barWidth));
+        console.log(`   ${workBar}${renderBar}`);
+        console.log("   █ Work  ░ Render");
+
+        // Forced style/layout warning
+        if (processed.totalForcedStyleAndLayout > 0) {
+          console.log("");
+          console.log(
+            `%c⚠️ Forced style/layout: ${formatMs(processed.totalForcedStyleAndLayout)}`,
+            "color: #ef4444; font-weight: bold;"
+          );
+        }
+
+        // Scripts
+        if (processed.scripts.length > 0) {
+          console.log("");
+          console.log("%cScripts:", "font-weight: bold;");
+
+          const scriptTable = processed.scripts.map((s) => ({
+            Invoker: s.invoker.length > 40 ? s.invoker.slice(0, 37) + "..." : s.invoker,
+            Type: s.type,
+            Duration: formatMs(s.duration),
+            "Forced S&L": s.forcedStyleAndLayout > 0 ? formatMs(s.forcedStyleAndLayout) : "-",
+            Source: s.source.length > 25 ? "..." + s.source.slice(-22) : s.source,
+          }));
+          console.table(scriptTable);
+        }
+
+        // Find overlapping events (interactions during this frame)
+        const overlappingEvents = allEvents.filter((e) => overlap(e, entry));
+        if (overlappingEvents.length > 0) {
+          console.log("");
+          console.log("%c👆 Interactions during this frame:", "font-weight: bold;");
+          overlappingEvents.forEach((e) => {
+            console.log(`   ${e.name}: ${formatMs(e.duration)}`);
+          });
+        }
+
+        console.groupEnd();
+      }
+    }
+  });
+
+  // Event Observer (for correlation)
+  const eventObserver = new PerformanceObserver((list) => {
+    for (const entry of list.getEntries()) {
+      if (entry.interactionId) {
+        allEvents.push(entry);
+      }
+    }
+  });
+
+  loafObserver.observe({ type: "long-animation-frame", buffered: true });
+  eventObserver.observe({ type: "event", buffered: true });
+
+  // Summary function
+  window.getLoAFSummary = () => {
+    console.group("%c📊 Long Animation Frames Summary", "font-weight: bold; font-size: 14px;");
+
+    if (allLoAFs.length === 0) {
+      console.log("   No long animation frames recorded.");
+      console.groupEnd();
+      return;
+    }
+
+    const blocking = allLoAFs.filter((l) => l.blockingDuration > 0);
+    const totalBlocking = blocking.reduce((sum, l) => sum + l.blockingDuration, 0);
+    const worstBlocking = Math.max(...allLoAFs.map((l) => l.blockingDuration));
+    const avgDuration = allLoAFs.reduce((sum, l) => sum + l.duration, 0) / allLoAFs.length;
+
+    // Statistics
+    console.log("");
+    console.log("%cStatistics:", "font-weight: bold;");
+    console.log(`   Total LoAFs: ${allLoAFs.length}`);
+    console.log(`   With blocking time: ${blocking.length}`);
+    console.log(`   Total blocking time: ${formatMs(totalBlocking)}`);
+    console.log(`   Worst blocking: ${formatMs(worstBlocking)}`);
+    console.log(`   Average duration: ${formatMs(avgDuration)}`);
+
+    // Script analysis
+    const scriptStats = new Map();
+    allLoAFs.forEach((loaf) => {
+      loaf.scripts.forEach((script) => {
+        const key = `${script.invoker}|${script.source}`;
+        if (!scriptStats.has(key)) {
+          scriptStats.set(key, {
+            invoker: script.invoker,
+            source: script.source,
+            count: 0,
+            totalDuration: 0,
+            totalForcedSL: 0,
+          });
+        }
+        const stats = scriptStats.get(key);
+        stats.count++;
+        stats.totalDuration += script.duration;
+        stats.totalForcedSL += script.forcedStyleAndLayout;
+      });
+    });
+
+    if (scriptStats.size > 0) {
+      console.log("");
+      console.log("%c🎯 Top Scripts by Total Duration:", "font-weight: bold; color: #ef4444;");
+
+      const topScripts = Array.from(scriptStats.values())
+        .sort((a, b) => b.totalDuration - a.totalDuration)
+        .slice(0, 10);
+
+      const scriptTable = topScripts.map((s) => ({
+        Invoker: s.invoker.length > 35 ? s.invoker.slice(0, 32) + "..." : s.invoker,
+        Count: s.count,
+        "Total Duration": formatMs(s.totalDuration),
+        "Forced S&L": s.totalForcedSL > 0 ? formatMs(s.totalForcedSL) : "-",
+        Source: s.source.length > 20 ? "..." + s.source.slice(-17) : s.source,
+      }));
+      console.table(scriptTable);
+    }
+
+    // Forced style/layout analysis
+    const forcedSLTotal = allLoAFs.reduce((sum, l) => sum + l.totalForcedStyleAndLayout, 0);
+    if (forcedSLTotal > 0) {
+      console.log("");
+      console.log(
+        `%c⚠️ Total forced style/layout: ${formatMs(forcedSLTotal)}`,
+        "color: #ef4444; font-weight: bold;"
+      );
+      console.log("   This indicates layout thrashing - reading layout after writing to DOM.");
+    }
+
+    // Recommendations
+    if (worstBlocking > 50) {
+      console.log("");
+      console.log("%c💡 Recommendations:", "font-weight: bold; color: #3b82f6;");
+      console.log("   • Break up long tasks using scheduler.yield() or setTimeout");
+      console.log("   • Move heavy computation to Web Workers");
+      console.log("   • Avoid forced synchronous layouts (read before write)");
+      console.log("   • Defer non-critical work with requestIdleCallback");
+    }
+
+    console.groupEnd();
+
+    return {
+      script: "Long-Animation-Frames",
+      status: "ok",
+      count: allLoAFs.length,
+      details: {
+        totalLoAFs: allLoAFs.length,
+        withBlockingTime: blocking.length,
+        totalBlockingTimeMs: Math.round(totalBlocking),
+        worstBlockingMs: Math.round(worstBlocking),
+        topScripts: Array.from(scriptStats.values())
+          .sort((a, b) => b.totalDuration - a.totalDuration)
+          .slice(0, 5)
+          .map((s) => ({ invoker: s.invoker, source: s.source, totalDurationMs: Math.round(s.totalDuration), count: s.count })),
+      },
+    };
+  };
+
+  console.log("%c🎬 Long Animation Frames Tracking Active", "font-weight: bold; font-size: 14px;");
+  console.log("   Frames with blocking duration will be logged.");
+  console.log(
+    "   Call %cgetLoAFSummary()%c for full analysis.",
+    "font-family: monospace; background: #f3f4f6; padding: 2px 4px;",
+    ""
+  );
+
+  // Synchronous return for agent (buffered entries)
+  const loafBuffered = performance.getEntriesByType("long-animation-frame");
+  const blockingLoafs = loafBuffered.filter((e) => e.blockingDuration > 0);
+  const totalBlockingSync = blockingLoafs.reduce((sum, e) => sum + e.blockingDuration, 0);
+  const worstBlockingSync = loafBuffered.length > 0 ? Math.max(...loafBuffered.map((e) => e.blockingDuration)) : 0;
+  return {
+    script: "Long-Animation-Frames",
+    status: "tracking",
+    count: loafBuffered.length,
+    details: {
+      totalLoAFs: loafBuffered.length,
+      withBlockingTime: blockingLoafs.length,
+      totalBlockingTimeMs: Math.round(totalBlockingSync),
+      worstBlockingMs: Math.round(worstBlockingSync),
+    },
+    message: "Tracking long animation frames. Call getLoAFSummary() for full script attribution.",
+    getDataFn: "getLoAFSummary",
+  };
+})();

package/snippets/Interaction/LongTask.js

@@ -0,0 +1,203 @@
+// Long Tasks Tracking
+// https://webperf-snippets.nucliweb.net
+
+(() => {
+  const formatMs = (ms) => `${Math.round(ms)}ms`;
+
+  // Severity helpers
+  const getSeverity = (duration) => {
+    if (duration > 250) return { level: "critical", icon: "🔴", color: "#ef4444" };
+    if (duration > 150) return { level: "high", icon: "🟠", color: "#f97316" };
+    if (duration > 100) return { level: "medium", icon: "🟡", color: "#eab308" };
+    return { level: "low", icon: "🟢", color: "#22c55e" };
+  };
+
+  // Track all long tasks
+  const allTasks = [];
+  let totalBlockingTime = 0;
+
+  try {
+    const observer = new PerformanceObserver((list) => {
+      for (const entry of list.getEntries()) {
+        const duration = entry.duration;
+        const blockingTime = Math.max(0, duration - 50); // Time over 50ms threshold
+        totalBlockingTime += blockingTime;
+
+        const sev = getSeverity(duration);
+
+        const task = {
+          startTime: entry.startTime,
+          duration,
+          blockingTime,
+          severity: sev.level,
+          attribution: entry.attribution?.[0]?.containerType || "unknown",
+          containerId: entry.attribution?.[0]?.containerId || "",
+          containerName: entry.attribution?.[0]?.containerName || "",
+        };
+        allTasks.push(task);
+
+        // Log each long task
+        console.groupCollapsed(
+          `%c${sev.icon} Long Task: ${formatMs(duration)} (blocking: ${formatMs(blockingTime)})`,
+          `font-weight: bold; color: ${sev.color};`
+        );
+
+        console.log(`%cTiming:`, "font-weight: bold;");
+        console.log(`   Start: ${formatMs(entry.startTime)}`);
+        console.log(`   Duration: ${formatMs(duration)}`);
+        console.log(`   Blocking time: ${formatMs(blockingTime)}`);
+
+        // Attribution (limited in Long Tasks API)
+        if (entry.attribution && entry.attribution.length > 0) {
+          console.log("");
+          console.log(`%cAttribution:`, "font-weight: bold;");
+          entry.attribution.forEach((attr) => {
+            console.log(`   Container: ${attr.containerType || "window"}`);
+            if (attr.containerName) console.log(`   Name: ${attr.containerName}`);
+            if (attr.containerId) console.log(`   ID: ${attr.containerId}`);
+            if (attr.containerSrc) console.log(`   Source: ${attr.containerSrc}`);
+          });
+        }
+
+        // Running totals
+        console.log("");
+        console.log(`%cSession totals:`, "font-weight: bold;");
+        console.log(`   Long tasks: ${allTasks.length}`);
+        console.log(`   Total blocking time: ${formatMs(totalBlockingTime)}`);
+
+        console.groupEnd();
+      }
+    });
+
+    observer.observe({ type: "longtask", buffered: true });
+
+    // Summary function
+    window.getLongTaskSummary = () => {
+      console.group("%c📊 Long Tasks Summary", "font-weight: bold; font-size: 14px;");
+
+      if (allTasks.length === 0) {
+        console.log("   No long tasks recorded.");
+        console.log("   This is good! The main thread has been responsive.");
+        console.groupEnd();
+        return;
+      }
+
+      const durations = allTasks.map((t) => t.duration);
+      const worst = Math.max(...durations);
+      const avg = durations.reduce((a, b) => a + b, 0) / durations.length;
+
+      const worstSev = getSeverity(worst);
+
+      // Statistics
+      console.log("");
+      console.log("%cStatistics:", "font-weight: bold;");
+      console.log(`   Total long tasks: ${allTasks.length}`);
+      console.log(`   Total blocking time: ${formatMs(totalBlockingTime)}`);
+      console.log(
+        `   Worst task: %c${formatMs(worst)}`,
+        `color: ${worstSev.color}; font-weight: bold;`
+      );
+      console.log(`   Average duration: ${formatMs(avg)}`);
+
+      // By severity
+      const bySeverity = {
+        critical: allTasks.filter((t) => t.severity === "critical").length,
+        high: allTasks.filter((t) => t.severity === "high").length,
+        medium: allTasks.filter((t) => t.severity === "medium").length,
+        low: allTasks.filter((t) => t.severity === "low").length,
+      };
+
+      console.log("");
+      console.log("%cBy severity:", "font-weight: bold;");
+      console.log(`   🔴 Critical (>250ms): ${bySeverity.critical}`);
+      console.log(`   🟠 High (150-250ms): ${bySeverity.high}`);
+      console.log(`   🟡 Medium (100-150ms): ${bySeverity.medium}`);
+      console.log(`   🟢 Low (50-100ms): ${bySeverity.low}`);
+
+      // Timeline
+      if (allTasks.length > 0) {
+        console.log("");
+        console.log("%c⏱️ Timeline:", "font-weight: bold;");
+
+        const tableData = allTasks
+          .sort((a, b) => b.duration - a.duration)
+          .slice(0, 10)
+          .map((t) => {
+            const sev = getSeverity(t.duration);
+            return {
+              "": sev.icon,
+              Start: formatMs(t.startTime),
+              Duration: formatMs(t.duration),
+              Blocking: formatMs(t.blockingTime),
+              Container: t.attribution,
+            };
+          });
+        console.table(tableData);
+      }
+
+      // Recommendations
+      if (totalBlockingTime > 300) {
+        console.log("");
+        console.log("%c💡 Recommendations:", "font-weight: bold; color: #3b82f6;");
+        console.log("   • Break up long tasks using setTimeout or scheduler.yield()");
+        console.log("   • Move heavy computation to Web Workers");
+        console.log("   • Defer non-critical JavaScript");
+        console.log("   • Use requestIdleCallback for low-priority work");
+        console.log("");
+        console.log("%c🔍 For better debugging:", "font-weight: bold;");
+        console.log("   Use the Long Animation Frames snippet for full script attribution");
+      }
+
+      console.groupEnd();
+
+      return {
+        script: "LongTask",
+        status: "ok",
+        count: allTasks.length,
+        details: {
+          totalBlockingTimeMs: Math.round(totalBlockingTime),
+          worstTaskMs: Math.round(worst),
+          avgDurationMs: Math.round(avg),
+          bySeverity,
+        },
+      };
+    };
+
+    // Initial message
+    console.log("%c⏱️ Long Tasks Tracking Active", "font-weight: bold; font-size: 14px;");
+    console.log("   Tasks blocking the main thread for >50ms will be logged.");
+    console.log(
+      "   Call %cgetLongTaskSummary()%c for statistics.",
+      "font-family: monospace; background: #f3f4f6; padding: 2px 4px;",
+      ""
+    );
+
+    // Synchronous return for agent (buffered entries)
+    const longtaskBuffered = performance.getEntriesByType("longtask");
+    const totalBlockingSync = longtaskBuffered.reduce((sum, t) => sum + Math.max(0, t.duration - 50), 0);
+    const worstTaskSync = longtaskBuffered.length > 0 ? Math.max(...longtaskBuffered.map((t) => t.duration)) : 0;
+    const bySeveritySync = {
+      critical: longtaskBuffered.filter((t) => t.duration > 250).length,
+      high: longtaskBuffered.filter((t) => t.duration > 150 && t.duration <= 250).length,
+      medium: longtaskBuffered.filter((t) => t.duration > 100 && t.duration <= 150).length,
+      low: longtaskBuffered.filter((t) => t.duration >= 50 && t.duration <= 100).length,
+    };
+    return {
+      script: "LongTask",
+      status: "tracking",
+      count: longtaskBuffered.length,
+      details: {
+        totalBlockingTimeMs: Math.round(totalBlockingSync),
+        worstTaskMs: Math.round(worstTaskSync),
+        bySeverity: bySeveritySync,
+      },
+      message: "Tracking long tasks. Call getLongTaskSummary() for statistics.",
+      getDataFn: "getLongTaskSummary",
+    };
+
+  } catch (e) {
+    console.error("%c⚠️ Long Tasks API not supported", "font-weight: bold;");
+    console.error("   Error:", e.message);
+    return { script: "LongTask", status: "unsupported", error: e.message };
+  }
+})();