webperf-snippets 0.2.0 → 0.4.0

package/snippets/Loading/Event-Processing-Time.js

@@ -18,6 +18,12 @@
   new PerformanceObserver((list) => {
     const [entry] = list.getEntries();
 
+    // loadEventEnd is 0 until the load event finishes: the phases would be meaningless
+    if (!entry.loadEventEnd) {
+      console.log("%c⏳ The page is still loading. Run this snippet again after the load event.", "color: #f59e0b;");
+      return;
+    }
+
     const formatMs = (ms) => ms.toFixed(2) + " ms";
     const formatBar = (ms, total) => {
       const pct = total > 0 ? (ms / total) * 100 : 0;
@@ -104,7 +110,7 @@
     // Key milestones
     console.log("");
     console.log("%cKey Milestones:", "font-weight: bold;");
-    console.log(`   TTFB (Time to First Byte): ${entry.responseStart.toFixed(0)}ms`);
+    console.log(`   TTFB (Time to First Byte): ${Math.max(0, entry.responseStart - (entry.activationStart || 0)).toFixed(0)}ms`);
     console.log(`   DOMContentLoaded: ${entry.domContentLoadedEventEnd.toFixed(0)}ms`);
     console.log(`   Load Complete: ${entry.loadEventEnd.toFixed(0)}ms`);
 
@@ -142,6 +148,13 @@
   // Synchronous return for agent
   const [navSync] = performance.getEntriesByType("navigation");
   if (!navSync) return { script: "Event-Processing-Time", status: "error", error: "No navigation entry" };
+  if (!navSync.loadEventEnd) {
+    return {
+      script: "Event-Processing-Time",
+      status: "tracking",
+      message: "The page is still loading. Run this snippet again after the load event.",
+    };
+  }
   const totalTimeSync = navSync.loadEventEnd - navSync.startTime;
   const networkTimeSync = (navSync.responseEnd || 0) - navSync.startTime;
   const ratingSync = totalTimeSync <= 2500 ? "good" : totalTimeSync <= 4000 ? "needs-improvement" : "poor";
@@ -169,7 +182,7 @@
     details: {
       networkTimeMs: Math.round(networkTimeSync),
       processingTimeMs: Math.round(totalTimeSync - networkTimeSync),
-      ttfbMs: Math.round(navSync.responseStart),
+      ttfbMs: Math.round(Math.max(0, navSync.responseStart - (navSync.activationStart || 0))),
       domContentLoadedMs: Math.round(navSync.domContentLoadedEventEnd),
       loadCompleteMs: Math.round(navSync.loadEventEnd),
       phases: Object.fromEntries(phasesSync.map((p) => [p.key, { value: Math.round(p.duration), unit: "ms" }])),

package/snippets/Loading/FCP.js

@@ -18,12 +18,14 @@
     const fcpEntry = list.getEntriesByName("first-contentful-paint")[0];
     if (!fcpEntry) return;
 
-    const fcpTime = fcpEntry.startTime;
+    const navEntry = performance.getEntriesByType("navigation")[0];
+    // Prerendered pages: measure from activation, not from the start of the prerender
+    const activationStart = navEntry?.activationStart || 0;
+    const fcpTime = Math.max(0, fcpEntry.startTime - activationStart);
     const rating = valueToRating(fcpTime);
     const { icon, color } = RATING[rating];
 
-    const navEntry = performance.getEntriesByType("navigation")[0];
-    const ttfb = navEntry?.responseStart ?? 0;
+    const ttfb = Math.max(0, (navEntry?.responseStart ?? 0) - activationStart);
 
     // Render-blocking resources (Chrome 107+, requires renderBlockingStatus API)
     const resources = performance.getEntriesByType("resource");
@@ -32,7 +34,7 @@
     );
 
     const lastBlockingEnd = blockingResources.length
-      ? Math.max(...blockingResources.map((r) => r.responseEnd))
+      ? Math.max(...blockingResources.map((r) => r.responseEnd)) - activationStart
       : ttfb;
 
     console.group(
@@ -87,8 +89,25 @@
   // Synchronous return for agent
   const fcpEntrySync = performance.getEntriesByName("first-contentful-paint")[0];
   if (!fcpEntrySync) return { script: "FCP", status: "error", error: "No FCP entry yet" };
-  const fcpTimeSync = fcpEntrySync.startTime;
+  const navEntrySync = performance.getEntriesByType("navigation")[0];
+  const activationStartSync = navEntrySync?.activationStart || 0;
+  const fcpTimeSync = Math.max(0, fcpEntrySync.startTime - activationStartSync);
   const ratingSync = valueToRating(fcpTimeSync);
+
+  // Phases, measured from activation like the value: TTFB, then the wait for the last
+  // render-blocking resource, then the rest until the paint
+  const ttfbSync = Math.max(0, (navEntrySync?.responseStart ?? 0) - activationStartSync);
+  const blockingSync = performance
+    .getEntriesByType("resource")
+    .filter((r) => r.renderBlockingStatus === "blocking");
+  const lastBlockingEndSync = Math.max(
+    ttfbSync,
+    ...blockingSync.map((r) => r.responseEnd - activationStartSync)
+  );
+  const ttfbMs = Math.round(ttfbSync);
+  const renderBlockingLoadMs = Math.round(lastBlockingEndSync - ttfbSync);
+  const renderDelayMs = Math.max(0, Math.round(fcpTimeSync) - ttfbMs - renderBlockingLoadMs);
+
   return {
     script: "FCP",
     status: "ok",
@@ -97,5 +116,20 @@
     unit: "ms",
     rating: ratingSync,
     thresholds: { good: 1800, needsImprovement: 3000 },
+    details: {
+      ttfbMs,
+      renderBlockingLoadMs,
+      renderDelayMs,
+      blockingResourceCount: blockingSync.length,
+    },
+    // Render-blocking resources, the last to finish first (at most 50)
+    items: [...blockingSync]
+      .sort((a, b) => b.responseEnd - a.responseEnd)
+      .slice(0, 50)
+      .map((r) => ({
+        url: r.name.split("/").pop().split("?")[0] || r.name,
+        type: r.initiatorType === "link" ? "CSS" : "JS",
+        durationMs: Math.round(r.duration),
+      })),
   };
 })();

package/snippets/Loading/Find-Above-The-Fold-Lazy-Loaded-Images.js

@@ -246,7 +246,7 @@
       selector: image.selector,
       lazyType: image.lazyType,
       dimensions: image.dimensions,
-      position: image.position,
+      position: `${image.position.top}px, ${image.position.left}px`,
       distanceFromEdge: image.distanceFromEdge,
       src: image.src,
       srcset: image.srcset,

package/snippets/Loading/Find-non-Lazy-Loaded-Images-outside-of-the-viewport.js

@@ -78,13 +78,15 @@
     return 0;
   }
 
+  // @shared formatBytes
   function formatBytes(bytes) {
-    if (bytes === 0) return "0 Bytes";
-    const k = 1024;
-    const sizes = ["Bytes", "KB", "MB", "GB"];
-    const i = Math.floor(Math.log(bytes) / Math.log(k));
-    return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + " " + 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
 
   // Find LCP candidate (largest visible image) to exclude from recommendations
   const allViewportImages = Array.from(document.querySelectorAll("img")).filter(

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

@@ -2,34 +2,55 @@
 // https://webperf-snippets.nucliweb.net
 
 (() => {
+  // Domains that belong to the site but differ from the page's root domain, such as its own CDN.
+  // They count as first party. Example: const OWN_DOMAINS = ["bbci.co.uk", "bbc.co.uk"];
+  const OWN_DOMAINS = [];
+
   // 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;
+    const root = getRootDomain(hostname);
+    if (root === getRootDomain(location.hostname)) return true;
+    return OWN_DOMAINS.some((d) => getRootDomain(String(d).trim().toLowerCase().replace(/^[a-z]+:\/\//, "").split("/")[0]) === root);
+  }
+  // @end-shared isFirstParty
+
+  // @shared logOwnDomainsHint
+  function logOwnDomainsHint(thirdPartyCount) {
+    if (OWN_DOMAINS.length === 0 && thirdPartyCount > 0) {
+      console.log(
+        '%cℹ️ OWN_DOMAINS is empty. If this site serves its own assets from other domains (for example a CDN), add them at the top of the snippet, such as const OWN_DOMAINS = ["cdn.example.net"];, and run it again so they count as first party.',
+        "color: #3b82f6;"
+      );
+    }
   }
+  // @end-shared logOwnDomainsHint
 
+  // @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 +67,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",
@@ -216,12 +239,22 @@
     console.groupEnd();
   }
 
+  logOwnDomainsHint(thirdParty.length);
   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 +263,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

@@ -2,24 +2,45 @@
 // https://webperf-snippets.nucliweb.net
 
 (() => {
+  // Domains that belong to the site but differ from the page's root domain, such as its own CDN.
+  // They count as first party. Example: const OWN_DOMAINS = ["bbci.co.uk", "bbc.co.uk"];
+  const OWN_DOMAINS = [];
+
   // 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;
+    const root = getRootDomain(hostname);
+    if (root === getRootDomain(location.hostname)) return true;
+    return OWN_DOMAINS.some((d) => getRootDomain(String(d).trim().toLowerCase().replace(/^[a-z]+:\/\//, "").split("/")[0]) === root);
   }
+  // @end-shared isFirstParty
+
+  // @shared logOwnDomainsHint
+  function logOwnDomainsHint(thirdPartyCount) {
+    if (OWN_DOMAINS.length === 0 && thirdPartyCount > 0) {
+      console.log(
+        '%cℹ️ OWN_DOMAINS is empty. If this site serves its own assets from other domains (for example a CDN), add them at the top of the snippet, such as const OWN_DOMAINS = ["cdn.example.net"];, and run it again so they count as first party.',
+        "color: #3b82f6;"
+      );
+    }
+  }
+  // @end-shared logOwnDomainsHint
 
   // Gather script timing data
   const scripts = performance
@@ -47,6 +68,12 @@
         timings.tcp = r.secureConnectionStart - r.connectStart;
       }
 
+      // Without Timing-Allow-Origin the browser reports the phases as 0, so response would be
+      // the whole duration since the epoch. Only the total is real, the phases are unknown.
+      if (!hasTiming) {
+        for (const phase of ["dns", "tcp", "tls", "request", "response"]) timings[phase] = null;
+      }
+
       return {
         name: r.name,
         shortName: url.pathname.split("/").pop() || url.hostname,
@@ -92,6 +119,7 @@
   const thirdStats = calcStats(thirdParty);
 
   // Format helpers
+  const roundOrNull = (ms) => (ms === null ? null : Math.round(ms));
   const formatMs = (ms) => (ms > 0 ? ms.toFixed(1) + "ms" : "-");
   const formatBar = (value, max) => {
     if (value <= 0 || max <= 0) return "";
@@ -270,12 +298,17 @@
     console.groupEnd();
   }
 
+  logOwnDomainsHint(thirdParty.length);
   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 +317,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: roundOrNull(s.dns), tcpMs: roundOrNull(s.tcp), requestMs: roundOrNull(s.request), responseMs: roundOrNull(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

@@ -2,6 +2,10 @@
 // https://webperf-snippets.nucliweb.net
 
 (() => {
+  // Domains that belong to the site but differ from the page's root domain, such as its own CDN.
+  // They count as first party. Example: const OWN_DOMAINS = ["bbci.co.uk", "bbc.co.uk"];
+  const OWN_DOMAINS = [];
+
   // Helper to extract font filename from URL
   function getFontName(url) {
     try {
@@ -12,10 +16,45 @@
     }
   }
 
-  // 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) {
+    const root = getRootDomain(hostname);
+    if (root === getRootDomain(location.hostname)) return true;
+    return OWN_DOMAINS.some((d) => getRootDomain(String(d).trim().toLowerCase().replace(/^[a-z]+:\/\//, "").split("/")[0]) === root);
+  }
+  // @end-shared isFirstParty
+
+  // @shared logOwnDomainsHint
+  function logOwnDomainsHint(thirdPartyCount) {
+    if (OWN_DOMAINS.length === 0 && thirdPartyCount > 0) {
+      console.log(
+        '%cℹ️ OWN_DOMAINS is empty. If this site serves its own assets from other domains (for example a CDN), add them at the top of the snippet, such as const OWN_DOMAINS = ["cdn.example.net"];, and run it again so they count as first party.',
+        "color: #3b82f6;"
+      );
+    }
+  }
+  // @end-shared logOwnDomainsHint
+
+  // 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;
     }
@@ -291,6 +330,7 @@
   console.log("4. Self-host fonts when possible for better control");
   console.log("5. Subset fonts to include only needed characters");
   console.log("6. Use WOFF2 format for best compression");
+  logOwnDomainsHint(preloadedFonts.filter((f) => f.thirdParty).length);
   console.groupEnd();
 
   console.groupEnd();
@@ -305,9 +345,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,
+    })),
   };
 })();