webperf-snippets 1.7.0 → 1.7.1

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.7.0" }
+"conditions": { "viewport": "mobile", "workflow": "core-web-vitals", "waitMs": 3000, "cliVersion": "1.7.1" }
 ```
 
 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.7.0" }
+  "meta": { "viewport": "mobile", "waitMs": 3000, "cli_version": "1.7.1" }
 }
 ```
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webperf-snippets",
-  "version": "1.7.0",
+  "version": "1.7.1",
   "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/Loading/Content-Visibility.js

@@ -34,6 +34,14 @@ function uniqueSelector(el) {
 }
 // @end-shared uniqueSelector
 
+// An element with content-visibility: auto has no size before it first renders unless
+// contain-intrinsic-size gives one, so the page moves when it does. content-visibility: auto adds auto
+// to contain-intrinsic-size, so Chrome reports an element with no size as "auto none", also when the CSS
+// says none: what counts is whether the value has a length, as in "auto 500px".
+function lacksIntrinsicSize(value) {
+  return !/\d/.test(value);
+}
+
 function detectContentVisibility() {
   // Create an object to store the results
   const results = {
@@ -125,7 +133,7 @@ function detectContentVisibility() {
 
     // Check for missing contain-intrinsic-size
     const missingIntrinsicSize = results.autoElements.filter(
-      (el) => el.containIntrinsicSize === "not set" || el.containIntrinsicSize === "none",
+      (el) => lacksIntrinsicSize(el.containIntrinsicSize),
     );
 
     if (missingIntrinsicSize.length > 0) {
@@ -327,7 +335,7 @@ window.analyzeContentVisibilityOpportunities = analyzeContentVisibilityOpportuni
     ],
     issues: [
       ...cvResults.autoElements
-        .filter(el => el.containIntrinsicSize === "not set" || el.containIntrinsicSize === "none")
+        .filter(el => lacksIntrinsicSize(el.containIntrinsicSize))
         .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
         ? [{ 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/Media/Oversized-Images.js

@@ -76,8 +76,13 @@
   }
   // @end-shared uniqueSelector
 
+  // An SVG scales to any size, so its pixels are not measured. The extension names most of them; the
+  // content type of the response names an SVG of the page served without it, such as an image service
+  // that takes the format in the query. The browser gives the content type only for a response it can
+  // read: an SVG of another origin without the extension is measured as a raster image.
+  const typeByUrl = new Map(performance.getEntriesByType("resource").map((e) => [e.name, e.contentType]));
   function isVector(url) {
-    return /^data:image\/svg/i.test(url) || /\.svg([?#]|$)/i.test(url);
+    return /^data:image\/svg/i.test(url) || /\.svg([?#]|$)/i.test(url) || typeByUrl.get(url) === "image/svg+xml";
   }
 
   // The size of the file in pixels. HTMLImageElement.naturalWidth is corrected by the srcset

package/snippets/SCHEMA.md

@@ -1137,7 +1137,7 @@ Returns buffered long tasks immediately. Ongoing tracking continues. `items` lis
 
 #### Oversized-Images (async)
 
-Compares the pixels of each loaded image file with the pixels drawn (rendered size times `devicePixelRatio`, scaled by `object-fit`). `ratio` is file pixels per pixel drawn: `oversized` at 1.5 or more, `undersized` (blurry) under 0.9. `items` lists the flagged images, the most wasted pixels first (at most 50); `count` and `details` cover all of them. `wastedBytes` and `transferBytes` are `null` when the transfer size is hidden (cross-origin without `Timing-Allow-Origin`); `details.wastedBytes` counts each URL once. Images with a zero-size box, unloaded images and SVGs are counted in `details.skipped*`. `selector` matches only the image of its item, built like `details.element` of LCP, so an image with no id or class has a path such as `div.partners > img:nth-of-type(3)` instead of `img`.
+Compares the pixels of each loaded image file with the pixels drawn (rendered size times `devicePixelRatio`, scaled by `object-fit`). `ratio` is file pixels per pixel drawn: `oversized` at 1.5 or more, `undersized` (blurry) under 0.9. `items` lists the flagged images, the most wasted pixels first (at most 50); `count` and `details` cover all of them. `wastedBytes` and `transferBytes` are `null` when the transfer size is hidden (cross-origin without `Timing-Allow-Origin`); `details.wastedBytes` counts each URL once. Images with a zero-size box, unloaded images and SVGs are counted in `details.skipped*`; an SVG is known by its extension, a `data:image/svg` URL, or, for a file of the same origin, the `contentType` of its resource entry. `selector` matches only the image of its item, built like `details.element` of LCP, so an image with no id or class has a path such as `div.partners > img:nth-of-type(3)` instead of `img`.
 
 ```json
 {
@@ -1250,7 +1250,7 @@ An issue about one thing among several, one issue per thing, also names it in `t
 
 | Code | Severity | When |
 |------|----------|------|
-| `missing-intrinsic-size` | warning | An element with `content-visibility: auto` and no `contain-intrinsic-size`; `target` is its selector |
+| `missing-intrinsic-size` | warning | An element with `content-visibility: auto` whose `contain-intrinsic-size` has no length, such as `none` or the `auto none` Chrome reports when no size is declared; `target` is its selector |
 | `not-used` | info | No `content-visibility` on the page |
 
 ### Critical-CSS-Detection