webperf-snippets 1.4.0 → 1.5.0

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

@@ -269,43 +269,42 @@
   };
 
   const issues = [
-    ...failed.map((f) => ({ severity: "error", message: `Font failed to load: ${label(f)}` })),
+    ...failed.map((f) => ({ code: "load-failed", severity: "error", message: `Font failed to load: ${label(f)}`, target: f.url || label(f) })),
     ...[...new Map(loadedUnused.map((f) => [`${label(f)}|${f.url}`, f])).values()].map((f) => {
       const bytes = wastedBytes(f) ? `, ${kb(wastedBytes(f))} downloaded for nothing` : "";
-      return {
-        severity: "warning",
-        message: f._redeclared
-          ? `Loaded but declared again later with the same descriptors, so the page renders with the other file: ${label(f)}${f.url ? ` from ${f.url}` : ""}${bytes}`
-          : `Loaded but not used by any rendered element: ${label(f)}${bytes}`,
-      };
+      const target = f.url || label(f);
+      return f._redeclared
+        ? { code: "redeclared", severity: "warning", message: `Loaded but declared again later with the same descriptors, so the page renders with the other file: ${label(f)}${f.url ? ` from ${f.url}` : ""}${bytes}`, target }
+        : { code: "loaded-unused", severity: "warning", message: `Loaded but not used by any rendered element: ${label(f)}${bytes}`, target };
     }),
   ];
   if (blockingDisplay.length > 0) {
     issues.push({
+      code: "blocking-font-display",
       severity: "warning",
       message: `font-display is auto or block on ${uniqueLabels(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` });
+    issues.push({ code: "heavy-fonts", 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 (${uniqueLabels(neverLoadedWhole).length}); nothing on this page needed them: ${names(neverLoadedWhole)}` });
+    issues.push({ code: "never-loaded", severity: "info", message: `Declared but never loaded (${uniqueLabels(neverLoadedWhole).length}); nothing on this page needed them: ${names(neverLoadedWhole)}` });
   }
   if (shadowed.length > 0) {
-    issues.push({ severity: "info", message: `Declared more than once with the same descriptors; the page uses a later declaration, so these never loaded (${uniqueLabels(shadowed).length}): ${names(shadowed)}` });
+    issues.push({ code: "shadowed", severity: "info", message: `Declared more than once with the same descriptors; the page uses a later declaration, so these never loaded (${uniqueLabels(shadowed).length}): ${names(shadowed)}` });
   }
   if (neverLoadedSubsets.length > 0) {
-    issues.push({ severity: "info", message: `unicode-range subsets this page did not need (${uniqueLabels(neverLoadedSubsets).length}), which is the intended behavior of a split font: ${names(neverLoadedSubsets)}` });
+    issues.push({ code: "unused-subsets", severity: "info", message: `unicode-range subsets this page did not need (${uniqueLabels(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" });
+    issues.push({ code: "size-unknown", 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` });
+    issues.push({ code: "unreadable-stylesheets", 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` });
+    issues.push({ code: "elements-capped", severity: "info", message: `Only the first ${MAX_ELEMENTS} elements were scanned for text; some faces may be reported as unused` });
   }
 
   // --- One row per face and file --------------------------------------------------------

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

@@ -199,34 +199,34 @@
 
     if (isLcp) {
       if (fetchpriority !== "high")
-        issues.push({ s: "error", msg: 'Add fetchpriority="high" to the LCP image' });
+        issues.push({ code: "lcp-no-fetchpriority", s: "error", msg: 'Add fetchpriority="high" to the LCP image' });
       if (loading === "lazy")
-        issues.push({ s: "error", msg: 'Remove loading="lazy" from the LCP image' });
+        issues.push({ code: "lcp-lazy", s: "error", msg: 'Remove loading="lazy" from the LCP image' });
       if (decoding !== "sync")
-        issues.push({ s: "warning", msg: 'Consider decoding="sync" for the LCP image' });
+        issues.push({ code: "lcp-not-decoding-sync", s: "warning", msg: 'Consider decoding="sync" for the LCP image' });
       lcpPreload = findPreloadForLcp(img, imagePreloads);
       if (!lcpPreload)
-        issues.push({ s: "warning", msg: 'LCP image has no <link rel="preload" as="image">' });
+        issues.push({ code: "lcp-not-preloaded", s: "warning", msg: 'LCP image has no <link rel="preload" as="image">' });
       else if (lcpPreload.getAttribute("fetchpriority") !== "high")
-        issues.push({ s: "info", msg: 'LCP image preload is missing fetchpriority="high"' });
+        issues.push({ code: "lcp-preload-no-fetchpriority", s: "info", msg: 'LCP image preload is missing fetchpriority="high"' });
     } else if (inViewport) {
       if (loading === "lazy")
-        issues.push({ s: "warning", msg: 'Remove loading="lazy" (image is above the fold)' });
+        issues.push({ code: "lazy-in-viewport", s: "warning", msg: 'Remove loading="lazy" (image is above the fold)' });
     } else {
       if (loading !== "lazy")
-        issues.push({ s: "warning", msg: 'Add loading="lazy" (image is off-viewport)' });
+        issues.push({ code: "eager-off-viewport", s: "warning", msg: 'Add loading="lazy" (image is off-viewport)' });
       if (fetchpriority === "high")
-        issues.push({ s: "error", msg: 'Remove fetchpriority="high" (image is off-viewport)' });
+        issues.push({ code: "high-priority-off-viewport", s: "error", msg: 'Remove fetchpriority="high" (image is off-viewport)' });
     }
 
     if (loading === "lazy" && fetchpriority === "high")
-      issues.push({ s: "error", msg: 'Conflict: loading="lazy" + fetchpriority="high"' });
+      issues.push({ code: "lazy-and-high-priority", s: "error", msg: 'Conflict: loading="lazy" + fetchpriority="high"' });
 
     if (!hasDimensions)
-      issues.push({ s: "warning", msg: "Missing width/height attributes (CLS risk)" });
+      issues.push({ code: "missing-dimensions", s: "warning", msg: "Missing width/height attributes (CLS risk)" });
 
     if (!isModernFormat(format) && !inPicture && format !== "svg")
-      issues.push({ s: "info", msg: "No modern format detected (WebP / AVIF / JXL)" });
+      issues.push({ code: "no-modern-format", s: "info", msg: "No modern format detected (WebP / AVIF / JXL)" });
 
     return {
       img,
@@ -413,16 +413,19 @@
       hasSrcset: r.hasSrcset,
       hasSizes: r.hasSizes,
       inPicture: r.inPicture,
-      issues: r.issues.map((i) => ({ severity: i.s, message: i.msg })),
+      issues: r.issues.map((i) => ({ code: i.code, severity: i.s, message: i.msg })),
     })),
     issues: [
       ...(nonImageTag
-        ? [{ severity: "info", message: `The LCP element is not an <img> (${nonImageTag === "unknown" ? "not in the page's images" : nonImageTag}), so no image is audited as the LCP` }]
+        ? [{ code: "lcp-not-img", severity: "info", message: `The LCP element is not an <img> (${nonImageTag === "unknown" ? "not in the page's images" : nonImageTag}), so no image is audited as the LCP` }]
         : []),
       ...audited.flatMap((r) =>
         r.issues.map((i) => ({
+          code: i.code,
           severity: i.s,
           message: `${shortSrc(r.src) || "(no src)"}: ${i.msg}`,
+          // The URL names the image; a data: URL is cut, as it can weigh more than the result
+          ...(r.src ? { target: r.src.startsWith("data:") ? r.src.slice(0, 60) : r.src } : {}),
         }))
       ),
     ],

package/snippets/Media/Oversized-Images.js

@@ -186,13 +186,17 @@
     if (f.verdict === "oversized") {
       const kb = f.wastedBytes === null ? "" : `, about ${Math.round(f.wastedBytes / 1024)} KB wasted`;
       return {
+        code: "oversized",
         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})`,
+        target: f.url,
       };
     }
     return {
+      code: "undersized",
       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)`,
+      target: f.url,
     };
   });
 

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

@@ -242,7 +242,7 @@
 
   const issues = [];
   if (withBitmaps.length > 0) {
-    issues.push({ severity: "warning", message: `${withBitmaps.length} SVG file(s) contain embedded bitmaps` });
+    issues.push({ code: "embedded-bitmaps", severity: "warning", message: `${withBitmaps.length} SVG file(s) contain embedded bitmaps` });
   }
   if (spriteOpportunity) {
     const withUse =
@@ -250,6 +250,7 @@
         ? ` (${svgsWithUse} inline SVG${svgsWithUse === 1 ? " already uses" : "s already use"} <use>)`
         : "";
     issues.push({
+      code: "sprite-opportunity",
       severity: "info",
       message: `${standaloneInlineSvgs} standalone inline SVGs could share one <symbol> sprite referenced with <use>${withUse}`,
     });

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

@@ -60,7 +60,7 @@
       status: "ok",
       count: 0,
       items: [],
-      issues: [{ severity: "info", message: "No <video> elements on this page, so there was nothing to audit." }],
+      issues: [{ code: "no-videos", severity: "info", message: "No <video> elements on this page, so there was nothing to audit." }],
     };
   }
 
@@ -84,6 +84,7 @@
 
     if (preload === "auto" && !autoplay) {
       issues.push({
+        code: "preload-auto",
         s: "error",
         msg: 'preload="auto" loads the full video eagerly: use preload="none" or preload="metadata"',
       });
@@ -91,6 +92,7 @@
 
     if (!autoplay && !inViewport && preload !== "none") {
       issues.push({
+        code: "off-viewport-preload",
         s: "warning",
         msg: 'Off-viewport video without preload="none": set preload="none" to avoid unnecessary loading',
       });
@@ -98,6 +100,7 @@
 
     if (autoplay && !muted) {
       issues.push({
+        code: "autoplay-not-muted",
         s: "error",
         msg: "autoplay without muted: browsers block unmuted autoplay",
       });
@@ -105,6 +108,7 @@
 
     if (autoplay && !playsinline) {
       issues.push({
+        code: "autoplay-no-playsinline",
         s: "warning",
         msg: "autoplay without playsinline: iOS Safari forces fullscreen mode",
       });
@@ -112,6 +116,7 @@
 
     if (!poster) {
       issues.push({
+        code: "missing-poster",
         s: "warning",
         msg: "Missing poster: no preview frame shown before playback starts",
       });
@@ -119,6 +124,7 @@
 
     if (!hasDimensions) {
       issues.push({
+        code: "missing-dimensions",
         s: "warning",
         msg: "Missing width/height attributes (CLS risk)",
       });
@@ -126,6 +132,7 @@
 
     if (!isModernCodec(codec) && codec !== "no source") {
       issues.push({
+        code: "no-modern-codec",
         s: "info",
         msg: "No modern codec source detected: consider adding a WebM source (VP9 or AV1) for better compression",
       });
@@ -133,6 +140,7 @@
 
     if (!controls && !autoplay) {
       issues.push({
+        code: "no-controls",
         s: "info",
         msg: "No controls attribute and no autoplay, so users may not be able to play the video",
       });
@@ -276,12 +284,15 @@
       hasPoster: r.poster !== "(not set)",
       hasDimensions: r.hasDimensions,
       sourceCount: r.sourceCount,
-      issues: r.issues.map((i) => ({ severity: i.s, message: i.msg })),
+      issues: r.issues.map((i) => ({ code: i.code, severity: i.s, message: i.msg })),
     })),
     issues: audited.flatMap((r) =>
       r.issues.map((i) => ({
+        code: i.code,
         severity: i.s,
         message: `${shortSrc(r.src) || "(no src)"}: ${i.msg}`,
+        // The URL names the video; a data: URL is cut, as it can weigh more than the result
+        ...(r.src ? { target: r.src.startsWith("data:") ? r.src.slice(0, 60) : r.src } : {}),
       }))
     ),
   };