webperf-snippets 0.2.0 → 0.3.0

package/snippets/Loading/Webfont-Usage-Analyzer.js

@@ -0,0 +1,332 @@
+// Webfont Usage Analyzer
+// https://webperf-snippets.nucliweb.net
+//
+// Cross-checks every @font-face known to document.fonts against the text that renders on the
+// page: faces loaded but not used, faces declared but never loaded, unicode-range subsets,
+// font-display, and the bytes the font files cost.
+// Idea and original script: https://github.com/paulcalvano/webfont-usage-analyzer
+
+(() => {
+  const SCRIPT = "Webfont-Usage-Analyzer";
+  const MAX_ITEMS = 50;
+  const MAX_ELEMENTS = 20000;
+  const MAX_CODEPOINTS = 20000;
+  const BYTES_WARNING = 300 * 1024;
+  const FONT_FILE = /\.(woff2?|ttf|otf|eot)(\?|#|$)/i;
+
+  if (typeof FontFace === "undefined" || !document.fonts) {
+    return {
+      script: SCRIPT,
+      status: "unsupported",
+      message: "The CSS Font Loading API (document.fonts) is not available in this browser",
+    };
+  }
+
+  const stripQuotes = (s) => String(s).replace(/["']/g, "").trim();
+  const kb = (bytes) => `${(bytes / 1024).toFixed(1)} KB`;
+
+  // --- Face metadata -------------------------------------------------------------------
+
+  // "normal" is 400 and "bold" is 700; a variable range such as "100 900" is kept as a range
+  function parseWeight(value) {
+    const v = String(value).trim().toLowerCase();
+    if (v === "normal") return [400, 400];
+    if (v === "bold") return [700, 700];
+    const nums = v.split(/\s+/).map(Number).filter((n) => !Number.isNaN(n));
+    if (nums.length === 0) return [400, 400];
+    return [Math.min(...nums), Math.max(...nums)];
+  }
+
+  // "U+0-FF, U+131, U+4??" as [[lo, hi], ...]
+  function parseRanges(value) {
+    const ranges = [];
+    for (const token of String(value).split(",")) {
+      const m = token.trim().match(/^U\+([0-9a-f?]+)(?:-([0-9a-f]+))?$/i);
+      if (!m) continue;
+      if (m[1].includes("?")) {
+        ranges.push([parseInt(m[1].replace(/\?/g, "0"), 16), parseInt(m[1].replace(/\?/g, "f"), 16)]);
+      } else {
+        const lo = parseInt(m[1], 16);
+        ranges.push([lo, m[2] ? parseInt(m[2], 16) : lo]);
+      }
+    }
+    return ranges;
+  }
+
+  const isDefaultRange = (value) => !value || /^U\+0-10FFFF$/i.test(value.trim());
+  const rangeCovers = (ranges, cp) => ranges.some(([lo, hi]) => cp >= lo && cp <= hi);
+  const styleKind = (s) => (String(s).trim().toLowerCase() === "normal" ? "normal" : "slanted");
+
+  // --- Font file URLs, from the @font-face rules ---------------------------------------
+
+  let unreadableStylesheets = 0;
+  const ruleSources = new Map(); // "family|weight|style|range" -> [absolute urls]
+  const faceKey = (family, weight, style, range) =>
+    [stripQuotes(family).toLowerCase(), String(weight).trim() || "normal", String(style).trim() || "normal", isDefaultRange(range) ? "" : parseRanges(range).map((r) => r.join("-")).join(",")].join("|");
+
+  function collectRules(rules, baseHref, depth) {
+    if (depth > 6) return;
+    for (const rule of rules) {
+      if (rule instanceof window.CSSFontFaceRule) {
+        const s = rule.style;
+        const urls = [...s.getPropertyValue("src").matchAll(/url\(\s*(["']?)(.*?)\1\s*\)/g)]
+          .map((m) => {
+            try {
+              return new URL(m[2], baseHref).href;
+            } catch {
+              return null;
+            }
+          })
+          .filter((u) => u && !u.startsWith("data:"));
+        const key = faceKey(s.getPropertyValue("font-family"), s.getPropertyValue("font-weight"), s.getPropertyValue("font-style"), s.getPropertyValue("unicode-range"));
+        ruleSources.set(key, [...(ruleSources.get(key) ?? []), ...urls]);
+      } else if (rule.styleSheet) {
+        readSheet(rule.styleSheet, depth + 1);
+      } else if (rule.cssRules) {
+        collectRules(rule.cssRules, baseHref, depth + 1);
+      }
+    }
+  }
+
+  function readSheet(sheet, depth) {
+    try {
+      collectRules(sheet.cssRules, sheet.href || location.href, depth);
+    } catch {
+      unreadableStylesheets++; // cross-origin stylesheet without CORS
+    }
+  }
+
+  Array.from(document.styleSheets).forEach((sheet) => readSheet(sheet, 0));
+
+  // --- Bytes, from Resource Timing -----------------------------------------------------
+
+  const knownUrls = new Set([...ruleSources.values()].flat());
+  const fontEntries = new Map(); // url -> encodedBodySize
+  for (const e of performance.getEntriesByType("resource")) {
+    if (FONT_FILE.test(e.name) || knownUrls.has(e.name)) {
+      fontEntries.set(e.name, Math.max(fontEntries.get(e.name) ?? 0, e.encodedBodySize || 0));
+    }
+  }
+  const totalFontBytes = [...fontEntries.values()].reduce((sum, b) => sum + b, 0);
+  // Cross-origin files without Timing-Allow-Origin report a size of 0
+  const bytesReadable = [...fontEntries.values()].every((b) => b > 0);
+
+  // --- Text that renders, grouped by font stack, weight and style ----------------------
+
+  const groups = new Map(); // key -> { families, weight, style, codepoints }
+  const HIDDEN_TAGS = new Set(["SCRIPT", "STYLE", "NOSCRIPT", "TEMPLATE", "HEAD", "TITLE", "META", "LINK"]);
+
+  function addText(el, style, text) {
+    const clean = text.replace(/\s+/g, "");
+    if (!clean) return;
+    const key = `${style.fontFamily}|${style.fontWeight}|${style.fontStyle}`;
+    let g = groups.get(key);
+    if (!g) {
+      const families = [...style.fontFamily.matchAll(/"([^"]+)"|'([^']+)'|([^,]+)/g)].map((m) => stripQuotes(m[1] ?? m[2] ?? m[3]).toLowerCase());
+      g = { families, weight: Number(style.fontWeight) || 400, style: style.fontStyle, codepoints: new Set() };
+      groups.set(key, g);
+    }
+    for (const ch of clean) {
+      if (g.codepoints.size >= MAX_CODEPOINTS) break;
+      g.codepoints.add(ch.codePointAt(0));
+    }
+  }
+
+  // Computed content of ::before/::after: "\"\\e900\"" -> the icon glyph
+  const decodeContent = (content) => {
+    if (!content || content === "none" || content === "normal") return "";
+    return content
+      .replace(/^["']|["']$/g, "")
+      .replace(/\\([0-9a-f]{1,6})\s?/gi, (_, hex) => String.fromCodePoint(parseInt(hex, 16)))
+      .replace(/\\(.)/g, "$1");
+  };
+
+  const elements = [document.body, ...document.body.querySelectorAll("*")];
+  const scanned = Math.min(elements.length, MAX_ELEMENTS);
+  for (let i = 0; i < scanned; i++) {
+    const el = elements[i];
+    if (HIDDEN_TAGS.has(el.tagName) || (el.checkVisibility && !el.checkVisibility())) continue;
+    const style = getComputedStyle(el);
+    let own = "";
+    for (const node of el.childNodes) if (node.nodeType === Node.TEXT_NODE) own += node.nodeValue;
+    addText(el, style, own);
+    for (const pseudo of ["::before", "::after"]) {
+      const ps = getComputedStyle(el, pseudo);
+      addText(el, ps, decodeContent(ps.content));
+    }
+  }
+
+  // --- Faces ---------------------------------------------------------------------------
+
+  const faces = Array.from(document.fonts).map((f) => {
+    const family = stripQuotes(f.family);
+    const range = isDefaultRange(f.unicodeRange) ? "" : f.unicodeRange.trim();
+    const urls = ruleSources.get(faceKey(f.family, f.weight, f.style, f.unicodeRange)) ?? [];
+    const url = urls.find((u) => fontEntries.has(u)) ?? urls[0] ?? "";
+    return {
+      family,
+      weight: String(f.weight),
+      style: String(f.style),
+      display: f.display || "auto",
+      unicodeRange: range,
+      status: f.status,
+      used: false,
+      bytes: url && fontEntries.has(url) ? fontEntries.get(url) : 0,
+      url,
+      _weightRange: parseWeight(f.weight),
+      _ranges: range ? parseRanges(range) : null,
+    };
+  });
+
+  // A face is used when the text that renders with its family reaches it: the style matches
+  // (or the family has no face in that style), the text has a character inside its
+  // unicode-range, and it is the closest weight, since browsers pick the nearest weight.
+  const weightDistance = (face, w) =>
+    w >= face._weightRange[0] && w <= face._weightRange[1] ? 0 : Math.min(Math.abs(w - face._weightRange[0]), Math.abs(w - face._weightRange[1]));
+  const covers = (face, codepoints) => !face._ranges || [...codepoints].some((cp) => rangeCovers(face._ranges, cp));
+
+  for (const g of groups.values()) {
+    for (const family of g.families) {
+      const ofFamily = faces.filter((f) => f.family.toLowerCase() === family);
+      if (ofFamily.length === 0) continue;
+      const sameStyle = ofFamily.filter((f) => styleKind(f.style) === styleKind(g.style));
+      const candidates = (sameStyle.length ? sameStyle : ofFamily).filter((f) => covers(f, g.codepoints));
+      if (candidates.length === 0) continue;
+      const best = Math.min(...candidates.map((f) => weightDistance(f, g.weight)));
+      candidates.filter((f) => weightDistance(f, g.weight) === best).forEach((f) => (f.used = true));
+    }
+  }
+
+  // --- Classification ------------------------------------------------------------------
+
+  // Split fonts declare long ranges; keep reported text short
+  const shortRange = (r) => (r.length > 60 ? `${r.slice(0, 57)}...` : r);
+  const label = (f) => `${f.family} ${f.weight} ${f.style}${f.unicodeRange ? ` (${shortRange(f.unicodeRange)})` : ""}`;
+  const loaded = faces.filter((f) => f.status === "loaded");
+  const loadedUnused = loaded.filter((f) => !f.used);
+  const neverLoaded = faces.filter((f) => f.status === "unloaded");
+  const failed = faces.filter((f) => f.status === "error");
+  const neverLoadedSubsets = neverLoaded.filter((f) => f.unicodeRange);
+  const neverLoadedWhole = neverLoaded.filter((f) => !f.unicodeRange);
+  const blockingDisplay = faces.filter((f) => (f.status === "loaded" || f.status === "loading") && (f.display === "auto" || f.display === "block"));
+  const loadedUnusedBytes = loadedUnused.reduce((sum, f) => sum + f.bytes, 0);
+
+  const bySubsetFamily = new Map();
+  for (const f of faces.filter((x) => x.unicodeRange)) {
+    const entry = bySubsetFamily.get(f.family) ?? { family: f.family, subsets: 0, loadedSubsets: 0 };
+    entry.subsets++;
+    if (f.status === "loaded") entry.loadedSubsets++;
+    bySubsetFamily.set(f.family, entry);
+  }
+  const unicodeRangeFamilies = [...bySubsetFamily.values()].filter((e) => e.subsets > 1).slice(0, 20);
+
+  const displayCounts = {};
+  faces.forEach((f) => (displayCounts[f.display] = (displayCounts[f.display] ?? 0) + 1));
+
+  const names = (list) => {
+    // A stylesheet can declare the same face twice
+    const unique = [...new Set(list.map(label))];
+    const shown = unique.slice(0, 8).join(", ");
+    return unique.length > 8 ? `${shown} and ${unique.length - 8} more` : shown;
+  };
+
+  const issues = [
+    ...failed.map((f) => ({ severity: "error", message: `Font failed to load: ${label(f)}` })),
+    ...loadedUnused.map((f) => ({
+      severity: "warning",
+      message: `Loaded but not used by any rendered element: ${label(f)}${f.bytes ? `, ${kb(f.bytes)} downloaded for nothing` : ""}`,
+    })),
+  ];
+  if (blockingDisplay.length > 0) {
+    issues.push({
+      severity: "warning",
+      message: `font-display is auto or block on ${blockingDisplay.length} face(s), so text can stay invisible while they load. Use swap or optional: ${names(blockingDisplay)}`,
+    });
+  }
+  if (totalFontBytes > BYTES_WARNING) {
+    issues.push({ severity: "warning", message: `Web fonts weigh ${kb(totalFontBytes)} in total (over ${kb(BYTES_WARNING)}). Subset, use WOFF2 or drop unused weights` });
+  }
+  if (neverLoadedWhole.length > 0) {
+    issues.push({ severity: "info", message: `Declared but never loaded (${neverLoadedWhole.length}); nothing on this page needed them: ${names(neverLoadedWhole)}` });
+  }
+  if (neverLoadedSubsets.length > 0) {
+    issues.push({ severity: "info", message: `unicode-range subsets this page did not need (${neverLoadedSubsets.length}), which is the intended behavior of a split font: ${names(neverLoadedSubsets)}` });
+  }
+  if (!bytesReadable) {
+    issues.push({ severity: "info", message: "Some font files are cross-origin without Timing-Allow-Origin, so their size reads as 0 and the byte totals are a lower bound" });
+  }
+  if (unreadableStylesheets > 0) {
+    issues.push({ severity: "info", message: `${unreadableStylesheets} cross-origin stylesheet(s) could not be read, so their font files cannot be matched to faces` });
+  }
+  if (scanned < elements.length) {
+    issues.push({ severity: "info", message: `Only the first ${MAX_ELEMENTS} elements were scanned for text; some faces may be reported as unused` });
+  }
+
+  // --- Console output ------------------------------------------------------------------
+
+  console.group("%cWebfont Usage Analyzer", "font-weight: bold; font-size: 14px;");
+  console.log(`Faces: ${faces.length} | loaded: ${loaded.length} | used: ${faces.filter((f) => f.used).length} | loaded but unused: ${loadedUnused.length} | never loaded: ${neverLoaded.length}`);
+  console.log(`Font files: ${fontEntries.size} | total: ${kb(totalFontBytes)}${bytesReadable ? "" : " (lower bound, cross-origin sizes hidden)"}`);
+  if (faces.length > 0) {
+    console.table(
+      faces.map((f) => ({
+        Family: f.family,
+        Weight: f.weight,
+        Style: f.style,
+        Display: f.display,
+        "unicode-range": shortRange(f.unicodeRange) || "all",
+        Status: f.status,
+        Used: f.used ? "yes" : "no",
+        Size: f.bytes ? kb(f.bytes) : "-",
+      }))
+    );
+  } else {
+    console.log("No @font-face rules or FontFace objects on this page.");
+  }
+  issues.forEach((i) => console.log(`[${i.severity}] ${i.message}`));
+  console.groupEnd();
+
+  // --- Return value --------------------------------------------------------------------
+
+  // Problems first, so the 50-item cap never hides them
+  const rank = (f) => (f.status === "error" ? 0 : f.status === "loaded" && !f.used ? 1 : f.status === "loaded" ? 2 : 3);
+  const items = faces
+    .map((f, index) => ({ f, index }))
+    .sort((a, b) => rank(a.f) - rank(b.f) || a.index - b.index)
+    .slice(0, MAX_ITEMS)
+    .map(({ f }) => ({
+      family: f.family,
+      weight: f.weight,
+      style: f.style,
+      display: f.display,
+      unicodeRange: shortRange(f.unicodeRange),
+      status: f.status,
+      used: f.used,
+      bytes: f.bytes,
+      url: f.url,
+    }));
+
+  return {
+    script: SCRIPT,
+    status: "ok",
+    count: faces.length,
+    corsLimitedAnalysis: !bytesReadable,
+    details: {
+      loadedCount: loaded.length,
+      usedCount: loaded.filter((f) => f.used).length,
+      loadedUnusedCount: loadedUnused.length,
+      loadedUnusedBytes,
+      neverLoadedCount: neverLoaded.length,
+      errorCount: failed.length,
+      fontFileCount: fontEntries.size,
+      totalFontBytes,
+      bytesReadable,
+      fontDisplay: displayCounts,
+      unicodeRangeFamilies,
+      unreadableStylesheets,
+      elementsScanned: scanned,
+    },
+    items,
+    issues,
+  };
+})();

package/snippets/Media/Image-Element-Audit.js

@@ -60,6 +60,10 @@
     return ["avif", "webp", "jxl", "auto (cdn)", "auto (cdn?)"].includes(format);
   }
 
+  // Images whose format could not be read from the response (fetch blocked by CORS) and was
+  // guessed from the URL instead
+  let formatGuessedCount = 0;
+
   async function fetchFormat(url) {
     if (!url) return detectFormat(url);
     try {
@@ -72,7 +76,9 @@
       if (ct.includes("gif")) return "gif";
       if (ct.includes("svg")) return "svg";
       if (ct.includes("jpeg")) return "jpg";
-    } catch {}
+    } catch {
+      formatGuessedCount++;
+    }
     return detectFormat(url);
   }
 
@@ -111,7 +117,7 @@
 
   if (images.length === 0) {
     console.log("No <img> elements found on this page.");
-    return { script: "Image-Element-Audit", status: "ok", count: 0, items: [], issues: [] };
+    return { script: "Image-Element-Audit", status: "ok", count: 0, corsLimitedAnalysis: false, items: [], issues: [] };
   }
 
   const lcpCandidate = findLcpCandidate(images);
@@ -305,12 +311,25 @@
   console.groupEnd();
 
   const lcpData = lcpCandidate ? audited.find((r) => r.isLcp) : null;
+  // The list keeps the 50 images to look at first: the LCP image, then the most errors, warnings and notes, then those in the viewport; count and details cover all of them
+  const MAX_ITEMS = 50;
+  const countBy = (r, severity) => r.issues.filter((i) => i.s === severity).length;
+  const rankedImages = [...audited].sort(
+    (a, b) =>
+      Number(b.isLcp) - Number(a.isLcp) ||
+      countBy(b, "error") - countBy(a, "error") ||
+      countBy(b, "warning") - countBy(a, "warning") ||
+      b.issues.length - a.issues.length ||
+      Number(b.inViewport) - Number(a.inViewport)
+  );
   return {
     script: "Image-Element-Audit",
     status: "ok",
     count: images.length,
+    corsLimitedAnalysis: formatGuessedCount > 0,
     details: {
       totalImages: images.length,
+      formatGuessedCount,
       inViewport: audited.filter((r) => r.inViewport).length,
       offViewport: audited.filter((r) => !r.inViewport).length,
       totalErrors,
@@ -326,7 +345,7 @@
           }
         : null,
     },
-    items: audited.map((r) => ({
+    items: rankedImages.slice(0, MAX_ITEMS).map((r) => ({
       url: r.src,
       format: r.format,
       inViewport: r.inViewport,

package/snippets/Media/Oversized-Images.js

@@ -0,0 +1,217 @@
+// Oversized Images
+// https://webperf-snippets.nucliweb.net
+
+(async () => {
+  const OVERSIZED_RATIO = 1.5; // file has at least 1.5x the pixels it needs on each axis
+  const UNDERSIZED_RATIO = 0.9; // file has less than 90% of the pixels it needs
+  const SEVERE_OVERSIZED = 2;
+  const SEVERE_UNDERSIZED = 0.75;
+  const MAX_ITEMS = 50;
+  const LOAD_TIMEOUT_MS = 3000;
+
+  const dpr = window.devicePixelRatio || 1;
+
+  const round2 = (n) => Math.round(n * 100) / 100;
+  const px = (v) => parseFloat(v) || 0;
+
+  const shortUrl = (url) => (url.startsWith("data:") ? url.slice(0, 60) : url);
+  const fileName = (url) => url.split("?")[0].split("/").pop() || url;
+
+  function selectorOf(el) {
+    if (el.id) return `img#${el.id}`;
+    const cls = Array.from(el.classList).slice(0, 2);
+    return cls.length ? `img.${cls.join(".")}` : "img";
+  }
+
+  function isVector(url) {
+    return /^data:image\/svg/i.test(url) || /\.svg([?#]|$)/i.test(url);
+  }
+
+  // The size of the file in pixels. HTMLImageElement.naturalWidth is corrected by the srcset
+  // density (a 400px file picked as "2x" reports 200), so a fresh Image, which has no srcset,
+  // gives the real pixels. The file comes from the browser cache.
+  function loadPixels(url) {
+    return new Promise((resolve) => {
+      const probe = new Image();
+      const timer = setTimeout(() => resolve(null), LOAD_TIMEOUT_MS);
+      probe.onload = () => {
+        clearTimeout(timer);
+        resolve({ width: probe.naturalWidth, height: probe.naturalHeight });
+      };
+      probe.onerror = () => {
+        clearTimeout(timer);
+        resolve(null);
+      };
+      probe.src = url;
+    });
+  }
+
+  // Bytes of each image URL; null when the browser hides them (cross-origin without
+  // Timing-Allow-Origin).
+  const transferByUrl = new Map();
+  performance.getEntriesByType("resource").forEach((e) => {
+    if (e.initiatorType !== "img" && e.initiatorType !== "css" && e.initiatorType !== "other") return;
+    const bytes = e.transferSize > 0 ? e.transferSize : e.encodedBodySize > 0 ? e.encodedBodySize : null;
+    if (bytes !== null) transferByUrl.set(e.name, bytes);
+  });
+
+  // Scale from file pixels to CSS pixels on each axis, following object-fit.
+  function scaleOf(img, boxW, boxH, fileW, fileH) {
+    const fit = getComputedStyle(img).objectFit;
+    const sx = boxW / fileW;
+    const sy = boxH / fileH;
+    const contain = Math.min(sx, sy);
+    const none = img.naturalWidth / fileW; // CSS pixels per file pixel, density-corrected
+    if (fit === "cover") return { sx: Math.max(sx, sy), sy: Math.max(sx, sy) };
+    if (fit === "contain") return { sx: contain, sy: contain };
+    if (fit === "none") return { sx: none, sy: none };
+    if (fit === "scale-down") {
+      const s = Math.min(contain, none);
+      return { sx: s, sy: s };
+    }
+    return { sx, sy }; // fill
+  }
+
+  const images = Array.from(document.querySelectorAll("img"));
+  let skippedHidden = 0;
+  let skippedNotLoaded = 0;
+  let skippedVector = 0;
+
+  const candidates = [];
+  images.forEach((img) => {
+    const rect = img.getBoundingClientRect();
+    if (rect.width === 0 || rect.height === 0) return void skippedHidden++;
+    const url = img.currentSrc || img.src || "";
+    if (!img.complete || img.naturalWidth === 0 || !url) return void skippedNotLoaded++;
+    if (isVector(url)) return void skippedVector++;
+    candidates.push({ img, rect, url });
+  });
+
+  const pixelsByUrl = new Map();
+  await Promise.all(
+    [...new Set(candidates.map((c) => c.url))].map(async (url) => {
+      pixelsByUrl.set(url, await loadPixels(url));
+    }),
+  );
+
+  const flagged = [];
+  let checked = 0;
+  let wastedPixels = 0;
+  const wastedBytesByUrl = new Map();
+
+  candidates.forEach(({ img, rect, url }) => {
+    const file = pixelsByUrl.get(url);
+    if (!file || !file.width || !file.height) return void skippedNotLoaded++;
+    checked++;
+
+    const style = getComputedStyle(img);
+    const boxW = rect.width - px(style.paddingLeft) - px(style.paddingRight) - px(style.borderLeftWidth) - px(style.borderRightWidth);
+    const boxH = rect.height - px(style.paddingTop) - px(style.paddingBottom) - px(style.borderTopWidth) - px(style.borderBottomWidth);
+    if (boxW <= 0 || boxH <= 0) return;
+
+    const { sx, sy } = scaleOf(img, boxW, boxH, file.width, file.height);
+    const neededWidth = Math.round(file.width * sx * dpr);
+    const neededHeight = Math.round(file.height * sy * dpr);
+    // Pixels of the file per device pixel drawn, on the tighter axis
+    const ratio = Math.min(1 / (sx * dpr), 1 / (sy * dpr));
+
+    let verdict = null;
+    if (ratio >= OVERSIZED_RATIO) verdict = "oversized";
+    else if (ratio < UNDERSIZED_RATIO) verdict = "undersized";
+    if (!verdict) return;
+
+    const filePixels = file.width * file.height;
+    const wasted = verdict === "oversized" ? Math.max(0, filePixels - neededWidth * neededHeight) : 0;
+    const transferBytes = transferByUrl.get(url) ?? null;
+    const wastedBytes = transferBytes === null ? null : Math.round(transferBytes * (wasted / filePixels));
+
+    wastedPixels += wasted;
+    if (wastedBytes !== null) wastedBytesByUrl.set(url, Math.max(wastedBytesByUrl.get(url) ?? 0, wastedBytes));
+
+    flagged.push({
+      selector: selectorOf(img),
+      url: shortUrl(url),
+      verdict,
+      naturalWidth: file.width,
+      naturalHeight: file.height,
+      renderedWidth: Math.round(boxW),
+      renderedHeight: Math.round(boxH),
+      neededWidth,
+      neededHeight,
+      ratio: round2(ratio),
+      wastedPixels: wasted,
+      transferBytes,
+      wastedBytes,
+      hasSrcset: img.hasAttribute("srcset"),
+      hasSizes: img.hasAttribute("sizes"),
+    });
+  });
+
+  // Most waste first; undersized images (no waste) follow, the blurriest first
+  flagged.sort((a, b) => b.wastedPixels - a.wastedPixels || a.ratio - b.ratio);
+
+  const oversized = flagged.filter((f) => f.verdict === "oversized").length;
+  const undersized = flagged.length - oversized;
+  // An image used several times downloads once, so each URL counts once
+  const wastedBytes = [...wastedBytesByUrl.values()].reduce((a, b) => a + b, 0);
+
+  const issues = flagged.map((f) => {
+    const size = `${f.naturalWidth}x${f.naturalHeight}`;
+    const shown = `${f.neededWidth}x${f.neededHeight}`;
+    if (f.verdict === "oversized") {
+      const kb = f.wastedBytes === null ? "" : `, about ${Math.round(f.wastedBytes / 1024)} KB wasted`;
+      return {
+        severity: f.ratio >= SEVERE_OVERSIZED ? "warning" : "info",
+        message: `${fileName(f.url)}: ${size} file for a ${shown} slot at ${dpr}x (${f.ratio}x too large${kb})`,
+      };
+    }
+    return {
+      severity: f.ratio < SEVERE_UNDERSIZED ? "warning" : "info",
+      message: `${fileName(f.url)}: ${size} file for a ${shown} slot at ${dpr}x (blurry, needs ${round2(1 / f.ratio)}x more pixels)`,
+    };
+  });
+
+  const items = flagged.slice(0, MAX_ITEMS);
+
+  console.group("%cOversized Images", "font-weight: bold; font-size: 14px;");
+  console.log(`   Images checked : ${checked} (devicePixelRatio ${dpr})`);
+  console.log(`   Oversized      : ${oversized}`);
+  console.log(`   Undersized     : ${undersized}`);
+  console.log(`   Wasted pixels  : ${wastedPixels.toLocaleString()}`);
+  console.log(`   Wasted bytes   : ${Math.round(wastedBytes / 1024)} KB (estimated)`);
+  if (items.length > 0) {
+    console.table(
+      items.map((f) => ({
+        image: fileName(f.url).slice(0, 40),
+        verdict: f.verdict,
+        file: `${f.naturalWidth}x${f.naturalHeight}`,
+        needed: `${f.neededWidth}x${f.neededHeight}`,
+        ratio: f.ratio,
+        "wasted KB": f.wastedBytes === null ? "n/a" : Math.round(f.wastedBytes / 1024),
+      })),
+    );
+  } else {
+    console.log("%cNo oversized or undersized images found.", "color: #22c55e; font-weight: bold;");
+  }
+  console.groupEnd();
+
+  return {
+    script: "Oversized-Images",
+    status: "ok",
+    count: flagged.length,
+    details: {
+      devicePixelRatio: dpr,
+      totalImages: images.length,
+      imagesChecked: checked,
+      oversized,
+      undersized,
+      wastedPixels,
+      wastedBytes,
+      skippedHidden,
+      skippedNotLoaded,
+      skippedVector,
+    },
+    items,
+    issues,
+  };
+})();

package/snippets/Media/SVG-Embedded-Bitmap-Analysis.js

@@ -1,7 +1,7 @@
 // SVG Embedded Bitmap Analysis
 // https://webperf-snippets.nucliweb.net
 
-void (async () => {
+(async () => {
   function formatSize(bytes) {
     if (!bytes || bytes === 0) return "—";
     if (bytes < 1024) return `${bytes} B`;
@@ -20,7 +20,7 @@ void (async () => {
   }
 
   function compressionFromEntry(entry) {
-    if (entry.transferSize === 0 && entry.encodedBodySize === 0) return "cached";
+    // Cross-origin resources without Timing-Allow-Origin report every size as 0
     if (entry.encodedBodySize === 0) return "unknown";
     if (entry.encodedBodySize < entry.decodedBodySize) return "compressed";
     return "none";
@@ -109,7 +109,14 @@ void (async () => {
 
   if (svgEntries.length === 0 && inlineSvgTotal === 0) {
     console.log("No SVG resources found on this page.");
-    return { script: "SVG-Embedded-Bitmap-Analysis", status: "ok", count: 0, items: [], issues: [] };
+    return {
+      script: "SVG-Embedded-Bitmap-Analysis",
+      status: "ok",
+      count: 0,
+      details: { externalSvgCount: 0, inlineSvgTotal: 0, svgsWithUse: 0, standaloneInlineSvgs: 0, spriteOpportunity: false },
+      items: [],
+      issues: [],
+    };
   }
 
   console.group("%c🖼️ SVG Embedded Bitmap Analysis", "font-weight: bold; font-size: 14px;");
@@ -210,6 +217,14 @@ void (async () => {
     script: "SVG-Embedded-Bitmap-Analysis",
     status: "ok",
     count: withBitmaps.length,
+    details: {
+      externalSvgCount: svgEntries.length,
+      inlineSvgTotal,
+      svgsWithUse,
+      standaloneInlineSvgs,
+      // Five or more standalone inline SVGs are worth moving into a <symbol> sprite
+      spriteOpportunity: standaloneInlineSvgs >= 5,
+    },
     items: withBitmaps.map((r) => ({
       url: r.url || r.name,
       name: r.name,