webperf-snippets 0.1.0

package/snippets/CoreWebVitals/LCP.js

@@ -0,0 +1,135 @@
+// LCP Quick Check
+// https://webperf-snippets.nucliweb.net
+
+(async () => {
+  const valueToRating = (ms) =>
+    ms <= 2500 ? "good" : ms <= 4000 ? "needs-improvement" : "poor";
+
+  const RATING = {
+    good: { icon: "🟢", color: "#0CCE6A" },
+    "needs-improvement": { icon: "🟡", color: "#FFA400" },
+    poor: { icon: "🔴", color: "#FF4E42" },
+  };
+
+  const getActivationStart = () => {
+    const navEntry = performance.getEntriesByType("navigation")[0];
+    return navEntry?.activationStart || 0;
+  };
+
+  let lastPrintedTime = -1;
+
+  const printLCP = (entry) => {
+    const activationStart = getActivationStart();
+    const lcpTime = Math.max(0, entry.startTime - activationStart);
+    if (lcpTime === lastPrintedTime) return;
+    lastPrintedTime = lcpTime;
+
+    const rating = valueToRating(lcpTime);
+    const { icon, color } = RATING[rating];
+
+    console.group(`%cLCP: ${icon} ${(lcpTime / 1000).toFixed(2)}s (${rating})`, `color: ${color}; font-weight: bold; font-size: 14px;`);
+
+    const element = entry.element;
+    if (element) {
+      console.log("");
+      console.log("%cLCP Element:", "font-weight: bold;");
+
+      let selector = element.tagName.toLowerCase();
+      if (element.id) selector = `#${element.id}`;
+      else if (element.className && typeof element.className === "string") {
+        const classes = element.className.trim().split(/\s+/).slice(0, 2).join(".");
+        if (classes) selector = `${element.tagName.toLowerCase()}.${classes}`;
+      }
+
+      console.log(`   Element: ${selector}`, element);
+
+      const tagName = element.tagName.toLowerCase();
+      if (tagName === "img") {
+        console.log(`   Type: Image`);
+        console.log(`   URL: ${entry.url || element.src}`);
+        if (element.naturalWidth) {
+          console.log(`   Dimensions: ${element.naturalWidth}×${element.naturalHeight}`);
+        }
+      } else if (tagName === "video") {
+        console.log(`   Type: Video poster`);
+        console.log(`   URL: ${entry.url || element.poster}`);
+      } else if (window.getComputedStyle(element).backgroundImage !== "none") {
+        console.log(`   Type: Background image`);
+        console.log(`   URL: ${entry.url}`);
+      } else {
+        console.log(`   Type: ${tagName === "h1" || tagName === "p" ? "Text block" : tagName}`);
+      }
+
+      if (entry.size) {
+        console.log(`   Size: ${entry.size.toLocaleString()} px²`);
+      }
+
+      element.style.outline = "3px dashed lime";
+      element.style.outlineOffset = "2px";
+      console.log("");
+      console.log("%c✓ Element highlighted with green dashed outline", "color: #22c55e;");
+    }
+
+    console.groupEnd();
+  };
+
+  const observer = new PerformanceObserver((list) => {
+    const entries = list.getEntries();
+    const lastEntry = entries[entries.length - 1];
+    if (lastEntry) printLCP(lastEntry);
+  });
+
+  observer.observe({ type: "largest-contentful-paint", buffered: true });
+
+  console.log("%c⏱️ LCP Tracking Active", "font-weight: bold; font-size: 14px;");
+  console.log("   LCP may update as larger elements load.");
+
+  // Return for agent — collect via buffered observer (getEntriesByType does not
+  // expose largest-contentful-paint entries in Chrome without an active observer).
+  // 100ms gives the observer time to process buffered entries on busy pages.
+  const lastLcpEntry = await new Promise((resolve) => {
+    const entries = [];
+    const obs = new PerformanceObserver((list) => entries.push(...list.getEntries()));
+    obs.observe({ type: "largest-contentful-paint", buffered: true });
+    setTimeout(() => { obs.disconnect(); resolve(entries.at(-1) ?? null); }, 100);
+  });
+  if (!lastLcpEntry) {
+    return { script: "LCP", status: "error", error: "No LCP entries buffered" };
+  }
+
+  printLCP(lastLcpEntry);
+
+  const lcpActivationStart = getActivationStart();
+  const lcpValue = Math.round(Math.max(0, lastLcpEntry.startTime - lcpActivationStart));
+  const lcpRating = valueToRating(lcpValue);
+  const lcpEl = lastLcpEntry.element;
+  let lcpSelector = null;
+  let lcpType = null;
+  if (lcpEl) {
+    lcpSelector = lcpEl.tagName.toLowerCase();
+    if (lcpEl.id) lcpSelector = `#${lcpEl.id}`;
+    else if (lcpEl.className && typeof lcpEl.className === "string") {
+      const classes = lcpEl.className.trim().split(/\s+/).slice(0, 2).join(".");
+      if (classes) lcpSelector = `${lcpEl.tagName.toLowerCase()}.${classes}`;
+    }
+    const tag = lcpEl.tagName.toLowerCase();
+    lcpType = tag === "img" ? "Image" : tag === "video" ? "Video poster" :
+      window.getComputedStyle(lcpEl).backgroundImage !== "none" ? "Background image" :
+      (tag === "h1" || tag === "p" ? "Text block" : tag);
+  }
+  return {
+    script: "LCP",
+    status: "ok",
+    metric: "LCP",
+    value: lcpValue,
+    unit: "ms",
+    rating: lcpRating,
+    thresholds: { good: 2500, needsImprovement: 4000 },
+    details: {
+      element: lcpSelector,
+      elementType: lcpType,
+      url: lastLcpEntry.url || null,
+      sizePixels: lastLcpEntry.size || null,
+    },
+  };
+})();

package/snippets/CoreWebVitals/WORKFLOWS.md

@@ -0,0 +1,203 @@
+## Common Workflows
+
+### Complete Core Web Vitals Audit
+
+When the user asks for a comprehensive Core Web Vitals analysis or "audit CWV":
+
+1. **LCP.js** - Measure Largest Contentful Paint
+2. **CLS.js** - Measure Cumulative Layout Shift
+3. **INP.js** - Measure Interaction to Next Paint
+4. **LCP-Subparts.js** - Break down LCP timing phases
+5. **LCP-Trail.js** - Track LCP candidate evolution
+
+### LCP Deep Dive
+
+When LCP is slow or the user asks "debug LCP" or "why is LCP slow":
+
+1. **LCP.js** - Establish baseline LCP value
+2. **LCP-Subparts.js** - Break down into TTFB, resource load, render delay
+3. **LCP-Trail.js** - Identify all LCP candidates and changes
+4. **LCP-Image-Entropy.js** - Check if LCP image has visual complexity issues
+5. **LCP-Video-Candidate.js** - Detect if LCP is a video (poster or video element)
+
+### CLS Investigation
+
+When layout shifts are detected or the user asks "debug CLS" or "layout shift issues":
+
+1. **CLS.js** - Measure overall CLS score
+2. **Layout-Shift-Loading-and-Interaction.js** _(pending — available in webperf-interaction skill)_
+3. Cross-reference with **webperf-loading** skill:
+   - Find-Above-The-Fold-Lazy-Loaded-Images.js (lazy images causing shifts)
+   - Fonts-Preloaded-Loaded-and-used-above-the-fold.js (font swap causing shifts)
+
+### INP Debugging
+
+When interactions feel slow or the user asks "debug INP" or "slow interactions":
+
+1. **INP.js** - Measure overall INP value; call `getINP()` after interactions, `getINPDetails()` for full list
+2. **Interactions.js** _(pending — available in webperf-interaction skill)_
+3. **Input-Latency-Breakdown.js** _(pending — available in webperf-interaction skill)_
+4. **Long-Animation-Frames.js** _(pending — available in webperf-interaction skill)_
+5. **Long-Animation-Frames-Script-Attribution.js** _(pending — available in webperf-interaction skill)_
+
+### Video as LCP Investigation
+
+When LCP is a video element (detected by LCP-Video-Candidate.js):
+
+1. **LCP-Video-Candidate.js** - Identify video as LCP candidate
+2. **Video-Element-Audit.js** (from Media skill) - Audit video loading strategy
+3. **LCP-Subparts.js** - Analyze video loading phases
+4. Cross-reference with **webperf-loading** skill:
+   - Resource-Hints-Validation.js (check for video preload)
+   - Priority-Hints-Audit.js (check for fetchpriority on video)
+
+### Image as LCP Investigation
+
+When LCP is an image (most common case):
+
+1. **LCP.js** - Measure LCP timing
+2. **LCP-Subparts.js** - Break down timing phases
+3. **LCP-Image-Entropy.js** - Analyze image complexity
+4. Cross-reference with **webperf-media** skill:
+   - Image-Element-Audit.js (check format, dimensions, lazy loading)
+5. Cross-reference with **webperf-loading** skill:
+   - Find-Above-The-Fold-Lazy-Loaded-Images.js (check if incorrectly lazy)
+   - Priority-Hints-Audit.js (check for fetchpriority="high")
+   - Resource-Hints-Validation.js (check for preload)
+
+## Decision Tree
+
+Use this decision tree to automatically run follow-up snippets based on results:
+
+### After LCP.js
+
+- **If LCP > 2.5s** → Run **LCP-Subparts.js** to diagnose which phase is slow
+- **If LCP > 4.0s (poor)** → Run full LCP deep dive workflow (5 snippets)
+- **If LCP candidate is an image** → Run **LCP-Image-Entropy.js** and **webperf-media:Image-Element-Audit.js**
+- **If LCP candidate is a video** → Run **LCP-Video-Candidate.js** and **webperf-media:Video-Element-Audit.js**
+- **Always run** → **LCP-Trail.js** to understand candidate evolution
+
+### After LCP-Subparts.js
+
+- **If TTFB phase > 600ms** → Switch to **webperf-loading** skill and run TTFB-Sub-Parts.js
+- **If Resource Load Time > 1500ms** → Run:
+  1. **webperf-loading:Resource-Hints-Validation.js** (check for preload/preconnect)
+  2. **webperf-loading:Priority-Hints-Audit.js** (check fetchpriority)
+  3. **webperf-loading:Find-render-blocking-resources.js** (competing resources)
+- **If Render Delay > 200ms** → Run:
+  1. **webperf-loading:Find-render-blocking-resources.js** (blocking CSS/JS)
+  2. **webperf-loading:Script-Loading.js** (parser-blocking scripts)
+  3. **webperf-interaction:Long-Animation-Frames.js** (main thread blocking)
+
+### After LCP-Trail.js
+
+- **If many LCP candidate changes (>3)** → This causes visual instability, investigate:
+  1. **webperf-loading:Find-Above-The-Fold-Lazy-Loaded-Images.js** (late-loading images)
+  2. **webperf-loading:Fonts-Preloaded-Loaded-and-used-above-the-fold.js** (font swaps)
+  3. **CLS.js** (layout shifts contributing to LCP changes)
+- **If final LCP candidate appears late** → Run **webperf-loading:Resource-Hints-Validation.js**
+- **If early candidate was replaced** → Understand why initial content was pushed down (likely CLS issue)
+
+### After LCP-Image-Entropy.js
+
+- **If entropy is very high** → Image is visually complex, recommend:
+  - Modern formats (WebP, AVIF)
+  - Appropriate compression
+  - Potentially a placeholder strategy
+- **If entropy is low** → Image may be over-optimized or placeholder-like
+- **If large file size detected** → Run **webperf-media:Image-Element-Audit.js** for format/sizing analysis
+
+### After LCP-Video-Candidate.js
+
+- **If video is LCP** → Run:
+  1. **webperf-media:Video-Element-Audit.js** (check poster, preload, formats)
+  2. **webperf-loading:Priority-Hints-Audit.js** (check fetchpriority on poster)
+  3. **LCP-Subparts.js** (analyze video loading phases)
+- **If poster image is LCP** → Treat as image LCP (run image workflows)
+
+### After CLS.js
+
+- **If CLS > 0.1** → Run **webperf-interaction:Layout-Shift-Loading-and-Interaction.js** _(pending — available in webperf-interaction skill)_
+- **If CLS > 0.25 (poor)** → Run comprehensive shift investigation:
+  1. **webperf-loading:Find-Above-The-Fold-Lazy-Loaded-Images.js** (images without dimensions)
+  2. **webperf-loading:Fonts-Preloaded-Loaded-and-used-above-the-fold.js** (font loading strategy)
+  3. **webperf-loading:Critical-CSS-Detection.js** (late-loading styles)
+  4. **webperf-media:Image-Element-Audit.js** (missing width/height)
+- **If CLS = 0** → Confirm with multiple page loads (might be timing-dependent)
+
+### After INP.js
+
+- **If INP > 200ms** → Run **webperf-interaction:Interactions.js** to identify slow interactions
+- **If INP > 500ms (poor)** → Run full INP debugging workflow:
+  1. **webperf-interaction:Interactions.js** (list all interactions)
+  2. **webperf-interaction:Input-Latency-Breakdown.js** (phase breakdown)
+  3. **webperf-interaction:Long-Animation-Frames.js** (blocking frames)
+  4. **webperf-interaction:Long-Animation-Frames-Script-Attribution.js** (culprit scripts)
+- **If specific interaction type is slow (e.g., keyboard)** → Focus analysis on that interaction type
+- **After INP data is collected** → call `getINPDetails()` for the full sorted interaction list (useful for identifying patterns across multiple slow interactions)
+
+### Error Recovery
+
+- **If any script returns `status: "error"`** → Check if the page has finished loading:
+  - If early in load: wait and re-run the script
+  - If page is an SPA: user may need to navigate to the target route first
+- **If LCP.js / LCP-Subparts.js returns `status: "error"`** → Tell the user: "LCP data is not available yet. Please ensure the page has fully loaded, then run the analysis again."
+- **If INP.js `getINP()` returns `status: "error"`** → The `getDataFn: "getINP"` field signals the agent can retry after user interaction. Prompt the user to click, type, or scroll, then call `getINP()` again.
+
+### Cross-Skill Triggers
+
+> **Context fork note:** This skill runs with `context: fork`. Cross-skill triggers below are **recommendations to report back to the parent agent**, not direct calls this subagent can execute. When a cross-skill trigger fires, tell the user which skill and script to run next. Scripts marked _(pending)_ are not yet available — skip them and note the limitation.
+
+These triggers recommend using snippets from other skills:
+
+#### From LCP to Loading Skill
+
+- **If LCP > 2.5s and TTFB phase is dominant** → Use **webperf-loading** skill:
+  - TTFB.js, TTFB-Sub-Parts.js, Service-Worker-Analysis.js
+
+- **If LCP image is lazy-loaded** → Use **webperf-loading** skill:
+  - Find-Above-The-Fold-Lazy-Loaded-Images.js
+
+- **If LCP has no fetchpriority** → Use **webperf-loading** skill:
+  - Priority-Hints-Audit.js
+
+#### From CLS to Loading Skill
+
+- **If CLS caused by fonts** → Use **webperf-loading** skill:
+  - Fonts-Preloaded-Loaded-and-used-above-the-fold.js
+  - Resource-Hints-Validation.js (for font preload)
+
+- **If CLS caused by images** → Use **webperf-media** skill:
+  - Image-Element-Audit.js (check for width/height attributes)
+
+#### From INP to Interaction Skill
+
+- **If INP > 200ms** → Use **webperf-interaction** skill for full debugging:
+  - Interactions.js, Input-Latency-Breakdown.js
+  - Long-Animation-Frames.js, Long-Animation-Frames-Script-Attribution.js
+  - LongTask.js (if pre-interaction blocking suspected)
+
+#### From LCP/INP to Interaction Skill
+
+- **If render delay or interaction delay is high** → Use **webperf-interaction** skill:
+  - Long-Animation-Frames.js (main thread blocking)
+  - LongTask.js (long tasks delaying rendering)
+
+### Multi-Metric Correlation
+
+When multiple CWV metrics are poor, prioritize investigation:
+
+- **If LCP > 2.5s AND CLS > 0.1** → Likely shared root cause:
+  1. Check for late-loading content pushing LCP element
+  2. Run LCP-Trail.js to see LCP candidate changes
+  3. Run Layout-Shift-Loading-and-Interaction.js to correlate timing
+
+- **If LCP > 2.5s AND INP > 200ms** → Main thread congestion:
+  1. Run Long-Animation-Frames.js
+  2. Run webperf-loading:Script-Loading.js
+  3. Run webperf-loading:JS-Execution-Time-Breakdown.js
+
+- **If CLS > 0.1 AND INP > 200ms** → Layout thrashing or interaction-triggered shifts:
+  1. Run Layout-Shift-Loading-and-Interaction.js
+  2. Run Interactions.js
+  3. Check if shifts occur during/after interactions

package/snippets/DevTools-Overrides/Fetch-XHR-Timeline-inject.js

@@ -0,0 +1,73 @@
+// Fetch & XHR Timeline — Inject via DevTools Overrides
+// https://webperf-snippets.nucliweb.net
+(() => {
+  const calls = [];
+
+  // Intercept fetch
+  const origFetch = window.fetch;
+  window.fetch = function (...args) {
+    const url = typeof args[0] === "string" ? args[0] : args[0]?.url;
+    const start = performance.now();
+    return origFetch.apply(this, args).then((r) => {
+      const end = performance.now();
+      calls.push({
+        type: "fetch",
+        url,
+        start: Math.round(start),
+        end: Math.round(end),
+        duration: Math.round(end - start),
+        status: r.status,
+      });
+      return r;
+    }).catch((err) => {
+      const end = performance.now();
+      calls.push({
+        type: "fetch",
+        url,
+        start: Math.round(start),
+        end: Math.round(end),
+        duration: Math.round(end - start),
+        status: "ERROR",
+        error: err.message,
+      });
+      throw err;
+    });
+  };
+
+  // Intercept XHR
+  const origOpen = XMLHttpRequest.prototype.open;
+  const origSend = XMLHttpRequest.prototype.send;
+
+  XMLHttpRequest.prototype.open = function (method, url) {
+    this.__url = url;
+    this.__method = method;
+    return origOpen.apply(this, arguments);
+  };
+
+  XMLHttpRequest.prototype.send = function () {
+    const start = performance.now();
+    this.addEventListener("loadend", () => {
+      const end = performance.now();
+      calls.push({
+        type: "xhr",
+        url: this.__url,
+        start: Math.round(start),
+        end: Math.round(end),
+        duration: Math.round(end - start),
+        status: this.status || "ERROR",
+      });
+    });
+    return origSend.apply(this, arguments);
+  };
+
+  window.__perfCalls = calls;
+
+  // Capture LCP for correlation in the read snippet
+  try {
+    new PerformanceObserver((list) => {
+      const entries = list.getEntries();
+      const last = entries[entries.length - 1];
+      window.__lcpTime = Math.round(last.startTime);
+    }).observe({ type: "largest-contentful-paint", buffered: true });
+  } catch {}
+})();

package/snippets/DevTools-Overrides/Fetch-XHR-Timeline-read.js

@@ -0,0 +1,191 @@
+// Fetch & XHR Timeline — Run in console after page load
+// https://webperf-snippets.nucliweb.net
+
+(() => {
+  const calls = window.__perfCalls;
+
+  if (!calls) {
+    console.warn(
+      "No data found. Make sure the inject snippet is active via DevTools Overrides and reload the page."
+    );
+    return;
+  }
+
+  const lcpEntries = performance.getEntriesByType("largest-contentful-paint");
+  const lcpTime = lcpEntries.length
+    ? Math.round(lcpEntries[lcpEntries.length - 1].startTime)
+    : window.__lcpTime ?? null;
+
+  const isAuthCall = (url = "") => {
+    try {
+      const { pathname, searchParams } = new URL(url, location.href);
+      const path = pathname.toLowerCase();
+      if (/\/(auth|login|logout|token|session|whoami|identity|oauth)/.test(path)) return true;
+      if (/(^|\/)me(\/|$)/.test(path)) return true;
+      if (searchParams.has("authIndexType") || searchParams.has("authIndexValue")) return true;
+      return false;
+    } catch {
+      return false;
+    }
+  };
+
+  const isError = (c) =>
+    c.status === "ERROR" || (typeof c.status === "number" && c.status >= 400);
+
+  const beforeLCP = lcpTime ? calls.filter((c) => c.end <= lcpTime) : [];
+  const afterLCP = lcpTime ? calls.filter((c) => c.end > lcpTime) : calls;
+  const errors = calls.filter(isError);
+  const bootstrapErrors = errors.filter((c) => !lcpTime || c.end <= lcpTime);
+  const postLCPErrors = errors.filter((c) => lcpTime && c.end > lcpTime);
+  const authCalls = calls.filter((c) => isAuthCall(c.url));
+  const authBeforeLCP = lcpTime ? authCalls.filter((c) => c.end <= lcpTime) : [];
+
+  const row = (c) => ({
+    Type: c.type,
+    Status: c.status,
+    "Start (ms)": c.start,
+    "End (ms)": c.end,
+    "Duration (ms)": c.duration,
+    ...(lcpTime ? { "Before LCP": c.end <= lcpTime ? "⚠️ yes" : "no" } : {}),
+    URL: c.url?.length > 80 ? "..." + c.url.slice(-77) : c.url,
+  });
+
+  console.group(
+    "%c📡 Fetch & XHR Timeline",
+    "font-weight: bold; font-size: 14px;"
+  );
+  console.log("");
+
+  if (lcpTime) {
+    console.log(`%cLCP: ${lcpTime}ms`, "font-weight: bold;");
+    console.log("");
+  } else {
+    console.warn("LCP timing not available — before/after LCP analysis skipped. Make sure the inject snippet is active and reload the page.");
+    console.log("");
+  }
+
+  if (calls.length === 0) {
+    console.log(
+      "%c✅ No fetch or XHR calls detected during page load",
+      "color: #22c55e; font-weight: bold;"
+    );
+    console.groupEnd();
+    return;
+  }
+
+  // Summary
+  console.log("%cSummary:", "font-weight: bold;");
+  console.log(`   Total calls: ${calls.length}`);
+  if (lcpTime) {
+    console.log(
+      `   ${beforeLCP.length > 0 ? "⚠️" : "✅"} Before LCP (critical path candidates): ${beforeLCP.length}`
+    );
+    console.log(
+      `   ✅ After LCP (confirmed non-blocking): ${afterLCP.length}`
+    );
+  }
+  if (bootstrapErrors.length > 0) {
+    console.log(`   🔴 Bootstrap errors (before LCP): ${bootstrapErrors.length}`);
+  }
+  if (postLCPErrors.length > 0) {
+    console.log(`   🔴 Errors after LCP: ${postLCPErrors.length}`);
+  }
+  if (authCalls.length > 0) {
+    console.log(
+      `   🔑 Auth-related calls: ${authCalls.length}` +
+        (authBeforeLCP.length > 0 ? ` — ${authBeforeLCP.length} before LCP ⚠️` : "")
+    );
+  }
+
+  // Case 1 — API calls blocking LCP
+  if (beforeLCP.length > 0) {
+    console.log("");
+    console.group(
+      "%c⚠️ Calls completing before LCP — investigate as critical path blockers",
+      "color: #ef4444; font-weight: bold;"
+    );
+    console.log(
+      "%cCalls completing before LCP are candidates for deferral, aggressive caching, or parallelization. If a framework waits for their response before rendering, each one adds directly to LCP.",
+      "color: #6b7280;"
+    );
+    console.table(beforeLCP.map(row));
+    console.groupEnd();
+  }
+
+  // Case 2 — Bootstrap errors (before LCP)
+  if (bootstrapErrors.length > 0) {
+    console.log("");
+    console.group(
+      "%c🔴 Bootstrap errors — failed calls before LCP",
+      "color: #ef4444; font-weight: bold;"
+    );
+    console.log(
+      "%cA failed auth check or config endpoint during bootstrap can add hundreds of ms before first paint — even when the error is caught silently.",
+      "color: #6b7280;"
+    );
+    console.table(
+      bootstrapErrors.map((c) => ({
+        Type: c.type,
+        Status: c.status,
+        Error: c.error || "-",
+        "Start (ms)": c.start,
+        "Duration (ms)": c.duration,
+        URL: c.url?.length > 80 ? "..." + c.url.slice(-77) : c.url,
+      }))
+    );
+    console.groupEnd();
+  }
+
+  if (postLCPErrors.length > 0) {
+    console.log("");
+    console.group(
+      "%c🔴 Failed calls after LCP",
+      "color: #ef4444; font-weight: bold;"
+    );
+    console.table(
+      postLCPErrors.map((c) => ({
+        Type: c.type,
+        Status: c.status,
+        Error: c.error || "-",
+        "Start (ms)": c.start,
+        "Duration (ms)": c.duration,
+        URL: c.url?.length > 80 ? "..." + c.url.slice(-77) : c.url,
+      }))
+    );
+    console.groupEnd();
+  }
+
+  // Case 4 — Unnecessary auth checks
+  if (authCalls.length > 0) {
+    console.log("");
+    console.group(
+      "%c🔑 Auth-related calls — verify these are necessary",
+      "color: #f59e0b; font-weight: bold;"
+    );
+    console.log(
+      "%cAuth calls on pages where the user is known to be unauthenticated add latency without value. Cross-reference with your routing guards.",
+      "color: #6b7280;"
+    );
+    console.table(authCalls.map(row));
+    console.groupEnd();
+  }
+
+  // Case 3 — Complete network inventory
+  console.log("");
+  console.group("%c📋 Complete network inventory", "font-weight: bold;");
+  console.log(
+    "%cIncludes cross-origin calls invisible to the Network panel timing data (no Timing-Allow-Origin header).",
+    "color: #6b7280;"
+  );
+  console.table(
+    calls
+      .sort((a, b) => a.start - b.start)
+      .map((c) => ({
+        ...row(c),
+        Auth: isAuthCall(c.url) ? "🔑" : "-",
+      }))
+  );
+  console.groupEnd();
+
+  console.groupEnd();
+})();