webperf-snippets 0.4.1 → 0.5.0

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

@@ -2,15 +2,28 @@
 // Default minWidth = 768 (px), but you can customize it
 
 async function analyzeCSSMediaQueries(minWidth = 768) {
+  // @shared ownRequestUrl
+  // The URL a snippet requests when it reads a file of the page itself (fetch, a HEAD request,
+  // new Image()). The fragment never reaches the server or the HTTP cache key, so the file still
+  // comes from the cache, but it stays in the name of the Resource Timing entry of the request,
+  // which is how isOwnRequest leaves these requests out of what the page loaded.
+  function ownRequestUrl(url) {
+    try {
+      const parsed = new URL(url, location.href);
+      if (!/^https?:$/.test(parsed.protocol)) return url;
+      parsed.hash = "webperf-snippets";
+      return parsed.href;
+    } catch {
+      return url;
+    }
+  }
+  // @end-shared ownRequestUrl
+
+  const SCRIPT = "CSS-Media-Queries-Analysis";
+  const MAX_ITEMS = 50;
+  const WARNING_BYTES = 50 * 1024;
   const stylesheets = [...document.styleSheets];
-  const inlineMediaQueries = [];
-  const fileMediaQueries = [];
-  let inlineTotalClasses = 0;
-  let inlineTotalProperties = 0;
-  let filesTotalClasses = 0;
-  let filesTotalProperties = 0;
-  let inlineTotalBytes = 0;
-  let filesTotalBytes = 0;
+  const rules = []; // one per @media rule: { source, inline, mediaQuery, classes, properties, bytes }
   let corsBlockedCount = 0;
 
   // Helper to check if media query targets bigger than specified breakpoint
@@ -28,24 +41,16 @@ async function analyzeCSSMediaQueries(minWidth = 768) {
       if (unit === "rem" && value > minWidth / 16) return true; // Convert to rem
     }
 
-    // Check for max-width to exclude (mobile-only queries)
-    const maxWidthMatch = mediaText.match(/max-width:\s*(\d+)(px|em|rem)/i);
-    if (maxWidthMatch && !minWidthMatch) {
-      return false; // max-width only queries are for smaller viewports
-    }
-
+    // max-width only queries are for smaller viewports
     return false;
   }
 
-  // Helper to count classes and properties in CSS text
-  function countClassesAndProperties(cssText) {
-    const classMatches = cssText.match(/\.[a-zA-Z0-9_-]+/g) || [];
-    const propertyMatches = cssText.match(/[a-z-]+\s*:/g) || [];
-
-    return {
-      classes: classMatches.length,
-      properties: propertyMatches.length,
-    };
+  // Classes and declarations inside the rule, not in its media query. A class starts with a
+  // letter, an underscore or a hyphen, so values such as 1.5rem do not count
+  function countClassesAndProperties(innerCss) {
+    const classMatches = innerCss.match(/\.-?[_a-zA-Z][\w-]*/g) || [];
+    const propertyMatches = innerCss.match(/[a-z-]+\s*:/g) || [];
+    return { classes: classMatches.length, properties: propertyMatches.length };
   }
 
   // Helper to calculate byte size
@@ -64,480 +69,140 @@ async function analyzeCSSMediaQueries(minWidth = 768) {
   }
   // @end-shared formatBytes
 
-  // Parse CSS text to find @media rules
-  function parseMediaQueriesFromCSS(cssText, source, isInline) {
-    // Improved regex to capture complete @media rules
+  function addRule(source, inline, mediaQuery, fullCss, innerCss) {
+    if (!isBiggerThanBreakpoint(mediaQuery)) return;
+    rules.push({ source, inline, mediaQuery, ...countClassesAndProperties(innerCss), bytes: getByteSize(fullCss) });
+  }
+
+  // Parse CSS text to find @media rules, for stylesheets read with fetch
+  function parseMediaQueriesFromCSS(cssText, source) {
     const mediaRegex = /@media\s*([^{]+)\{((?:[^{}]|\{[^{}]*\})*)\}/g;
     let match;
-
     while ((match = mediaRegex.exec(cssText)) !== null) {
-      const mediaText = match[1].trim();
-      const mediaContent = match[2];
-
-      if (isBiggerThanBreakpoint(mediaText)) {
-        const counts = countClassesAndProperties(mediaContent);
-        const byteSize = getByteSize(match[0]);
-
-        const mediaQueryData = {
-          source: source,
-          mediaQuery: mediaText,
-          classes: counts.classes,
-          properties: counts.properties,
-          bytes: byteSize,
-          bytesFormatted: formatBytes(byteSize),
-        };
-
-        if (isInline) {
-          inlineMediaQueries.push(mediaQueryData);
-          inlineTotalClasses += counts.classes;
-          inlineTotalProperties += counts.properties;
-          inlineTotalBytes += byteSize;
-        } else {
-          fileMediaQueries.push(mediaQueryData);
-          filesTotalClasses += counts.classes;
-          filesTotalProperties += counts.properties;
-          filesTotalBytes += byteSize;
-        }
-      }
+      addRule(source, false, match[1].trim(), match[0], match[2]);
     }
   }
 
   // Process stylesheets
   for (let sheetIndex = 0; sheetIndex < stylesheets.length; sheetIndex++) {
     const sheet = stylesheets[sheetIndex];
-    const isInline = !sheet.href;
+    const inline = !sheet.href;
     const source = sheet.href || `<style> tag #${sheetIndex}`;
 
     try {
-      // Try to access via cssRules first
-      const rules = sheet.cssRules || sheet.rules;
-      if (rules) {
-        [...rules].forEach((rule) => {
+      const sheetRules = sheet.cssRules || sheet.rules;
+      if (sheetRules) {
+        [...sheetRules].forEach((rule) => {
           if (rule.type === CSSRule.MEDIA_RULE) {
-            const mediaText = rule.media.mediaText;
-            if (isBiggerThanBreakpoint(mediaText)) {
-              const cssText = rule.cssText;
-              const counts = countClassesAndProperties(cssText);
-              const byteSize = getByteSize(cssText);
-
-              const mediaQueryData = {
-                source: source,
-                mediaQuery: mediaText,
-                classes: counts.classes,
-                properties: counts.properties,
-                bytes: byteSize,
-                bytesFormatted: formatBytes(byteSize),
-              };
-
-              if (isInline) {
-                inlineMediaQueries.push(mediaQueryData);
-                inlineTotalClasses += counts.classes;
-                inlineTotalProperties += counts.properties;
-                inlineTotalBytes += byteSize;
-              } else {
-                fileMediaQueries.push(mediaQueryData);
-                filesTotalClasses += counts.classes;
-                filesTotalProperties += counts.properties;
-                filesTotalBytes += byteSize;
-              }
-            }
+            const inner = [...rule.cssRules].map((r) => r.cssText).join("");
+            addRule(source, inline, rule.media.mediaText, rule.cssText, inner);
           }
         });
       }
     } catch {
-      // If CORS blocked, try to fetch the CSS
+      // Cross-origin stylesheet without CORS: try to fetch it
       if (sheet.href) {
         try {
-          const response = await fetch(sheet.href);
-          const cssText = await response.text();
-          parseMediaQueriesFromCSS(cssText, sheet.href, false);
+          const response = await fetch(ownRequestUrl(sheet.href));
+          parseMediaQueriesFromCSS(await response.text(), sheet.href);
         } catch {
-          // Silently count CORS blocked files
           corsBlockedCount++;
         }
       }
     }
   }
 
-  const totalBytes = inlineTotalBytes + filesTotalBytes;
-
-  // Display results
-  console.group(`📊 CSS Media Queries Analysis (min-width > ${minWidth}px)`);
-  console.log(`Total @media rules found: ${inlineMediaQueries.length + fileMediaQueries.length}`);
-  console.log(`Total classes: ${inlineTotalClasses + filesTotalClasses}`);
-  console.log(`Total properties: ${inlineTotalProperties + filesTotalProperties}`);
-  console.groupEnd();
-
-  // Mobile Savings Estimate
-  console.group("💾 POTENTIAL MOBILE SAVINGS");
-  console.log(
-    `%cEstimated CSS bytes that mobile doesn't need: ${formatBytes(totalBytes)}`,
-    "font-weight: bold; color: #22c55e; font-size: 14px;",
-  );
-  console.log(`  └─ From inline CSS: ${formatBytes(inlineTotalBytes)}`);
-  console.log(`  └─ From external files: ${formatBytes(filesTotalBytes)}`);
-  console.log("");
-  console.log("💡 By splitting these styles into separate files with media queries,");
-  console.log("   mobile users won't need to download, parse, or process this CSS.");
-  console.groupEnd();
-
-  // Inline CSS Results
-  console.group("🔷 INLINE CSS (<style> tags)");
-  console.log(`Media queries: ${inlineMediaQueries.length}`);
-  console.log(`Classes: ${inlineTotalClasses}`);
-  console.log(`Properties: ${inlineTotalProperties}`);
-  console.log(`Total size: ${formatBytes(inlineTotalBytes)}`);
-  if (inlineMediaQueries.length === 0) {
-    console.log(`No inline media queries found for viewports > ${minWidth}px.`);
+  // --- One item per distinct query ------------------------------------------------------
+
+  const byQuery = new Map();
+  for (const r of rules) {
+    const q = byQuery.get(r.mediaQuery) ?? { mediaQuery: r.mediaQuery, rules: 0, sources: new Set(), classes: 0, properties: 0, bytes: 0 };
+    q.rules++;
+    q.sources.add(r.source);
+    q.classes += r.classes;
+    q.properties += r.properties;
+    q.bytes += r.bytes;
+    byQuery.set(r.mediaQuery, q);
   }
-  console.groupEnd();
-
-  // External Files Results
-  console.group("📁 EXTERNAL FILES (.css files)");
-  console.log(`Media queries: ${fileMediaQueries.length}`);
-  console.log(`Classes: ${filesTotalClasses}`);
-  console.log(`Properties: ${filesTotalProperties}`);
-  console.log(`Total size: ${formatBytes(filesTotalBytes)}`);
-  if (fileMediaQueries.length === 0) {
-    console.log(`No external file media queries found for viewports > ${minWidth}px.`);
+  const queries = [...byQuery.values()]
+    .map(({ sources, ...q }) => ({
+      mediaQuery: q.mediaQuery,
+      rules: q.rules,
+      files: sources.size,
+      classes: q.classes,
+      properties: q.properties,
+      bytes: q.bytes,
+    }))
+    .sort((a, b) => b.bytes - a.bytes);
+
+  const bySourceMap = new Map();
+  for (const r of rules) {
+    const s = bySourceMap.get(r.source) ?? { source: r.source, inline: r.inline, rules: 0, bytes: 0 };
+    s.rules++;
+    s.bytes += r.bytes;
+    bySourceMap.set(r.source, s);
+  }
+  const bySource = [...bySourceMap.values()];
+
+  const totalBytes = rules.reduce((sum, r) => sum + r.bytes, 0);
+  const uniquenessRatio = rules.length ? Math.round((queries.length / rules.length) * 1000) / 1000 : 0;
+
+  // --- Issues ----------------------------------------------------------------------------
+
+  const issues = [];
+  if (rules.length === 0) {
+    issues.push({ severity: "info", message: `No @media rules for viewports wider than ${minWidth}px` });
+  } else {
+    issues.push({
+      severity: totalBytes > WARNING_BYTES ? "warning" : "info",
+      message: `${rules.length} @media rules for viewports wider than ${minWidth}px add ${formatBytes(totalBytes)} of CSS that narrower screens download and parse without using. Move them to a stylesheet with a media attribute, such as <link rel="stylesheet" href="wide.css" media="(min-width: ${minWidth + 1}px)">, which narrower screens fetch at low priority without blocking rendering`,
+    });
+    if (rules.length >= 20 && uniquenessRatio < 0.1) {
+      issues.push({
+        severity: "info",
+        message: `${queries.length} distinct queries repeat across ${rules.length} @media blocks, the pattern of component-scoped or compiled CSS. Grouping the rules of each query under one block shortens the stylesheets`,
+      });
+    }
   }
-  console.groupEnd();
-
-  // CORS warning if applicable
   if (corsBlockedCount > 0) {
-    console.group("⚠️ CORS LIMITATIONS");
-    console.log(
-      `%c${corsBlockedCount} external CSS file(s) could not be analyzed due to CORS restrictions.`,
-      "color: #f59e0b; font-weight: bold",
-    );
-    console.log("");
-    console.log("These files are loaded by the browser but cannot be read via JavaScript.");
-    console.log("The analysis above reflects only the CSS files that were accessible.");
-    console.log("");
-    console.log("💡 To analyze CORS-blocked files:");
-    console.log("   • Download the CSS files manually and run the analysis locally");
-    console.log("   • Use Chrome DevTools Coverage tab to measure unused CSS");
-    console.log("   • Run this analysis from the same origin as the CSS files");
-    console.groupEnd();
+    issues.push({ severity: "info", message: `${corsBlockedCount} cross-origin stylesheet(s) could not be read, so their @media rules are not counted` });
   }
 
-  return {
-    summary: {
-      total: {
-        mediaQueries: inlineMediaQueries.length + fileMediaQueries.length,
-        classes: inlineTotalClasses + filesTotalClasses,
-        properties: inlineTotalProperties + filesTotalProperties,
-        bytes: totalBytes,
-        bytesFormatted: formatBytes(totalBytes),
-      },
-      inline: {
-        mediaQueries: inlineMediaQueries.length,
-        classes: inlineTotalClasses,
-        properties: inlineTotalProperties,
-        bytes: inlineTotalBytes,
-        bytesFormatted: formatBytes(inlineTotalBytes),
-      },
-      files: {
-        mediaQueries: fileMediaQueries.length,
-        classes: filesTotalClasses,
-        properties: filesTotalProperties,
-        bytes: filesTotalBytes,
-        bytesFormatted: formatBytes(filesTotalBytes),
-      },
-      corsBlocked: corsBlockedCount,
-    },
-    details: {
-      inline: inlineMediaQueries,
-      files: fileMediaQueries,
-    },
-  };
-}
-
-// 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();
+  // --- Console output --------------------------------------------------------------------
 
-  // First, run the media queries analysis
-  const mediaQueryResults = await analyzeCSSMediaQueries(minWidth);
-  const unnecessaryBytes = mediaQueryResults.summary.total.bytes;
-
-  // If no data was found, show early exit message
-  if (unnecessaryBytes === 0 && mediaQueryResults.summary.corsBlocked > 0) {
-    console.log(
-      "%c⚠️ Unable to perform performance analysis",
-      "color: #f59e0b; font-weight: bold; font-size: 14px",
+  console.group(`CSS Media Queries Analysis (min-width > ${minWidth}px)`);
+  console.log(`@media rules: ${rules.length} | distinct queries: ${queries.length} | size: ${formatBytes(totalBytes)}`);
+  if (queries.length > 0) {
+    console.table(
+      queries.map((q) => ({ Query: q.mediaQuery, Rules: q.rules, Files: q.files, Classes: q.classes, Properties: q.properties, Size: formatBytes(q.bytes) }))
     );
-    console.log("");
-    console.log(`All CSS files (${mediaQueryResults.summary.corsBlocked}) are blocked by CORS.`);
-    console.log("No desktop-specific @media queries could be analyzed.");
-    console.log("");
-    console.log("Please try one of these alternatives:");
-    console.log("  • Run this script from the same domain as the CSS files");
-    console.log("  • Use Chrome DevTools Coverage tab for manual analysis");
-    console.log("  • Download CSS files and analyze them locally");
-    return null;
-  }
-
-  if (unnecessaryBytes === 0) {
-    console.log("%c✅ Great news!", "color: #22c55e; font-weight: bold; font-size: 14px");
-    console.log("");
-    console.log("No desktop-specific CSS found (min-width > " + minWidth + "px).");
-    console.log("This site appears to be optimized for mobile-first delivery.");
-    return null;
+    console.table(bySource.map((s) => ({ Source: s.source, Rules: s.rules, Size: formatBytes(s.bytes) })));
   }
-
-  const totalClasses = mediaQueryResults.summary.total.classes;
-  const totalProperties = mediaQueryResults.summary.total.properties;
-
-  console.group("⚡ PERFORMANCE IMPACT ANALYSIS");
-  console.log(`Unnecessary CSS size: ${mediaQueryResults.summary.total.bytesFormatted}`);
-  console.log(`Classes to process: ${totalClasses}`);
-  console.log(`Properties to compute: ${totalProperties}\n`);
-
-  Object.entries(deviceProfiles).forEach(([deviceName, profile]) => {
-    console.group(`📱 ${deviceName}`);
-    console.log(`   ${profile.description}`);
-    console.log("");
-
-    // 1. Network download time
-    const downloadTimeMs = (unnecessaryBytes * 8) / (profile.networkSpeed * 1000);
-
-    // 2. CSS Parsing time (converting bytes to styles)
-    const parsingTimeMs = (unnecessaryBytes / (1024 * 1024) / profile.cssParsingSpeed) * 1000;
-
-    // 3. CSSOM construction (creating the CSS Object Model)
-    // Approximation: ~0.01ms per CSS property on mid-range devices
-    const cssomConstructionMs = totalProperties * 0.01 * profile.cssSelectorMatchingMultiplier;
-
-    // 4. Selector matching overhead
-    // Each class needs to be evaluated against the DOM (even if it doesn't match)
-    // ~0.005ms per selector on mid-range devices
-    const selectorMatchingMs = totalClasses * 0.005 * profile.cssSelectorMatchingMultiplier;
-
-    // 5. Style recalculation overhead during interactions
-    // More CSS rules = more time in each style recalc
-    const recalcOverheadMs = totalProperties * 0.002 * profile.cssSelectorMatchingMultiplier;
-
-    const totalBlockingTime = downloadTimeMs + parsingTimeMs + cssomConstructionMs;
-    const totalRuntimeOverhead = selectorMatchingMs + recalcOverheadMs;
-
-    console.log("🚦 Render-blocking impact:");
-    console.log(`   • Network download: ${downloadTimeMs.toFixed(2)}ms`);
-    console.log(`   • CSS parsing: ${parsingTimeMs.toFixed(2)}ms`);
-    console.log(`   • CSSOM construction: ${cssomConstructionMs.toFixed(2)}ms`);
-    console.log(
-      `   📊 Total blocking time: %c${totalBlockingTime.toFixed(2)}ms`,
-      "font-weight: bold; color: #ef4444",
-    );
-    console.log("");
-
-    console.log("⚙️ Runtime overhead (per page interaction):");
-    console.log(`   • Selector matching: ${selectorMatchingMs.toFixed(2)}ms`);
-    console.log(`   • Style recalculation: ${recalcOverheadMs.toFixed(2)}ms`);
-    console.log(
-      `   📊 Total per-interaction: %c${totalRuntimeOverhead.toFixed(2)}ms`,
-      "font-weight: bold; color: #f59e0b",
-    );
-    console.log("");
-
-    // Core Web Vitals impact estimation
-    console.log("📈 Core Web Vitals Impact:");
-
-    // FCP impact (part of blocking time)
-    const fcpImpact = totalBlockingTime * 0.6; // ~60% affects FCP
-    console.log(`   • FCP delay: ~${fcpImpact.toFixed(0)}ms`);
-
-    // LCP impact (if there are images/text affected by these styles)
-    const lcpImpact = totalBlockingTime * 0.4;
-    console.log(`   • LCP delay: ~${lcpImpact.toFixed(0)}ms`);
-
-    // INP impact (runtime overhead affects each interaction)
-    console.log(`   • INP overhead: ~${totalRuntimeOverhead.toFixed(0)}ms per interaction`);
-
-    // TBT (Total Blocking Time) - time where main thread is blocked
-    const tbtContribution = Math.max(0, totalBlockingTime - 50); // Tasks >50ms contribute to TBT
-    console.log(`   • TBT contribution: ~${tbtContribution.toFixed(0)}ms`);
-
-    console.groupEnd();
-    console.log("");
-  });
-
-  console.groupEnd();
-
-  // Savings summary
-  console.group("💰 POTENTIAL SAVINGS");
-
-  const midRangeProfile = deviceProfiles["Mid-range (Moto G Power, iPhone SE)"];
-  const midRangeDownload = (unnecessaryBytes * 8) / (midRangeProfile.networkSpeed * 1000);
-  const midRangeParsing =
-    (unnecessaryBytes / (1024 * 1024) / midRangeProfile.cssParsingSpeed) * 1000;
-  const midRangeCSSOM = totalProperties * 0.01 * midRangeProfile.cssSelectorMatchingMultiplier;
-  const midRangeTotalBlocking = midRangeDownload + midRangeParsing + midRangeCSSOM;
-
-  console.log("For the median mobile user (mid-range device):");
-  console.log("");
-  console.log(
-    `%c✓ Eliminate ${midRangeTotalBlocking.toFixed(0)}ms of render-blocking time`,
-    "font-weight: bold; color: #22c55e; font-size: 13px",
-  );
-  console.log(
-    `%c✓ Reduce INP by ~${(totalProperties * 0.002 * midRangeProfile.cssSelectorMatchingMultiplier).toFixed(0)}ms per interaction`,
-    "font-weight: bold; color: #22c55e; font-size: 13px",
-  );
-  console.log(
-    `%c✓ Save ${mediaQueryResults.summary.total.bytesFormatted} of bandwidth`,
-    "font-weight: bold; color: #22c55e; font-size: 13px",
-  );
-  console.log("");
-
-  console.log("Implementation strategy:");
-  console.log("1. Split desktop-specific CSS into separate file(s)");
-  console.log(
-    '2. Load with media query: <link rel="stylesheet" href="desktop.css" media="(min-width: 768px)">',
-  );
-  console.log("3. Consider critical CSS inlining for above-the-fold mobile content");
-  console.log("");
-
-  // Business impact estimation
-  const fcpImprovement = midRangeTotalBlocking * 0.6;
-  console.log("📊 Estimated business impact:");
-  console.log(`   • FCP improvement: ~${fcpImprovement.toFixed(0)}ms`);
-  console.log("   • 100ms FCP improvement ≈ 1% conversion increase (Google/Deloitte research)");
-  console.log(`   • Potential conversion lift: ~${(fcpImprovement / 100).toFixed(2)}%`);
-
+  issues.forEach((i) => console.log(`[${i.severity}] ${i.message}`));
   console.groupEnd();
 
-  // Memory impact
-  console.group("🧠 MEMORY IMPACT");
-
-  // CSSOM memory estimation
-  // Approximately: each CSS rule = ~1KB in memory (including selector, properties, computed values)
-  const totalMediaRules = mediaQueryResults.summary.total.mediaQueries;
-  const estimatedMemoryKB = totalMediaRules * 1.0; // 1KB per rule
-
-  console.log(`Estimated CSSOM memory overhead: ~${estimatedMemoryKB.toFixed(1)} KB`);
-  console.log(
-    `Total unnecessary memory allocation: ~${(unnecessaryBytes / 1024 + estimatedMemoryKB).toFixed(1)} KB`,
-  );
-  console.log("");
-  console.log("💡 This memory stays allocated throughout the page lifecycle,");
-  console.log("   contributing to memory pressure on low-end devices.");
-
-  console.groupEnd();
-
-  // CORS disclaimer if applicable
-  if (mediaQueryResults.summary.corsBlocked > 0) {
-    console.log("");
-    console.log(
-      `%c⚠️ Note: ${mediaQueryResults.summary.corsBlocked} CSS file(s) blocked by CORS were not analyzed.`,
-      "color: #f59e0b; font-weight: bold",
-    );
-    console.log("The actual performance impact could be higher than shown above.");
-  }
-
-  // Return structured data
-  return {
-    unnecessaryBytes,
-    unnecessaryCss: mediaQueryResults.summary.total.bytesFormatted,
-    totalClasses,
-    totalProperties,
-    corsBlockedCount: mediaQueryResults.summary.corsBlocked,
-    deviceImpact: estimateCSSImpact(mediaQueryResults.summary).deviceImpact,
-    estimatedConversionLift: ((midRangeTotalBlocking * 0.6) / 100).toFixed(2) + "%",
-  };
-}
-
-window.analyzeCSSPerformanceImpact = analyzeCSSPerformanceImpact;
-
-// Run with default breakpoint (768px)
-(async () => {
-  const result = await analyzeCSSMediaQueries();
-  if (!result) {
-    return { script: "CSS-Media-Queries-Analysis", status: "error", error: "No analyzable CSS found (CORS blocked or no desktop media queries)" };
-  }
   return {
-    script: "CSS-Media-Queries-Analysis",
+    script: SCRIPT,
     status: "ok",
-    count: result.summary.total.mediaQueries,
+    count: queries.length,
     details: {
-      total: result.summary.total,
-      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)])),
-            ])
-          ),
-        };
-      })(),
+      minWidth,
+      rules: rules.length,
+      totalUnique: queries.length,
+      uniquenessRatio,
+      classes: rules.reduce((sum, r) => sum + r.classes, 0),
+      properties: rules.reduce((sum, r) => sum + r.properties, 0),
+      bytes: totalBytes,
+      bySource: bySource.slice(0, MAX_ITEMS),
+      corsBlockedCount,
     },
-    items: [...result.details.inline, ...result.details.files],
+    items: queries.slice(0, MAX_ITEMS),
+    issues,
   };
-})();
+}
+
+// Run with default breakpoint (768px)
+analyzeCSSMediaQueries();
 
 // Or customize the breakpoint:
 // analyzeCSSMediaQueries(1024);  // for desktop