webperf-snippets 0.1.0 → 0.3.0

package/snippets/Loading/Find-render-blocking-resources.js

@@ -31,6 +31,15 @@
     })
     .sort((a, b) => b.responseEnd - a.responseEnd);
 
+  const lastBlockingEnd = blockingResources.length
+    ? Math.max(...blockingResources.map((r) => r.responseEnd))
+    : 0;
+  const totalSizeBytes = blockingResources.reduce((sum, r) => sum + r.size, 0);
+  const byType = blockingResources.reduce((acc, r) => {
+    acc[r.type] = (acc[r.type] || 0) + 1;
+    return acc;
+  }, {});
+
   console.group("%c🚧 Render-Blocking Resources", "font-weight: bold; font-size: 14px;");
 
   if (blockingResources.length === 0) {
@@ -45,14 +54,6 @@
     console.log("   • Scripts use async or defer attributes");
     console.log("   • Critical resources are optimized");
   } else {
-    // Calculate metrics
-    const lastBlockingEnd = Math.max(...blockingResources.map((r) => r.responseEnd));
-    const totalSize = blockingResources.reduce((sum, r) => sum + r.size, 0);
-    const byType = blockingResources.reduce((acc, r) => {
-      acc[r.type] = (acc[r.type] || 0) + 1;
-      return acc;
-    }, {});
-
     // Summary
     console.log(
       `%c⚠️ Found ${blockingResources.length} render-blocking resource(s)`,
@@ -63,8 +64,8 @@
     console.log("%c📊 Impact Summary:", "font-weight: bold;");
     console.log(`   Rendering blocked until: ${lastBlockingEnd.toFixed(0)}ms`);
     console.log(`   Total blocking resources: ${blockingResources.length}`);
-    if (totalSize > 0) {
-      const sizeKB = (totalSize / 1024).toFixed(1);
+    if (totalSizeBytes > 0) {
+      const sizeKB = (totalSizeBytes / 1024).toFixed(1);
       console.log(`   Total size: ${sizeKB} KB`);
     }
     console.log(`   By type: ${Object.entries(byType).map(([k, v]) => `${k} (${v})`).join(", ")}`);
@@ -134,9 +135,6 @@
 
   console.groupEnd();
 
-  const lastBlockingEnd = blockingResources.length ? Math.max(...blockingResources.map((r) => r.responseEnd)) : 0;
-  const totalSizeBytes = blockingResources.reduce((sum, r) => sum + r.size, 0);
-  const byType = blockingResources.reduce((acc, r) => { acc[r.type] = (acc[r.type] || 0) + 1; return acc; }, {});
   return {
     script: "Find-render-blocking-resources",
     status: "ok",

package/snippets/Loading/First-And-Third-Party-Script-Info.js

@@ -3,33 +3,37 @@
 
 (() => {
   // Auto-detect first-party: same root domain (handles subdomains)
+  // @shared getRootDomain
   function getRootDomain(hostname) {
-    const parts = hostname.split(".");
-    // Handle cases like co.uk, com.au, etc.
-    if (parts.length > 2) {
-      // Simple heuristic: if second-to-last part is short (co, com, org, net), take 3 parts
-      const sld = parts[parts.length - 2];
-      if (sld.length <= 3 && ["co", "com", "org", "net", "gov", "edu"].includes(sld)) {
-        return parts.slice(-3).join(".");
-      }
-      return parts.slice(-2).join(".");
-    }
-    return hostname;
+    const host = hostname.replace(/\.$/, "");
+    // An IP address has no registrable domain, so each address is its own root
+    if (/^\d{1,3}(\.\d{1,3}){3}$/.test(host) || host.includes(":")) return host;
+    const parts = host.split(".");
+    if (parts.length <= 2) return host;
+    // Country-code domains with a second-level suffix: example.co.uk, example.com.au, example.ac.jp
+    const secondLevelSuffixes = ["ac", "co", "com", "edu", "go", "gob", "gouv", "gov", "govt", "mil", "ne", "net", "nom", "or", "org", "sch"];
+    const tld = parts[parts.length - 1];
+    const sld = parts[parts.length - 2];
+    if (tld.length === 2 && secondLevelSuffixes.includes(sld)) return parts.slice(-3).join(".");
+    return parts.slice(-2).join(".");
   }
+  // @end-shared getRootDomain
 
-  const currentRootDomain = getRootDomain(location.hostname);
-
+  // @shared isFirstParty
   function isFirstParty(hostname) {
-    return getRootDomain(hostname) === currentRootDomain;
+    return getRootDomain(hostname) === getRootDomain(location.hostname);
   }
+  // @end-shared isFirstParty
 
+  // @shared formatBytes
   function formatBytes(bytes) {
-    if (!bytes || bytes === 0) return "N/A";
-    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];
+    if (bytes === null || bytes === undefined || Number.isNaN(bytes)) return "-";
+    if (bytes === 0) return "0 B";
+    const units = ["B", "KB", "MB", "GB"];
+    const i = Math.max(0, Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1));
+    return (bytes / Math.pow(1024, i)).toFixed(1) + " " + units[i];
   }
+  // @end-shared formatBytes
 
   // Gather script data
   const scripts = performance
@@ -46,6 +50,8 @@
         firstParty,
         duration: r.duration,
         transferSize: r.transferSize || 0,
+        // Cross-origin scripts without Timing-Allow-Origin report every size as 0
+        sizeKnown: r.transferSize > 0 || r.encodedBodySize > 0 || r.decodedBodySize > 0,
         startTime: r.startTime,
         responseEnd: r.responseEnd,
         renderBlocking: r.renderBlockingStatus === "blocking",
@@ -218,10 +224,19 @@
 
   console.groupEnd();
 
+  // The list keeps the 50 scripts to look at first (render-blocking, then third-party, then the largest); count and details cover all of them
+  const MAX_ITEMS = 50;
+  const rankedScripts = [...scripts].sort(
+    (a, b) =>
+      Number(b.renderBlocking) - Number(a.renderBlocking) ||
+      Number(a.firstParty) - Number(b.firstParty) ||
+      b.transferSize - a.transferSize
+  );
   return {
     script: "First-And-Third-Party-Script-Info",
     status: "ok",
     count: totalScripts,
+    corsLimitedAnalysis: scripts.some((s) => !s.sizeKnown),
     details: {
       firstPartyCount: firstParty.length,
       thirdPartyCount: thirdParty.length,
@@ -230,16 +245,21 @@
       thirdPartySizeBytes: thirdMetrics.totalSize,
       thirdPartyBlockingCount: thirdMetrics.blocking,
       thirdPartyHostCount: thirdMetrics.hosts.length,
+      sizeUnknownCount: scripts.filter((s) => !s.sizeKnown).length,
     },
-    items: scripts.map((s) => ({
+    items: rankedScripts.slice(0, MAX_ITEMS).map((s) => ({
       shortName: s.shortName,
       host: s.host,
       firstParty: s.firstParty,
       transferBytes: s.transferSize,
+      sizeKnown: s.sizeKnown,
       durationMs: Math.round(s.duration),
       renderBlocking: s.renderBlocking,
     })),
     issues: [
+      ...(scripts.some((s) => !s.sizeKnown)
+        ? [{ severity: "info", message: `${scripts.filter((s) => !s.sizeKnown).length} script(s) have an unknown size (missing Timing-Allow-Origin); size totals are a lower bound` }]
+        : []),
       ...(thirdMetrics.blocking > 0
         ? [
             {

package/snippets/Loading/First-And-Third-Party-Script-Timings.js

@@ -3,23 +3,27 @@
 
 (() => {
   // Auto-detect first-party by root domain
+  // @shared getRootDomain
   function getRootDomain(hostname) {
-    const parts = hostname.split(".");
-    if (parts.length > 2) {
-      const sld = parts[parts.length - 2];
-      if (sld.length <= 3 && ["co", "com", "org", "net", "gov", "edu"].includes(sld)) {
-        return parts.slice(-3).join(".");
-      }
-      return parts.slice(-2).join(".");
-    }
-    return hostname;
+    const host = hostname.replace(/\.$/, "");
+    // An IP address has no registrable domain, so each address is its own root
+    if (/^\d{1,3}(\.\d{1,3}){3}$/.test(host) || host.includes(":")) return host;
+    const parts = host.split(".");
+    if (parts.length <= 2) return host;
+    // Country-code domains with a second-level suffix: example.co.uk, example.com.au, example.ac.jp
+    const secondLevelSuffixes = ["ac", "co", "com", "edu", "go", "gob", "gouv", "gov", "govt", "mil", "ne", "net", "nom", "or", "org", "sch"];
+    const tld = parts[parts.length - 1];
+    const sld = parts[parts.length - 2];
+    if (tld.length === 2 && secondLevelSuffixes.includes(sld)) return parts.slice(-3).join(".");
+    return parts.slice(-2).join(".");
   }
+  // @end-shared getRootDomain
 
-  const currentRootDomain = getRootDomain(location.hostname);
-
+  // @shared isFirstParty
   function isFirstParty(hostname) {
-    return getRootDomain(hostname) === currentRootDomain;
+    return getRootDomain(hostname) === getRootDomain(location.hostname);
   }
+  // @end-shared isFirstParty
 
   // Gather script timing data
   const scripts = performance
@@ -272,10 +276,14 @@
 
   console.groupEnd();
 
+  // The list keeps the 50 slowest scripts; count and details cover all of them
+  const MAX_ITEMS = 50;
+  const slowestScripts = [...scripts].sort((a, b) => b.total - a.total);
   return {
     script: "First-And-Third-Party-Script-Timings",
     status: "ok",
     count: scripts.length,
+    corsLimitedAnalysis: thirdStats.withoutTiming > 0,
     details: {
       firstPartyCount: firstParty.length,
       thirdPartyCount: thirdParty.length,
@@ -284,7 +292,7 @@
       firstPartyAvgTotalMs: Math.round(firstStats.stats.total?.avg || 0),
       thirdPartyAvgTotalMs: Math.round(thirdStats.stats.total?.avg || 0),
     },
-    items: scripts.map(s => ({ shortName: s.shortName, host: s.host, firstParty: s.firstParty, totalMs: Math.round(s.total), dnsMs: Math.round(s.dns), tcpMs: Math.round(s.tcp), requestMs: Math.round(s.request), responseMs: Math.round(s.response), hasTiming: s.hasTiming })),
+    items: slowestScripts.slice(0, MAX_ITEMS).map(s => ({ shortName: s.shortName, host: s.host, firstParty: s.firstParty, totalMs: Math.round(s.total), dnsMs: Math.round(s.dns), tcpMs: Math.round(s.tcp), requestMs: Math.round(s.request), responseMs: Math.round(s.response), hasTiming: s.hasTiming })),
     issues: [
       ...(slowScripts.length > 0 ? [{ severity: "warning", message: `${slowScripts.length} script(s) take over ${slowThreshold}ms to load` }] : []),
       ...(hasSlowDns ? [{ severity: "warning", message: "Slow DNS lookups detected (>100ms). Add dns-prefetch or preconnect." }] : []),

package/snippets/Loading/Fonts-Preloaded-Loaded-and-used-above-the-fold.js

@@ -12,10 +12,32 @@
     }
   }
 
-  // Check if URL is third-party
+  // @shared getRootDomain
+  function getRootDomain(hostname) {
+    const host = hostname.replace(/\.$/, "");
+    // An IP address has no registrable domain, so each address is its own root
+    if (/^\d{1,3}(\.\d{1,3}){3}$/.test(host) || host.includes(":")) return host;
+    const parts = host.split(".");
+    if (parts.length <= 2) return host;
+    // Country-code domains with a second-level suffix: example.co.uk, example.com.au, example.ac.jp
+    const secondLevelSuffixes = ["ac", "co", "com", "edu", "go", "gob", "gouv", "gov", "govt", "mil", "ne", "net", "nom", "or", "org", "sch"];
+    const tld = parts[parts.length - 1];
+    const sld = parts[parts.length - 2];
+    if (tld.length === 2 && secondLevelSuffixes.includes(sld)) return parts.slice(-3).join(".");
+    return parts.slice(-2).join(".");
+  }
+  // @end-shared getRootDomain
+
+  // @shared isFirstParty
+  function isFirstParty(hostname) {
+    return getRootDomain(hostname) === getRootDomain(location.hostname);
+  }
+  // @end-shared isFirstParty
+
+  // Check if URL is third-party (a different root domain)
   function isThirdParty(url) {
     try {
-      return new URL(url).hostname !== location.hostname;
+      return !isFirstParty(new URL(url).hostname);
     } catch {
       return false;
     }
@@ -305,9 +327,18 @@
       usedAboveFoldCount: usedFonts.length,
       preloadedNotUsedCount: preloadedNotUsed.length,
       usedNotPreloadedCount: usedNotPreloaded.length,
+      // The preload links themselves (at most 20)
+      preloadedFonts: preloadedFonts.slice(0, 20).map(f => ({
+        family: f.name.replace(/\.(woff2?|ttf|otf|eot)$/i, ""),
+        href: f.href,
+        fontType: f.type,
+        crossorigin: f.crossorigin || "",
+        thirdParty: f.thirdParty,
+      })),
     },
-    items: uniqueLoadedFonts.map(f => ({ family: f.family, weight: f.weight, style: f.style, display: f.display })),
-  usedFonts: usedFonts.map(f => ({ family: f.family, weight: f.weight, style: f.style, elements: f.elements })),
+    // The Visualizer reads items (loaded fonts) and usedFonts
+    items: uniqueLoadedFonts.slice(0, 50).map(f => ({ family: f.family, weight: f.weight, style: f.style, display: f.display })),
+    usedFonts: usedFonts.slice(0, 50).map(f => ({ family: f.family, weight: f.weight, style: f.style, elements: f.elements })),
     issues: [
       ...preloadedNotUsed.map(f => ({ severity: "warning", message: `Preloaded but not used above fold: ${f.name}` })),
       ...usedNotPreloaded.map(f => ({ severity: "warning", message: `Used above fold but not preloaded: ${f.family} (${f.weight})` })),

package/snippets/Loading/Inline-CSS-Info-and-Size.js

@@ -2,13 +2,15 @@
 // https://webperf-snippets.nucliweb.net
 
 (() => {
-  const formatBytes = (bytes) => {
+  // @shared formatBytes
+  function formatBytes(bytes) {
+    if (bytes === null || bytes === undefined || Number.isNaN(bytes)) return "-";
     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];
-  };
+    const units = ["B", "KB", "MB", "GB"];
+    const i = Math.max(0, Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1));
+    return (bytes / Math.pow(1024, i)).toFixed(1) + " " + units[i];
+  }
+  // @end-shared formatBytes
 
   const formatKB = (bytes) => (bytes / 1024).toFixed(2);
 

package/snippets/Loading/Inline-Script-Info-and-Size.js

@@ -2,13 +2,15 @@
 // https://webperf-snippets.nucliweb.net
 
 (() => {
-  const formatBytes = (bytes) => {
+  // @shared formatBytes
+  function formatBytes(bytes) {
+    if (bytes === null || bytes === undefined || Number.isNaN(bytes)) return "-";
     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];
-  };
+    const units = ["B", "KB", "MB", "GB"];
+    const i = Math.max(0, Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1));
+    return (bytes / Math.pow(1024, i)).toFixed(1) + " " + units[i];
+  }
+  // @end-shared formatBytes
 
   const formatKB = (bytes) => (bytes / 1024).toFixed(2);
 
@@ -305,6 +307,11 @@
 
   console.groupEnd();
 
+  // The list keeps the 50 largest executable scripts, parser-blocking ones first; count and details cover all of them
+  const MAX_ITEMS = 50;
+  const rankedScripts = [...executableScripts].sort(
+    (a, b) => Number(b.isParserBlocking) - Number(a.isParserBlocking) || b.size - a.size
+  );
   return {
     script: "Inline-Script-Info-and-Size",
     status: "ok",
@@ -317,7 +324,7 @@
       parserBlockingCount: parserBlockingScripts.length,
       parserBlockingInHeadCount: parserBlockingInHead.length,
     },
-    items: executableScripts.map(s => ({ index: s.index, sizeBytes: s.size, category: s.category, inHead: s.inHead, isParserBlocking: s.isParserBlocking, isAnalytics: s.isAnalytics, isConfig: s.isConfig })),
+    items: rankedScripts.slice(0, MAX_ITEMS).map(s => ({ index: s.index, sizeBytes: s.size, category: s.category, inHead: s.inHead, isParserBlocking: s.isParserBlocking, isAnalytics: s.isAnalytics, isConfig: s.isConfig })),
     issues: issues.map(i => ({ severity: i.type === "blocking" ? "error" : "warning", message: i.message })),
   };
 })();

package/snippets/Loading/JS-Execution-Time-Breakdown.js

@@ -3,13 +3,15 @@
 
 (() => {
   const formatMs = (ms) => (ms > 0 ? ms.toFixed(0) + "ms" : "-");
-  const formatBytes = (bytes) => {
-    if (!bytes || bytes === 0) return "-";
-    const k = 1024;
-    const sizes = ["B", "KB", "MB"];
-    const i = Math.floor(Math.log(Math.max(bytes, 1)) / Math.log(k));
-    return (bytes / Math.pow(k, i)).toFixed(1) + " " + sizes[i];
-  };
+  // @shared formatBytes
+  function formatBytes(bytes) {
+    if (bytes === null || bytes === undefined || Number.isNaN(bytes)) return "-";
+    if (bytes === 0) return "0 B";
+    const units = ["B", "KB", "MB", "GB"];
+    const i = Math.max(0, Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1));
+    return (bytes / Math.pow(1024, i)).toFixed(1) + " " + units[i];
+  }
+  // @end-shared formatBytes
   const formatBar = (value, max, width = 16) => {
     if (value <= 0 || max <= 0) return "░".repeat(width);
     const filled = Math.min(Math.round((value / max) * width), width);
@@ -100,6 +102,10 @@
   // Large script threshold (50KB compressed = good candidate for splitting)
   const SPLIT_THRESHOLD = 50 * 1024;
   const splitCandidates = scripts.filter((s) => s.decodedSize > SPLIT_THRESHOLD);
+  // Bundles over 1 MB decoded; declared here because the console output and the return use it
+  const criticalBundles = scripts
+    .filter((s) => !s.corsRestricted && s.decodedSize > 1024 * 1024)
+    .sort((a, b) => b.decodedSize - a.decodedSize);
 
   // 5. Output
   console.group(
@@ -195,7 +201,6 @@
     }
 
     // Critical bundle warning (> 1 MB decoded)
-    const criticalBundles = scripts.filter((s) => !s.corsRestricted && s.decodedSize > 1024 * 1024);
     if (criticalBundles.length > 0) {
       console.log("");
       console.log("%c🚨 Critically large bundles (> 1 MB decoded):", "color: #ef4444; font-weight: bold;");
@@ -313,6 +318,7 @@
     script: "JS-Execution-Time-Breakdown",
     status: "ok",
     count: scripts.length,
+    corsLimitedAnalysis: scripts.some((s) => s.corsRestricted),
     details: {
       blockingCount: blocking.length,
       nonBlockingCount: nonBlocking.length,
@@ -324,13 +330,20 @@
       domInteractiveMs: Math.round(domInteractive),
       domContentLoadedMs: Math.round(domContentLoaded),
       loadEventMs: Math.round(loadEvent),
+      criticalBundles: criticalBundles.slice(0, 20).map((s) => ({
+        shortName: s.shortName,
+        decodedBytes: s.decodedSize,
+        transferBytes: s.transferSize,
+        estimatedParseMobileMs: s.estimatedParseMobile,
+        estimatedParseDesktopMs: s.estimatedParseDesktop,
+      })),
     },
     items: scripts.slice(0, 50).map(s => ({ shortName: s.shortName, isBlocking: s.isBlocking, downloadMs: Math.round(s.downloadDuration), estimatedParseMobileMs: s.estimatedParseMobile, transferBytes: s.transferSize, decodedBytes: s.decodedSize, corsRestricted: s.corsRestricted })),
     issues: [
       ...(blocking.length > 0 ? [{ severity: "error", message: `${blocking.length} render-blocking script(s) delay HTML parsing` }] : []),
       ...(hasHighParseTime ? [{ severity: "warning", message: `High estimated parse cost (~${Math.round(totalEstParse)}ms on mobile)` }] : []),
-      ...(splitCandidates.length > 0 ? [{ severity: "warning", message: `${splitCandidates.length} script(s) over 50KB decoded — consider code splitting` }] : []),
-      ...(poorCompression ? [{ severity: "warning", message: `Low compression ratio (${compressionRatio.toFixed(1)}x) — enable Brotli/gzip` }] : []),
+      ...(splitCandidates.length > 0 ? [{ severity: "warning", message: `${splitCandidates.length} script(s) over 50KB decoded. Consider code splitting.` }] : []),
+      ...(poorCompression ? [{ severity: "warning", message: `Low compression ratio (${compressionRatio.toFixed(1)}x). Enable Brotli or gzip.` }] : []),
     ],
   };
 })();

package/snippets/Loading/Priority-Hints-Audit.js

@@ -331,6 +331,9 @@
       fetchpriority: el.getAttribute("fetchpriority"),
       resource: (el.src || el.href || el.getAttribute("href") || "").split("/").pop()?.split("?")[0] || "",
     })),
-    issues: issues.map(i => ({ severity: i.severity, message: i.message })),
+    issues: issues.map(i => ({
+      severity: i.severity,
+      message: i.fix ? `${i.message.replace(/\.$/, "")}. Fix: ${i.fix}` : i.message,
+    })),
   };
 })();

package/snippets/Loading/Resource-Hints-Validation.js

@@ -494,6 +494,21 @@
       missingPreconnects: missingHints.length,
       redundantHints: redundantDomains.length,
     },
+    // Origins that need a hint, and those with a redundant dns-prefetch (at most 50)
+    items: [
+      ...missingHints.map(([domain, count]) => ({
+        domain,
+        requestCount: count,
+        action: count >= 5 ? "add-preconnect" : "add-dns-prefetch",
+        recommendedHint: count >= 5 ? "preconnect" : "dns-prefetch",
+      })),
+      ...redundantDomains.map((domain) => ({
+        domain,
+        requestCount: domainRequestCounts[domain] || 0,
+        action: "remove-dns-prefetch",
+        recommendedHint: "preconnect",
+      })),
+    ].slice(0, 50),
     issues: [
       ...(totalIssues > 0 ? [{ severity: "warning", message: `${totalIssues} unused hint(s) waste bandwidth` }] : []),
       ...(missingHints.length > 0 ? [{ severity: "info", message: `${missingHints.length} domain(s) could benefit from connection hints` }] : []),

package/snippets/Loading/Resource-Hints.js

@@ -2,13 +2,15 @@
 // 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];
-  };
+  // @shared formatBytes
+  function formatBytes(bytes) {
+    if (bytes === null || bytes === undefined || Number.isNaN(bytes)) return "-";
+    if (bytes === 0) return "0 B";
+    const units = ["B", "KB", "MB", "GB"];
+    const i = Math.max(0, Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1));
+    return (bytes / Math.pow(1024, i)).toFixed(1) + " " + units[i];
+  }
+  // @end-shared formatBytes
 
   // Resource hint definitions
   const hintTypes = [
@@ -171,6 +173,8 @@
 
   // Get third-party origins that could benefit from preconnect
   const thirdPartyOrigins = new Map();
+  // Third-party resources without Timing-Allow-Origin report every size as 0
+  let sizeUnknownCount = 0;
   loadedResources.forEach((r) => {
     try {
       const url = new URL(r.name);
@@ -181,6 +185,7 @@
         const data = thirdPartyOrigins.get(url.origin);
         data.count++;
         data.size += r.transferSize || 0;
+        if (r.transferSize === 0 && r.encodedBodySize === 0 && r.decodedBodySize === 0 && r.duration > 0) sizeUnknownCount++;
         data.types.add(r.initiatorType);
       }
     } catch {}
@@ -386,15 +391,31 @@
 
   console.groupEnd();
 
+  // The list keeps 50 hints: those with an error or a warning first, then in document order; count and details cover all of them
+  const MAX_ITEMS = 50;
+  const hintRank = (h) => (issues.some((i) => i.hint === h && i.severity === "error") ? 0 : issues.some((i) => i.hint === h) ? 1 : 2);
+  const rankedHints = allHints
+    .map((h, index) => ({ h, index }))
+    .sort((a, b) => hintRank(a.h) - hintRank(b.h) || a.index - b.index)
+    .map(({ h }) => h);
   return {
     script: "Resource-Hints",
     status: "ok",
     count: allHints.length,
+    corsLimitedAnalysis: sizeUnknownCount > 0,
     details: {
+      sizeUnknownCount,
       byType: Object.fromEntries(hintTypes.map(t => [t.rel, allHints.filter(h => h.rel === t.rel).length])),
       missingPreconnectsCount: missingPreconnects.length,
+      missingPreconnects: missingPreconnects.slice(0, 20).map((o) => ({
+        origin: o.origin,
+        requestCount: o.count,
+        sizeBytes: o.size,
+        resourceTypes: Array.from(o.types),
+        recommendedHint: "preconnect",
+      })),
     },
-    items: allHints.map(h => ({ rel: h.rel, href: h.shortHref, as: h.as, crossorigin: h.crossorigin, fetchpriority: h.fetchpriority })),
+    items: rankedHints.slice(0, MAX_ITEMS).map(h => ({ rel: h.rel, href: h.shortHref, as: h.as, crossorigin: h.crossorigin, fetchpriority: h.fetchpriority })),
     issues: issues.map(i => ({ severity: i.severity, message: `${i.hint.rel}: ${i.issue}. Fix: ${i.fix}` })),
   };
 })();

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

@@ -2,13 +2,15 @@
 // https://webperf-snippets.nucliweb.net
 
 (() => {
-  const formatBytes = (bytes) => {
+  // @shared formatBytes
+  function formatBytes(bytes) {
+    if (bytes === null || bytes === undefined || Number.isNaN(bytes)) return "-";
     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];
-  };
+    const units = ["B", "KB", "MB", "GB"];
+    const i = Math.max(0, Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1));
+    return (bytes / Math.pow(1024, i)).toFixed(1) + " " + units[i];
+  }
+  // @end-shared formatBytes
 
   // Framework detection patterns
   const frameworks = [
@@ -168,8 +170,18 @@
   console.log(`   Total hydration data: ${formatBytes(totalHydrationSize)}`);
   console.log(`   Other inline scripts: ${formatBytes(otherSize)}`);
 
+  // Structured findings for the return value
+  const itemsData = [];
+  const issuesData = [];
+
   // Detailed analysis for each framework
   detected.forEach((fw) => {
+    if (fw.exceedsThreshold) {
+      issuesData.push({
+        severity: "warning",
+        message: `${fw.name} hydration data (${Math.round(fw.size / 1024)} KB) exceeds ${Math.round(fw.threshold / 1024)} KB threshold`,
+      });
+    }
     console.log("");
     console.group(
       `%c${fw.exceedsThreshold ? "🔴" : "🟢"} ${fw.name} Analysis`,
@@ -256,6 +268,46 @@
             );
           }
 
+          // Key paths that look sensitive. Only keys are checked: a value that contains
+          // the word "token" is not a sign of leaked data.
+          const sensitiveKeys = [];
+          const findSensitiveKeys = (obj, path, depth) => {
+            if (typeof obj !== "object" || obj === null || depth > 4) return;
+            for (const key of Object.keys(obj)) {
+              const fullPath = path ? `${path}.${key}` : key;
+              if (sensitivePatterns.test(key)) sensitiveKeys.push(fullPath);
+              findSensitiveKeys(obj[key], fullPath, depth + 1);
+            }
+          };
+          findSensitiveKeys(pageProps, "", 0);
+
+          propsKeys.forEach((key) => {
+            const flags = [];
+            if (largeArrays.includes(key)) flags.push("large-array");
+            if (checkDepth(pageProps[key])) flags.push("deeply-nested");
+            if (sensitiveKeys.some((k) => k === key || k.startsWith(`${key}.`))) flags.push("sensitive-key");
+            itemsData.push({
+              framework: "Next.js",
+              kind: "prop",
+              name: key,
+              sizeBytes: new Blob([JSON.stringify(pageProps[key])]).size,
+              flags,
+              detail: null,
+            });
+          });
+          if (largeArrays.length > 0) {
+            issuesData.push({ severity: "warning", message: `pageProps has large arrays (${largeArrays.join(", ")}). Consider pagination.` });
+          }
+          if (checkDepth(pageProps)) {
+            issuesData.push({ severity: "warning", message: "pageProps contains deeply nested data (more than 5 levels)." });
+          }
+          if (sensitiveKeys.length > 0) {
+            issuesData.push({
+              severity: "warning",
+              message: `pageProps has keys that look sensitive (${sensitiveKeys.slice(0, 5).join(", ")}). Everything in pageProps is sent to every visitor.`,
+            });
+          }
+
           if (
             largeArrays.length === 0 &&
             !checkDepth(pageProps) &&
@@ -293,6 +345,21 @@
         };
       });
       console.table(islandTable);
+
+      fw.elements.forEach((island) => {
+        const props = island.getAttribute("props");
+        itemsData.push({
+          framework: "Astro",
+          kind: "island",
+          name: island.getAttribute("component-url")?.split("/").pop() || "Unknown",
+          sizeBytes: props ? new Blob([props]).size : 0,
+          flags: [],
+          detail:
+            island.getAttribute("client") ||
+            Array.from(island.attributes).find((a) => a.name.startsWith("client:"))?.name.replace("client:", "") ||
+            "unknown",
+        });
+      });
     }
 
     // Element reference
@@ -357,8 +424,10 @@
       totalHydrationBytes: totalHydrationSize,
       otherInlineBytes: otherSize,
       hasExceedingThreshold: detected.some(d => d.exceedsThreshold),
+      frameworks: detected.map(fw => ({ name: fw.name, sizeBytes: fw.size, thresholdBytes: fw.threshold, exceedsThreshold: fw.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` })),
+    // Props and islands, the biggest first (at most 30)
+    items: itemsData.sort((a, b) => b.sizeBytes - a.sizeBytes).slice(0, 30),
+    issues: issuesData,
   };
 })();