webperf-snippets 1.12.0 → 1.14.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, the version of the CLI and the machine: its CPU model, cores, architecture and memory, as the operating system reports them, and a benchmark index, a short CPU test in Node before Chromium starts, which only informs, since on the same machine it moves by up to 40 % with the load.
 
 ```json
-"conditions": { "viewport": "mobile", "workflow": "core-web-vitals", "waitMs": 3000, "cliVersion": "1.12.0", "machine": { "cpu": "Apple M4", "cores": 10, "arch": "arm64", "memoryGB": 16, "benchmarkIndex": 2371 } }
+"conditions": { "viewport": "mobile", "workflow": "core-web-vitals", "waitMs": 3000, "cliVersion": "1.14.0", "machine": { "cpu": "Apple M4", "cores": 10, "arch": "arm64", "memoryGB": 16, "benchmarkIndex": 2371 } }
 ```
 
 Single snippet:
@@ -171,7 +171,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.12.0" }
+  "meta": { "viewport": "mobile", "waitMs": 3000, "cli_version": "1.14.0" }
 }
 ```
 
@@ -203,7 +203,7 @@ One page load is one sample, and lab values vary from one load to the next. `--r
 npx webperf-snippets https://example.com --runs 5 --budget-lcp 2500
 ```
 
-The median run is the one with the median LCP. A workflow without LCP uses the first of FCP, TTFB and the navigation time that it measures, and `--median-by <metric>` picks another one (`LCP`, `FCP`, `TTFB`, `CLS`, `INP` or `navMs`). With an even count it takes the lower of the two middle runs, so the report is always a run that happened. The report adds the median, min and max of each metric across the runs, and how much the runs agree, and the JSON output carries them in `runs`:
+The median run is the one with the median LCP. A workflow without LCP uses the first of FCP, TTFB, INP and the navigation time that it measures, so a measurement of interactions answers with its median INP, and `--median-by <metric>` picks another one (`LCP`, `FCP`, `TTFB`, `CLS`, `INP` or `navMs`). With an even count it takes the lower of the two middle runs, so the report is always a run that happened. The report adds the median, min and max of each metric across the runs, and how much the runs agree, and the JSON output carries them in `runs`:
 
 ```json
 "runs": {
@@ -334,7 +334,7 @@ Each budget compares the value measured, or the median with `--runs`, and fails
 | `--header "Name: value"`     | Request header for the origin of the URL only, such as the token of an access proxy. Repeat it for more headers. |
 | `--own-domains <list>`       | Domains of the site to count as first party, such as its own CDN. Comma-separated or repeated. |
 | `--runs <n>`                 | Measure the page n times, from 1 to 9, one after the other, and report the median run. |
-| `--median-by <metric>`       | Metric that picks the median run: `LCP`, `FCP`, `TTFB`, `CLS`, `INP` or `navMs`. Default: the first of LCP, FCP, TTFB and `navMs` measured. |
+| `--median-by <metric>`       | Metric that picks the median run: `LCP`, `FCP`, `TTFB`, `CLS`, `INP` or `navMs`. Default: the first of LCP, FCP, TTFB, INP and `navMs` measured. |
 | `--matrix <file>`            | Measure every URL of a JSON file on every device and in every variant it lists, and report a table of the medians. |
 | `--baseline <file>`          | Compare the page, or each combination of a matrix, with the `--json` output of an earlier run: which metrics got worse or better beyond the noise, and which errors are new or fixed. |
 | `--threshold <metric>=<v>`   | The threshold of a metric for `--baseline`, such as `LCP=15%`, `LCP=200ms` or `CLS=0.1`. Repeat it for more metrics. |
@@ -404,15 +404,30 @@ It needs the Chromium of Playwright (`npx playwright install chromium`); without
 | Tool            | What it does                                                                 |
 | --------------- | ---------------------------------------------------------------------------- |
 | `list_snippets` | Lists the snippets with their category, title, short aliases and whether they track interactions. Takes an optional `category`. |
-| `run_snippet`   | Opens a URL in a headless Chromium, runs one snippet and returns a summary of its result. Takes `url`, `snippet` (name, alias or `Category/Name`), and optional `viewport`, `waitMs`, `runs`, `baseline` and `thresholds`. The snippets that record interactions run on a page opened with `open_page`. |
-| `run_workflow`  | Runs a workflow of the CLI (`core-web-vitals`, `audit`, `loading`, `interaction`) and the follow-ups of its decision tree. Takes `url`, `workflow`, and optional `viewport`, `waitMs`, `runs`, `baseline` and `thresholds`. |
+| `run_snippet`   | Opens a URL in a headless Chromium, runs one snippet and returns a summary of its result. Takes `url`, `snippet` (name, alias or `Category/Name`), and optional `viewport`, `waitMs`, `cpu`, `network`, `interactions`, `runs`, `baseline` and `thresholds`. The snippets that record interactions need `interactions` with a click or a key press, or a page opened with `open_page`. |
+| `run_workflow`  | Runs a workflow of the CLI (`core-web-vitals`, `audit`, `loading`, `interaction`) and the follow-ups of its decision tree. Takes `url`, `workflow`, and optional `viewport`, `waitMs`, `cpu`, `network`, `interactions`, `runs`, `baseline` and `thresholds`. |
 | `get_crux`      | Returns the CrUX p75 of LCP, CLS and INP for a URL, or its origin. Takes `url` and an optional `formFactor` (`phone`, `desktop`, `tablet`). Needs `CRUX_API_KEY` in the environment of the server. |
-| `open_page`     | Opens a URL in a page that stays open between calls and installs tracking snippets (`track`, such as `INP`). Returns a `sessionId`. |
+| `open_page`     | Opens a URL in a page that stays open between calls and installs tracking snippets (`track`, such as `INP`). Takes optional `viewport`, `waitMs`, `cpu` and `network`. Returns a `sessionId`. |
 | `interact`      | Runs steps on an open page: `click`, `type`, `hover`, `scroll` or `wait`. |
 | `read_results`  | Returns what the tracking snippets of an open page have recorded. |
 | `get_details`   | Returns the whole object of one snippet of a run, by the `runId` that `run_snippet`, `run_workflow` or `read_results` returned, without measuring again. Takes `runId` and `snippet`. |
 | `close_page`    | Closes an open page. |
 
+`run_snippet`, `run_workflow` and `open_page` take `cpu` and `network`, as `--cpu` and `--network`: a CPU factor of at least 1, such as `4`, and a DevTools preset (`fast-4g`, `slow-4g`, `3g`), applied before the page loads. The answer adds `throttling`, as the JSON does, and the conditions of the run name them, so a baseline measured under other throttling gives a warning.
+
+`run_snippet` and `run_workflow` take `interactions`, the steps of `interact` (up to 50), as `--interact-script`: they run after the load of each run, so `runs`, `baseline` and `thresholds` work with them. With a click or a key press, `run_snippet` runs INP, Interactions and Input-Latency-Breakdown, and the `interaction` workflow runs its steps that need input instead of skipping them. The INP of a page over five runs with a click each, with the CPU 4 times slower, against an earlier run:
+
+```json
+{
+  "url": "http://localhost:3000/product",
+  "snippet": "INP",
+  "interactions": [{ "action": "click", "selector": "#buy" }, { "action": "wait", "ms": 300 }],
+  "runs": 5,
+  "cpu": 4,
+  "baseline": "<runId of the run before the change>"
+}
+```
+
 `run_snippet` and `run_workflow` take `runs`, from 1 to 9, as `--runs`: the page loads that many times, one after the other, and the answer is the median run plus a `runs` field, the one of the JSON, with the median, min, max, the value of each run and the agreement of each metric. A run that fails counts in `failed` and is left out; when every run fails, the answer is a tool error. The server keeps the results of the median run only, as the JSON does, so `get_details` answers from that run and names it in `medianRun`; a metric other than the one that picked it (`medianBy`) can differ there from its median in `runs`.
 
 Each run is a page load plus `waitMs`. With the default wait of 3 seconds, five runs of a workflow take about 20 seconds on a local page, and about a minute on a page that takes a few seconds to load. When the client asks for progress, the server reports the three stages of each run, numbered across the runs. A client sets its own limit on a tool call: the MCP SDK stops waiting after 60 seconds unless it is given a longer `timeout` or `resetTimeoutOnProgress`, and in Claude Code `MCP_TOOL_TIMEOUT` sets the limit. When the client gives up, the run in progress ends and no other starts.
@@ -541,7 +556,7 @@ The `NPM_TOKEN` secret must be set in the repository settings with publish acces
 - **CLS in headless is conservative**: layout shifts that only happen on scroll are missed unless you script the scroll.
 - **First navigation only**: each `webperf-snippets` invocation runs one URL. SPAs need the post-route URL passed directly.
 - **Synthetic INP ≠ field INP**: `--interact-script` measures handler latency for a single scripted event. Real INP reflects the worst interaction across all user sessions; use RUM for field data.
-- **A click that paints nothing**: INP is under 16 ms with the `no-paint-measured` issue, as web-vitals reports it, so it rates `good` and passes `--budget-inp`. Check that the selector reaches an element that responds. `tracking` after a click means that the document recorded no interaction, as with a click inside an iframe: the run exits with code `0` unless it has a budget.
+- **A click that paints nothing**: INP is under 16 ms with the `no-paint-measured` issue, as web-vitals reports it, so it rates `good` and passes `--budget-inp`. Check that the selector reaches an element that responds. When the document recorded no interaction at all, as with a click inside an iframe, the snippet is an error that says a click or key press was sent, and the run exits with code `1`.
 
 ## Roadmap
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webperf-snippets",
-  "version": "1.12.0",
+  "version": "1.14.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",
@@ -21,6 +21,7 @@
   },
   "devDependencies": {
     "@modelcontextprotocol/client": "^2.3.1",
+    "@projectwallace/css-analyzer": "9.9.5",
     "vitest": "^5.0.5",
     "web-vitals": "^6.2.3"
   },

package/snippets/Interaction/Scroll-Performance.js

@@ -26,9 +26,13 @@
     "scroll", "wheel", "touchstart", "touchmove", "touchend",
   ]);
 
+  // When Playwright clicks, as the CLI does, its injected script can add touch listeners of its own to
+  // window, without passive, to check that the click lands on the element. They are not the page's.
+  const addedByPlaywright = () => /\bInjectedScript\b/.test(new Error().stack || "");
+
   const _origAddEventListener = EventTarget.prototype.addEventListener;
   EventTarget.prototype.addEventListener = function (type, listener, options) {
-    if (SCROLL_EVENT_TYPES.has(type)) {
+    if (SCROLL_EVENT_TYPES.has(type) && !addedByPlaywright()) {
       const isPassive =
         options === true
           ? false // old-style capture boolean, not passive

package/snippets/Loading/CSS-Complexity.js

@@ -0,0 +1,562 @@
+// CSS Complexity
+// What in the CSS of the page costs bytes or style work and can go: embedded content, @import, empty
+// rules, repeated selectors, unused @keyframes and complex selectors, read from the CSSOM of every
+// stylesheet, and with
+// fetch for a stylesheet of another origin whose rules the page cannot read
+// https://webperf-snippets.net
+
+(async () => {
+  const SCRIPT = "CSS-Complexity";
+  const MAX_ITEMS = 50;
+  // The 90th percentile of the embedded content of a homepage in The CSS Selection 2026 (Project
+  // Wallace): 90% of homepages embed less than this in all their CSS
+  const EMBEDDED_P90_BYTES = 36632;
+  // The 90th percentiles of !important (share of the declarations) and of @font-face rules
+  const IMPORTANT_P90_PERCENT = 13;
+  const FONT_FACE_P90 = 48;
+  // The 90th percentile of the most complex selector of a homepage
+  const SELECTOR_COMPLEXITY_P90 = 29;
+  const MAX_COMPLEX_SELECTORS = 5;
+  // Below this share of unique selectors, css-code-quality (Project Wallace) flags the duplication
+  const MIN_SELECTOR_UNIQUENESS = 0.66;
+
+  // @shared formatBytes
+  function formatBytes(bytes) {
+    if (bytes === null || bytes === undefined || Number.isNaN(bytes)) return "-";
+    if (bytes === 0) return "0 B";
+    const units = ["B", "KB", "MB", "GB"];
+    const i = Math.max(0, Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1));
+    return (bytes / Math.pow(1024, i)).toFixed(1) + " " + units[i];
+  }
+  // @end-shared formatBytes
+
+  // @shared ownRequestUrl
+  // The URL a snippet requests when it reads a file of the page itself (fetch, a HEAD request,
+  // new Image()). The fragment never reaches the server or the HTTP cache key, so the file still
+  // comes from the cache, but it stays in the name of the Resource Timing entry of the request,
+  // which is how isOwnRequest leaves these requests out of what the page loaded.
+  function ownRequestUrl(url) {
+    try {
+      const parsed = new URL(url, location.href);
+      if (!/^https?:$/.test(parsed.protocol)) return url;
+      parsed.hash = "webperf-snippets";
+      return parsed.href;
+    } catch {
+      return url;
+    }
+  }
+  // @end-shared ownRequestUrl
+
+  const plural = (n, one, many = `${one}s`) => `${n} ${n === 1 ? one : many}`;
+
+  // Splits on a separator outside parentheses, brackets and strings: the declarations of a rule
+  // (";"), or the selectors of a list (",")
+  function splitTopLevel(text, separator) {
+    const parts = [];
+    let depth = 0;
+    let quote = null;
+    let start = 0;
+    for (let i = 0; i < text.length; i++) {
+      const c = text[i];
+      if (quote) {
+        if (c === "\\") i++;
+        else if (c === quote) quote = null;
+      } else if (c === '"' || c === "'") quote = c;
+      else if (c === "(" || c === "[") depth++;
+      else if (c === ")" || c === "]") depth--;
+      else if (c === separator && depth === 0) {
+        parts.push(text.slice(start, i));
+        start = i + 1;
+      }
+    }
+    parts.push(text.slice(start));
+    return parts.map((p) => p.trim()).filter(Boolean);
+  }
+
+  // The declarations as written, from cssText: the CSSOM lists a shorthand as all its longhands in
+  // style.length, and cssText joins them back
+  const declarationsOf = (style) => splitTopLevel(style.cssText, ";");
+
+  const FONT_TYPES = /^(font\/|application\/(x-)?font-|application\/vnd\.ms-fontobject)/;
+
+  // The data: URLs of a declaration block, as the CSSOM serializes them: url("data:…")
+  function embeddedOf(cssText, inFontFace) {
+    const found = [];
+    for (const [, raw] of cssText.matchAll(/url\("((?:[^"\\]|\\.)*)"\)/g)) {
+      const url = raw.replace(/\\(["\\])/g, "$1");
+      if (!/^data:/i.test(url)) continue;
+      const type = url.slice(5).split(/[;,]/)[0].toLowerCase() || "text/plain";
+      found.push({ type, bytes: url.length, font: inFontFace || FONT_TYPES.test(type) });
+    }
+    return found;
+  }
+
+  // --- Selector complexity, as css-analyzer counts it ------------------------------------------
+  // Every part of a selector counts 1: type, class, id, attribute, pseudo-class, pseudo-element,
+  // combinator, * and &. A vendor prefix and an attribute value count 1 more. :is(), :where(),
+  // :not(), :has(), :matches() and :-webkit-any() add the complexity of the selectors they hold,
+  // and :nth-child() that of its "of S" part, or 1 for its An+B. Those add every selector found in
+  // their argument, at any depth, so :is(:is(.a)) is 4. Another pseudo with an argument adds 1 for
+  // the list and the selectors in it, but :lang() and :nth-of-type() only 1.
+
+  const SELECTOR_FUNCTIONS = new Set(["is", "where", "not", "has", "matches", "-webkit-any", "-moz-any"]);
+  const total = (values) => values.reduce((a, b) => a + b, 0);
+  // The complexities of the selectors of a list, and of every selector nested in them
+  const selectorsIn = (text) => splitTopLevel(text, ",").flatMap((selector) => {
+    const { complexity, nested } = analyzeSelector(selector);
+    return [complexity, ...nested];
+  });
+  const complexityOf = (selectorText) => analyzeSelector(selectorText).complexity;
+
+  // The complexity of a selector, and the complexities of the selectors nested in its pseudo-classes
+  function analyzeSelector(selectorText) {
+    const s = selectorText.trim();
+    let complexity = 0;
+    const nested = [];
+    let i = 0;
+    let afterCombinator = false;
+    const readIdent = () => {
+      const start = i;
+      while (i < s.length) {
+        if (s[i] === "\\") i += 2;
+        else if (/[\w-]/.test(s[i]) || s.charCodeAt(i) > 127) i++;
+        else break;
+      }
+      return s.slice(start, i);
+    };
+    // The text between the parenthesis at i and its match, after which i points
+    const readGroup = (open, close) => {
+      const start = i + 1;
+      let depth = 0;
+      let quote = null;
+      for (; i < s.length; i++) {
+        const c = s[i];
+        if (quote) {
+          if (c === "\\") i++;
+          else if (c === quote) quote = null;
+        } else if (c === '"' || c === "'") quote = c;
+        else if (c === open) depth++;
+        else if (c === close && --depth === 0) return s.slice(start, i++);
+      }
+      return s.slice(start);
+    };
+    while (i < s.length) {
+      const c = s[i];
+      if (/\s/.test(c)) {
+        while (i < s.length && /\s/.test(s[i])) i++;
+        // Whitespace between two compounds is the descendant combinator
+        if (i < s.length && !">+~".includes(s[i]) && complexity > 0 && !afterCombinator) {
+          complexity++;
+          afterCombinator = true;
+        }
+        continue;
+      }
+      if (">+~".includes(c)) {
+        complexity++;
+        i++;
+        afterCombinator = true;
+        continue;
+      }
+      afterCombinator = false;
+      if (c === "*" || c === "&") {
+        complexity++;
+        i++;
+      } else if (c === "#" || c === ".") {
+        i++;
+        readIdent();
+        complexity++;
+      } else if (c === "[") {
+        const inner = readGroup("[", "]");
+        complexity += /=/.test(inner) ? 2 : 1;
+      } else if (c === ":") {
+        i += s[i + 1] === ":" ? 2 : 1;
+        const name = readIdent().toLowerCase();
+        complexity += name.startsWith("-") ? 2 : 1;
+        if (s[i] === "(") {
+          const arg = readGroup("(", ")").trim();
+          const of = name === "nth-child" || name === "nth-last-child" ? arg.match(/\sof\s([\s\S]+)$/i) : null;
+          if (SELECTOR_FUNCTIONS.has(name) || of) {
+            const found = selectorsIn(of ? of[1] : arg);
+            complexity += total(found);
+            nested.push(...found);
+          } else if (name === "nth-child" || name === "nth-last-child" || name === "nth-of-type" || name === "nth-last-of-type" || name === "lang") {
+            complexity += arg ? 1 : 0;
+          } else {
+            const found = selectorsIn(arg);
+            const own = splitTopLevel(arg, ",").map(complexityOf);
+            complexity += 1 + total(own);
+            nested.push(...found);
+          }
+        }
+      } else if (/[\w-\\]/.test(c) || s.charCodeAt(i) > 127) {
+        readIdent();
+        complexity++;
+      } else {
+        i++;
+      }
+    }
+    return { complexity, nested };
+  }
+
+  // The most frequent value, or the mean of the most frequent ones when they tie, as css-analyzer
+  function modeOf(values) {
+    const frequencies = new Map();
+    for (const v of values) frequencies.set(v, (frequencies.get(v) ?? 0) + 1);
+    let top = 0;
+    for (const n of frequencies.values()) if (n > top) top = n;
+    const tied = [...frequencies.entries()].filter(([, n]) => n === top).map(([v]) => v);
+    return tied.length ? tied.reduce((a, b) => a + b, 0) / tied.length : 0;
+  }
+
+  const describeHost = (el) => el.localName + (el.id ? `#${el.id}` : el.classList[0] ? `.${el.classList[0]}` : "");
+
+  // --- The stylesheets: of the document, adopted, of open shadow roots, and imported -----------
+
+  // Each entry is a stylesheet of the page, or the URL of one to fetch, imported by a fetched one
+  const sheets = [];
+  const seenSheets = new Set();
+  // A stylesheet a browser extension links to the page is not part of it. The <style> elements an
+  // extension injects carry no such mark, so the page tells to measure without extensions.
+  const EXTENSION_URL = /^(chrome|moz|safari-web)-extension:/i;
+  let extensionCount = 0;
+  const addSheet = (sheet, source) => {
+    if (!sheet || seenSheets.has(sheet)) return;
+    seenSheets.add(sheet);
+    if (sheet.href && EXTENSION_URL.test(sheet.href)) {
+      extensionCount++;
+      return;
+    }
+    sheets.push({ sheet, source });
+  };
+  const addUrl = (href) => {
+    if (seenSheets.has(href)) return;
+    if (EXTENSION_URL.test(href)) {
+      seenSheets.add(href);
+      extensionCount++;
+      return;
+    }
+    seenSheets.add(href);
+    sheets.push({ href, source: href });
+  };
+
+  // A stylesheet of another origin loaded without CORS: its rules throw, but fetch can read it when
+  // the server sends Access-Control-Allow-Origin, as a CDN often does. replaceSync parses it with
+  // the same CSSOM, and drops @import, so the imports are read from the text and left out of it.
+  async function fetchSheet(href) {
+    try {
+      const response = await fetch(ownRequestUrl(href));
+      if (!response.ok) return null;
+      const text = (await response.text()).replace(/\/\*[\s\S]*?\*\//g, "");
+      const statements = text.match(/@import\s[^;]*;/gi) ?? [];
+      const imports = statements
+        .map((statement) => statement.match(/@import\s+(?:url\(\s*)?(["']?)([^"')\s;]+)\1/i)?.[2])
+        .filter(Boolean)
+        .map((url) => new URL(url, href).href);
+      const sheet = new window.CSSStyleSheet({ baseURL: href });
+      sheet.replaceSync(statements.reduce((css, statement) => css.replace(statement, ""), text));
+      return { rules: sheet.cssRules, imports };
+    } catch {
+      return null;
+    }
+  }
+  let styleIndex = 0;
+  let adoptedIndex = 0;
+  for (const sheet of document.styleSheets) addSheet(sheet, sheet.href || `<style> #${++styleIndex}`);
+  for (const sheet of document.adoptedStyleSheets ?? []) addSheet(sheet, `adopted stylesheet #${++adoptedIndex}`);
+  for (const el of document.querySelectorAll("*")) {
+    const root = el.shadowRoot;
+    if (!root) continue;
+    const host = describeHost(el);
+    for (const sheet of root.styleSheets) addSheet(sheet, sheet.href || `<style> in the shadow root of ${host}`);
+    for (const sheet of root.adoptedStyleSheets ?? []) addSheet(sheet, `adopted stylesheet in the shadow root of ${host}`);
+  }
+
+  // --- Counting ----------------------------------------------------------------------------------
+
+  const imports = [];
+  const embeddedTypes = new Map();
+  // Every selector of every rule, without its context (@media, @supports), as css-analyzer counts them
+  const selectorCounts = new Map();
+  // The complexity of every selector, and of each distinct one
+  const complexities = [];
+  const complexityBySelector = new Map();
+  const keyframesDefined = new Set();
+  const animationsUsed = new Set();
+  let keyframesCount = 0;
+  let fontFaceCount = 0;
+
+  // An element of another namespace than HTML, SVG or MathML has a style attribute and no style
+  const noteAnimations = (style) => {
+    for (const name of (style?.animationName ?? "").split(",")) {
+      const n = name.trim();
+      if (n && n !== "none") animationsUsed.add(n);
+    }
+  };
+
+  // Counts the declarations of a block, its !important and the animations it names
+  function noteDeclarations(style, stats) {
+    const declarations = declarationsOf(style);
+    stats.declarationCount += declarations.length;
+    stats.importantCount += declarations.filter((d) => /!\s*important$/i.test(d)).length;
+    noteAnimations(style);
+    return declarations;
+  }
+
+  function walk(rules, stats, sheetUrl) {
+    for (const rule of rules) {
+      if (rule instanceof window.CSSImportRule) {
+        stats.importCount++;
+        let href = rule.href;
+        try {
+          href = new URL(rule.href, sheetUrl).href;
+        } catch {
+          // keep the href as written
+        }
+        imports.push({ from: stats.source, href });
+        addSheet(rule.styleSheet, href);
+      } else if (rule instanceof window.CSSStyleRule) {
+        const declarations = noteDeclarations(rule.style, stats);
+        const nested = rule.cssRules?.length ?? 0;
+        const selectors = splitTopLevel(rule.selectorText, ",");
+        stats.ruleCount++;
+        stats.selectorCount += selectors.length;
+        for (const selector of selectors) {
+          selectorCounts.set(selector, (selectorCounts.get(selector) ?? 0) + 1);
+          const complexity = complexityBySelector.get(selector) ?? complexityOf(selector);
+          complexityBySelector.set(selector, complexity);
+          complexities.push(complexity);
+        }
+        if (declarations.length === 0 && nested === 0) stats.emptyRuleCount++;
+        count(embeddedOf(rule.style.cssText, false), stats);
+        if (nested) walk(rule.cssRules, stats, sheetUrl);
+      } else if (window.CSSNestedDeclarations && rule instanceof window.CSSNestedDeclarations) {
+        // The declarations of a style rule that follow a nested rule, or sit in a nested @media
+        noteDeclarations(rule.style, stats);
+        count(embeddedOf(rule.style.cssText, false), stats);
+      } else if (rule instanceof window.CSSFontFaceRule) {
+        fontFaceCount++;
+        stats.declarationCount += declarationsOf(rule.style).length;
+        count(embeddedOf(rule.style.cssText, true), stats);
+      } else if (rule instanceof window.CSSKeyframesRule) {
+        keyframesCount++;
+        keyframesDefined.add(rule.name);
+        for (const keyframe of rule.cssRules) {
+          stats.declarationCount += declarationsOf(keyframe.style).length;
+          count(embeddedOf(keyframe.style.cssText, false), stats);
+        }
+      } else if (rule.cssRules) {
+        // @media, @supports, @layer, @container and the other rules that group rules
+        walk(rule.cssRules, stats, sheetUrl);
+      }
+    }
+  }
+
+  function count(embedded, stats) {
+    for (const { type, bytes, font } of embedded) {
+      stats.embeddedBytes += bytes;
+      stats.embeddedCount++;
+      if (font) {
+        stats.fontCount++;
+        stats.fontBytes += bytes;
+      }
+      const t = embeddedTypes.get(type) ?? { type, count: 0, bytes: 0 };
+      t.count++;
+      t.bytes += bytes;
+      embeddedTypes.set(type, t);
+    }
+  }
+
+  const perSheet = [];
+  // The list grows while it is read: each @import adds the sheet it imports
+  for (let i = 0; i < sheets.length; i++) {
+    const { sheet, href, source } = sheets[i];
+    let rules = null;
+    let read = "cssom";
+    let fetchedImports = [];
+    try {
+      rules = sheet?.cssRules ?? null;
+    } catch {
+      // A stylesheet of another origin, loaded without CORS
+    }
+    const url = href ?? sheet?.href;
+    if (!rules && url) {
+      const fetched = await fetchSheet(url);
+      if (fetched) {
+        rules = fetched.rules;
+        fetchedImports = fetched.imports;
+        read = "fetched";
+      }
+    }
+    if (!rules) {
+      perSheet.push({ source, read: "unreadable" });
+      continue;
+    }
+    const stats = { source, read, ruleCount: 0, selectorCount: 0, declarationCount: 0, importantCount: 0, emptyRuleCount: 0, embeddedBytes: 0, embeddedCount: 0, fontCount: 0, fontBytes: 0, importCount: 0 };
+    walk(rules, stats, url || location.href);
+    for (const imported of fetchedImports) {
+      stats.importCount++;
+      imports.push({ from: source, href: imported });
+      addUrl(imported);
+    }
+    perSheet.push(stats);
+  }
+
+  // The animations of style attributes, in the document and in open shadow roots
+  const roots = [document, ...[...document.querySelectorAll("*")].map((el) => el.shadowRoot).filter(Boolean)];
+  for (const root of roots) for (const el of root.querySelectorAll("[style]")) noteAnimations(el.style);
+
+  const read = perSheet.filter((s) => s.read !== "unreadable");
+  const unreadable = perSheet.filter((s) => s.read === "unreadable");
+  const sum = (key) => read.reduce((total, s) => total + s[key], 0);
+  // Unique selectors over all selectors; 1 without selectors, since none repeats
+  const selectorUniqueness = () => {
+    const total = [...selectorCounts.values()].reduce((a, b) => a + b, 0);
+    return total ? Math.round((selectorCounts.size / total) * 1000) / 1000 : 1;
+  };
+  const details = {
+    stylesheetCount: perSheet.length,
+    extensionCount,
+    unreadableCount: unreadable.length,
+    fetchedCount: perSheet.filter((s) => s.read === "fetched").length,
+    ruleCount: sum("ruleCount"),
+    selectorCount: sum("selectorCount"),
+    declarationCount: sum("declarationCount"),
+    embeddedBytes: sum("embeddedBytes"),
+    embeddedCount: sum("embeddedCount"),
+    embeddedTypes: [...embeddedTypes.values()].sort((a, b) => b.bytes - a.bytes || a.type.localeCompare(b.type)),
+    importCount: sum("importCount"),
+    emptyRuleCount: sum("emptyRuleCount"),
+    selectorUniqueness: selectorUniqueness(),
+    importantCount: sum("importantCount"),
+    importantPercent: 0,
+    fontFaceCount,
+    keyframesCount,
+    unusedKeyframes: [...keyframesDefined].filter((name) => !animationsUsed.has(name)).sort(),
+    // A loop, not Math.max(...complexities): a spread of hundreds of thousands of values overflows the stack
+    maxSelectorComplexity: complexities.reduce((max, c) => (c > max ? c : max), 0),
+    commonSelectorComplexity: modeOf(complexities),
+    complexSelectors: [...complexityBySelector.entries()]
+      .map(([selectorText, complexity]) => ({ selectorText, complexity }))
+      .sort((a, b) => b.complexity - a.complexity)
+      .slice(0, MAX_COMPLEX_SELECTORS),
+  };
+  details.importantPercent = details.declarationCount ? Math.round((details.importantCount / details.declarationCount) * 1000) / 10 : 0;
+
+  // --- Issues ------------------------------------------------------------------------------------
+
+  const issues = [];
+  for (const s of read.filter((s) => s.fontCount > 0)) {
+    issues.push({
+      code: "embedded-font",
+      severity: "warning",
+      message: `${s.source} embeds ${plural(s.fontCount, "font file")} as ${s.fontCount === 1 ? "a data: URL" : "data: URLs"} (${formatBytes(s.fontBytes)}). An embedded font downloads with the stylesheet, blocks rendering with it and cannot be cached apart from it: serve fonts as WOFF2 files, with font-display`,
+      target: s.source,
+    });
+  }
+  if (details.embeddedBytes > EMBEDDED_P90_BYTES) {
+    issues.push({
+      code: "embedded-content",
+      severity: "warning",
+      message: `The CSS embeds ${formatBytes(details.embeddedBytes)} in ${plural(details.embeddedCount, "data: URL")}, more than 90% of homepages (${formatBytes(EMBEDDED_P90_BYTES)}, The CSS Selection 2026). It downloads and parses with the stylesheet even when it is not shown: serve large images and fonts as files`,
+    });
+  }
+  for (const { from, href } of imports) {
+    issues.push({
+      code: "import",
+      severity: "warning",
+      message: `${from} imports ${href} with @import: the browser only requests it after it downloads and parses ${from}. Link it from the HTML, or bundle it`,
+      target: href,
+    });
+  }
+  if (details.emptyRuleCount > 0) {
+    issues.push({
+      code: "empty-rules",
+      severity: "info",
+      message: `${plural(details.emptyRuleCount, "empty rule")}, with no declarations: bytes to download and selectors to match that style nothing`,
+    });
+  }
+  if (details.selectorCount > 0 && details.selectorUniqueness < MIN_SELECTOR_UNIQUENESS) {
+    const repeated = [...selectorCounts.entries()].filter(([, n]) => n > 1).sort((a, b) => b[1] - a[1]);
+    issues.push({
+      code: "duplicate-selectors",
+      severity: "info",
+      message: `Only ${Math.round(details.selectorUniqueness * 100)}% of the ${details.selectorCount} selectors are unique: the same selectors repeat across rules, which adds CSS to download and match. Some repeat inside @media on purpose; merge the others. Most repeated: ${repeated.slice(0, 3).map(([sel, n]) => `${sel} (${n})`).join(", ")}`,
+    });
+  }
+  if (details.importantPercent > IMPORTANT_P90_PERCENT) {
+    issues.push({
+      code: "important-ratio",
+      severity: "info",
+      message: `${details.importantPercent}% of the declarations use !important, more than on 90% of homepages (${IMPORTANT_P90_PERCENT}%, The CSS Selection 2026): a sign of overrides on overrides, which make the CSS grow`,
+    });
+  }
+  if (fontFaceCount > FONT_FACE_P90) {
+    issues.push({
+      code: "font-face-count",
+      severity: "info",
+      message: `${fontFaceCount} @font-face rules, more than on 90% of homepages (${FONT_FACE_P90}, The CSS Selection 2026). Run Webfont-Usage-Analyzer to see which faces load and which are never used`,
+    });
+  }
+  for (const { selectorText, complexity } of details.complexSelectors.filter((c) => c.complexity > SELECTOR_COMPLEXITY_P90)) {
+    issues.push({
+      code: "selector-complexity",
+      severity: "info",
+      message: `${selectorText} has a complexity of ${complexity}, more than the most complex selector of 90% of homepages (${SELECTOR_COMPLEXITY_P90}, The CSS Selection 2026). Complexity counts the parts of a selector, not its cost: the CSS selector costs insight of the DevTools Performance panel measures how long matching takes`,
+      target: selectorText,
+    });
+  }
+  // A stylesheet that could not be read could use them
+  if (unreadable.length === 0) {
+    for (const name of details.unusedKeyframes) {
+      issues.push({
+        code: "unused-keyframes",
+        severity: "info",
+        message: `@keyframes ${name} is defined, and no animation of the stylesheets or of a style attribute uses it: CSS that never runs, unless JavaScript sets it later`,
+        target: name,
+      });
+    }
+  }
+  if (unreadable.length > 0) {
+    issues.push({
+      code: "unreadable-stylesheets",
+      severity: "info",
+      message: `${plural(unreadable.length, "cross-origin stylesheet")} could not be read, by the page or with fetch (no Access-Control-Allow-Origin), so the counts are a lower bound: ${unreadable.map((s) => s.source).join(", ")}`,
+    });
+  }
+
+  // --- Items, the heaviest sheets first ----------------------------------------------------------
+
+  const items = perSheet
+    .map((s) => (s.read === "unreadable" ? { source: s.source, read: s.read } : { source: s.source, read: s.read, ruleCount: s.ruleCount, embeddedBytes: s.embeddedBytes, importCount: s.importCount, importantCount: s.importantCount }))
+    .sort((a, b) => (b.embeddedBytes ?? -1) - (a.embeddedBytes ?? -1) || (b.ruleCount ?? -1) - (a.ruleCount ?? -1));
+
+  // --- Console -----------------------------------------------------------------------------------
+
+  console.group("%c🎨 CSS Complexity", "font-weight: bold; font-size: 14px;");
+  const readNotes = [details.fetchedCount && `${details.fetchedCount} read with fetch`, unreadable.length && `${unreadable.length} unreadable`].filter(Boolean);
+  console.log(`Stylesheets: ${details.stylesheetCount}${readNotes.length ? ` (${readNotes.join(", ")})` : ""}`);
+  console.log(`Rules: ${details.ruleCount} · Selectors: ${details.selectorCount} · Declarations: ${details.declarationCount}`);
+  console.log(`Embedded content: ${formatBytes(details.embeddedBytes)} in ${plural(details.embeddedCount, "data: URL")}`);
+  console.log(`@import: ${details.importCount} · Empty rules: ${details.emptyRuleCount}`);
+  console.log(`Unique selectors: ${Math.round(details.selectorUniqueness * 100)}% · !important: ${details.importantCount} (${details.importantPercent}%)`);
+  console.log(`Selector complexity: ${details.maxSelectorComplexity} at most, ${details.commonSelectorComplexity} the most common`);
+  console.log(`@font-face: ${fontFaceCount} · @keyframes: ${keyframesCount}${details.unusedKeyframes.length ? ` (unused: ${details.unusedKeyframes.join(", ")})` : ""}`);
+  if (items.length > 0) {
+    console.table(
+      items.map((i) => ({ Source: i.source, Read: i.read, Rules: i.ruleCount ?? "-", Embedded: formatBytes(i.embeddedBytes), "@import": i.importCount ?? "-", "!important": i.importantCount ?? "-" }))
+    );
+  }
+  if (issues.length > 0) issues.forEach((i) => console.log(`[${i.severity}] ${i.message}`));
+  else console.log("%c✅ No issues found", "color: #22c55e; font-weight: bold;");
+  console.groupEnd();
+
+  return {
+    script: SCRIPT,
+    status: "ok",
+    count: perSheet.length,
+    corsLimitedAnalysis: unreadable.length > 0,
+    details,
+    items: items.slice(0, MAX_ITEMS),
+    issues,
+  };
+})();

package/snippets/Loading/WORKFLOWS.md

@@ -198,6 +198,17 @@ Use this decision tree to automatically run follow-up snippets based on results:
 - **If no inline CSS but has blocking stylesheets** → Suggest critical CSS extraction
 - **If CSS > 50KB total** → Run **CSS-Media-Queries-Analysis.js** to find savings
 
+### After CSS-Complexity.js
+
+- **If it ran in the user's browser** (Chrome DevTools MCP connected to their Chrome) → Extensions can inject CSS that the snippet counts: before reporting, check `items` for `<style>` or shadow root sources the page does not have, or measure again in a profile without extensions or with the CLI
+- **If embedded-font** → Recommend serving the font as a WOFF2 file, and run **Webfont-Usage-Analyzer.js** to check its `font-display`
+- **If embedded-content** → Run **Critical-CSS-Detection.js**: embedded bytes in render-blocking CSS delay the first paint
+- **If import** → Recommend linking the imported stylesheet from the HTML or bundling it, and run **Find-render-blocking-resources.js** to see the chain
+- **If font-face-count** → Run **Webfont-Usage-Analyzer.js** to find the faces that never load
+- **If unused-keyframes** → Check that no script sets the animation before suggesting to remove it
+- **If selector-complexity** → Treat it as maintainability: only a trace with CSS selector stats (Performance panel, CSS selector costs insight) shows whether matching it is slow
+- **If corsLimitedAnalysis is true** → Report the counts as a lower bound, and suggest `crossorigin` on the `<link>` with `Access-Control-Allow-Origin` on stylesheets you control
+
 ### After Back-Forward-Cache.js
 
 - **If bfcache blocked** → Provide specific remediation based on blocking reasons

package/snippets/SCHEMA.md

@@ -287,7 +287,7 @@ An interaction that paints nothing has no frame to be measured to, so the browse
 }
 ```
 
-Later interactions that short have no entry of any kind: they only count in `performance.interactionCount`, and INP does not depend on them. `tracking` after a click means that the document recorded no interaction at all, as with a click inside an iframe, which records its own; the CLI and the MCP server replace the `message` to say that a click or key press was sent.
+Later interactions that short have no entry of any kind: they only count in `performance.interactionCount`, and INP does not depend on them. `tracking` after a click means that the document recorded no interaction at all, as with a click inside an iframe, which records its own; the CLI and the MCP server turn that result into `status: "error"`, with an `error` that says a click or key press was sent, so the CLI exits with code `1`.
 
 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.
 
@@ -826,6 +826,49 @@ Issues keep `{ severity, message }`. The fix is the last sentence of the message
 }
 ```
 
+#### CSS-Complexity
+
+Reads the CSSOM of every stylesheet of the page: of the document, adopted, in open shadow roots and imported with `@import`. One item per stylesheet, the most embedded bytes first, with `read: "cssom"`; `read: "fetched"` for a stylesheet of another origin whose rules the page cannot read and `fetch` can, as with `Access-Control-Allow-Origin` and a `<link>` without `crossorigin`, parsed with the same CSSOM, its `@import` rules included; or `read: "unreadable"` and only its `source` when neither works, which sets `corsLimitedAnalysis: true`. `source` is the URL of the sheet, or a label such as `<style> #1` or `adopted stylesheet #1`. A stylesheet a browser extension links to the page (`chrome-extension:`, `moz-extension:`, `safari-web-extension:`) is left out and counted in `details.extensionCount`; the `<style>` elements and shadow roots an extension injects cannot be told apart from those of the page, so in a browser with extensions, as with Chrome DevTools MCP connected to the user's Chrome, the counts can include them.
+
+`details` counts what the CSSOM keeps of the CSS as written, as [css-analyzer](https://github.com/projectwallace/css-analyzer) counts its text: rules (style rules, nested and inside at-rules), selectors (each one of a list), declarations (also those of `@font-face` and `@keyframes`), embedded content (`data:` URLs, in characters, and by MIME type), `@import` rules, empty rules, `!important` declarations, `@font-face` and `@keyframes` rules. `selectorUniqueness` is unique selectors over all selectors, without their context, so a selector repeated in two `@media` counts as repeated (1 without selectors). `unusedKeyframes` lists the `@keyframes` that no `animation` or `animation-name` of the stylesheets or of a `style` attribute names. `maxSelectorComplexity` and `commonSelectorComplexity` (the mode, or the mean of the tied values) give the complexity of the selectors as css-analyzer computes it, and `complexSelectors` the 5 most complex, as `{ selectorText, complexity }`: `selectorText` is the selector of a rule, not of an element of the page. The CSSOM drops comments, hacks, invalid declarations and rules with unsupported selectors, and writes a few shorthands as longhands, so these counts can differ slightly from those of the text.
+
+```json
+{
+  "script": "CSS-Complexity",
+  "status": "ok",
+  "count": 2,
+  "corsLimitedAnalysis": false,
+  "details": {
+    "stylesheetCount": 2,
+    "extensionCount": 0,
+    "unreadableCount": 0,
+    "fetchedCount": 1,
+    "ruleCount": 812,
+    "selectorCount": 1104,
+    "declarationCount": 2210,
+    "embeddedBytes": 41210,
+    "embeddedCount": 12,
+    "embeddedTypes": [{ "type": "font/woff2", "count": 2, "bytes": 38090 }, { "type": "image/svg+xml", "count": 10, "bytes": 3120 }],
+    "importCount": 1,
+    "emptyRuleCount": 14,
+    "selectorUniqueness": 0.81,
+    "importantCount": 51,
+    "importantPercent": 2.3,
+    "fontFaceCount": 8,
+    "keyframesCount": 9,
+    "unusedKeyframes": ["spin-old"],
+    "maxSelectorComplexity": 18,
+    "commonSelectorComplexity": 1,
+    "complexSelectors": [{ "selectorText": ".nav > ul li:not(.active) a[href^=\"http\"]", "complexity": 11 }]
+  },
+  "items": [
+    { "source": "https://example.com/app.css", "read": "cssom", "ruleCount": 790, "embeddedBytes": 41210, "importCount": 1, "importantCount": 48 },
+    { "source": "https://cdn.example.com/vendor.css", "read": "fetched", "ruleCount": 22, "embeddedBytes": 0, "importCount": 0, "importantCount": 3 }
+  ],
+  "issues": [{ "code": "import", "severity": "warning", "message": "https://example.com/app.css imports https://cdn.example.com/vendor.css with @import: ...", "target": "https://cdn.example.com/vendor.css" }]
+}
+```
+
 #### CSS-Media-Queries-Analysis
 
 One item per distinct media query that targets viewports wider than `details.minWidth`, largest first. `details` gives the totals, `totalUnique` and `uniquenessRatio`, and `bySource` breaks the rules down by stylesheet.
@@ -1265,6 +1308,21 @@ An issue about one thing among several, one issue per thing, also names it in `t
 | `could-defer` | info | Blocking scripts other than the last three of `<body>`, which could try `defer` |
 | `unknown-size` | info | Scripts whose size is hidden by a missing `Timing-Allow-Origin`, so the total is a lower bound |
 
+### CSS-Complexity
+
+| Code | Severity | When |
+|------|----------|------|
+| `embedded-font` | warning | A stylesheet embeds a font as a `data:` URL; `target` is the stylesheet |
+| `embedded-content` | warning | The `data:` URLs of all the CSS add up to more than 36.6 kB, the 90th percentile of homepages in The CSS Selection 2026 |
+| `import` | warning | An `@import` rule, one issue per rule; `target` is the URL it imports |
+| `empty-rules` | info | One or more style rules without declarations |
+| `duplicate-selectors` | info | Fewer than 66% of the selectors are unique, the threshold of css-code-quality |
+| `important-ratio` | info | More than 13% of the declarations use `!important`, the 90th percentile of homepages |
+| `font-face-count` | info | More than 48 `@font-face` rules, the 90th percentile of homepages |
+| `unused-keyframes` | info | A `@keyframes` that no animation of the stylesheets or of a `style` attribute uses, only when every stylesheet could be read; `target` is its name |
+| `selector-complexity` | info | A selector among the 5 most complex with a complexity above 29, the 90th percentile of the most complex selector of homepages; `target` is the selector of the rule |
+| `unreadable-stylesheets` | info | Cross-origin stylesheets whose rules the page cannot read and `fetch` cannot either |
+
 ### CSS-Media-Queries-Analysis
 
 | Code | Severity | When |

package/src/bin.js

@@ -40,7 +40,7 @@ Options:
   --workflow <name>     Workflow to run (default: core-web-vitals)
                         Workflows: core-web-vitals, audit, loading, interaction
   --snippet <name>      Run a single snippet by name, alias or Category/Name path
-                        Any of the 56 snippets, such as Compression-Audit
+                        Any of the 57 snippets, such as Compression-Audit
                         Aliases: LCP, CLS, INP, LCP-Subparts, fonts,
                                  render-blocking, resource-hints, preload-scripts,
                                  priority-hints, critical-css, ttfb,
@@ -71,7 +71,8 @@ Options:
   --matrix <file>           Measure every URL of a JSON file on every device and in every
                             variant it lists, and report a table of the medians
   --median-by <metric>      Metric that picks the median run: LCP, FCP, TTFB, CLS, INP,
-                            navMs (default: the first of LCP, FCP, TTFB, navMs measured)
+                            navMs (default: the first of LCP, FCP, TTFB, INP, navMs
+                            measured)
   --baseline <file>         Compare the page, or each combination of a matrix, with the --json
                             output of an earlier run: which metrics got worse or better beyond
                             the noise, and which errors are new or fixed. It only informs,
@@ -313,8 +314,8 @@ async function main() {
   // What the JSON records of how each page was measured, for a later run to compare with. The machine is
   // measured once, before Chromium starts, so its processes do not slow the benchmark down.
   const machine = machineOf();
-  const conditionsFor = (viewport) =>
-    measurementConditions({ viewport, waitMs, machine, ...(items ? { snippet: items[0].path } : { workflow: values.workflow ?? "core-web-vitals" }) });
+  const conditionsFor = ({ viewport, cpu, network }) =>
+    measurementConditions({ viewport, waitMs, cpu, network, machine, ...(items ? { snippet: items[0].path } : { workflow: values.workflow ?? "core-web-vitals" }) });
 
   if (matrixPath) {
     let matrix;
@@ -336,7 +337,7 @@ async function main() {
     if (!median.payload) throw new Error(`Every run failed: ${median.errors.join("; ")}`);
     payload = { ...median.payload, runs: median.runs };
   }
-  payload.conditions = conditionsFor(viewportName);
+  payload.conditions = conditionsFor({ viewport: viewportName, cpu, network });
 
   if (cruxKey) payload.crux = await fieldDataOf(url, formFactorFor(viewportName));
 
@@ -422,8 +423,8 @@ async function runMatrix(matrixPath, matrix, measureWith, { values, waitMs, repo
     const identity = { id: c.id, name: c.name, device: c.device, ...(c.variant ? { variant: c.variant } : {}), url: c.url };
     combinations.push(
       median.payload
-        ? { ...identity, ...median.payload, runs: median.runs, conditions: conditionsFor(c.viewport) }
-        : { ...identity, status: "error", error: `Every run failed: ${median.errors.join("; ")}`, runs: { count: matrix.runs, failed: matrix.runs }, conditions: conditionsFor(c.viewport) }
+        ? { ...identity, ...median.payload, runs: median.runs, conditions: conditionsFor(c) }
+        : { ...identity, status: "error", error: `Every run failed: ${median.errors.join("; ")}`, runs: { count: matrix.runs, failed: matrix.runs }, conditions: conditionsFor(c) }
     );
   }
 

package/src/conditions.js

@@ -1,7 +1,17 @@
 import { cliVersion } from "./report-to.js";
 
 // How a measurement was taken, kept in its JSON so that a later run compared with it can tell whether
-// both were measured the same way. A snippet is named by its path, so an alias and its path match.
-export function measurementConditions({ viewport, workflow, snippet, waitMs, machine }) {
-  return { viewport, ...(snippet ? { snippet } : { workflow }), waitMs, cliVersion, ...(machine ? { machine } : {}) };
+// both were measured the same way. A snippet is named by its path, so an alias and its path match. The
+// CPU factor and the network go in only when the run was throttled, so a run without throttling keeps
+// the conditions of earlier versions.
+export function measurementConditions({ viewport, workflow, snippet, waitMs, cpu, network, machine }) {
+  return {
+    viewport,
+    ...(snippet ? { snippet } : { workflow }),
+    waitMs,
+    ...(cpu != null ? { cpu } : {}),
+    ...(network != null ? { network } : {}),
+    cliVersion,
+    ...(machine ? { machine } : {}),
+  };
 }

package/src/mcp/next-steps.js

@@ -1,29 +1,49 @@
 import { RULES, nextSteps } from "../decision-tree.js";
 import { loadSnippet } from "../load-snippet.js";
 import { isTrackingSnippet } from "../tracking.js";
+import { throttlingOf } from "../throttling.js";
 
 const isTrackingPath = (path) => isTrackingSnippet(path, loadSnippet(path));
 
 // The call of the tool that runs a snippet: a tracking snippet needs a page the agent interacts with. A
-// snippet waits as long as the run that called for it, so it reads the same paint.
-const callFor = ({ path, reason, url, viewport, waitMs, isTracking }) =>
+// snippet waits as long as the run that called for it, so it reads the same paint, and loads under its
+// throttling, so it measures the same page.
+const callFor = ({ path, reason, url, viewport, waitMs, cpu, network, isTracking }) =>
   isTracking(path)
-    ? { tool: "open_page", args: { url, track: [path], viewport }, reason }
-    : { tool: "run_snippet", args: { url, snippet: path, viewport, ...(waitMs !== undefined ? { waitMs } : {}) }, reason };
+    ? { tool: "open_page", args: { url, track: [path], viewport, ...throttlingOf({ cpu, network }) }, reason }
+    : { tool: "run_snippet", args: { url, snippet: path, viewport, ...(waitMs !== undefined ? { waitMs } : {}), ...throttlingOf({ cpu, network }) }, reason };
 
 // The follow-ups the decision tree of the CLI asks for, as the calls an agent makes next. The rules name
 // the steps of a workflow (LCP, CLS, TTFB, FCP), which are the scripts of the snippets, so a result of
 // run_snippet, whose id is Category/Name, is matched by its script. `ran` leaves out what already ran.
-export function followUpCalls({ results, url, viewport, waitMs, ran = [], rules = RULES, isTracking = isTrackingPath }) {
+export function followUpCalls({ results, url, viewport, waitMs, cpu, network, ran = [], rules = RULES, isTracking = isTrackingPath }) {
   const named = results.map((r) => ({ ...r, id: r.script ?? r.id }));
-  return nextSteps(named, rules, ran).map(({ path, reason }) => callFor({ path, reason, url, viewport, waitMs, isTracking }));
+  return nextSteps(named, rules, ran).map(({ path, reason }) => callFor({ path, reason, url, viewport, waitMs, cpu, network, isTracking }));
 }
 
 // The steps a workflow skipped because they measure clicks and key presses, in one page to open
-export function trackingCall({ paths, url, viewport }) {
+export function trackingCall({ paths, url, viewport, cpu, network }) {
   return {
     tool: "open_page",
-    args: { url, track: paths, viewport },
+    args: { url, track: paths, viewport, ...throttlingOf({ cpu, network }) },
     reason: "These steps measure clicks and key presses: open the page with them, interact with it and read them with read_results",
   };
 }
+
+// A click the agent completes: only the agent can choose the element of the page to click
+const CLICK_TO_COMPLETE = { action: "click", selector: "<selector of the element to click>" };
+
+// The steps a workflow skipped because they measure clicks and key presses. First the workflow again
+// with interactions, which measures them in one call, with the runs and the baseline of a page load; then
+// a page to open with them, for an agent that explores the page step by step.
+export function inputStepsCalls({ workflow, paths, url, viewport, waitMs, cpu, network }) {
+  return [
+    {
+      tool: "run_workflow",
+      args: { url, workflow, viewport, ...(waitMs !== undefined ? { waitMs } : {}), ...throttlingOf({ cpu, network }), interactions: [CLICK_TO_COMPLETE] },
+      reason:
+        "These steps measure clicks and key presses: run the workflow again with interactions, a click or type step on an element of the page in place of this selector; runs and baseline work with them",
+    },
+    trackingCall({ paths, url, viewport, cpu, network }),
+  ];
+}

package/src/mcp/server.js

@@ -15,12 +15,13 @@ import { launchChromium, isMissingBrowser, MISSING_BROWSER } from "../browser.js
 import { registerResources } from "./documents.js";
 import { registerPrompts } from "./prompts.js";
 import { shapeResults, createRuns, RunError } from "./summary.js";
-import { followUpCalls, trackingCall } from "./next-steps.js";
+import { followUpCalls, inputStepsCalls } from "./next-steps.js";
 import { isHttpUrl } from "../url.js";
 import { machineOf } from "../machine.js";
 import { measurementConditions } from "../conditions.js";
 import { prepareBaseline, compareWithBaseline } from "./baseline.js";
 import { MAX_RUNS, measureRuns } from "../runs.js";
+import { MIN_CPU_FACTOR, NETWORK_PRESETS, applyThrottling, throttlingOf } from "../throttling.js";
 
 const VIEWPORTS = Object.keys(VIEWPORT_PRESETS);
 const STAGES = 3;
@@ -72,7 +73,27 @@ const Runs = z
     "Measure the page this many times, one after the other, as --runs of the CLI: the answer is the median run, plus runs with the median, min, max and agreement of each metric. With baseline, 5 or more on both sides give the statistical verdict: use 5 for a comparison, and more only when agreement says noisy. Each run is a full page load and wait, so it takes that much longer"
   );
 
+// The throttling of --cpu and --network, applied to the page before it loads. Without them the page runs
+// at the speed of the machine, as the CLI does. A network of the tools is a preset: its own values are
+// for --matrix.
+const Cpu = z
+  .number()
+  .min(MIN_CPU_FACTOR)
+  .optional()
+  .describe(
+    "Slow the CPU of the page down by this factor, as --cpu of the CLI. Leave it out unless the user asks for throttling or the baseline was throttled: compared with a baseline, use the cpu it was measured with (no throttling by default)"
+  );
+const Network = z
+  .enum(Object.keys(NETWORK_PRESETS))
+  .optional()
+  .describe(
+    "Throttle the network as DevTools does, as --network of the CLI. Leave it out unless the user asks for throttling or the baseline was throttled: compared with a baseline, use the network it was measured with (no throttling by default)"
+  );
+
 const LooseObject = (shape) => z.looseObject(shape).meta({ additionalProperties: true });
+const Throttling = LooseObject({})
+  .optional()
+  .describe("With cpu or network, the throttling the page ran under, as the throttling field of the JSON of the CLI");
 const RunsSummary = LooseObject({
   count: z.number(),
   failed: z.number().describe("Runs left out because they failed"),
@@ -117,6 +138,7 @@ const DETAIL_NOTE =
   "Large results come as summaries with a runId for get_details; nextSteps, when present, is the call to make next.";
 const BASELINE_NOTE = "With baseline, it also compares the run with an earlier one, as --baseline of the CLI, and says what regressed.";
 const QUEUE_NOTE = "Measurements run one at a time, so several in one turn save no time.";
+const THROTTLING_NOTE = "cpu and network throttle the page as --cpu and --network of the CLI, and the answer says so in throttling.";
 
 // A page can put instructions for the agent in what a snippet returns: an alt text, a class in a
 // selector, the URL of a script. The tools that return what a page holds say how to read it, and so
@@ -133,6 +155,16 @@ const Step = z.discriminatedUnion("action", [
   z.object({ action: z.literal("wait"), ms: z.number().int().min(0).max(10000) }),
 ]);
 
+// The steps of interact, run after the load of each run, as --interact-script of the CLI
+const Interactions = z
+  .array(Step)
+  .min(1)
+  .max(50)
+  .optional()
+  .describe(
+    "Steps to run on the page after the load, as --interact-script of the CLI: click, type, hover, scroll or wait, as in interact. A click or a key press is what INP, Interactions and Input-Latency-Breakdown measure. Each run repeats them, so runs and baseline work with them"
+  );
+
 const SnippetInfo = z.object({
   name: z.string().describe("Category/Name, the name other tools take"),
   category: z.enum(CATEGORIES),
@@ -341,12 +373,15 @@ export function createServer({ launchBrowser = () => launchChromium(), maxPages,
     {
       title: "Run a snippet",
       description:
-        `Opens the URL in a headless Chromium, runs one web performance snippet on the loaded page and returns the object the snippet returns, as defined in snippets/SCHEMA.md. Use list_snippets for the names. The snippets that record interactions (INP, Interactions, Input-Latency-Breakdown) run on a page opened with open_page instead. ${QUEUE_NOTE} ${BASELINE_NOTE} ${DETAIL_NOTE} ${PAGE_DATA}`,
+        `Opens the URL in a headless Chromium, runs one web performance snippet on the loaded page and returns the object the snippet returns, as defined in snippets/SCHEMA.md. Use list_snippets for the names. The snippets that record interactions (INP, Interactions, Input-Latency-Breakdown) need interactions with a click or a key press, which run after the load of each run; open_page explores a page step by step instead. ${THROTTLING_NOTE} ${QUEUE_NOTE} ${BASELINE_NOTE} ${DETAIL_NOTE} ${PAGE_DATA}`,
       inputSchema: z.object({
         url: HttpUrl,
         snippet: z.string().describe("The snippet: its name (LCP-Subparts), an alias (render-blocking) or Category/Name"),
         viewport: z.enum(VIEWPORTS).default("mobile").describe("Device size of the page"),
         waitMs: z.number().int().min(0).max(10000).default(3000).describe("Wait after the load event before running the snippet, in ms"),
+        cpu: Cpu,
+        network: Network,
+        interactions: Interactions,
         runs: Runs,
         detail: Detail,
         baseline: Baseline,
@@ -360,6 +395,7 @@ export function createServer({ launchBrowser = () => launchChromium(), maxPages,
         viewport: z.enum(VIEWPORTS),
         navMs: z.number().describe("From the start of the navigation to the end of the wait"),
         pageErrors: z.array(z.string()).describe("Uncaught errors of the page during the run"),
+        throttling: Throttling,
         result: SnippetResult,
         runs: RunsSummary,
         baseline: Comparison,
@@ -367,7 +403,7 @@ export function createServer({ launchBrowser = () => launchChromium(), maxPages,
       }),
       annotations: { readOnlyHint: true, openWorldHint: true },
     },
-    async ({ url, snippet, viewport, waitMs, runs: count, detail, baseline, thresholds }, ctx) => {
+    async ({ url, snippet, viewport, waitMs, cpu, network, interactions, runs: count, detail, baseline, thresholds }, ctx) => {
       let path;
       try {
         path = resolveSnippetName(snippet);
@@ -375,8 +411,11 @@ export function createServer({ launchBrowser = () => launchChromium(), maxPages,
         return toolError(err.message);
       }
       const source = loadSnippet(path);
-      if (isTrackingSnippet(path, source)) {
-        return toolError(`${path} records interactions: open the page with open_page and this snippet in track, use it with interact, and read it with read_results.`);
+      // With interactions, the runner installs it before the steps and reads it after them
+      if (isTrackingSnippet(path, source) && !interactions) {
+        return toolError(
+          `${path} records interactions: run it with interactions that click or type on an element of the page, which run after the load, or open the page with open_page and this snippet in track, use it with interact, and read it with read_results.`
+        );
       }
       let base;
       try {
@@ -387,15 +426,15 @@ export function createServer({ launchBrowser = () => launchChromium(), maxPages,
 
       try {
         const { conditions, run } = await measureInTurn(
-          { viewport, snippet: path, waitMs },
-          (onProgress, signal) => runSnippets({ url, items: [{ id: path, path, source }], waitMs, viewport: VIEWPORT_PRESETS[viewport], onProgress, signal }),
+          { viewport, snippet: path, waitMs, cpu, network },
+          (onProgress, signal) => runSnippets({ url, items: [{ id: path, path, source }], waitMs, viewport: VIEWPORT_PRESETS[viewport], cpu, network, interactions, onProgress, signal }),
           count,
           ctx
         );
         const shaped = shapeResults(run.results.map(({ id, ...result }) => result), detail);
         const { runId, current } = keepPage(run, run.results, conditions);
         const id = run.results[0].id;
-        const nextSteps = followUpCalls({ results: run.results, url, viewport, waitMs, ran: [path] });
+        const nextSteps = followUpCalls({ results: run.results, url, viewport, waitMs, cpu, network, ran: [path] });
         return toolResult({
           url,
           runId,
@@ -404,6 +443,7 @@ export function createServer({ launchBrowser = () => launchChromium(), maxPages,
           viewport,
           navMs: run.navMs,
           pageErrors: run.pageErrors,
+          ...(run.throttling ? { throttling: run.throttling } : {}),
           result: shaped.results[0],
           ...(run.runs ? { runs: run.runs } : {}),
           ...(base ? { baseline: compareWithBaseline(base, current) } : {}),
@@ -422,12 +462,15 @@ export function createServer({ launchBrowser = () => launchChromium(), maxPages,
     {
       title: "Run a workflow",
       description:
-        `Opens the URL in a headless Chromium and runs a workflow: a sequence of snippets plus the follow-ups its decision tree adds from the results (for example LCP-Subparts when LCP is over 2.5 s, with the reason). core-web-vitals: LCP and CLS. audit: render-blocking resources, resource hints, critical CSS, TTFB, scripts, images and more. loading: TTFB, FCP, render-blocking, scripts and fonts. interaction: long tasks, animation frames, scroll and layout shifts while it scrolls the page. ${QUEUE_NOTE} ${BASELINE_NOTE} ${DETAIL_NOTE} ${PAGE_DATA}`,
+        `Opens the URL in a headless Chromium and runs a workflow: a sequence of snippets plus the follow-ups its decision tree adds from the results (for example LCP-Subparts when LCP is over 2.5 s, with the reason). core-web-vitals: LCP and CLS. audit: render-blocking resources, resource hints, critical CSS, TTFB, scripts, images and more. loading: TTFB, FCP, render-blocking, scripts and fonts. interaction: long tasks, animation frames, scroll and layout shifts while it scrolls the page, or while it runs interactions, which with a click or a key press also measure INP, Interactions and Input-Latency-Breakdown. ${THROTTLING_NOTE} ${QUEUE_NOTE} ${BASELINE_NOTE} ${DETAIL_NOTE} ${PAGE_DATA}`,
       inputSchema: z.object({
         url: HttpUrl,
         workflow: z.enum(Object.keys(WORKFLOWS)).default("core-web-vitals"),
         viewport: z.enum(VIEWPORTS).default("mobile").describe("Device size of the page"),
         waitMs: z.number().int().min(0).max(10000).default(3000).describe("Wait after the load event before running the workflow, in ms"),
+        cpu: Cpu,
+        network: Network,
+        interactions: Interactions,
         runs: Runs,
         detail: Detail,
         baseline: Baseline,
@@ -441,6 +484,7 @@ export function createServer({ launchBrowser = () => launchChromium(), maxPages,
         viewport: z.enum(VIEWPORTS),
         navMs: z.number(),
         pageErrors: z.array(z.string()),
+        throttling: Throttling,
         results: z
           .array(z.looseObject({ id: z.string(), status: z.string() }).meta({ additionalProperties: true }))
           .describe("One object per step, in order, then the follow-ups, each with the reason it was added"),
@@ -450,7 +494,7 @@ export function createServer({ launchBrowser = () => launchChromium(), maxPages,
       }),
       annotations: { readOnlyHint: true, openWorldHint: true },
     },
-    async ({ url, workflow, viewport, waitMs, runs: count, detail, baseline, thresholds }, ctx) => {
+    async ({ url, workflow, viewport, waitMs, cpu, network, interactions, runs: count, detail, baseline, thresholds }, ctx) => {
       let base;
       try {
         base = baselineFor({ baseline, thresholds });
@@ -459,15 +503,19 @@ export function createServer({ launchBrowser = () => launchChromium(), maxPages,
       }
       try {
         const { conditions, run } = await measureInTurn(
-          { viewport, workflow, waitMs },
-          (onProgress, signal) => runMeasurement({ url, workflow: WORKFLOWS[workflow], rules: RULES, waitMs, viewport: VIEWPORT_PRESETS[viewport], onProgress, signal }),
+          { viewport, workflow, waitMs, cpu, network },
+          (onProgress, signal) => runMeasurement({ url, workflow: WORKFLOWS[workflow], rules: RULES, waitMs, viewport: VIEWPORT_PRESETS[viewport], cpu, network, interactions, onProgress, signal }),
           count,
           ctx
         );
         // The runner explains a skipped step with the flag of the CLI; here the tools are what the model has
         const results = run.results.map((r) =>
           r.status === "skipped"
-            ? { ...r, reason: "This step measures clicks and key presses: open the page with open_page and this snippet in track, use it with interact, and read it with read_results." }
+            ? {
+                ...r,
+                reason:
+                  "This step measures clicks and key presses: run the workflow with interactions that click or type on an element of the page, or open the page with open_page and this snippet in track, use it with interact, and read it with read_results.",
+              }
             : r
         );
         const shaped = shapeResults(results, detail);
@@ -477,7 +525,7 @@ export function createServer({ launchBrowser = () => launchChromium(), maxPages,
           .filter((r) => r.status === "skipped")
           .map((r) => WORKFLOWS[workflow].steps.find((s) => s.id === r.id)?.path)
           .filter(Boolean);
-        const nextSteps = skipped.length ? [trackingCall({ paths: skipped, url, viewport })] : [];
+        const nextSteps = skipped.length ? inputStepsCalls({ workflow, paths: skipped, url, viewport, waitMs, cpu, network }) : [];
         return toolResult({
           url,
           runId,
@@ -486,6 +534,7 @@ export function createServer({ launchBrowser = () => launchChromium(), maxPages,
           viewport,
           navMs: run.navMs,
           pageErrors: run.pageErrors,
+          ...(run.throttling ? { throttling: run.throttling } : {}),
           ...(run.runs ? { runs: run.runs } : {}),
           ...(base ? { baseline: compareWithBaseline(base, current) } : {}),
           ...(nextSteps.length ? { nextSteps } : {}),
@@ -558,23 +607,26 @@ export function createServer({ launchBrowser = () => launchChromium(), maxPages,
     {
       title: "Open a page",
       description:
-        `Opens the URL in a headless Chromium that stays open between calls, and installs the snippets that record interactions (INP, Interactions, Input-Latency-Breakdown, and the other tracking snippets in list_snippets). Returns a sessionId for interact, read_results and close_page. At most 3 pages are open at a time, and a page closes after 10 minutes without use. ${PAGE_DATA}`,
+        `Opens the URL in a headless Chromium that stays open between calls, and installs the snippets that record interactions (INP, Interactions, Input-Latency-Breakdown, and the other tracking snippets in list_snippets). Returns a sessionId for interact, read_results and close_page. ${THROTTLING_NOTE} The throttling stays for the interactions on the page. At most 3 pages are open at a time, and a page closes after 10 minutes without use. ${PAGE_DATA}`,
       inputSchema: z.object({
         url: HttpUrl,
         track: z.array(z.string()).min(1).describe("The tracking snippets to install, by name, alias or Category/Name"),
         viewport: z.enum(VIEWPORTS).default("mobile").describe("Device size of the page"),
         waitMs: z.number().int().min(0).max(10000).default(1000).describe("Wait after the load event before installing the snippets, in ms"),
+        cpu: Cpu,
+        network: Network,
       }),
       outputSchema: z.object({
         sessionId: z.string(),
         url: z.string(),
         viewport: z.enum(VIEWPORTS),
         navMs: z.number(),
+        throttling: Throttling,
         tracking: z.array(z.object({ snippet: z.string(), status: z.string() })).describe("The installed snippets"),
       }),
       annotations: { readOnlyHint: true, openWorldHint: true },
     },
-    withSession(async ({ url, track, viewport, waitMs }, ctx) => {
+    withSession(async ({ url, track, viewport, waitMs, cpu, network }, ctx) => {
       const items = [];
       for (const name of track) {
         let path;
@@ -600,6 +652,8 @@ export function createServer({ launchBrowser = () => launchChromium(), maxPages,
           throw err;
         }
         try {
+          // Before the load, as the runner applies it: the load and every interaction run throttled
+          await applyThrottling(session.context, session.page, { cpu, network });
           const navStart = Date.now();
           await session.page.goto(url, { waitUntil: "load", timeout: NAV_TIMEOUT_MS });
           if (waitMs > 0) await session.page.waitForTimeout(waitMs);
@@ -609,7 +663,8 @@ export function createServer({ launchBrowser = () => launchChromium(), maxPages,
           if (limit.aborted) return toolError(`Opening the page failed: ${stoppedAnswering(callLimitMs)}`);
           session.stopListening();
           const tracking = session.tracking.map(({ id, status }) => ({ snippet: id, status }));
-          return toolResult({ sessionId: session.id, url, viewport, navMs, tracking });
+          const throttling = throttlingOf({ cpu, network });
+          return toolResult({ sessionId: session.id, url, viewport, navMs, ...(throttling ? { throttling } : {}), tracking });
         } catch (err) {
           await sessions.close(session.id);
           if (limit.aborted) return toolError(`Opening the page failed: ${stoppedAnswering(callLimitMs)}`);
@@ -664,7 +719,7 @@ export function createServer({ launchBrowser = () => launchChromium(), maxPages,
     {
       title: "Read the tracking snippets",
       description:
-        `Returns what the tracking snippets installed by open_page have recorded on the page so far, as the objects they return. A snippet with nothing recorded yet, such as INP before any interaction, answers with status tracking and a message: interact with the page and read again. ${DETAIL_NOTE} ${PAGE_DATA}`,
+        `Returns what the tracking snippets installed by open_page have recorded on the page so far, as the objects they return. A snippet with nothing recorded yet, such as INP before any interaction, answers with status tracking and a message: interact with the page and read again. After a click or key press that the document did not record, as one inside an iframe, it is an error that says so: interact with an element of the page and read again. ${DETAIL_NOTE} ${PAGE_DATA}`,
       inputSchema: z.object({ sessionId: SessionId, detail: Detail }),
       outputSchema: z.object({ sessionId: z.string(), runId: SummaryRunId, detail: DetailOut, pageErrors: z.array(z.string()), results: z.array(SnippetResult) }),
       annotations: { readOnlyHint: true, openWorldHint: false },

package/src/runner.js

@@ -22,8 +22,9 @@ const LATE_ENTRIES_MS = 2000;
 const POLL_MS = 100;
 
 // A snippet still tracking after that wait has seen no interaction at all, and the browser agrees: a
-// click that paints nothing is recorded too. The message of the snippet (click on the page, then call
-// the function again) would ask for what the run has just done.
+// click that paints nothing is recorded too. The measurement failed, so the result is an error, which
+// exits with 1, instead of the message of the snippet (click on the page, then call the function
+// again), which would ask for what the run has just done.
 const NOTHING_RECORDED =
   "A click or key press was sent, and this document recorded no interaction. Check that it reaches an element of this document: an interaction inside an iframe is recorded by the iframe.";
 
@@ -90,8 +91,10 @@ export async function collectTrackingData(page, result, hasInput) {
       data = await read();
     }
     if (data && typeof data === "object") {
-      const sentAndMissed = hasInput && data.status === "tracking";
-      return { id: result.id, ...data, ...(sentAndMissed && { message: NOTHING_RECORDED }) };
+      if (hasInput && data.status === "tracking") {
+        return { id: result.id, script: data.script, status: "error", error: NOTHING_RECORDED };
+      }
+      return { id: result.id, ...data };
     }
     return { id: result.id, status: "error", error: `${result.getDataFn}() did not return an object` };
   } catch (err) {

package/src/runs.js

@@ -13,7 +13,7 @@ export const MAX_RUNS = 9;
 export const MEDIAN_METRICS = ["LCP", "FCP", "TTFB", "CLS", "INP", "navMs"];
 
 // Without --median-by, the median follows the first of these that the runs measured
-const DEFAULT_ORDER = ["LCP", "FCP", "TTFB", "navMs"];
+const DEFAULT_ORDER = ["LCP", "FCP", "TTFB", "INP", "navMs"];
 
 const SUMMARY_METRICS = MEDIAN_METRICS.filter((metric) => metric !== "navMs");
 

package/src/throttling.js

@@ -10,10 +10,13 @@ export const NETWORK_PRESETS = {
   "3g": { title: "3G", download: (500 * 1000) / 8 * 0.8, upload: (500 * 1000) / 8 * 0.8, latency: 400 * 5 },
 };
 
+// The smallest CPU factor, no slowdown, for --cpu and the cpu of the tools of the MCP server
+export const MIN_CPU_FACTOR = 1;
+
 // The factor given to --cpu, or null when it is not a number of at least 1
 export function parseCpuFactor(raw) {
   const factor = Number(raw);
-  return raw.trim() !== "" && Number.isFinite(factor) && factor >= 1 ? factor : null;
+  return raw.trim() !== "" && Number.isFinite(factor) && factor >= MIN_CPU_FACTOR ? factor : null;
 }
 
 const NETWORK_VALUES = ["downloadKbps", "uploadKbps", "latencyMs"];