webperf-snippets 1.3.0 → 1.5.0

package/snippets/Loading/Service-Worker-Analysis.js

@@ -22,7 +22,7 @@
       count: 0,
       details: {},
       items: [],
-      issues: [{ severity: "error", message: "Service Workers not supported in this browser" }],
+      issues: [{ code: "unsupported", severity: "error", message: "Service Workers not supported in this browser" }],
     };
   }
 
@@ -116,11 +116,12 @@
   const issues = [];
 
   if (registrations.length === 0) {
-    issues.push({ severity: "info", message: "No Service Workers registered" });
+    issues.push({ code: "no-service-worker", severity: "info", message: "No Service Workers registered" });
   }
 
   if (registrations.length > 0 && !controller) {
     issues.push({
+      code: "not-controlled",
       severity: "warning",
       message: "Page is not controlled by a Service Worker (hard reload or first visit). Do a normal reload.",
     });
@@ -129,25 +130,31 @@
   for (const item of items) {
     if (item.hasWaiting) {
       issues.push({
+        code: "update-pending",
         severity: "warning",
         message: `Service Worker update pending for ${item.scope}. Call skipWaiting() to activate the new version.`,
+        target: item.scope,
       });
     }
     if (item.navigationPreloadEnabled === false) {
       issues.push({
+        code: "navigation-preload-disabled",
         severity: "info",
         message: `Navigation Preload is disabled for ${item.scope}. Consider enabling it with registration.navigationPreload.enable().`,
+        target: item.scope,
       });
     }
   }
 
   if (swOverheadMs !== null && swOverheadMs > 100) {
     issues.push({
+      code: "slow-startup",
       severity: "error",
       message: `High SW startup time (${swOverheadMs}ms). Enable Navigation Preload to reduce overhead.`,
     });
   } else if (swOverheadMs !== null && swOverheadMs > 50) {
     issues.push({
+      code: "slow-startup",
       severity: "warning",
       message: `Moderate SW startup time (${swOverheadMs}ms)`,
     });
@@ -155,11 +162,13 @@
 
   if (cacheHitRate !== null && cacheHitRate < 50) {
     issues.push({
+      code: "low-cache-hit-rate",
       severity: "error",
       message: `Low SW cache hit rate (${cacheHitRate}%). Review the caching strategy.`,
     });
   } else if (cacheHitRate !== null && cacheHitRate < 80) {
     issues.push({
+      code: "low-cache-hit-rate",
       severity: "warning",
       message: `Moderate SW cache hit rate (${cacheHitRate}%). Review the caching strategy for more resources.`,
     });
@@ -167,6 +176,7 @@
 
   if (unknownSource.length > 0) {
     issues.push({
+      code: "unknown-source",
       severity: "info",
       message: `${unknownSource.length} intercepted resource(s) are cross-origin without Timing-Allow-Origin, so their source is unknown. The hit rate excludes them.`,
     });

package/snippets/Loading/Speculation-Rules-Inspector.js

@@ -39,6 +39,7 @@
         parsed = JSON.parse(script.textContent);
       } catch (e) {
         issues.push({
+          code: 'invalid-json',
           severity: 'error',
           message: `Speculation rules script #${index + 1} is not valid JSON (${e.message}). The browser ignores the whole script.`,
         });
@@ -68,12 +69,14 @@
           const isPrerender = action === 'prerender' || action === 'prerender_until_script';
           if (isPrerender && source === 'list' && (eagerness === 'immediate' || eagerness === 'eager') && urls.length > EAGER_PRERENDER_LIMIT) {
             issues.push({
+              code: 'eager-list-capped',
               severity: 'warning',
               message: `A ${action} rule lists ${urls.length} URLs with eagerness "${eagerness}". Chrome caps eager prerenders, so the extra URLs are not prerendered. Fix: list fewer URLs or use "moderate".`,
             });
           }
           if (isPrerender && source === 'document' && (eagerness === 'immediate' || eagerness === 'eager')) {
             issues.push({
+              code: 'eager-document-rule',
               severity: 'warning',
               message: `A document ${action} rule uses eagerness "${eagerness}", which prerenders matching links without a user signal and can waste bandwidth and CPU. Fix: use "moderate" or "conservative".`,
             });
@@ -83,15 +86,15 @@
     });
 
     if (scripts.length === 0) {
-      issues.push({ severity: 'info', message: 'No speculation rules found in the DOM. Rules delivered in the Speculation-Rules HTTP header are not readable from JavaScript.' });
+      issues.push({ code: 'no-rules', severity: 'info', message: 'No speculation rules found in the DOM. Rules delivered in the Speculation-Rules HTTP header are not readable from JavaScript.' });
     } else if (items.length === 0 && !issues.some((i) => i.severity === 'error')) {
-      issues.push({ severity: 'info', message: 'Speculation rules scripts were found but contain no prefetch or prerender rules.' });
+      issues.push({ code: 'no-prefetch-or-prerender', severity: 'info', message: 'Speculation rules scripts were found but contain no prefetch or prerender rules.' });
     }
     if (!supported && scripts.length > 0) {
-      issues.push({ severity: 'info', message: 'This browser does not support speculation rules, so the rules are ignored.' });
+      issues.push({ code: 'unsupported', severity: 'info', message: 'This browser does not support speculation rules, so the rules are ignored.' });
     }
     if (activationStart > 0) {
-      issues.push({ severity: 'info', message: `This page was prerendered and activated at ${activationStart}ms. Navigation timings are relative to activationStart.` });
+      issues.push({ code: 'prerendered', severity: 'info', message: `This page was prerendered and activated at ${activationStart}ms. Navigation timings are relative to activationStart.` });
     }
 
     return {

package/snippets/Loading/TTFB-Resources.js

@@ -168,7 +168,7 @@
       corsLimitedAnalysis: corsRestrictedCount > 0,
       details: { avgTtfbMs: null, maxTtfbMs: null, minTtfbMs: null, thirdPartyCount: 0, slowCount: 0, corsRestrictedCount },
       items: [],
-      issues: [{ severity: "info", message: "No resources with TTFB data available" }],
+      issues: [{ code: "no-resources", severity: "info", message: "No resources with TTFB data available" }],
     };
   }
   const ttfbVals = resourcesSync.map((r) => r.ttfbMs);

package/snippets/Loading/TTFB-Sub-Parts.js

@@ -129,6 +129,7 @@
     const slowestMs = Math.round(slowestSync.duration);
     const share = ttfbValueSync > 0 ? Math.round((slowestSync.duration / ttfbValueSync) * 100) : 0;
     issues.push({
+      code: "slow-ttfb",
       severity: rating === "poor" ? "error" : "warning",
       message: `TTFB is ${value} ms (${rating}); ${phaseLabels[slowestSync.key]} takes ${slowestMs} ms of it (${share}%). Fix: ${phaseFixes[slowestSync.key]}.`,
     });

package/snippets/Loading/Third-Party-Impact-by-Domain.js

@@ -187,30 +187,36 @@
   const issues = [];
   if (blocking.length > 0) {
     issues.push({
+      code: "render-blocking-domains",
       severity: "warning",
       message: `${blocking.length} third-party domain(s) serve render-blocking resources (${listDomains(blocking)}); load them async or defer, or self-host them`,
     });
   }
   heavy.slice(0, MAX_LISTED_DOMAINS).forEach((d) => {
     issues.push({
+      code: "heavy-domain",
       severity: "warning",
       message: `${d.domain} scripts take ${d.loafMs} ms of main-thread time in long animation frames (over ${LOAF_WARNING_MS} ms); defer, delay or remove them`,
+      target: d.domain,
     });
   });
   if (!renderBlockingSupported && all.length > 0) {
     issues.push({
+      code: "render-blocking-unsupported",
       severity: "info",
       message: "renderBlockingStatus is not supported in this browser (Chrome 107+), so which third-party domains block rendering is unknown; run the snippet in Chrome or Edge to check",
     });
   }
   if (loafUnattributed) {
     issues.push({
+      code: "loaf-unattributed",
       severity: "info",
       message: `${longFrames} long animation frame(s) took ${longFramesMs} ms, but no third-party script was attributed in them (Long Animation Frames only list scripts over 5 ms), so 0 ms per domain does not rule out third-party cost`,
     });
   }
   if (corsLimitedAnalysis) {
     issues.push({
+      code: "unknown-size",
       severity: "info",
       message: `${sizeUnknownCount} third-party request(s) without Timing-Allow-Origin report zero sizes, so the transfer size is a lower bound`,
     });

package/snippets/Loading/Validate-Preload-Async-Defer-Scripts.js

@@ -83,6 +83,7 @@
       } else {
         // Preload without matching script and not loaded - likely unused
         issues.push({
+          code: "orphan-preload",
           type: "orphan",
           severity: "warning",
           preload,
@@ -137,6 +138,7 @@
           });
         } else {
           issues.push({
+            code: "async-defer-preload",
             type: "async-defer-preload",
             severity: "error",
             preload,
@@ -156,6 +158,7 @@
       } else if (isModule) {
         // ES modules without async/defer behave like defer by default
         issues.push({
+          code: "module-preload",
           type: "module-preload",
           severity: "warning",
           preload,
@@ -413,8 +416,10 @@
     },
     items: Array.from(itemsByUrl.values()).slice(0, 50),
     issues: issues.map(i => ({
+      code: i.code,
       severity: i.severity,
       message: i.fix ? `${i.message.replace(/\.$/, "")}. Fix: ${i.fix}` : i.message,
+      target: i.url,
     })),
   };
 })();

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 } : {}),
       }))
     ),
   };