webperf-snippets 1.4.0 → 1.5.0

package/README.md

@@ -73,7 +73,7 @@ npx webperf-snippets https://example.com --json
 The JSON output records how the page was measured in `conditions`, so a later run can tell whether it measured the same way: the viewport, the workflow (or the path of the snippet with `--snippet`), the wait and the version of the CLI.
 
 ```json
-"conditions": { "viewport": "mobile", "workflow": "core-web-vitals", "waitMs": 3000, "cliVersion": "1.4.0" }
+"conditions": { "viewport": "mobile", "workflow": "core-web-vitals", "waitMs": 3000, "cliVersion": "1.5.0" }
 ```
 
 Single snippet:
@@ -158,7 +158,7 @@ Without `--report-to` the CLI makes no external calls. With it, the results are
   "timestamp": "2026-05-06T10:00:00.000Z",
   "navMs": 1240,
   "results": [],
-  "meta": { "viewport": "mobile", "waitMs": 3000, "cli_version": "1.4.0" }
+  "meta": { "viewport": "mobile", "waitMs": 3000, "cli_version": "1.5.0" }
 }
 ```
 
@@ -265,7 +265,7 @@ LCP, FCP, TTFB, CLS and INP compare when both runs measured them, the median of
 
 `--threshold` changes one part of a threshold and keeps the other: `--threshold LCP=15%` the share, `--threshold LCP=200ms` the minimum, and `--threshold CLS=0.1` the only part of CLS. Repeat it for more metrics.
 
-The errors that compare are the ones that decide the exit code: the issues of severity `error` of the steps of the workflow and the snippets that failed. Two errors are the same when they share a code or, without one, when their messages differ only in their figures, so "Render-blocking CSS (69.21 KB)…" and "Render-blocking CSS (71.80 KB)…" are one error. An error that only this run has is new, and one that only the baseline had is fixed. Warnings and information do not compare, since they change too easily.
+The errors that compare are the ones that decide the exit code: the issues of severity `error` of the steps of the workflow and the snippets that failed. Two errors are the same when they share their [code](https://github.com/nucliweb/webperf-snippets/blob/main/snippets/SCHEMA.md#issue-codes) and the resource they name, whatever their messages say; a resource of the page itself compares by its path and query, so the review app of a pull request, on another host, matches production. A snippet without codes on one side, as in a baseline of an earlier version, compares by message with the figures left out, so "Render-blocking CSS (69.21 KB)…" and "Render-blocking CSS (71.80 KB)…" are one error. An error that only this run has is new, and one that only the baseline had is fixed. Warnings and information do not compare, since they change too easily.
 
 The report adds the comparison after the usual one, and `--markdown` a table for the pull request comment. The JSON output carries it in `baseline`:
 
@@ -389,8 +389,8 @@ The server also offers resources, documents a client can attach to the context:
 
 | Resource                         | What it has                                                              |
 | -------------------------------- | ------------------------------------------------------------------------ |
-| `webperf://schema`               | The contract every snippet result follows: base shape, statuses, how to read a result. |
-| `webperf://schema/{snippet}`     | The fields one snippet returns, with an example.                         |
+| `webperf://schema`               | The contract every snippet result follows: base shape, statuses, how to read a result, the rules of the issue codes. |
+| `webperf://schema/{snippet}`     | The fields one snippet returns, with an example, and the codes of its issues. |
 | `webperf://workflows/{category}` | The workflows and the decision tree of a category.                       |
 
 And prompts, templates that chain the tools (in Claude Code, `/mcp__webperf__audit_lcp`): `audit_lcp`, `debug_inp` and `audit_page`, each with a `url` argument.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webperf-snippets",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "mcpName": "io.github.nucliweb/webperf-snippets",
   "description": "Run curated WebPerf Snippets headlessly via Playwright. Diagnose Core Web Vitals beyond what Lighthouse exposes.",
   "type": "module",

package/snippets/CoreWebVitals/LCP-Image-Entropy.js

@@ -213,23 +213,22 @@
   }
   const issuesSync = [];
   if (lowEntropyCount > 0) {
-    issuesSync.push({ severity: "warning", message: `${lowEntropyCount} image(s) have low entropy and are LCP-ineligible in Chrome 112+` });
+    issuesSync.push({ code: "low-entropy-images", severity: "warning", message: `${lowEntropyCount} image(s) have low entropy and are LCP-ineligible in Chrome 112+` });
   }
   if (lcpImageSync?.isLowEntropy) {
-    issuesSync.push({ severity: "error", message: "Current LCP image has low entropy and may be skipped by Chrome" });
+    issuesSync.push({ code: "lcp-low-entropy", severity: "error", message: "Current LCP image has low entropy and may be skipped by Chrome" });
   }
   // Entropy applies to the LCP only when it is an <img> whose file size can be read; for text, or an
   // image this snippet cannot read, it says so. The images of the page are still listed.
   const lcpTag = lcpElementSync ? lcpElementSync.tagName.toLowerCase() : null;
   if (lcpTag && !lcpImageSync) {
-    issuesSync.push({
-      severity: "info",
-      message: lcpTag === "img"
-        ? "The LCP <img> has no file size to read, as with a data: URL or a cross-origin image without Timing-Allow-Origin, so its entropy cannot be computed."
+    issuesSync.push(
+      lcpTag === "img"
+        ? { code: "lcp-size-unknown", severity: "info", message: "The LCP <img> has no file size to read, as with a data: URL or a cross-origin image without Timing-Allow-Origin, so its entropy cannot be computed." }
         : lcpUrlSync
-        ? `The LCP is the image of a <${lcpTag}>, such as a CSS background or a video poster, and this snippet reads <img> elements only. Run the LCP snippet to measure it.`
-        : `The LCP element is <${lcpTag}>, text and not an image, so its entropy does not apply. Run the LCP snippet to measure it.`,
-    });
+        ? { code: "lcp-not-img", severity: "info", message: `The LCP is the image of a <${lcpTag}>, such as a CSS background or a video poster, and this snippet reads <img> elements only. Run the LCP snippet to measure it.` }
+        : { code: "lcp-is-text", severity: "info", message: `The LCP element is <${lcpTag}>, text and not an image, so its entropy does not apply. Run the LCP snippet to measure it.` }
+    );
   }
   // The list keeps the 50 most relevant images (the LCP image, then low entropy, then lowest bits per pixel); count and details cover all of them
   const MAX_ITEMS = 50;

package/snippets/CoreWebVitals/LCP-Video-Candidate.js

@@ -71,22 +71,22 @@
   // The value of a non-video LCP belongs to the LCP snippet; this one only says what the element is
   if (!element || element.tagName !== "VIDEO") {
     const tag = element ? element.tagName.toLowerCase() : null;
-    const message = tag
-      ? `The LCP element is <${tag}>, not a <video>. Run the LCP snippet to measure it, and LCP Subparts to see its phases.`
-      : "The LCP element is no longer in the DOM, so it cannot be checked for a <video>. Run the LCP snippet to measure it.";
+    const issue = tag
+      ? { code: "lcp-not-video", severity: "info", message: `The LCP element is <${tag}>, not a <video>. Run the LCP snippet to measure it, and LCP Subparts to see its phases.` }
+      : { code: "lcp-element-removed", severity: "info", message: "The LCP element is no longer in the DOM, so it cannot be checked for a <video>. Run the LCP snippet to measure it." };
     console.log("%cLCP element is not a <video>", "font-weight: bold;");
     console.log("");
     console.log(`   Tag      : ${tag ? `<${tag}>` : "(element no longer in DOM)"}`);
     if (lcp.url) console.log(`   URL      : ${lcp.url}`);
     if (element) console.log("   Element  :", element);
     console.log("");
-    console.log(`   ${message}`);
+    console.log(`   ${issue.message}`);
     console.groupEnd();
     return {
       script: "LCP-Video-Candidate",
       status: "ok",
       details: { isVideo: false, lcpElement: tag, lcpUrl: lcp.url || null },
-      issues: [{ severity: "info", message }],
+      issues: [issue],
     };
   }
 
@@ -140,34 +140,35 @@
 
   if (secondsAfterLoad > 10) {
     issues.push({
+      code: "late-candidate",
       s: "warning",
       msg: `The LCP candidate rendered ${secondsAfterLoad} s after the page loaded, because the page stayed open without interaction. Reload and run the snippet again to measure the LCP of the load`,
     });
   }
 
   if (lcpSource === "first-frame") {
-    issues.push({ s: "info", msg: "LCP is the first video frame: adding a poster gives explicit control over the LCP image" });
+    issues.push({ code: "first-frame-lcp", s: "info", msg: "LCP is the first video frame: adding a poster gives explicit control over the LCP image" });
   }
   if (lcpSource === "first-frame" && (!autoplay || !muted)) {
-    issues.push({ s: "warning", msg: "First-frame LCP requires autoplay + muted for the browser to render it immediately" });
+    issues.push({ code: "first-frame-not-autoplay-muted", s: "warning", msg: "First-frame LCP requires autoplay + muted for the browser to render it immediately" });
   }
 
   if (posterAttr && !posterPreload) {
-    issues.push({ s: "warning", msg: 'No <link rel="preload" as="image"> for the poster: the browser discovers it late' });
+    issues.push({ code: "poster-not-preloaded", s: "warning", msg: 'No <link rel="preload" as="image"> for the poster: the browser discovers it late' });
   } else if (posterPreload && posterPreload.getAttribute("fetchpriority") !== "high") {
-    issues.push({ s: "info", msg: 'Preload found but missing fetchpriority="high", so it may be deprioritised' });
+    issues.push({ code: "poster-preload-no-fetchpriority", s: "info", msg: 'Preload found but missing fetchpriority="high", so it may be deprioritised' });
   }
 
   if (posterAttr && !isModernFormat && posterFormat !== "unknown") {
-    issues.push({ s: "info", msg: `Poster uses ${posterFormat}; AVIF or WebP would reduce file size and LCP load time` });
+    issues.push({ code: "poster-legacy-format", s: "info", msg: `Poster uses ${posterFormat}; AVIF or WebP would reduce file size and LCP load time` });
   }
 
   if (isCrossOrigin) {
-    issues.push({ s: "info", msg: "renderTime is 0: the resource is cross-origin and the server does not send Timing-Allow-Origin" });
+    issues.push({ code: "render-time-hidden", s: "info", msg: "renderTime is 0: the resource is cross-origin and the server does not send Timing-Allow-Origin" });
   }
 
   if (!autoplay && preload === "none") {
-    issues.push({ s: "warning", msg: 'preload="none" on a non-autoplay video may delay poster image loading in some browsers' });
+    issues.push({ code: "preload-none-delays-poster", s: "warning", msg: 'preload="none" on a non-autoplay video may delay poster image loading in some browsers' });
   }
 
   // Summary
@@ -265,6 +266,6 @@
       isCrossOrigin,
       videoAttributes: { autoplay, muted, playsinline, preload },
     },
-    issues: issues.map((i) => ({ severity: i.s === "warning" ? "warning" : "info", message: i.msg })),
+    issues: issues.map((i) => ({ code: i.code, severity: i.s === "warning" ? "warning" : "info", message: i.msg })),
   };
 })();

package/snippets/Interaction/DOM-Size-and-Depth.js

@@ -80,23 +80,27 @@
   const issues = [];
   if (totalElements > THRESHOLDS.errorNodes) {
     issues.push({
+      code: "too-many-nodes",
       severity: "error",
       message: `${totalElements} nodes exceeds ${THRESHOLDS.errorNodes}; a large DOM slows style recalculation and layout on every interaction`,
     });
   } else if (totalElements > THRESHOLDS.warnNodes) {
     issues.push({
+      code: "too-many-nodes",
       severity: "warning",
       message: `${totalElements} nodes exceeds ${THRESHOLDS.warnNodes}; a large DOM increases style recalculation and layout cost`,
     });
   }
   if (maxDepth > THRESHOLDS.maxDepth) {
     issues.push({
+      code: "too-deep",
       severity: "warning",
       message: `DOM depth of ${maxDepth} exceeds ${THRESHOLDS.maxDepth}; deep trees make style and layout work costlier (deepest: ${selectorFor(deepest)})`,
     });
   }
   if (widest && widest.children > THRESHOLDS.maxChildren) {
     issues.push({
+      code: "too-many-children",
       severity: "warning",
       message: `${widestSelector} has ${widest.children} children, above ${THRESHOLDS.maxChildren}; consider virtualizing or paginating the list`,
     });

package/snippets/Interaction/Forced-Synchronous-Layout.js

@@ -265,8 +265,10 @@
         .sort((a, b) => b[1] - a[1])
         .slice(0, 10)
         .map(([property, count]) => ({
+          code: "forced-layout",
           severity: count > 5 ? "error" : "warning",
           message: `${property} triggered ${count} forced synchronous layout${count > 1 ? "s" : ""}. Read layout properties before writing to the DOM.`,
+          target: property,
         })),
     };
   };

package/snippets/Interaction/Input-Latency-Breakdown.js

@@ -259,8 +259,10 @@
         const bottleneck = phases.reduce((a, c) => (a.value > c.value ? a : c));
         const rating = valueToRating(p75(b.durations));
         return {
+          code: "slow-event-type",
           severity: rating === "poor" ? "error" : "warning",
           message: `${type} P75 is ${Math.round(p75(b.durations))}ms (${rating}). Bottleneck: ${bottleneck.name}. Fix: ${BOTTLENECK_FIXES[bottleneck.name]}.`,
+          target: type,
         };
       });
 

package/snippets/Interaction/Interactions.js

@@ -264,8 +264,10 @@
         .sort((a, b) => b.duration - a.duration)
         .slice(0, 10)
         .map((i) => ({
+          code: "slow-interaction",
           severity: i.rating === "poor" ? "error" : "warning",
           message: `${i.type} interaction took ${Math.round(i.duration)}ms (${i.rating}), above the ${i.rating === "poor" ? "500ms" : "200ms"} threshold`,
+          target: i.type,
         })),
     };
   };

package/snippets/Interaction/Scroll-Performance.js

@@ -207,12 +207,14 @@
     const issues = [];
     if (nonPassiveListeners.length > 0) {
       issues.push({
+        code: "non-passive-listeners",
         severity: "warning",
         message: `${nonPassiveListeners.length} non-passive scroll or touch listener(s). Add { passive: true } so scrolling does not wait for JavaScript.`,
       });
     }
     if (css.willChangeElements.length > 0) {
       issues.push({
+        code: "will-change",
         severity: "info",
         message: `will-change is set on ${css.willChangeElements.length} element(s). Remove it from elements that do not animate, since each one keeps a compositor layer.`,
       });

package/snippets/Loading/Back-Forward-Cache.js

@@ -82,6 +82,7 @@
       : [];
     confirmed.forEach(({ reason, frame }) => {
       issues.push({
+        code: 'not-restored',
         reason: `${reason} (${frame})`,
         severity: 'high',
         source: 'browser',
@@ -93,6 +94,7 @@
     // cannot be detected from JavaScript.
     if (window.onunload !== null && !confirmed.some(({ reason }) => reason === 'unload-listener')) {
       issues.push({
+        code: 'unload-handler',
         reason: 'window.onunload handler set',
         severity: 'high',
         source: 'detected',
@@ -108,6 +110,7 @@
         const cacheControl = res.headers.get('cache-control') || '';
         if (/no-store/i.test(cacheControl) && !confirmed.some(({ reason }) => reason === 'response-cache-control-no-store')) {
           issues.push({
+            code: 'cache-control-no-store',
             reason: 'Cache-Control: no-store on the page response',
             severity: 'medium',
             source: 'detected',
@@ -123,6 +126,7 @@
     const iframeCount = document.querySelectorAll('iframe').length;
     if (iframeCount > 0) {
       issues.push({
+        code: 'iframes',
         reason: `${iframeCount} iframe(s) on the page`,
         severity: 'info',
         source: 'note',
@@ -132,6 +136,7 @@
 
     if ('serviceWorker' in navigator && navigator.serviceWorker.controller) {
       issues.push({
+        code: 'service-worker',
         reason: 'Service Worker controls the page',
         severity: 'info',
         source: 'note',
@@ -255,8 +260,10 @@
       notRestoredReasons: results.notRestoredReasons,
     },
     issues: results.blockingReasons.map((i) => ({
+      code: i.code,
       severity: i.severity === 'high' ? 'error' : i.severity === 'medium' ? 'warning' : 'info',
       message: i.reason,
+      ...(i.code === 'not-restored' ? { target: i.reason } : {}),
     })),
   });
 

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

@@ -151,21 +151,23 @@ async function analyzeCSSMediaQueries(minWidth = 768) {
 
   const issues = [];
   if (rules.length === 0) {
-    issues.push({ severity: "info", message: `No @media rules for viewports wider than ${minWidth}px` });
+    issues.push({ code: "no-wide-rules", severity: "info", message: `No @media rules for viewports wider than ${minWidth}px` });
   } else {
     issues.push({
+      code: "wide-rules",
       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({
+        code: "repeated-queries",
         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`,
       });
     }
   }
   if (corsBlockedCount > 0) {
-    issues.push({ severity: "info", message: `${corsBlockedCount} cross-origin stylesheet(s) could not be read, so their @media rules are not counted` });
+    issues.push({ code: "unreadable-stylesheets", severity: "info", message: `${corsBlockedCount} cross-origin stylesheet(s) could not be read, so their @media rules are not counted` });
   }
 
   // --- Console output --------------------------------------------------------------------

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

@@ -337,6 +337,7 @@
 
     if (isStaticAsset(type) && cc["no-store"]) {
       entry.antiPatterns.push({
+        code: "static-no-store",
         id: "static-no-store",
         severity: "error",
         message: `${type} asset with no-store; static assets should be cacheable`,
@@ -345,6 +346,7 @@
 
     if (entry.hasHash && maxAge !== null && maxAge < 86400 && !cc["no-store"]) {
       entry.antiPatterns.push({
+        code: "versioned-short-cache",
         id: "versioned-short-cache",
         severity: "warning",
         message: `Versioned URL (hash detected) but max-age=${maxAge}s: consider long cache or immutable`,
@@ -353,6 +355,7 @@
 
     if (entry.hasHash && !cc["immutable"] && !cc["no-store"] && (maxAge === null || maxAge >= 86400)) {
       entry.antiPatterns.push({
+        code: "versioned-not-immutable",
         id: "versioned-not-immutable",
         severity: "info",
         message: `Versioned URL (hash detected) without Cache-Control: immutable`,
@@ -364,6 +367,7 @@
       ["none", "no-store", "no-cache"].includes(strategy)
     ) {
       entry.antiPatterns.push({
+        code: "large-no-cache",
         id: "large-no-cache",
         severity: "error",
         message: `Large resource (${formatBytes(entry.decodedBodySize)}) with no effective cache`,
@@ -372,6 +376,7 @@
 
     if (entry.headers["expires"] && !entry.headers["cache-control"]) {
       entry.antiPatterns.push({
+        code: "expires-without-cc",
         id: "expires-without-cc",
         severity: "warning",
         message: `Uses Expires header without Cache-Control (outdated pattern)`,
@@ -380,6 +385,7 @@
 
     if (isStaticAsset(type) && maxAge === 0) {
       entry.antiPatterns.push({
+        code: "maxage-zero-static",
         id: "maxage-zero-static",
         severity: "warning",
         message: `Static asset with max-age=0, which forces revalidation on every request`,
@@ -394,6 +400,7 @@
       !cc["no-store"]
     ) {
       entry.antiPatterns.push({
+        code: "short-cache-static",
         id: "short-cache-static",
         severity: "warning",
         message: `Static asset with max-age=${maxAge}s (< 1h): consider a longer cache duration`,
@@ -472,6 +479,7 @@
   // are anti-patterns like the header-based ones: they reach `items` and `issues`.
   for (const entry of uncompressedResources) {
     entry.antiPatterns.push({
+      code: "uncompressed",
       id: "uncompressed",
       severity: "warning",
       message: `${entry.type} sent uncompressed (${formatBytes(entry.encodedBodySize)} on the wire for ${formatBytes(entry.decodedBodySize)}): enable Brotli or gzip`,
@@ -480,6 +488,7 @@
   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({
+      code: "duplicate-uncached",
       id: "duplicate-uncached",
       severity: "warning",
       message: `Loaded ${duplicate.count} times, ${duplicate.uncachedLoads} from the network: load it once or make it cacheable`,
@@ -551,6 +560,7 @@
       .join(", ");
     coverageIssue = {
       severity: "info",
+      code: "header-coverage",
       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`,
     };
@@ -916,10 +926,12 @@
       })),
     issues: [
       ...allAntiPatterns.map((p) => ({
+        code: p.code,
         severity: p.severity,
         id: p.id,
         resource: p.resource,
         message: p.message,
+        target: p.url,
       })),
       ...(coverageIssue ? [coverageIssue] : []),
     ],

package/snippets/Loading/Client-Side-Redirect-Detection.js

@@ -99,6 +99,7 @@
   if (sameOrigin && referrerPath !== currentPath && referrerPath !== '') {
     hasClientRedirect = true;
     indicators.push({
+      code: 'same-origin-navigation',
       type: 'Same-origin navigation',
       from: referrerPath,
       to: currentPath,
@@ -153,6 +154,7 @@
   // Only flag if it's BOTH fast AND small (likely a redirect page)
   if (sameOrigin && domContentLoaded < 500 && responseSize < 10000) {
     indicators.push({
+      code: 'fast-minimal-navigation',
       type: 'Fast minimal-content navigation',
       duration: domContentLoaded.toFixed(1) + 'ms',
       size: (responseSize / 1024).toFixed(1) + ' KB',
@@ -337,9 +339,9 @@
       referrerPath,
     },
     issues: [
-      ...(serverRedirects > 0 ? [{ severity: "warning", message: `${serverRedirects} server-side redirect(s) detected (${Math.round(redirectTime)}ms)` }] : []),
-      ...(documentNavigations.length > 0 ? [{ severity: "error", message: `${documentNavigations.length} same-origin document navigation(s) detected, likely a client-side redirect` }] : []),
-      ...indicators.filter(i => i.severity === "warning").map(i => ({ severity: "warning", message: i.type })),
+      ...(serverRedirects > 0 ? [{ code: "server-redirects", severity: "warning", message: `${serverRedirects} server-side redirect(s) detected (${Math.round(redirectTime)}ms)` }] : []),
+      ...(documentNavigations.length > 0 ? [{ code: "document-navigation", severity: "error", message: `${documentNavigations.length} same-origin document navigation(s) detected, likely a client-side redirect` }] : []),
+      ...indicators.filter(i => i.severity === "warning").map(i => ({ code: i.code, severity: "warning", message: i.type })),
     ],
   };
 })();

package/snippets/Loading/Compression-Audit.js

@@ -119,18 +119,21 @@
   const issues = [];
   if (uncompressed.length > 0) {
     issues.push({
+      code: "uncompressed",
       severity: "warning",
       message: `${uncompressed.length} text resource(s) served without compression; enabling gzip or brotli could save about ${formatBytes(estimatedSavingsBytes)}`,
     });
   }
   if (corsLimitedAnalysis) {
     issues.push({
+      code: "unknown-size",
       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({
+      code: "content-encoding-unavailable",
       severity: "info",
       message: "PerformanceResourceTiming.contentEncoding is not available; compression is inferred from encodedBodySize versus decodedBodySize",
     });

package/snippets/Loading/Content-Visibility.js

@@ -348,9 +348,9 @@ window.analyzeContentVisibilityOpportunities = analyzeContentVisibilityOpportuni
     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)` })),
+        .map(el => ({ code: "missing-intrinsic-size", severity: "warning", message: `${el.selector}: missing contain-intrinsic-size (CLS risk)`, target: el.selector })),
       ...(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." }]
+        ? [{ code: "not-used", 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

@@ -221,6 +221,7 @@
 
   if (renderBlockingCSS.length > 0 && inlineStyles.length === 0) {
     issues.push({
+      code: "no-inline-critical-css",
       severity: "high",
       message: "No critical CSS inlined: all CSS loads via render-blocking requests",
       suggestion:
@@ -230,6 +231,7 @@
 
   if (totalRenderBlockingDecoded > criticalBudget) {
     issues.push({
+      code: "render-blocking-over-budget",
       severity: "high",
       message: `Render-blocking CSS (${formatBytes(totalRenderBlockingDecoded)}) exceeds the 14 KB critical budget`,
       suggestion:
@@ -242,6 +244,7 @@
   );
   if (largeUnpreloaded.length > 0) {
     issues.push({
+      code: "large-not-preloaded",
       severity: "medium",
       message: `${largeUnpreloaded.length} large render-blocking stylesheet(s) without preload`,
       details: largeUnpreloaded.map(
@@ -253,6 +256,7 @@
 
   if (totalInlineBytes > criticalBudget) {
     issues.push({
+      code: "inline-over-budget",
       severity: "high",
       message: `Inline CSS (${formatBytes(totalInlineBytes)}) exceeds the 14 KB critical budget`,
       suggestion:
@@ -263,6 +267,7 @@
   const bodyInlineStyles = inlineStyles.filter((s) => !s.inHead);
   if (bodyInlineStyles.length > 0) {
     issues.push({
+      code: "styles-in-body",
       severity: "medium",
       message: `${bodyInlineStyles.length} inline style block(s) found in <body>`,
       suggestion:
@@ -332,6 +337,7 @@
       corsBlocked: s.corsBlocked,
     })),
     issues: issues.map(i => ({
+      code: i.code,
       severity: i.severity === 'high' ? 'error' : 'warning',
       message: i.message,
     })),

package/snippets/Loading/Find-Above-The-Fold-Lazy-Loaded-Images.js

@@ -265,8 +265,8 @@
       isLcpCandidate: image.isLcpCandidate,
     })),
     issues: [
-      ...(results.summary.lcpAffected ? [{ severity: "error", message: 'LCP candidate image has lazy loading: remove loading="lazy" and add fetchpriority="high"' }] : []),
-      ...(results.lazyImages.filter(i => !i.isLcpCandidate).length > 0 ? [{ severity: "warning", message: `${results.lazyImages.filter(i => !i.isLcpCandidate).length} above-fold image(s) have lazy loading: remove loading="lazy"` }] : []),
+      ...(results.summary.lcpAffected ? [{ code: "lcp-lazy", severity: "error", message: 'LCP candidate image has lazy loading: remove loading="lazy" and add fetchpriority="high"' }] : []),
+      ...(results.lazyImages.filter(i => !i.isLcpCandidate).length > 0 ? [{ code: "lazy-above-fold", severity: "warning", message: `${results.lazyImages.filter(i => !i.isLcpCandidate).length} above-fold image(s) have lazy loading: remove loading="lazy"` }] : []),
     ],
   };
 })();

package/snippets/Loading/Find-Images-With-Lazy-and-Fetchpriority.js

@@ -149,7 +149,7 @@
       };
     }),
     issues: conflictingElements.length > 0
-      ? [{ severity: "error", message: `${conflictingElements.length} element(s) have conflicting loading="lazy" and fetchpriority="high"` }]
+      ? [{ code: "lazy-and-high-priority", severity: "error", message: `${conflictingElements.length} element(s) have conflicting loading="lazy" and fetchpriority="high"` }]
       : [],
   };
 })();

package/snippets/Loading/Find-non-Lazy-Loaded-Images-outside-of-the-viewport.js

@@ -304,7 +304,7 @@
       })),
     ],
     issues: totalImages > 0
-      ? [{ severity: "warning", message: `${totalImages} image(s) outside the viewport are missing loading="lazy"` }]
+      ? [{ code: "eager-off-viewport", severity: "warning", message: `${totalImages} image(s) outside the viewport are missing loading="lazy"` }]
       : [],
   };
 })();

package/snippets/Loading/Find-render-blocking-resources.js

@@ -161,7 +161,7 @@
       sizeBytes: r.size,
     })),
     issues: blockingResources.length > 0
-      ? [{ severity: "error", message: `${blockingResources.length} render-blocking resource(s) delay rendering until ${Math.round(lastBlockingEnd)}ms` }]
+      ? [{ code: "render-blocking", severity: "error", message: `${blockingResources.length} render-blocking resource(s) delay rendering until ${Math.round(lastBlockingEnd)}ms` }]
       : [],
   };
 })();

package/snippets/Loading/First-And-Third-Party-Script-Info.js

@@ -321,14 +321,15 @@
     })),
     issues: [
       ...(scripts.some((s) => !s.sizeKnown)
-        ? [{ severity: "info", message: `${scripts.filter((s) => !s.sizeKnown).length} script(s) have an unknown size (missing Timing-Allow-Origin); size totals are a lower bound` }]
+        ? [{ code: "unknown-size", severity: "info", message: `${scripts.filter((s) => !s.sizeKnown).length} script(s) have an unknown size (missing Timing-Allow-Origin); size totals are a lower bound` }]
         : []),
       ...(!renderBlockingSupported && totalScripts > 0
-        ? [{ severity: "info", message: "renderBlockingStatus is not supported in this browser (Chrome 107+), so which scripts block rendering is unknown; run the snippet in Chrome or Edge to check" }]
+        ? [{ code: "render-blocking-unsupported", severity: "info", message: "renderBlockingStatus is not supported in this browser (Chrome 107+), so which scripts block rendering is unknown; run the snippet in Chrome or Edge to check" }]
         : []),
       ...(thirdMetrics.blocking > 0
         ? [
             {
+              code: "third-party-blocking",
               severity: "error",
               message: `${thirdMetrics.blocking} render-blocking third-party script(s)`,
             },
@@ -337,6 +338,7 @@
       ...(thirdMetrics.hosts.length > 3
         ? [
             {
+              code: "many-third-party-hosts",
               severity: "warning",
               message: `${thirdMetrics.hosts.length} different third-party hosts require separate DNS lookups`,
             },
@@ -345,6 +347,7 @@
       ...(thirdMetrics.totalSize > 100 * 1024
         ? [
             {
+              code: "large-third-party",
               severity: "warning",
               message: `Third-party scripts total ${Math.round(thirdMetrics.totalSize / 1024)} KB`,
             },

package/snippets/Loading/First-And-Third-Party-Script-Timings.js

@@ -328,10 +328,10 @@
     },
     items: slowestScripts.slice(0, MAX_ITEMS).map(s => ({ shortName: s.shortName, host: s.host, firstParty: s.firstParty, totalMs: Math.round(s.total), dnsMs: roundOrNull(s.dns), tcpMs: roundOrNull(s.tcp), requestMs: roundOrNull(s.request), responseMs: roundOrNull(s.response), hasTiming: s.hasTiming })),
     issues: [
-      ...(slowScripts.length > 0 ? [{ severity: "warning", message: `${slowScripts.length} script(s) take over ${slowThreshold}ms to load` }] : []),
-      ...(hasSlowDns ? [{ severity: "warning", message: "Slow DNS lookups detected (>100ms). Add dns-prefetch or preconnect." }] : []),
-      ...(hasSlowTcp ? [{ severity: "warning", message: "Slow TCP connections detected (>100ms). Add preconnect for critical origins." }] : []),
-      ...(hasSlowRequest ? [{ severity: "warning", message: "Slow server response times detected (>200ms). Consider CDN or self-hosting." }] : []),
+      ...(slowScripts.length > 0 ? [{ code: "slow-scripts", severity: "warning", message: `${slowScripts.length} script(s) take over ${slowThreshold}ms to load` }] : []),
+      ...(hasSlowDns ? [{ code: "slow-dns", severity: "warning", message: "Slow DNS lookups detected (>100ms). Add dns-prefetch or preconnect." }] : []),
+      ...(hasSlowTcp ? [{ code: "slow-connection", severity: "warning", message: "Slow TCP connections detected (>100ms). Add preconnect for critical origins." }] : []),
+      ...(hasSlowRequest ? [{ code: "slow-server", severity: "warning", message: "Slow server response times detected (>200ms). Consider CDN or self-hosting." }] : []),
     ],
   };
 })();

package/snippets/Loading/Fonts-Preloaded-Loaded-and-used-above-the-fold.js

@@ -359,9 +359,9 @@
     items: uniqueLoadedFonts.slice(0, 50).map(f => ({ family: f.family, weight: f.weight, style: f.style, display: f.display })),
     usedFonts: usedFonts.slice(0, 50).map(f => ({ family: f.family, weight: f.weight, style: f.style, elements: f.elements })),
     issues: [
-      ...preloadedNotUsed.map(f => ({ severity: "warning", message: `Preloaded but not used above fold: ${f.name}` })),
-      ...usedNotPreloaded.map(f => ({ severity: "warning", message: `Used above fold but not preloaded: ${f.family} (${f.weight})` })),
-      ...preloadedFonts.filter(f => !f.crossorigin).map(f => ({ severity: "error", message: `Font preloaded without crossorigin (double fetch): ${f.name}` })),
+      ...preloadedNotUsed.map(f => ({ code: "preloaded-unused", severity: "warning", message: `Preloaded but not used above fold: ${f.name}`, target: f.name })),
+      ...usedNotPreloaded.map(f => ({ code: "used-not-preloaded", severity: "warning", message: `Used above fold but not preloaded: ${f.family} (${f.weight})`, target: `${f.family} (${f.weight})` })),
+      ...preloadedFonts.filter(f => !f.crossorigin).map(f => ({ code: "preload-no-crossorigin", severity: "error", message: `Font preloaded without crossorigin (double fetch): ${f.name}`, target: f.name })),
     ],
   };
 })();