webperf-snippets 0.1.0

package/snippets/Loading/SSR-Hydration-Data-Analysis.js

@@ -0,0 +1,364 @@
+// SSR Framework Hydration Data Analysis
+// https://webperf-snippets.nucliweb.net
+
+(() => {
+  const formatBytes = (bytes) => {
+    if (bytes === 0) return "0 B";
+    const k = 1024;
+    const sizes = ["B", "KB", "MB"];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return (bytes / Math.pow(k, i)).toFixed(2) + " " + sizes[i];
+  };
+
+  // Framework detection patterns
+  const frameworks = [
+    {
+      name: "Next.js",
+      selector: "#__NEXT_DATA__",
+      type: "json",
+      threshold: 128 * 1024, // 128 KB official warning threshold
+      docs: "https://nextjs.org/docs/messages/large-page-data",
+    },
+    {
+      name: "Nuxt 3",
+      selector: "#__NUXT_DATA__",
+      type: "json-array",
+      threshold: 100 * 1024,
+      docs: "https://nuxt.com/docs/api/composables/use-hydration",
+    },
+    {
+      name: "Nuxt 2",
+      pattern: /window\.__NUXT__\s*=/,
+      type: "script",
+      threshold: 100 * 1024,
+      docs: "https://nuxtjs.org/",
+    },
+    {
+      name: "Remix",
+      selector: "#__remixContext",
+      type: "script",
+      threshold: 100 * 1024,
+      docs: "https://remix.run/docs/en/main/guides/performance",
+    },
+    {
+      name: "Gatsby",
+      selector: "#___gatsby",
+      pattern: /window\.___/,
+      type: "script",
+      threshold: 100 * 1024,
+      docs: "https://www.gatsbyjs.com/docs/",
+    },
+    {
+      name: "SvelteKit",
+      selector: "[data-sveltekit-hydrate]",
+      type: "json",
+      threshold: 100 * 1024,
+      docs: "https://kit.svelte.dev/docs/performance",
+    },
+    {
+      name: "Astro",
+      selector: "astro-island",
+      type: "props",
+      threshold: 50 * 1024,
+      docs: "https://docs.astro.build/en/concepts/islands/",
+    },
+  ];
+
+  // Find all hydration scripts
+  const detected = [];
+  const allInlineScripts = Array.from(
+    document.querySelectorAll("script:not([src])")
+  ).filter((s) => s.innerHTML.trim().length > 0);
+
+  // Check each framework
+  frameworks.forEach((fw) => {
+    let elements = [];
+    let content = "";
+    let size = 0;
+
+    if (fw.selector) {
+      const el = document.querySelector(fw.selector);
+      if (el) {
+        elements = [el];
+        content = el.innerHTML || el.textContent || "";
+        size = new Blob([content]).size;
+      }
+    }
+
+    if (fw.pattern && elements.length === 0) {
+      allInlineScripts.forEach((script) => {
+        if (fw.pattern.test(script.innerHTML)) {
+          elements.push(script);
+          content = script.innerHTML;
+          size += new Blob([content]).size;
+        }
+      });
+    }
+
+    // Special handling for Astro islands
+    if (fw.name === "Astro") {
+      const islands = document.querySelectorAll("astro-island");
+      if (islands.length > 0) {
+        elements = Array.from(islands);
+        let totalProps = 0;
+        islands.forEach((island) => {
+          const props = island.getAttribute("props");
+          if (props) totalProps += new Blob([props]).size;
+        });
+        size = totalProps;
+        content = `${islands.length} islands with props`;
+      }
+    }
+
+    if (elements.length > 0) {
+      detected.push({
+        ...fw,
+        elements,
+        content,
+        size,
+        exceedsThreshold: size > fw.threshold,
+      });
+    }
+  });
+
+  // Calculate other inline scripts
+  const frameworkScripts = new Set(detected.flatMap((d) => d.elements));
+  const otherScripts = allInlineScripts.filter((s) => !frameworkScripts.has(s));
+  const otherSize = otherScripts.reduce(
+    (sum, s) => sum + new Blob([s.innerHTML]).size,
+    0
+  );
+
+  // Display results
+  console.group(
+    "%c🚀 SSR Framework Hydration Analysis",
+    "font-weight: bold; font-size: 14px;"
+  );
+
+  if (detected.length === 0) {
+    console.log("");
+    console.log(
+      "%c📭 No SSR framework hydration data detected.",
+      "color: #6b7280; font-weight: bold;"
+    );
+    console.log("This page may be:");
+    console.log("   • A static HTML page");
+    console.log("   • A client-side rendered SPA");
+    console.log("   • Using a framework not yet supported by this snippet");
+    console.log("");
+    console.log(
+      `Found ${otherScripts.length} other inline scripts (${formatBytes(otherSize)})`
+    );
+    console.groupEnd();
+    return { script: "SSR-Hydration-Data-Analysis", status: "ok", count: 0, details: { frameworksFound: 0, totalHydrationBytes: 0, otherInlineBytes: otherSize }, items: [], issues: [] };
+  }
+
+  // Summary
+  console.log("");
+  console.log("%cDetected Framework(s):", "font-weight: bold;");
+  detected.forEach((fw) => {
+    const status = fw.exceedsThreshold ? "🔴" : "🟢";
+    console.log(
+      `   ${status} ${fw.name}: ${formatBytes(fw.size)} (threshold: ${formatBytes(fw.threshold)})`
+    );
+  });
+
+  const totalHydrationSize = detected.reduce((sum, d) => sum + d.size, 0);
+  console.log("");
+  console.log(`   Total hydration data: ${formatBytes(totalHydrationSize)}`);
+  console.log(`   Other inline scripts: ${formatBytes(otherSize)}`);
+
+  // Detailed analysis for each framework
+  detected.forEach((fw) => {
+    console.log("");
+    console.group(
+      `%c${fw.exceedsThreshold ? "🔴" : "🟢"} ${fw.name} Analysis`,
+      `color: ${fw.exceedsThreshold ? "#ef4444" : "#22c55e"}; font-weight: bold;`
+    );
+
+    console.log(`Size: ${formatBytes(fw.size)}`);
+    console.log(`Threshold: ${formatBytes(fw.threshold)}`);
+    console.log(
+      `Status: ${fw.exceedsThreshold ? "⚠️ Exceeds recommended limit" : "✅ Within limits"}`
+    );
+
+    // Parse and analyze content
+    if (fw.type === "json" && fw.content) {
+      try {
+        const data = JSON.parse(fw.content);
+        console.log("");
+        console.log("%cData Structure:", "font-weight: bold;");
+
+        if (fw.name === "Next.js" && data.props) {
+          const pageProps = data.props?.pageProps || {};
+          const pagePropsSize = new Blob([JSON.stringify(pageProps)]).size;
+
+          console.log(`   Build ID: ${data.buildId || "N/A"}`);
+          console.log(`   Page: ${data.page || "N/A"}`);
+          console.log(`   pageProps size: ${formatBytes(pagePropsSize)}`);
+
+          // Analyze pageProps keys
+          const propsKeys = Object.keys(pageProps);
+          if (propsKeys.length > 0) {
+            console.log("");
+            console.log("%c   pageProps breakdown:", "font-weight: bold;");
+
+            const propSizes = propsKeys.map((key) => ({
+              key,
+              size: new Blob([JSON.stringify(pageProps[key])]).size,
+            }));
+            propSizes.sort((a, b) => b.size - a.size);
+
+            propSizes.slice(0, 10).forEach((prop) => {
+              const pct = ((prop.size / pagePropsSize) * 100).toFixed(1);
+              const bar = "█".repeat(Math.min(Math.round(parseFloat(pct) / 5), 20));
+              console.log(
+                `      ${prop.key}: ${formatBytes(prop.size)} (${pct}%) ${bar}`
+              );
+            });
+
+            if (propsKeys.length > 10) {
+              console.log(`      ... and ${propsKeys.length - 10} more props`);
+            }
+          }
+
+          // Check for common issues
+          console.log("");
+          console.log("%cPotential Issues:", "font-weight: bold;");
+
+          // Large arrays
+          const largeArrays = propsKeys.filter((key) => {
+            const val = pageProps[key];
+            return Array.isArray(val) && val.length > 50;
+          });
+          if (largeArrays.length > 0) {
+            console.log(
+              `   ⚠️ Large arrays: ${largeArrays.join(", ")} (consider pagination)`
+            );
+          }
+
+          // Deeply nested objects
+          const checkDepth = (obj, depth = 0) => {
+            if (depth > 5) return true;
+            if (typeof obj !== "object" || obj === null) return false;
+            return Object.values(obj).some((v) => checkDepth(v, depth + 1));
+          };
+          if (checkDepth(pageProps)) {
+            console.log("   ⚠️ Deeply nested data (> 5 levels)");
+          }
+
+          // Potential sensitive data patterns
+          const sensitivePatterns = /password|secret|token|apikey|api_key|private/i;
+          const propsString = JSON.stringify(pageProps);
+          if (sensitivePatterns.test(propsString)) {
+            console.log(
+              "   🚨 Possible sensitive data detected - review prop names"
+            );
+          }
+
+          if (
+            largeArrays.length === 0 &&
+            !checkDepth(pageProps) &&
+            !sensitivePatterns.test(propsString)
+          ) {
+            console.log("   ✅ No obvious issues detected");
+          }
+        }
+
+        // Raw data reference
+        console.log("");
+        console.log("%c📦 Raw data object:", "font-weight: bold;");
+        console.log(data);
+      } catch {
+        console.log("Could not parse JSON content");
+      }
+    }
+
+    if (fw.name === "Astro") {
+      console.log("");
+      console.log(`Islands found: ${fw.elements.length}`);
+      const islandTable = fw.elements.map((island, i) => {
+        const props = island.getAttribute("props");
+        const clientDirective =
+          island.getAttribute("client") ||
+          Array.from(island.attributes)
+            .find((a) => a.name.startsWith("client:"))
+            ?.name.replace("client:", "") ||
+          "unknown";
+        return {
+          "#": i + 1,
+          Component: island.getAttribute("component-url")?.split("/").pop() || "Unknown",
+          Client: clientDirective,
+          "Props Size": props ? formatBytes(new Blob([props]).size) : "0 B",
+        };
+      });
+      console.table(islandTable);
+    }
+
+    // Element reference
+    console.log("");
+    console.log("%c🔎 Element(s):", "font-weight: bold;");
+    fw.elements.forEach((el, i) => {
+      console.log(`${i + 1}.`, el);
+    });
+
+    console.log("");
+    console.log(`📚 Docs: ${fw.docs}`);
+
+    console.groupEnd();
+  });
+
+  // Recommendations
+  const hasIssues = detected.some((d) => d.exceedsThreshold);
+
+  if (hasIssues) {
+    console.log("");
+    console.group("%c📝 Recommendations", "color: #3b82f6; font-weight: bold;");
+    console.log("");
+    console.log("%cTo reduce hydration data size:", "font-weight: bold;");
+    console.log("");
+    console.log("1. Only fetch data you actually render");
+    console.log("   → Remove unused fields from API responses");
+    console.log("   → Use GraphQL or tRPC for precise data fetching");
+    console.log("");
+    console.log("2. Paginate large lists");
+    console.log("   → Don't send 100+ items in initial props");
+    console.log("   → Implement infinite scroll or pagination");
+    console.log("");
+    console.log("3. Defer non-critical data");
+    console.log("   → Fetch some data client-side after hydration");
+    console.log("   → Use React Query, SWR, or similar");
+    console.log("");
+    console.log("4. Transform data before sending");
+    console.log("   → Remove unnecessary nested data");
+    console.log("   → Flatten structures where possible");
+    console.log("");
+
+    const nextJs = detected.find((d) => d.name === "Next.js");
+    if (nextJs) {
+      console.log("%cNext.js specific:", "font-weight: bold;");
+      console.log(
+        '%c// In getServerSideProps or getStaticProps:\nreturn {\n  props: {\n    // Only include what the page renders\n    items: items.slice(0, 10), // Paginate\n    // Omit unused fields\n    user: { name: user.name, avatar: user.avatar },\n  },\n};',
+        "font-family: monospace; color: #22c55e;"
+      );
+    }
+
+    console.groupEnd();
+  }
+
+  console.groupEnd();
+
+  return {
+    script: "SSR-Hydration-Data-Analysis",
+    status: "ok",
+    count: detected.length,
+    details: {
+      frameworksFound: detected.length,
+      totalHydrationBytes: totalHydrationSize,
+      otherInlineBytes: otherSize,
+      hasExceedingThreshold: detected.some(d => d.exceedsThreshold),
+    },
+    items: detected.map(fw => ({ name: fw.name, sizeBytes: fw.size, thresholdBytes: fw.threshold, exceedsThreshold: fw.exceedsThreshold })),
+    issues: detected.filter(fw => fw.exceedsThreshold).map(fw => ({ severity: "warning", message: `${fw.name} hydration data (${Math.round(fw.size / 1024)} KB) exceeds ${Math.round(fw.threshold / 1024)} KB threshold` })),
+  };
+})();

package/snippets/Loading/Script-Loading.js

@@ -0,0 +1,332 @@
+// Script Loading Analysis
+// https://webperf-snippets.nucliweb.net
+
+(() => {
+  const formatBytes = (bytes) => {
+    if (!bytes || bytes === 0) return "-";
+    const k = 1024;
+    const sizes = ["B", "KB", "MB"];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return (bytes / Math.pow(k, i)).toFixed(1) + " " + sizes[i];
+  };
+
+  const formatMs = (ms) => (ms > 0 ? ms.toFixed(0) + "ms" : "-");
+
+  // Get current page's root domain for first/third party detection
+  const getRootDomain = (hostname) => {
+    const parts = hostname.split(".");
+    if (parts.length > 2) {
+      const sld = parts[parts.length - 2];
+      if (["co", "com", "org", "net", "gov", "edu"].includes(sld) && sld.length <= 3) {
+        return parts.slice(-3).join(".");
+      }
+      return parts.slice(-2).join(".");
+    }
+    return hostname;
+  };
+
+  const currentDomain = getRootDomain(location.hostname);
+  const isFirstParty = (url) => {
+    try {
+      return getRootDomain(new URL(url).hostname) === currentDomain;
+    } catch {
+      return true;
+    }
+  };
+
+  // Get resource timing data
+  const resourceTiming = new Map();
+  performance.getEntriesByType("resource").forEach((r) => {
+    if (r.initiatorType === "script") {
+      resourceTiming.set(r.name, {
+        size: r.transferSize || 0,
+        duration: r.duration,
+        startTime: r.startTime,
+      });
+    }
+  });
+
+  // Analyze all external scripts
+  const externalScripts = Array.from(document.querySelectorAll("script[src]"));
+
+  // Analyze inline scripts
+  const inlineScripts = Array.from(document.querySelectorAll("script:not([src])"))
+    .filter((s) => s.innerHTML.trim().length > 0);
+
+  const scripts = externalScripts.map((script) => {
+    const src = script.src;
+    const timing = resourceTiming.get(src) || {};
+    const inHead = script.closest("head") !== null;
+    const isModule = script.type === "module";
+    const isAsync = script.async;
+    const isDefer = script.defer;
+
+    // Determine loading strategy
+    let strategy = "blocking";
+    if (isModule && isAsync) {
+      strategy = "async module";
+    } else if (isModule) {
+      strategy = "module";
+    } else if (isAsync) {
+      strategy = "async";
+    } else if (isDefer) {
+      strategy = "defer";
+    }
+
+    const isBlocking = strategy === "blocking";
+    const firstParty = isFirstParty(src);
+
+    return {
+      src,
+      shortSrc: src.split("/").pop()?.split("?")[0] || src,
+      strategy,
+      isBlocking,
+      inHead,
+      firstParty,
+      isModule,
+      isAsync,
+      isDefer,
+      size: timing.size || 0,
+      duration: timing.duration || 0,
+      startTime: timing.startTime || 0,
+      element: script,
+    };
+  });
+
+  // Categorize scripts
+  const blocking = scripts.filter((s) => s.isBlocking);
+  const blockingInHead = blocking.filter((s) => s.inHead);
+  const asyncScripts = scripts.filter((s) => s.strategy === "async" || s.strategy === "async module");
+  const deferScripts = scripts.filter((s) => s.strategy === "defer");
+  const moduleScripts = scripts.filter((s) => s.strategy === "module");
+  const thirdPartyBlocking = blocking.filter((s) => !s.firstParty);
+
+  // Calculate totals
+  const totalSize = scripts.reduce((sum, s) => sum + s.size, 0);
+  const blockingSize = blocking.reduce((sum, s) => sum + s.size, 0);
+
+  // Rating
+  let rating, ratingColor;
+  if (blockingInHead.length === 0) {
+    rating = "Good";
+    ratingColor = "#22c55e";
+  } else if (blockingInHead.length <= 2 && thirdPartyBlocking.length === 0) {
+    rating = "Needs Review";
+    ratingColor = "#f59e0b";
+  } else {
+    rating = "Needs Optimization";
+    ratingColor = "#ef4444";
+  }
+
+  // Display results
+  console.group("%c📜 Script Loading Analysis", "font-weight: bold; font-size: 14px;");
+
+  // Summary
+  console.log("");
+  console.log("%cSummary:", "font-weight: bold;");
+  console.log(`   Total external scripts: ${scripts.length}`);
+  console.log(`   Total inline scripts: ${inlineScripts.length}`);
+  console.log(`   Total size: ${formatBytes(totalSize)}`);
+  console.log("");
+  console.log("%cBy loading strategy:", "font-weight: bold;");
+  console.log(`   🔴 Blocking: ${blocking.length} (${formatBytes(blockingSize)})`);
+  console.log(`   ⚡ Async: ${asyncScripts.length}`);
+  console.log(`   📋 Defer: ${deferScripts.length}`);
+  console.log(`   📦 Module: ${moduleScripts.length}`);
+  console.log("");
+  console.log(`   Rating: %c${rating}`, `color: ${ratingColor}; font-weight: bold;`);
+
+  // Detailed table
+  if (scripts.length > 0) {
+    console.log("");
+    console.group("%c📊 External Scripts", "color: #3b82f6; font-weight: bold;");
+
+    const tableData = scripts
+      .sort((a, b) => {
+        // Sort: blocking first, then by size
+        if (a.isBlocking !== b.isBlocking) return a.isBlocking ? -1 : 1;
+        return b.size - a.size;
+      })
+      .map((s) => ({
+        Script: s.shortSrc,
+        Strategy: s.isBlocking ? `🔴 ${s.strategy}` : s.strategy,
+        Location: s.inHead ? "head" : "body",
+        Party: s.firstParty ? "1st" : "3rd",
+        Size: formatBytes(s.size),
+        Duration: formatMs(s.duration),
+      }));
+
+    console.table(tableData);
+
+    // Elements for inspection
+    console.log("");
+    console.log("%c🔎 Elements (sorted by load order):", "font-weight: bold;");
+    scripts
+      .sort((a, b) => a.startTime - b.startTime)
+      .forEach((s, i) => {
+        const marker = s.isBlocking ? "🔴" : "✅";
+        console.log(`${i + 1}. ${marker} ${s.shortSrc}`, s.element);
+      });
+
+    console.groupEnd();
+  }
+
+  // Issues
+  const issues = [];
+
+  if (blockingInHead.length > 0) {
+    issues.push({
+      severity: "error",
+      message: `${blockingInHead.length} blocking script(s) in <head>`,
+      scripts: blockingInHead,
+      fix: "Add 'defer' or 'async' attribute, or move to end of <body>",
+    });
+  }
+
+  if (thirdPartyBlocking.length > 0) {
+    issues.push({
+      severity: "error",
+      message: `${thirdPartyBlocking.length} third-party blocking script(s)`,
+      scripts: thirdPartyBlocking,
+      fix: "Add 'async' for independent scripts, or load dynamically",
+    });
+  }
+
+  const largeBlocking = blocking.filter((s) => s.size > 50 * 1024);
+  if (largeBlocking.length > 0) {
+    issues.push({
+      severity: "warning",
+      message: `${largeBlocking.length} large blocking script(s) (> 50 KB)`,
+      scripts: largeBlocking,
+      fix: "Split code, use defer, or lazy load",
+    });
+  }
+
+  // Scripts that could be deferred
+  const couldDefer = blocking.filter((s) => {
+    // Scripts at end of body could likely use defer
+    const bodyScripts = Array.from(document.body.querySelectorAll("script[src]"));
+    const isLastInBody = bodyScripts.indexOf(s.element) >= bodyScripts.length - 3;
+    return isLastInBody;
+  });
+
+  if (couldDefer.length > 0 && blocking.length > couldDefer.length) {
+    issues.push({
+      severity: "info",
+      message: `${blocking.length - couldDefer.length} blocking script(s) could potentially use defer`,
+      fix: "Test with defer attribute to improve parsing performance",
+    });
+  }
+
+  if (issues.length > 0) {
+    console.log("");
+    console.group("%c⚠️ Issues Found", "color: #ef4444; font-weight: bold;");
+
+    issues.forEach((issue) => {
+      const icon = issue.severity === "error" ? "🔴" : issue.severity === "warning" ? "🟡" : "💡";
+      console.log("");
+      console.log(`%c${icon} ${issue.message}`, "font-weight: bold;");
+      if (issue.scripts) {
+        issue.scripts.forEach((s) => {
+          console.log(`   • ${s.shortSrc} (${formatBytes(s.size)})`);
+        });
+      }
+      console.log(`   → ${issue.fix}`);
+    });
+
+    console.groupEnd();
+  } else if (scripts.length > 0) {
+    console.log("");
+    console.log(
+      "%c✅ All scripts use non-blocking loading strategies!",
+      "color: #22c55e; font-weight: bold;"
+    );
+  }
+
+  // First/Third party breakdown
+  const firstPartyScripts = scripts.filter((s) => s.firstParty);
+  const thirdPartyScripts = scripts.filter((s) => !s.firstParty);
+
+  if (thirdPartyScripts.length > 0) {
+    console.log("");
+    console.group("%c🌐 Third-Party Scripts", "color: #8b5cf6; font-weight: bold;");
+
+    const thirdPartyByHost = new Map();
+    thirdPartyScripts.forEach((s) => {
+      try {
+        const host = new URL(s.src).hostname;
+        if (!thirdPartyByHost.has(host)) {
+          thirdPartyByHost.set(host, { count: 0, size: 0, blocking: 0 });
+        }
+        const data = thirdPartyByHost.get(host);
+        data.count++;
+        data.size += s.size;
+        if (s.isBlocking) data.blocking++;
+      } catch {}
+    });
+
+    const hostTable = Array.from(thirdPartyByHost.entries())
+      .sort((a, b) => b[1].size - a[1].size)
+      .map(([host, data]) => ({
+        Host: host,
+        Scripts: data.count,
+        Size: formatBytes(data.size),
+        Blocking: data.blocking > 0 ? `⚠️ ${data.blocking}` : "0",
+      }));
+
+    console.table(hostTable);
+    console.groupEnd();
+  }
+
+  // Best practices (defined here so firstPartyScripts/thirdPartyScripts are in scope for return)
+  console.log("");
+  console.group("%c📝 Best Practices", "color: #3b82f6; font-weight: bold;");
+  console.log("");
+  console.log("%cFor most scripts (need DOM, run in order):", "font-weight: bold;");
+  console.log('%c<script src="app.js" defer></script>', "font-family: monospace; color: #22c55e;");
+  console.log("");
+  console.log("%cFor independent scripts (analytics, ads):", "font-weight: bold;");
+  console.log('%c<script src="analytics.js" async></script>', "font-family: monospace; color: #22c55e;");
+  console.log("");
+  console.log("%cFor ES modules:", "font-weight: bold;");
+  console.log('%c<script type="module" src="app.mjs"></script>', "font-family: monospace; color: #22c55e;");
+  console.log("");
+  console.log("%cFor critical inline scripts:", "font-weight: bold;");
+  console.log('%c<script>/* Only essential initialization */</script>', "font-family: monospace; color: #22c55e;");
+  console.groupEnd();
+
+  console.groupEnd();
+
+  const agentRating = blockingInHead.length === 0 ? "good" :
+    (blockingInHead.length <= 2 && thirdPartyBlocking.length === 0) ? "needs-improvement" : "poor";
+  return {
+    script: "Script-Loading",
+    status: "ok",
+    count: scripts.length,
+    rating: agentRating,
+    details: {
+      totalSizeBytes: totalSize,
+      byStrategy: {
+        blocking: blocking.length,
+        async: asyncScripts.length,
+        defer: deferScripts.length,
+        module: moduleScripts.length,
+      },
+      byParty: {
+        firstParty: firstPartyScripts.length,
+        thirdParty: thirdPartyScripts.length,
+      },
+      thirdPartyBlockingCount: thirdPartyBlocking.length,
+    },
+    items: scripts.map((s) => ({
+      url: s.src,
+      shortName: s.shortSrc,
+      strategy: s.strategy,
+      location: s.inHead ? "head" : "body",
+      party: s.firstParty ? "first" : "third",
+      sizeBytes: s.size,
+      durationMs: Math.round(s.duration),
+    })),
+    issues: issues.map((i) => ({ severity: i.severity, message: i.message })),
+  };
+})();