webperf-snippets 1.0.0 → 1.2.0

package/snippets/Loading/Inline-Script-Info-and-Size.js

@@ -14,6 +14,21 @@
 
   const formatKB = (bytes) => (bytes / 1024).toFixed(2);
 
+  // Framework data: JSON scripts, the ids frameworks give their hydration data, and scripts that
+  // only push data into a framework global or assign its state. They can carry any text, such as
+  // the source of another script, so they are classified before any pattern is looked for.
+  const DATA_IDS = ["__NEXT_DATA__", "__NUXT_DATA__", "__remixContext"];
+  // (self.__next_f = self.__next_f || []).push(...) or self.__next_f.push(...)
+  const DATA_PUSH = /^\s*\(?\s*(?:self|window|globalThis)\.(__\w+)\s*(?:=\s*(?:self|window|globalThis)\.\1\s*\|\|\s*\[\s*\]\s*\)\s*)?\.push\s*\(/;
+  // window.__NUXT__ = ..., window.__remixContext = ..., window.___chunkMapping = ..., window.__INITIAL_STATE__ = ...
+  const DATA_ASSIGN = /^\s*(?:self|window|globalThis)\.(?:__NUXT__|__remixContext|___\w+|__\w*(?:STATE|DATA)\w*)\s*=/;
+  const isDataPayloadScript = (script, type, content) =>
+    type.includes("json") || DATA_IDS.includes(script.id) || DATA_PUSH.test(content) || DATA_ASSIGN.test(content);
+
+  // Analytics bootstraps define or call the tag function, or push into its queue; a string that
+  // only contains the word, such as a key or a URL, does not count
+  const ANALYTICS = /\b(?:gtag|fbq)\s*\(|\b(?:_gaq|dataLayer)\.push\s*\(|['"]gtm\.(?:start|js)['"]|\banalytics\.(?:load|page|track|identify)\s*\(/;
+
   // Get all inline scripts (no src attribute)
   const scriptTags = Array.from(
     document.querySelectorAll("script:not([src])")
@@ -58,10 +73,11 @@
       .trim()
       .slice(0, 80);
 
-    // Check for common patterns
-    const hasGlobalVars = /^(var|let|const|window\.)/.test(content.trim());
-    const isConfig = /config|settings|options|__/i.test(content.slice(0, 200));
-    const isAnalytics = /gtag|analytics|gtm|fbq|_gaq/i.test(content);
+    // Check for common patterns; data payloads first, so nothing in their data counts as code
+    const isDataPayload = isDataPayloadScript(script, type, content);
+    const hasGlobalVars = !isDataPayload && /^(var|let|const|window\.)/.test(content.trim());
+    const isConfig = !isDataPayload && /config|settings|options|__/i.test(content.slice(0, 200));
+    const isAnalytics = !isDataPayload && ANALYTICS.test(content);
 
     return {
       index: index + 1,
@@ -75,6 +91,7 @@
       hasGlobalVars,
       isConfig,
       isAnalytics,
+      isDataPayload,
       preview: preview + (content.length > 80 ? "..." : ""),
       content,
     };
@@ -164,7 +181,9 @@
         Type: s.category,
         Size: formatBytes(s.size),
         "Parser-Blocking": s.isParserBlocking ? "⚠️ Yes" : "No",
-        Pattern: s.isAnalytics
+        Pattern: s.isDataPayload
+          ? "Data"
+          : s.isAnalytics
           ? "Analytics"
           : s.isConfig
           ? "Config"
@@ -323,8 +342,9 @@
       totalSizeBytes: totalSize,
       parserBlockingCount: parserBlockingScripts.length,
       parserBlockingInHeadCount: parserBlockingInHead.length,
+      dataPayloadCount: scripts.filter((s) => s.isDataPayload).length,
     },
-    items: rankedScripts.slice(0, MAX_ITEMS).map(s => ({ index: s.index, sizeBytes: s.size, category: s.category, inHead: s.inHead, isParserBlocking: s.isParserBlocking, isAnalytics: s.isAnalytics, isConfig: s.isConfig })),
+    items: rankedScripts.slice(0, MAX_ITEMS).map(s => ({ index: s.index, sizeBytes: s.size, category: s.category, inHead: s.inHead, isParserBlocking: s.isParserBlocking, isAnalytics: s.isAnalytics, isConfig: s.isConfig, isDataPayload: s.isDataPayload })),
     issues: issues.map(i => ({ severity: i.type === "blocking" ? "error" : "warning", message: i.message })),
   };
 })();

package/snippets/Loading/Script-Loading.js

@@ -11,7 +11,8 @@
   // @end-shared isOwnRequest
 
   // Domains that belong to the site but differ from the page's root domain, such as its own CDN.
-  // They count as first party. Example: const OWN_DOMAINS = ["bbci.co.uk", "bbc.co.uk"];
+  // They count as first party. Example, for a page on example.com whose CDN is example.net:
+  // const OWN_DOMAINS = ["example.net"];
   const OWN_DOMAINS = [];
 
   // @shared formatBytes
@@ -98,10 +99,15 @@
     const isModule = script.type === "module";
     const isAsync = script.async;
     const isDefer = script.defer;
+    // A nomodule script is the fallback for browsers without ES modules. A browser that has the
+    // noModule property supports modules, so it never fetches or runs the script: it blocks nothing.
+    const isNoModule = script.noModule === true && !isModule;
 
     // Determine loading strategy
     let strategy = "blocking";
-    if (isModule && isAsync) {
+    if (isNoModule) {
+      strategy = "nomodule";
+    } else if (isModule && isAsync) {
       strategy = "async module";
     } else if (isModule) {
       strategy = "module";
@@ -125,7 +131,8 @@
       isAsync,
       isDefer,
       size: timing.size || 0,
-      sizeKnown: !!timing.sizeKnown,
+      // A nomodule script is never fetched, so its size is known: nothing was downloaded
+      sizeKnown: !!timing.sizeKnown || (isNoModule && !resourceTiming.has(src)),
       duration: timing.duration || 0,
       startTime: timing.startTime || 0,
       element: script,
@@ -138,6 +145,7 @@
   const asyncScripts = scripts.filter((s) => s.strategy === "async" || s.strategy === "async module");
   const deferScripts = scripts.filter((s) => s.strategy === "defer");
   const moduleScripts = scripts.filter((s) => s.strategy === "module");
+  const noModuleScripts = scripts.filter((s) => s.strategy === "nomodule");
   const thirdPartyBlocking = blocking.filter((s) => !s.firstParty);
 
   // Calculate totals
@@ -172,6 +180,9 @@
   console.log(`   ⚡ Async: ${asyncScripts.length}`);
   console.log(`   📋 Defer: ${deferScripts.length}`);
   console.log(`   📦 Module: ${moduleScripts.length}`);
+  if (noModuleScripts.length > 0) {
+    console.log(`   ⏭️ nomodule (not fetched by this browser): ${noModuleScripts.length}`);
+  }
   console.log("");
   console.log(`   Rating: %c${rating}`, `color: ${ratingColor}; font-weight: bold;`);
 
@@ -361,6 +372,7 @@
         async: asyncScripts.length,
         defer: deferScripts.length,
         module: moduleScripts.length,
+        nomodule: noModuleScripts.length,
       },
       byParty: {
         firstParty: firstPartyScripts.length,

package/snippets/Loading/TTFB-Resources.js

@@ -11,7 +11,8 @@
   // @end-shared isOwnRequest
 
   // Domains that belong to the site but differ from the page's root domain, such as its own CDN.
-  // They count as first party. Example: const OWN_DOMAINS = ["bbci.co.uk", "bbc.co.uk"];
+  // They count as first party. Example, for a page on example.com whose CDN is example.net:
+  // const OWN_DOMAINS = ["example.net"];
   const OWN_DOMAINS = [];
 
   // Waiting time for the first byte of a resource: responseStart is measured from the

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

@@ -11,12 +11,21 @@
   }
   // @end-shared isOwnRequest
 
+  // @shared supportsRenderBlockingStatus
+  // renderBlockingStatus (Resource Timing) is Chromium-only (Chrome 107+). Without it, which
+  // resources block rendering is unknown: a snippet reports that, not "none".
+  function supportsRenderBlockingStatus() {
+    return !!window.PerformanceResourceTiming && "renderBlockingStatus" in window.PerformanceResourceTiming.prototype;
+  }
+  // @end-shared supportsRenderBlockingStatus
+
   const MAX_ITEMS = 50;
   const LOAF_WARNING_MS = 250; // Script time in long animation frames above which one domain is a problem
   const MAX_LISTED_DOMAINS = 5;
 
   // Domains that belong to the site but differ from the page's root domain, such as its own CDN.
-  // They count as first party. Example: const OWN_DOMAINS = ["bbci.co.uk", "bbc.co.uk"];
+  // They count as first party. Example, for a page on example.com whose CDN is example.net:
+  // const OWN_DOMAINS = ["example.net"];
   const OWN_DOMAINS = [];
 
   // @shared formatBytes
@@ -80,10 +89,13 @@
     }
   };
 
+  // Without it, renderBlocking is null for every domain instead of false
+  const renderBlockingSupported = supportsRenderBlockingStatus();
+
   const domains = new Map();
   const domainEntry = (root) => {
     if (!domains.has(root)) {
-      domains.set(root, { domain: root, requests: 0, transferBytes: 0, sizeUnknownCount: 0, renderBlocking: false, loafMs: null, loafScripts: 0 });
+      domains.set(root, { domain: root, requests: 0, transferBytes: 0, sizeUnknownCount: 0, renderBlocking: renderBlockingSupported ? false : null, loafMs: null, loafScripts: 0 });
     }
     return domains.get(root);
   };
@@ -115,7 +127,7 @@
       sizeUnknownCount++;
     }
 
-    if (entry.renderBlockingStatus === "blocking" && (entry.initiatorType === "script" || entry.initiatorType === "link")) {
+    if (renderBlockingSupported && entry.renderBlockingStatus === "blocking" && (entry.initiatorType === "script" || entry.initiatorType === "link")) {
       d.renderBlocking = true;
     }
   });
@@ -185,6 +197,12 @@
       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`,
     });
   });
+  if (!renderBlockingSupported && all.length > 0) {
+    issues.push({
+      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({
       severity: "info",
@@ -208,13 +226,16 @@
         Domain: d.domain,
         Requests: d.requests,
         Size: sizeLabel(d.transferBytes, d.sizeUnknownCount, d.requests),
-        "Render-blocking": d.renderBlocking ? "yes" : "no",
+        "Render-blocking": d.renderBlocking === null ? "n/a" : d.renderBlocking ? "yes" : "no",
         "Main thread": d.loafMs === null ? "n/a" : d.loafMs + " ms",
       }))
     );
   } else {
     console.log("%c✅ No third-party requests found", "color: #22c55e;");
   }
+  if (!renderBlockingSupported) {
+    console.log("%cℹ️ renderBlockingStatus is not supported; render-blocking status is unavailable (Chrome 107+)", "color: #3b82f6;");
+  }
   if (!loafSupported) {
     console.log("%cℹ️ Long Animation Frames are not supported; main-thread time is unavailable (Chrome 123+)", "color: #3b82f6;");
   }
@@ -242,7 +263,8 @@
       longFrames,
       unattributedLoafMs,
       firstPartyRequests,
-      blockingDomains: blocking.length,
+      blockingDomains: renderBlockingSupported ? blocking.length : null,
+      renderBlockingSupported,
       loafSupported,
       sizeUnknownCount,
     },

package/snippets/SCHEMA.md

@@ -4,12 +4,11 @@ All scripts in the skills directory must return a structured JSON object as the
 
 ## Why this matters
 
-`evaluate_script` captures **both** the console output **and** the return value of the evaluated expression. Console output (with `%c` CSS styling, emojis, tables) is meant for humans reading DevTools. The return value is meant for agents.
+The console output of a snippet (with `%c` CSS styling, emojis, tables) is meant for humans reading DevTools. The return value is meant for agents. The scripts in the skills are built without console calls, so the return value of `evaluate_script` is the only output an agent gets.
 
 ```
 // Agent workflow
-result = evaluate_script(scriptCode)  // return value → structured JSON for agent
-get_console_message()                  // console output → human debugging only
+result = evaluate_script(scriptCode)  // return value → structured JSON for the agent
 ```
 
 ---
@@ -136,7 +135,9 @@ Entry types that `getEntriesByType()` does return can be read synchronously: `na
 })();
 ```
 
-Always check `PerformanceObserver.supportedEntryTypes` first. On browsers without the entry type a script must return `status: "unsupported"`, not a value that looks like a passing result.
+Always check `PerformanceObserver.supportedEntryTypes` first. On browsers without the entry type a script must return `status: "unsupported"`, not a value that looks like a passing result. A tracking script also defines its `getDataFn`, which returns the same `unsupported` object.
+
+When only part of the result depends on an API, the script still runs: it sets a `details.<name>Supported` flag to `false` and reports the fields that depend on the API as `null`, never as `0` or `false`. `loafSupported` (Long Animation Frames) and `renderBlockingSupported` (`renderBlockingStatus` in Resource Timing, Chromium only) follow this rule.
 
 The repository enforces this with an ESLint rule (`no-restricted-syntax` in `eslint.config.mjs`) that rejects `getEntriesByType()` for the observer-only types.
 
@@ -201,7 +202,7 @@ A script wrapped in `void (async () => {...})()` discards its return value. Neve
   "details": {
     "element": "img.hero",
     "elementType": "Image",
-    "url": "https://web.dev/hero.jpg",
+    "url": "https://example.com/hero.jpg",
     "sizePixels": 756000
   }
 }
@@ -261,17 +262,26 @@ Returns buffered CLS immediately and keeps tracking. Always call `getCLS()` afte
 
 If no interactions yet, `getINP()` returns `status: "error"` with `getDataFn: "getINP"` — retry after user interaction.
 
-`getINPDetails()` returns the full sorted interaction list (array of up to 15 entries). Use when `getINP()` shows poor INP and you need to identify patterns across multiple slow interactions:
+The phases describe the whole interaction, not one of its events. A tap fires `pointerdown`, `pointerup` and `click`, and a key press `keydown` and `keyup`, with one `interactionId`. INP, Interactions and Input-Latency-Breakdown group the entries by `interactionId`, also when they arrive in separate observer callbacks, and measure the interaction over its entries painted in the frame of the longest one: `inputDelay` runs from the first `startTime` to the first `processingStart`, `processingTime` to the last `processingEnd`, and `presentationDelay` from there to the paint (`startTime + duration`, never below zero). The interaction is reported under the event whose handler ran longest, or under the `click` or `keydown` when no handler took a millisecond more than theirs; `worstEvent`, the Interactions `type` and the Input-Latency-Breakdown event type follow that rule.
+
+`getINPDetails()` returns the 15 slowest interactions, slowest first, with the total in `count`. `target` is a CSS selector built like `details.element` of LCP, or `null` when the browser reports no target. Use it when `getINP()` shows poor INP and you need to identify patterns across multiple slow interactions. With no interactions yet it returns `status: "error"`, `count: 0` and no items.
 
 ```json
-[
-  {
-    "formattedName": "click → button.submit",
-    "duration": 450,
-    "startTime": 1200,
-    "phases": { "inputDelay": 120, "processingTime": 280, "presentationDelay": 50 }
-  }
-]
+{
+  "script": "INP",
+  "status": "ok",
+  "count": 23,
+  "items": [
+    {
+      "formattedName": "click → button.submit",
+      "eventType": "click",
+      "target": "#checkout > button.submit",
+      "duration": 450,
+      "startTime": 1200,
+      "phases": { "inputDelay": 120, "processingTime": 280, "presentationDelay": 50 }
+    }
+  ]
+}
 ```
 
 #### LCP-Subparts
@@ -291,7 +301,7 @@ If no interactions yet, `getINP()` returns `status: "error"` with `getDataFn: "g
     "subParts": {
       "ttfb": { "value": 450, "percent": 21, "overTarget": false },
       "resourceLoadDelay": { "value": 120, "percent": 6, "overTarget": false },
-      "resourceLoadTime": { "value": 1200, "percent": 57, "overTarget": true },
+      "resourceLoadTime": { "value": 1200, "percent": 57, "overTarget": true, "waiting": 1040, "download": 160 },
       "elementRenderDelay": { "value": 330, "percent": 16, "overTarget": true }
     },
     "slowestPhase": "resourceLoadTime"
@@ -299,6 +309,8 @@ If no interactions yet, `getINP()` returns `status: "error"` with `getDataFn: "g
 }
 ```
 
+`resourceLoadTime.waiting` is the time until the first byte of the response of the LCP resource, and `resourceLoadTime.download` the time to download its body. Both are missing when Resource Timing hides that timing (another origin without `Timing-Allow-Origin`).
+
 #### LCP-Trail
 
 ```json
@@ -329,7 +341,7 @@ If no interactions yet, `getINP()` returns `status: "error"` with `getDataFn: "g
 
 #### LCP-Image-Entropy
 
-`items` holds the 50 most relevant images: the LCP image first, then the low-entropy ones, then the lowest bits per pixel. `count` and `details` cover every image.
+`items` holds the 50 most relevant images: the LCP image first, then the low-entropy ones, then the lowest bits per pixel. `count` and `details` cover every image. `bpp` follows Chrome's rule: the encoded size in bits over the displayed area in CSS pixels (`displayedWidth` × `displayedHeight`), or over the natural area (`width` × `height`) when the image is upscaled. An image that is not rendered has no displayed area and is left out.
 
 ```json
 {
@@ -351,6 +363,8 @@ If no interactions yet, `getINP()` returns `status: "error"` with `getDataFn: "g
       "url": "hero.jpg",
       "width": 1200,
       "height": 630,
+      "displayedWidth": 1200,
+      "displayedHeight": 630,
       "fileSizeBytes": 156000,
       "bpp": 1.65,
       "isLowEntropy": false,
@@ -375,7 +389,7 @@ If no interactions yet, `getINP()` returns `status: "error"` with `getDataFn: "g
   "thresholds": { "good": 2500, "needsImprovement": 4000 },
   "details": {
     "isVideo": true,
-    "posterUrl": "https://web.dev/hero.avif",
+    "posterUrl": "https://example.com/hero.avif",
     "posterFormat": "avif",
     "posterPreloaded": true,
     "fetchpriorityOnPreload": "high",
@@ -451,7 +465,7 @@ When the rating is not good, `issues` holds one entry that names the TTFB and th
   "items": [
     {
       "type": "link",
-      "url": "https://web.dev/style.css",
+      "url": "https://example.com/style.css",
       "shortName": "style.css",
       "responseEndMs": 450,
       "durationMs": 200,
@@ -463,7 +477,7 @@ When the rating is not good, `issues` holds one entry that names the TTFB and th
 
 #### Script-Loading
 
-`items` holds the 50 scripts to look at first: render-blocking, then third-party, then the largest. `count` and `details` cover every script. `corsLimitedAnalysis` is `true` when `details.sizeUnknownCount` is above zero, so `details.totalSizeBytes` is a lower bound.
+`items` holds the 50 scripts to look at first: render-blocking, then third-party, then the largest. `count` and `details` cover every script. `corsLimitedAnalysis` is `true` when `details.sizeUnknownCount` is above zero, so `details.totalSizeBytes` is a lower bound. A classic script with `nomodule` has the strategy `nomodule` and is never blocking: a browser that supports modules does not fetch it, so its size is known (0 bytes).
 
 ```json
 {
@@ -474,13 +488,13 @@ When the rating is not good, `issues` holds one entry that names the TTFB and th
   "details": {
     "totalSizeBytes": 245000,
     "sizeUnknownCount": 0,
-    "byStrategy": { "blocking": 2, "async": 4, "defer": 1, "module": 1 },
+    "byStrategy": { "blocking": 2, "async": 4, "defer": 1, "module": 1, "nomodule": 0 },
     "byParty": { "firstParty": 5, "thirdParty": 3 },
     "thirdPartyBlockingCount": 1
   },
   "items": [
     {
-      "url": "https://web.dev/app.js",
+      "url": "https://example.com/app.js",
       "shortName": "app.js",
       "strategy": "blocking",
       "location": "head",
@@ -520,7 +534,7 @@ Synchronous. `count` is the number of uncompressed text resources; `items` holds
   },
   "items": [
     {
-      "url": "https://web.dev/app.css",
+      "url": "https://example.com/app.css",
       "shortName": "app.css",
       "type": "css",
       "encoding": "none",
@@ -538,7 +552,7 @@ Synchronous. `count` is the number of uncompressed text resources; `items` holds
 
 #### Third-Party-Impact-by-Domain
 
-Synchronous. `count` is the number of third-party root domains; `items` holds the 50 to look at first (render-blocking, then the most main-thread time, then the largest transfer), while `details` totals every domain. `loafMs` is the script time attributed to the domain in `long-animation-frame` entries (sum of `scripts[].duration` by `sourceURL`), or `null` for every item when `details.loafSupported` is `false`. `details.longFrames` counts the long animation frames on the page and `details.unattributedLoafMs` is the time in them that no third-party script accounts for (first-party scripts, scripts under the 5 ms that the API lists, and style, layout and rendering work); both are `null` when `loafSupported` is `false`. A cross-origin request without `Timing-Allow-Origin` reports zero for every size, so it is counted in `sizeUnknownCount` (per domain and in `details`), left out of the byte totals, and `corsLimitedAnalysis` is `true`.
+Synchronous. `count` is the number of third-party root domains; `items` holds the 50 to look at first (render-blocking, then the most main-thread time, then the largest transfer), while `details` totals every domain. `loafMs` is the script time attributed to the domain in `long-animation-frame` entries (sum of `scripts[].duration` by `sourceURL`), or `null` for every item when `details.loafSupported` is `false`. `details.longFrames` counts the long animation frames on the page and `details.unattributedLoafMs` is the time in them that no third-party script accounts for (first-party scripts, scripts under the 5 ms that the API lists, and style, layout and rendering work); both are `null` when `loafSupported` is `false`. `details.renderBlockingSupported` is `false` in browsers without `renderBlockingStatus` (only Chromium has it); then `renderBlocking` is `null` for every item, `details.blockingDomains` is `null` and an `info` issue says so. A cross-origin request without `Timing-Allow-Origin` reports zero for every size, so it is counted in `sizeUnknownCount` (per domain and in `details`), left out of the byte totals, and `corsLimitedAnalysis` is `true`.
 
 ```json
 {
@@ -554,6 +568,7 @@ Synchronous. `count` is the number of third-party root domains; `items` holds th
     "unattributedLoafMs": 74,
     "firstPartyRequests": 1,
     "blockingDomains": 1,
+    "renderBlockingSupported": true,
     "loafSupported": true,
     "sizeUnknownCount": 1
   },
@@ -568,6 +583,37 @@ Synchronous. `count` is the number of third-party root domains; `items` holds th
 }
 ```
 
+#### First-And-Third-Party-Script-Info
+
+Synchronous. A script is a resource with `initiatorType` `script`, or one whose URL matches a `<script src>`, `<link rel="preload" as="script">` or `<link rel="modulepreload">` in the document (a preloaded script has `initiatorType` `link` or `other`). Each URL counts once; when the browser fetches it twice, the entry of the `<script>` is kept. `items` holds the 50 scripts to look at first (render-blocking, then third-party, then the largest). `details.renderBlockingSupported` is `false` in browsers without `renderBlockingStatus` (only Chromium has it); then `renderBlocking` is `null` for every item, `details.thirdPartyBlockingCount` is `null` and an `info` issue says so.
+
+```json
+{
+  "script": "First-And-Third-Party-Script-Info",
+  "status": "ok",
+  "count": 3,
+  "corsLimitedAnalysis": true,
+  "details": {
+    "firstPartyCount": 1,
+    "thirdPartyCount": 2,
+    "thirdPartyPercent": 67,
+    "firstPartySizeBytes": 48000,
+    "thirdPartySizeBytes": 0,
+    "thirdPartyBlockingCount": 1,
+    "thirdPartyHostCount": 2,
+    "sizeUnknownCount": 2,
+    "renderBlockingSupported": true
+  },
+  "items": [
+    { "shortName": "tag.js", "host": "tags.example", "firstParty": false, "transferBytes": 0, "sizeKnown": false, "durationMs": 120, "renderBlocking": true }
+  ],
+  "issues": [
+    { "severity": "info", "message": "2 script(s) have an unknown size (missing Timing-Allow-Origin); size totals are a lower bound" },
+    { "severity": "error", "message": "1 render-blocking third-party script(s)" }
+  ]
+}
+```
+
 #### Service-Worker-Analysis
 
 Async. Returns one item per registration. `cacheHitRate` is computed over the resources whose source is known: a cross-origin resource without `Timing-Allow-Origin` reports zero for every size, so it is counted in `fromUnknown` and left out of the rate. `rating` is present only when a rate exists, and `cacheStorage` lists the 20 largest caches (`cacheStorageCount` is the total). With no registration the script returns `status: "ok"`, `count: 0` and an info issue.
@@ -595,8 +641,8 @@ Async. Returns one item per registration. `cacheHitRate` is computed over the re
   },
   "items": [
     {
-      "scope": "https://web.dev/",
-      "scriptURL": "https://web.dev/sw.js",
+      "scope": "https://example.com/",
+      "scriptURL": "https://example.com/sw.js",
       "state": "active",
       "hasWaiting": false,
       "hasInstalling": false,
@@ -644,7 +690,7 @@ Async. Returns one item per registration. `cacheHitRate` is computed over the re
 
 #### FCP
 
-`value` is measured from `activationStart` on prerendered pages. `details` splits it into three phases that add up to `value`: TTFB, the wait for the last render-blocking resource, and the rest until the paint. `items` lists the render-blocking resources, the last to finish first (at most 50).
+`value` is measured from `activationStart` on prerendered pages. `details` splits it into three phases that add up to `value`: TTFB, the wait for the last render-blocking resource, and the rest until the paint. `items` lists the render-blocking resources, the last to finish first (at most 50). `details.renderBlockingSupported` is `false` in browsers without `renderBlockingStatus` (only Chromium has it): which resources block rendering is unknown, so `renderBlockingLoadMs`, `renderDelayMs` and `blockingResourceCount` are `null`, `items` is empty, and `value` and `ttfbMs` are still measured.
 
 ```json
 {
@@ -655,7 +701,7 @@ Async. Returns one item per registration. `cacheHitRate` is computed over the re
   "unit": "ms",
   "rating": "good",
   "thresholds": { "good": 1800, "needsImprovement": 3000 },
-  "details": { "ttfbMs": 180, "renderBlockingLoadMs": 620, "renderDelayMs": 440, "blockingResourceCount": 2 },
+  "details": { "ttfbMs": 180, "renderBlockingLoadMs": 620, "renderDelayMs": 440, "blockingResourceCount": 2, "renderBlockingSupported": true },
   "items": [{ "url": "app.css", "type": "CSS", "durationMs": 310 }]
 }
 ```
@@ -911,7 +957,7 @@ Immediately returns the buffered CLS (the largest session window), plus a summar
 
 #### Long-Animation-Frames
 
-Returns buffered LoAF data immediately. Ongoing tracking continues. `items` holds the 20 frames with the most blocking time, in the same shape at start and in `getLoAFSummary()`, each with its 10 slowest scripts.
+Returns buffered LoAF data immediately. Ongoing tracking continues. `items` holds the 20 frames with the most blocking time, in the same shape at start and in `getLoAFSummary()`, each with its 10 slowest scripts. In browsers without `long-animation-frame` entries (Firefox, Safari) the script and `getLoAFSummary()` return `{ "script": "Long-Animation-Frames", "status": "unsupported", "error": "..." }`, not a count of 0.
 
 ```json
 {
@@ -1148,7 +1194,7 @@ Same shape as Image-Element-Audit but for video elements.
 ### Reading results
 
 ```
-// Prefer return value over console output
+// Read the return value: the skill scripts have no console output
 result = evaluate_script(scriptCode)
 if result.status == "ok" → use result.value, result.rating, result.details, result.items
 if result.status == "tracking" → call evaluate_script(`${result.getDataFn}()`) after user interaction
@@ -1195,4 +1241,4 @@ data = evaluate_script("getINP()")
 11. **Hidden cross-origin data is reported, not guessed** — a resource whose timing or size is hidden (no `Timing-Allow-Origin`) reports zeros for every size and timing. Count it (`sizeKnown: false`, `corsRestrictedCount`) instead of treating the zero as a measurement.
 12. **Partial analysis is flagged** — when hidden cross-origin data leaves part of the set unanalyzed, set the top-level `corsLimitedAnalysis: true` and report how many resources were skipped in `details` (`sizeUnknownCount`, `corsRestrictedCount`). Set it to `false` when every resource was analyzed.
 
-The rules are checked by `cli/tests/e2e/snippet-contract.test.js`, which runs every script, and every `getDataFn`, on an empty page, a seeded page and a heavy page.
+The rules are checked by `cli/tests/e2e/snippet-contract.test.js`, which runs every script, its `getDataFn` and every other getter it exposes on `window` (such as `getINPDetails()` and `checkBfcache()`), on an empty page, a seeded page and a heavy page.

package/snippets/_shared/helpers.js

@@ -85,6 +85,70 @@ function isOwnRequest(entry) {
 }
 // @end-shared isOwnRequest
 
+// @shared createInteractionTracker
+// Groups Event Timing entries by interactionId across observer callbacks, since the entries of one
+// interaction (pointerdown, pointerup, click; keydown, keyup) can arrive in separate batches. Each
+// interaction is measured over its entries painted in the frame of its longest one: Chrome rounds
+// durations to 8 ms, and an event painted in an earlier frame, such as the keydown of a key held
+// down, has its own timing. It is reported under the event whose handler ran longest, or under the
+// click or keydown when no handler took a millisecond more than theirs.
+function createInteractionTracker() {
+  const byId = new Map();
+  const processing = (e) => e.processingEnd - e.processingStart;
+  const measure = (id, entries) => {
+    const longest = entries.reduce((a, b) => (b.duration > a.duration ? b : a));
+    const paint = longest.startTime + longest.duration;
+    const frame = entries.filter((e) => Math.abs(e.startTime + e.duration - paint) <= 8);
+    const startTime = Math.min(...frame.map((e) => e.startTime));
+    const processingStart = Math.min(...frame.map((e) => e.processingStart));
+    const processingEnd = Math.max(...frame.map((e) => e.processingEnd));
+    const busiest = frame.reduce((a, b) => (processing(b) > processing(a) ? b : a));
+    const primary = frame.find((e) => e.name === "click" || e.name === "keydown");
+    const reported = primary && processing(busiest) - processing(primary) < 1 ? primary : busiest;
+    return {
+      interactionId: id,
+      name: reported.name,
+      target: reported.target ?? frame.find((e) => e.target)?.target ?? null,
+      startTime,
+      duration: longest.duration,
+      phases: {
+        inputDelay: processingStart - startTime,
+        processingTime: processingEnd - processingStart,
+        presentationDelay: Math.max(0, startTime + longest.duration - processingEnd),
+      },
+    };
+  };
+  return {
+    // Adds the entries of one observer callback and returns the interactions they changed
+    add(entries) {
+      const changed = new Set();
+      for (const e of entries) {
+        if (!e.interactionId) continue;
+        const record = byId.get(e.interactionId) ?? { entries: [] };
+        record.entries.push({
+          name: e.name,
+          target: e.target,
+          startTime: e.startTime,
+          duration: e.duration,
+          processingStart: e.processingStart,
+          processingEnd: e.processingEnd,
+        });
+        byId.set(e.interactionId, record);
+        changed.add(e.interactionId);
+      }
+      return [...changed].map((id) => {
+        const record = byId.get(id);
+        record.summary = measure(id, record.entries);
+        return record.summary;
+      });
+    },
+    list() {
+      return [...byId.values()].map((record) => record.summary);
+    },
+  };
+}
+// @end-shared createInteractionTracker
+
 // @shared uniqueSelector
 // A CSS selector that matches only el in its document (or shadow root): its id when it is unique,
 // otherwise a path of tag, classes and :nth-of-type() that goes up to the nearest ancestor with a
@@ -118,3 +182,11 @@ function uniqueSelector(el) {
   return parts.join(" > ");
 }
 // @end-shared uniqueSelector
+
+// @shared supportsRenderBlockingStatus
+// renderBlockingStatus (Resource Timing) is Chromium-only (Chrome 107+). Without it, which
+// resources block rendering is unknown: a snippet reports that, not "none".
+function supportsRenderBlockingStatus() {
+  return !!window.PerformanceResourceTiming && "renderBlockingStatus" in window.PerformanceResourceTiming.prototype;
+}
+// @end-shared supportsRenderBlockingStatus