webperf-snippets 0.2.0 → 0.4.0

package/snippets/Loading/CSS-Media-Queries-Analysis.js

@@ -54,13 +54,15 @@ async function analyzeCSSMediaQueries(minWidth = 768) {
   }
 
   // Helper to format bytes
+  // @shared formatBytes
   function formatBytes(bytes) {
-    if (bytes === 0) return "0 Bytes";
-    const k = 1024;
-    const sizes = ["Bytes", "KB", "MB"];
-    const i = Math.floor(Math.log(bytes) / Math.log(k));
-    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + 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
 
   // Parse CSS text to find @media rules
   function parseMediaQueriesFromCSS(cssText, source, isInline) {
@@ -254,8 +256,60 @@ async function analyzeCSSMediaQueries(minWidth = 768) {
 // CSS Performance Impact Analyzer
 // Estimates the real-world performance cost of unnecessary CSS on mobile devices
 
+// Device profiles based on real Chrome UX Report data. A function, not a top-level const, so
+// the snippet can be run again in the same console.
+function getDeviceProfiles() {
+  return {
+    "High-end (Pixel 7, iPhone 14)": {
+      cssParsingSpeed: 1.5, // MB/s
+      cssSelectorMatchingMultiplier: 1.0,
+      networkSpeed: 10, // Mbps (4G LTE)
+      description: "Top 25% devices",
+    },
+    "Mid-range (Moto G Power, iPhone SE)": {
+      cssParsingSpeed: 0.8, // MB/s
+      cssSelectorMatchingMultiplier: 1.8,
+      networkSpeed: 5, // Mbps (4G)
+      description: "Median mobile device",
+    },
+    "Low-end (Moto E, older devices)": {
+      cssParsingSpeed: 0.3, // MB/s
+      cssSelectorMatchingMultiplier: 3.5,
+      networkSpeed: 2, // Mbps (3G/slow 4G)
+      description: "Bottom 25% devices",
+    },
+  };
+}
+
+// Estimated cost of the desktop-only CSS on each device profile. No console output.
+function estimateCSSImpact(summary) {
+  const deviceProfiles = getDeviceProfiles();
+  const unnecessaryBytes = summary.total.bytes;
+  const totalClasses = summary.total.classes;
+  const totalProperties = summary.total.properties;
+  const deviceImpact = Object.entries(deviceProfiles).reduce((acc, [name, profile]) => {
+    const download = (unnecessaryBytes * 8) / (profile.networkSpeed * 1000);
+    const parsing = (unnecessaryBytes / (1024 * 1024) / profile.cssParsingSpeed) * 1000;
+    const cssom = totalProperties * 0.01 * profile.cssSelectorMatchingMultiplier;
+    const totalBlocking = download + parsing + cssom;
+    const runtime =
+      (totalClasses * 0.005 + totalProperties * 0.002) * profile.cssSelectorMatchingMultiplier;
+
+    acc[name] = {
+      renderBlockingTimeMs: totalBlocking,
+      runtimeOverheadMs: runtime,
+      fcpImpactMs: totalBlocking * 0.6,
+      lcpImpactMs: totalBlocking * 0.4,
+      inpOverheadMs: runtime,
+    };
+    return acc;
+  }, {});
+  return { unnecessaryBytes, totalClasses, totalProperties, deviceImpact };
+}
+
 async function analyzeCSSPerformanceImpact(minWidth = 768) {
   console.log("🔍 Analyzing CSS performance impact...\n");
+  const deviceProfiles = getDeviceProfiles();
 
   // First, run the media queries analysis
   const mediaQueryResults = await analyzeCSSMediaQueries(minWidth);
@@ -286,28 +340,6 @@ async function analyzeCSSPerformanceImpact(minWidth = 768) {
     return null;
   }
 
-  // Device profiles based on real Chrome UX Report data
-  const deviceProfiles = {
-    "High-end (Pixel 7, iPhone 14)": {
-      cssParsingSpeed: 1.5, // MB/s
-      cssSelectorMatchingMultiplier: 1.0,
-      networkSpeed: 10, // Mbps (4G LTE)
-      description: "Top 25% devices",
-    },
-    "Mid-range (Moto G Power, iPhone SE)": {
-      cssParsingSpeed: 0.8, // MB/s
-      cssSelectorMatchingMultiplier: 1.8,
-      networkSpeed: 5, // Mbps (4G)
-      description: "Median mobile device",
-    },
-    "Low-end (Moto E, older devices)": {
-      cssParsingSpeed: 0.3, // MB/s
-      cssSelectorMatchingMultiplier: 3.5,
-      networkSpeed: 2, // Mbps (3G/slow 4G)
-      description: "Bottom 25% devices",
-    },
-  };
-
   const totalClasses = mediaQueryResults.summary.total.classes;
   const totalProperties = mediaQueryResults.summary.total.properties;
 
@@ -464,23 +496,7 @@ async function analyzeCSSPerformanceImpact(minWidth = 768) {
     totalClasses,
     totalProperties,
     corsBlockedCount: mediaQueryResults.summary.corsBlocked,
-    deviceImpact: Object.entries(deviceProfiles).reduce((acc, [name, profile]) => {
-      const download = (unnecessaryBytes * 8) / (profile.networkSpeed * 1000);
-      const parsing = (unnecessaryBytes / (1024 * 1024) / profile.cssParsingSpeed) * 1000;
-      const cssom = totalProperties * 0.01 * profile.cssSelectorMatchingMultiplier;
-      const totalBlocking = download + parsing + cssom;
-      const runtime =
-        (totalClasses * 0.005 + totalProperties * 0.002) * profile.cssSelectorMatchingMultiplier;
-
-      acc[name] = {
-        renderBlockingTimeMs: totalBlocking,
-        runtimeOverheadMs: runtime,
-        fcpImpactMs: totalBlocking * 0.6,
-        lcpImpactMs: totalBlocking * 0.4,
-        inpOverheadMs: runtime,
-      };
-      return acc;
-    }, {}),
+    deviceImpact: estimateCSSImpact(mediaQueryResults.summary).deviceImpact,
     estimatedConversionLift: ((midRangeTotalBlocking * 0.6) / 100).toFixed(2) + "%",
   };
 }
@@ -502,6 +518,22 @@ window.analyzeCSSPerformanceImpact = analyzeCSSPerformanceImpact;
       inline: result.summary.inline,
       files: result.summary.files,
       corsBlockedCount: result.summary.corsBlocked,
+      // Estimated cost of the desktop-only CSS, computed silently (the console report stays
+      // opt-in through analyzeCSSPerformanceImpact()). null when there is none.
+      performanceImpact: (() => {
+        const impact = estimateCSSImpact(result.summary);
+        if (impact.unnecessaryBytes === 0) return null;
+        const round1 = (n) => Math.round(n * 10) / 10;
+        return {
+          ...impact,
+          deviceImpact: Object.fromEntries(
+            Object.entries(impact.deviceImpact).map(([device, d]) => [
+              device,
+              Object.fromEntries(Object.entries(d).map(([k, v]) => [k, round1(v)])),
+            ])
+          ),
+        };
+      })(),
     },
     items: [...result.details.inline, ...result.details.files],
   };

package/snippets/Loading/Cache-Strategy-Analysis.js

@@ -3,36 +3,56 @@
 // https://webperf-snippets.nucliweb.net
 
 (async () => {
+  // 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 = [];
+
   // --- Helpers ---
 
+  // @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 currentRootDomain = getRootDomain(location.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) === 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
 
   function getResourceType(entry) {
     // Use file extension as primary signal — initiatorType reflects the loader
@@ -374,13 +394,17 @@
 
   // --- Phase 6: Value-add metrics ---
 
-  const effectiveEntries = entries.filter((e) =>
+  // Only resources whose cache headers were read have a cache policy to judge. One whose headers
+  // could not be read, or that was only inferred as cached, says nothing about the policy: counting it
+  // as "not effective" made the figure measure how much was analyzable instead of the cache.
+  const analyzableEntries = entries.filter((e) => e.headers !== null);
+  const effectiveEntries = analyzableEntries.filter((e) =>
     EFFECTIVE_CACHE_STRATEGIES.has(e.cacheStrategy)
   );
   const cacheEfficiencyPercent =
-    entries.length > 0
-      ? Math.round((effectiveEntries.length / entries.length) * 100)
-      : 0;
+    analyzableEntries.length > 0
+      ? Math.round((effectiveEntries.length / analyzableEntries.length) * 100)
+      : null;
 
   const bandwidthSavedBytes = entries
     .filter((e) => e.isCached)
@@ -422,8 +446,39 @@
   const costlyDuplicates = uniqueDuplicates.filter((d) => d.costly);
   const cachedDuplicates = uniqueDuplicates.filter((d) => !d.costly);
 
+  // These two findings need no cache headers, so they also cover resources on other origins. They
+  // are anti-patterns like the header-based ones: they reach `items` and `issues`.
+  for (const entry of uncompressedResources) {
+    entry.antiPatterns.push({
+      id: "uncompressed",
+      severity: "warning",
+      message: `${entry.type} sent uncompressed (${formatBytes(entry.encodedBodySize)} on the wire for ${formatBytes(entry.decodedBodySize)}) — enable Brotli or gzip`,
+    });
+  }
+  for (const duplicate of costlyDuplicates) {
+    // One finding per URL, on the first request, not one per request
+    entries.find((e) => e.url === duplicate.url).antiPatterns.push({
+      id: "duplicate-uncached",
+      severity: "warning",
+      message: `Loaded ${duplicate.count} times, ${duplicate.uncachedLoads} from the network — load it once or make it cacheable`,
+    });
+  }
+
   // --- Phase 7: Console output ---
 
+  if (entries.length === 0) {
+    console.group("%c🔍 Cache Strategy Analysis", "font-weight: bold; font-size: 14px;");
+    console.warn("⚠️ No resources found in the Performance API buffer.");
+    console.log("   This usually means the site called performance.clearResourceTimings() to manage memory.");
+    console.log("   Try: reload the page and run this snippet immediately after load.");
+    console.groupEnd();
+    return {
+      script: "Cache-Strategy-Analysis",
+      status: "error",
+      error: "No resources in the Performance API buffer (performance.clearResourceTimings() may have been called). Reload the page and run the snippet again.",
+    };
+  }
+
   const allAntiPatterns = entries.flatMap((e) =>
     e.antiPatterns.map((ap) => ({ ...ap, resource: e.shortName, url: e.url }))
   );
@@ -443,6 +498,7 @@
   );
 
   const headersAnalyzed = entries.filter((e) => e.headers !== null).length;
+  const headerCoveragePercent = Math.round((headersAnalyzed / entries.length) * 100);
   const corsRestricted = entries.filter((e) => e.isCorsRestricted).length;
 
   // Resources excluded from header analysis — cross-origin or non-static types.
@@ -458,6 +514,26 @@
         !FETCHABLE_TYPES.has(e.type))
   );
 
+  // Header analysis only reaches same-origin static assets. When most of the page is elsewhere (a CDN
+  // or another origin for the assets), say so and name the hosts, so an empty list is not read as "clean".
+  let coverageIssue = null;
+  if (headerCoveragePercent < 50) {
+    const hostCounts = new Map();
+    for (const e of entries.filter((e) => e.headers === null)) {
+      hostCounts.set(e.host, (hostCounts.get(e.host) || 0) + 1);
+    }
+    const topHosts = [...hostCounts.entries()]
+      .sort((a, b) => b[1] - a[1])
+      .slice(0, 3)
+      .map(([host]) => host)
+      .join(", ");
+    coverageIssue = {
+      severity: "info",
+      id: "header-coverage",
+      message: `Cache headers were read for ${headersAnalyzed} of ${entries.length} resources (${headerCoveragePercent}%): the rest are on other origins or are not static assets, so their Cache-Control cannot be read from the page. Most of them are on ${topHosts}; check those hosts in the Network panel or with curl -I`,
+    };
+  }
+
   console.group(
     "%c🔍 Cache Strategy Analysis",
     "font-weight: bold; font-size: 14px;"
@@ -469,13 +545,18 @@
   console.log(
     `   Headers analyzed: ${headersAnalyzed} | CORS-restricted: ${corsRestricted} | Excluded (non-static/cross-origin): ${excludedFromHeaders.length}`
   );
+  if (coverageIssue) console.log(`   ℹ️  ${coverageIssue.message}`);
   if (excludedFromHeaders.length > 0) {
     const excludedTypes = [...new Set(excludedFromHeaders.map((e) => e.type))].join(", ");
     console.log(
       `   ℹ️  Excluded resources (${excludedTypes}) are analyzed with Tier 1 data only (Performance API) — header inspection requires same-origin static assets due to CORS restrictions.`
     );
   }
-  console.log(`   Cache efficiency: ${cacheEfficiencyPercent}%`);
+  console.log(
+    cacheEfficiencyPercent === null
+      ? `   Cache efficiency: n/a (no cache headers could be read)`
+      : `   Cache efficiency: ${cacheEfficiencyPercent}% (of the ${analyzableEntries.length} resources whose cache headers could be read)`
+  );
   console.log(`   Bandwidth saved by cache: ${formatBytes(bandwidthSavedBytes)}`);
   if (cdnHitRate !== null) {
     console.log(
@@ -580,6 +661,8 @@
       { Pattern: "expires-without-cc",      Severity: "🟡 warning", Meaning: "Uses Expires header without Cache-Control — outdated pattern, less reliable" },
       { Pattern: "maxage-zero-static",      Severity: "🟡 warning", Meaning: "Static asset with max-age=0 — browser revalidates on every request" },
       { Pattern: "short-cache-static",      Severity: "🟡 warning", Meaning: "Static asset with max-age < 3600 — consider a longer cache duration" },
+      { Pattern: "uncompressed",            Severity: "🟡 warning", Meaning: "Text resource sent without Brotli or gzip — works for any origin, no headers needed" },
+      { Pattern: "duplicate-uncached",      Severity: "🟡 warning", Meaning: "Same URL loaded more than once with at least one request to the network" },
       { Pattern: "versioned-not-immutable", Severity: "🔵 info",    Meaning: "Hashed URL without immutable directive — adding it avoids conditional GET requests" },
     ]);
     console.groupEnd();
@@ -703,9 +786,9 @@
       "🟡 Replace Expires headers with Cache-Control: max-age — Expires is an outdated mechanism and less reliable."
     );
   }
-  if (cacheEfficiencyPercent < 50) {
+  if (cacheEfficiencyPercent !== null && cacheEfficiencyPercent < 50) {
     recommendations.push(
-      `🔴 Cache efficiency is low (${cacheEfficiencyPercent}%). Review caching strategy for all static assets.`
+      `🔴 Cache efficiency is low (${cacheEfficiencyPercent}%, measured on the ${analyzableEntries.length} resources whose cache headers could be read). Review caching strategy for those static assets.`
     );
   }
   if (cdnHitRate !== null && cdnHitRate < 70) {
@@ -747,28 +830,41 @@
     console.groupEnd();
   }
 
+  logOwnDomainsHint(entries.filter((e) => !e.firstParty).length);
   console.groupEnd(); // Cache Strategy Analysis
 
   // --- Return structured object ---
 
   const cacheEfficiencyRating =
-    cacheEfficiencyPercent >= 80
+    cacheEfficiencyPercent === null
+      ? null
+      : cacheEfficiencyPercent >= 80
       ? "good"
       : cacheEfficiencyPercent >= 50
       ? "needs-improvement"
       : "poor";
 
+  const MAX_ITEMS = 50;
+  const actionableEntries = entries.filter(
+    (e) =>
+      e.antiPatterns.length > 0 ||
+      ["none", "no-store", "no-cache", "short"].includes(e.cacheStrategy)
+  );
   return {
     script: "Cache-Strategy-Analysis",
     status: "ok",
     count: entries.length,
+    corsLimitedAnalysis: corsRestricted > 0,
     details: {
       totalResources: entries.length,
+      actionableCount: actionableEntries.length,
       headersAnalyzed,
       corsRestricted,
       excludedFromHeaders: excludedFromHeaders.length,
+      headerCoveragePercent,
       cacheEfficiencyPercent,
       cacheEfficiencyRating,
+      cacheEfficiencyResources: analyzableEntries.length,
       bandwidthSavedBytes,
       strategyDistribution: strategyGroups,
       cdnDetected: cdnEntries.length > 0,
@@ -780,13 +876,12 @@
       uncompressedCount: uncompressedResources.length,
       protocolDistribution,
     },
-    // Only resources with actionable issues — omits clean resources to reduce noise
-    items: entries
-      .filter(
-        (e) =>
-          e.antiPatterns.length > 0 ||
-          ["none", "no-store", "no-cache", "short"].includes(e.cacheStrategy)
-      )
+    // Only resources with actionable findings (cache anti-patterns, a weak cache strategy, a costly
+    // duplicate or uncompressed text), at most 50: the ones with the most anti-patterns first, then the
+    // largest. Clean resources are left out to reduce noise.
+    items: actionableEntries
+      .sort((a, b) => b.antiPatterns.length - a.antiPatterns.length || b.decodedBodySize - a.decodedBodySize)
+      .slice(0, MAX_ITEMS)
       .map((e) => ({
         shortName: e.shortName,
         host: e.host,
@@ -797,12 +892,15 @@
         isCached: e.isCached,
         antiPatterns: e.antiPatterns.map((p) => p.id),
       })),
-    issues: allAntiPatterns.map((p) => ({
-      severity: p.severity,
-      id: p.id,
-      resource: p.resource,
-      message: p.message,
-    })),
+    issues: [
+      ...allAntiPatterns.map((p) => ({
+        severity: p.severity,
+        id: p.id,
+        resource: p.resource,
+        message: p.message,
+      })),
+      ...(coverageIssue ? [coverageIssue] : []),
+    ],
     recommendations,
   };
 })();

package/snippets/Loading/Compression-Audit.js

@@ -0,0 +1,172 @@
+// Compression Audit
+// Finds text-based resources served without HTTP compression and estimates the savings
+// https://webperf-snippets.nucliweb.net
+
+(() => {
+  const MIN_BYTES = 1024; // Below this, compression saves too little to matter
+  const MAX_ITEMS = 50;
+
+  // Typical size reduction gzip/brotli achieve per resource type (estimate, not a measurement)
+  const SAVINGS_RATIO = { js: 0.7, css: 0.7, html: 0.7, json: 0.7, svg: 0.7, xml: 0.7, font: 0.5 };
+
+  const EXTENSION_TYPES = {
+    js: "js", mjs: "js", cjs: "js",
+    css: "css",
+    html: "html", htm: "html",
+    json: "json", webmanifest: "json",
+    svg: "svg",
+    xml: "xml", rss: "xml", atom: "xml",
+    ttf: "font", otf: "font", eot: "font",
+  };
+
+  // @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 parseUrl = (name) => {
+    try {
+      return new URL(name);
+    } catch {
+      return null;
+    }
+  };
+
+  // Text type of a resource, or null when it is not a compressible text resource
+  const textType = (entry, url) => {
+    if (entry.entryType === "navigation") return "html";
+    const ext = url.pathname.split(".").pop().toLowerCase();
+    if (EXTENSION_TYPES[ext]) return EXTENSION_TYPES[ext];
+    if (entry.initiatorType === "script") return "js";
+    return null;
+  };
+
+  const entries = [...performance.getEntriesByType("navigation"), ...performance.getEntriesByType("resource")];
+  const contentEncodingSupported = entries.some((e) => "contentEncoding" in e);
+
+  const candidates = [];
+  entries.forEach((entry) => {
+    const url = parseUrl(entry.name);
+    if (!url || !/^https?:$/.test(url.protocol)) return;
+    const type = textType(entry, url);
+    if (!type) return;
+    candidates.push({ entry, url, type });
+  });
+
+  const compressed = [];
+  const uncompressed = [];
+  let sizeUnknownCount = 0;
+  let skippedSmallCount = 0;
+  const byEncoding = {};
+
+  candidates.forEach(({ entry, url, type }) => {
+    const decoded = entry.decodedBodySize || 0;
+    const encoded = entry.encodedBodySize || 0;
+
+    // Cross-origin resources without Timing-Allow-Origin report every size as zero
+    if (decoded === 0 && url.origin !== location.origin) {
+      sizeUnknownCount++;
+      return;
+    }
+    if (decoded < MIN_BYTES) {
+      skippedSmallCount++;
+      return;
+    }
+
+    const encoding = (entry.contentEncoding || "").toLowerCase();
+    // Without contentEncoding (older browsers), a body smaller than its decoded form was compressed
+    const isCompressed = encoding ? encoding !== "identity" : encoded < decoded;
+
+    if (isCompressed) {
+      const label = encoding || "unspecified";
+      byEncoding[label] = (byEncoding[label] || 0) + 1;
+      compressed.push(entry);
+      return;
+    }
+
+    const savings = Math.round(decoded * SAVINGS_RATIO[type]);
+    uncompressed.push({
+      url: entry.name,
+      shortName: url.pathname.split("/").filter(Boolean).pop() || url.hostname,
+      type,
+      encoding: "none",
+      encodedBytes: encoded,
+      decodedBytes: decoded,
+      estimatedSavingsBytes: savings,
+    });
+  });
+
+  byEncoding.none = uncompressed.length;
+  uncompressed.sort((a, b) => b.estimatedSavingsBytes - a.estimatedSavingsBytes);
+
+  const totalUncompressedBytes = uncompressed.reduce((n, i) => n + i.decodedBytes, 0);
+  const estimatedSavingsBytes = uncompressed.reduce((n, i) => n + i.estimatedSavingsBytes, 0);
+  const corsLimitedAnalysis = sizeUnknownCount > 0;
+
+  const issues = [];
+  if (uncompressed.length > 0) {
+    issues.push({
+      severity: "warning",
+      message: `${uncompressed.length} text resource(s) served without compression; enabling gzip or brotli could save about ${formatBytes(estimatedSavingsBytes)}`,
+    });
+  }
+  if (corsLimitedAnalysis) {
+    issues.push({
+      severity: "info",
+      message: `${sizeUnknownCount} cross-origin text resource(s) without Timing-Allow-Origin report zero sizes, so their compression is unknown`,
+    });
+  }
+  if (!contentEncodingSupported && candidates.length > 0) {
+    issues.push({
+      severity: "info",
+      message: "PerformanceResourceTiming.contentEncoding is not available; compression is inferred from encodedBodySize versus decodedBodySize",
+    });
+  }
+
+  console.group("%c🗜️ Compression Audit", "font-weight: bold; font-size: 14px;");
+  console.log(
+    `Text resources: ${candidates.length} | compressed: ${compressed.length} | uncompressed: ${uncompressed.length} | size unknown: ${sizeUnknownCount}`
+  );
+  if (uncompressed.length > 0) {
+    console.log(`Estimated savings: ~${formatBytes(estimatedSavingsBytes)} of ${formatBytes(totalUncompressedBytes)}`);
+    console.table(
+      uncompressed.slice(0, MAX_ITEMS).map((i) => ({
+        Resource: i.shortName,
+        Type: i.type,
+        Size: formatBytes(i.decodedBytes),
+        "Est. savings": formatBytes(i.estimatedSavingsBytes),
+      }))
+    );
+  } else {
+    console.log("%c✅ No uncompressed text resources found", "color: #22c55e;");
+  }
+  if (corsLimitedAnalysis) {
+    console.log("%cℹ️ Some cross-origin resources could not be analyzed (no Timing-Allow-Origin)", "color: #3b82f6;");
+  }
+  console.groupEnd();
+
+  return {
+    script: "Compression-Audit",
+    status: "ok",
+    count: uncompressed.length,
+    corsLimitedAnalysis,
+    details: {
+      totalTextResources: candidates.length,
+      compressedCount: compressed.length,
+      uncompressedCount: uncompressed.length,
+      sizeUnknownCount,
+      skippedSmallCount,
+      totalUncompressedBytes,
+      estimatedSavingsBytes,
+      byEncoding,
+      contentEncodingSupported,
+    },
+    items: uncompressed.slice(0, MAX_ITEMS),
+    issues,
+  };
+})();

package/snippets/Loading/Content-Visibility.js

@@ -345,8 +345,13 @@ window.analyzeContentVisibilityOpportunities = analyzeContentVisibilityOpportuni
       ...cvResults.autoElements.map(el => ({ ...el, type: "auto" })),
       ...cvResults.hiddenElements.map(el => ({ ...el, type: "hidden" })),
     ],
-    issues: cvResults.autoElements
-      .filter(el => el.containIntrinsicSize === "not set" || el.containIntrinsicSize === "none")
-      .map(el => ({ severity: "warning", message: `${el.selector}: missing contain-intrinsic-size (CLS risk)` })),
+    issues: [
+      ...cvResults.autoElements
+        .filter(el => el.containIntrinsicSize === "not set" || el.containIntrinsicSize === "none")
+        .map(el => ({ severity: "warning", message: `${el.selector}: missing contain-intrinsic-size (CLS risk)` })),
+      ...(cvResults.autoElements.length + cvResults.hiddenElements.length === 0
+        ? [{ severity: "info", message: "No content-visibility usage found. Consider content-visibility: auto on below-the-fold sections to reduce the initial render cost." }]
+        : []),
+    ],
   };
 })();

package/snippets/Loading/Critical-CSS-Detection.js

@@ -3,13 +3,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 criticalBudget = 14 * 1024; // 14 KB (first TCP round-trip)