webperf-snippets 0.3.0 → 0.4.0

package/README.md

@@ -5,7 +5,7 @@ Run curated [WebPerf Snippets](https://webperf-snippets.nucliweb.net) headlessly
 <img width="1820" height="1442" alt="webperf-snippets-CLI" src="https://github.com/user-attachments/assets/af7e6b02-8877-407e-87a4-db063468b5fb" />
 
 
-> **Status:** v0.2. Core Web Vitals, loading audit, and structural checks. See [Roadmap](#roadmap) for what's next.
+> **Status:** v0.4. Core Web Vitals, loading, interaction and structural audit workflows, and every snippet of the collection by name. See the [Roadmap](#roadmap).
 
 ## Why
 
@@ -38,13 +38,13 @@ Run the default Core Web Vitals workflow (LCP + CLS, plus LCP-Subparts if LCP >
 npx webperf-snippets https://web.dev
 ```
 
-Loading audit (TTFB, FCP, render-blocking, scripts, fonts):
+Loading audit (11 steps: TTFB, FCP, render-blocking, scripts, resource timings, third-party impact, fonts, cache; the list is in the [CLI page](https://webperf-snippets.nucliweb.net/CLI)):
 
 ```bash
 npx webperf-snippets https://web.dev --workflow loading
 ```
 
-Structural checks for CI (render-blocking, fonts, priority hints, resource hints):
+Structural checks for CI (22 checks: render-blocking, compression, fonts, images, hints, DOM size and more; the list is in the [CLI page](https://webperf-snippets.nucliweb.net/CLI)):
 
 ```bash
 npx webperf-snippets https://web.dev --workflow audit
@@ -72,6 +72,15 @@ Synthetic INP measurement with an interaction script:
 
 ```bash
 npx webperf-snippets https://web.dev --snippet INP --interact-script interactions.json
+npx webperf-snippets https://web.dev --snippet Interaction/Interactions --interact-script interactions.json
+```
+
+The Interaction snippets (`Interactions`, `Input-Latency-Breakdown`, `LongTask`, `Forced-Synchronous-Layout`...) are installed before the first step and read after the last one, so their result holds what the steps caused.
+
+Interaction audit (long tasks, long animation frames, scroll, layout shifts, forced layouts, interaction latency). It scrolls the page, or runs your `--interact-script`; the steps that need a click are skipped when the script has none:
+
+```bash
+npx webperf-snippets https://web.dev --workflow interaction
 ```
 
 Pages behind a login, with a Playwright storage state (cookies and localStorage):
@@ -123,7 +132,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": "0.3.0" }
+  "meta": { "viewport": "mobile", "waitMs": 3000, "cli_version": "0.4.0" }
 }
 ```
 
@@ -143,13 +152,13 @@ npx webperf-snippets https://web.dev --budget-lcp 2500 --budget-cls 0.1
 
 | Option                       | Description                                                            |
 | ---------------------------- | ---------------------------------------------------------------------- |
-| `--workflow <name>`          | Workflow to run. Default: `core-web-vitals`. Options: `core-web-vitals`, `loading`, `audit`. |
-| `--snippet <name>`           | Run a single snippet by alias or `Category/Name` path.                 |
+| `--workflow <name>`          | Workflow to run. Default: `core-web-vitals`. Options: `core-web-vitals`, `loading`, `audit`, `interaction`. |
+| `--snippet <name>`           | Run a single snippet by name, alias or `Category/Name` path.           |
 | `--json`                     | Output JSON instead of formatted text.                                 |
 | `--markdown`                 | Output GitHub-renderable markdown (for PR comments).                   |
 | `--viewport <preset>`        | Viewport preset: `mobile` (default), `tablet`, `desktop`.             |
 | `--wait <ms>`                | Post-load wait before evaluating snippets. Default: `3000`.            |
-| `--interact-script <path>`   | JSON file with interactions to run before evaluation (for INP).        |
+| `--interact-script <path>`   | JSON file with interactions to run after the page loads (`scroll`, `click`, `hover`, `type`, `wait`). The Interaction snippets are installed first and read afterwards. |
 | `--storage-state <path>`     | Playwright storage state (cookies and localStorage) for pages that require authentication. |
 | `--crux-key <key>`           | Add CrUX field data (p75) next to the measured values. Prefer `CRUX_API_KEY`. |
 | `--report-to <url>`          | POST the results to this `https` URL after the run. No external calls without it. |
@@ -181,12 +190,16 @@ npx webperf-snippets https://web.dev --budget-lcp 2500 --budget-cls 0.1
 | `lazy-conflict`    | Loading/Find-Images-With-Lazy-and-Fetchpriority |
 | `eager-below-fold` | Loading/Find-non-Lazy-Loaded-Images-outside-of-the-viewport |
 
+### Follow-up steps
+
+The results of a run can add steps on the same page load: LCP over 2.5 s adds `LCP-Subparts`, over 4 s `LCP-Trail`; an image or video LCP adds its entropy, image or video audit; CLS over 0.1 adds `Layout-Shift-Loading-and-Interaction`, over 0.25 also the lazy images, fonts, critical CSS and images without dimensions; TTFB over 600 ms adds `TTFB-Sub-Parts`; FCP over 1.8 s adds the render-blocking check. The full table is in the [CLI page](https://webperf-snippets.nucliweb.net/CLI). Each snippet runs once, and a follow-up informs: its `error` issues do not change the exit code.
+
 ### Exit codes
 
 | Code | Meaning                                       |
 | ---- | --------------------------------------------- |
 | `0`  | All checks passed.                            |
-| `1`  | Budget violation, or a snippet errored.       |
+| `1`  | Budget violation, a snippet errored, or a step of the workflow reported an `error` issue. |
 | `2`  | Usage error (missing URL, unknown workflow).  |
 
 ## CI example
@@ -236,7 +249,7 @@ jobs:
 | Input            | Default             | Description                                                                                  |
 | ---------------- | ------------------- | -------------------------------------------------------------------------------------------- |
 | `url`            | required            | URL to measure.                                                                              |
-| `workflow`       | `core-web-vitals`   | Workflow to run: `core-web-vitals`, `loading` or `audit`.                                    |
+| `workflow`       | `core-web-vitals`   | Workflow to run: `core-web-vitals`, `loading`, `audit` or `interaction`.                                    |
 | `budget-lcp`     | `2500`              | LCP budget in ms. An empty value disables the check.                                         |
 | `budget-cls`     | `0.1`               | CLS budget. An empty value disables the check.                                               |
 | `fail-on-budget` | `true`              | Fail the step when a budget is exceeded or a snippet errors. Use `"false"` to read `exit-code` and decide yourself. |
@@ -287,8 +300,8 @@ The `NPM_TOKEN` secret must be set in the repository settings with publish acces
 ## Roadmap
 
 - ~~v0.2: Loading workflow (TTFB, FCP, render-blocking, scripts, fonts), shared page session, synthetic interactions for INP, markdown reporter for PR comments.~~ ✓ Released
-- v0.3: GitHub Action wrapper.
-- v0.4: Auth flows (login + measure logged-in pages), CrUX field-data enrichment.
+- ~~v0.3: GitHub Action wrapper, auth flows (login + measure logged-in pages), CrUX field-data enrichment, `--report-to`.~~ ✓ Released
+- ~~v0.4: Every snippet by name, a 22-step audit, an 11-step loading workflow, the interaction workflow and decision-tree follow-ups for Core Web Vitals.~~ ✓ Released
 
 ## How it works
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webperf-snippets",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Run curated WebPerf Snippets headlessly via Playwright. Diagnose Core Web Vitals beyond what Lighthouse exposes.",
   "type": "module",
   "bin": "./src/bin.js",

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

@@ -3,6 +3,10 @@
 // https://webperf-snippets.nucliweb.net
 
 (async () => {
+  // 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"];
+  const OWN_DOMAINS = [];
+
   // --- Helpers ---
 
   // @shared getRootDomain
@@ -23,10 +27,23 @@
 
   // @shared isFirstParty
   function isFirstParty(hostname) {
-    return getRootDomain(hostname) === getRootDomain(location.hostname);
+    const root = getRootDomain(hostname);
+    if (root === getRootDomain(location.hostname)) return true;
+    return OWN_DOMAINS.some((d) => getRootDomain(String(d).trim().toLowerCase().replace(/^[a-z]+:\/\//, "").split("/")[0]) === root);
   }
   // @end-shared isFirstParty
 
+  // @shared logOwnDomainsHint
+  function logOwnDomainsHint(thirdPartyCount) {
+    if (OWN_DOMAINS.length === 0 && thirdPartyCount > 0) {
+      console.log(
+        '%cℹ️ OWN_DOMAINS is empty. If this site serves its own assets from other domains (for example a CDN), add them at the top of the snippet, such as const OWN_DOMAINS = ["cdn.example.net"];, and run it again so they count as first party.',
+        "color: #3b82f6;"
+      );
+    }
+  }
+  // @end-shared logOwnDomainsHint
+
   // @shared formatBytes
   function formatBytes(bytes) {
     if (bytes === null || bytes === undefined || Number.isNaN(bytes)) return "-";
@@ -377,13 +394,17 @@
 
   // --- Phase 6: Value-add metrics ---
 
-  const effectiveEntries = entries.filter((e) =>
+  // Only resources whose cache headers were read have a cache policy to judge. One whose headers
+  // could not be read, or that was only inferred as cached, says nothing about the policy: counting it
+  // as "not effective" made the figure measure how much was analyzable instead of the cache.
+  const analyzableEntries = entries.filter((e) => e.headers !== null);
+  const effectiveEntries = analyzableEntries.filter((e) =>
     EFFECTIVE_CACHE_STRATEGIES.has(e.cacheStrategy)
   );
   const cacheEfficiencyPercent =
-    entries.length > 0
-      ? Math.round((effectiveEntries.length / entries.length) * 100)
-      : 0;
+    analyzableEntries.length > 0
+      ? Math.round((effectiveEntries.length / analyzableEntries.length) * 100)
+      : null;
 
   const bandwidthSavedBytes = entries
     .filter((e) => e.isCached)
@@ -425,6 +446,24 @@
   const costlyDuplicates = uniqueDuplicates.filter((d) => d.costly);
   const cachedDuplicates = uniqueDuplicates.filter((d) => !d.costly);
 
+  // These two findings need no cache headers, so they also cover resources on other origins. They
+  // are anti-patterns like the header-based ones: they reach `items` and `issues`.
+  for (const entry of uncompressedResources) {
+    entry.antiPatterns.push({
+      id: "uncompressed",
+      severity: "warning",
+      message: `${entry.type} sent uncompressed (${formatBytes(entry.encodedBodySize)} on the wire for ${formatBytes(entry.decodedBodySize)}) — enable Brotli or gzip`,
+    });
+  }
+  for (const duplicate of costlyDuplicates) {
+    // One finding per URL, on the first request, not one per request
+    entries.find((e) => e.url === duplicate.url).antiPatterns.push({
+      id: "duplicate-uncached",
+      severity: "warning",
+      message: `Loaded ${duplicate.count} times, ${duplicate.uncachedLoads} from the network — load it once or make it cacheable`,
+    });
+  }
+
   // --- Phase 7: Console output ---
 
   if (entries.length === 0) {
@@ -459,6 +498,7 @@
   );
 
   const headersAnalyzed = entries.filter((e) => e.headers !== null).length;
+  const headerCoveragePercent = Math.round((headersAnalyzed / entries.length) * 100);
   const corsRestricted = entries.filter((e) => e.isCorsRestricted).length;
 
   // Resources excluded from header analysis — cross-origin or non-static types.
@@ -474,6 +514,26 @@
         !FETCHABLE_TYPES.has(e.type))
   );
 
+  // Header analysis only reaches same-origin static assets. When most of the page is elsewhere (a CDN
+  // or another origin for the assets), say so and name the hosts, so an empty list is not read as "clean".
+  let coverageIssue = null;
+  if (headerCoveragePercent < 50) {
+    const hostCounts = new Map();
+    for (const e of entries.filter((e) => e.headers === null)) {
+      hostCounts.set(e.host, (hostCounts.get(e.host) || 0) + 1);
+    }
+    const topHosts = [...hostCounts.entries()]
+      .sort((a, b) => b[1] - a[1])
+      .slice(0, 3)
+      .map(([host]) => host)
+      .join(", ");
+    coverageIssue = {
+      severity: "info",
+      id: "header-coverage",
+      message: `Cache headers were read for ${headersAnalyzed} of ${entries.length} resources (${headerCoveragePercent}%): the rest are on other origins or are not static assets, so their Cache-Control cannot be read from the page. Most of them are on ${topHosts}; check those hosts in the Network panel or with curl -I`,
+    };
+  }
+
   console.group(
     "%c🔍 Cache Strategy Analysis",
     "font-weight: bold; font-size: 14px;"
@@ -485,13 +545,18 @@
   console.log(
     `   Headers analyzed: ${headersAnalyzed} | CORS-restricted: ${corsRestricted} | Excluded (non-static/cross-origin): ${excludedFromHeaders.length}`
   );
+  if (coverageIssue) console.log(`   ℹ️  ${coverageIssue.message}`);
   if (excludedFromHeaders.length > 0) {
     const excludedTypes = [...new Set(excludedFromHeaders.map((e) => e.type))].join(", ");
     console.log(
       `   ℹ️  Excluded resources (${excludedTypes}) are analyzed with Tier 1 data only (Performance API) — header inspection requires same-origin static assets due to CORS restrictions.`
     );
   }
-  console.log(`   Cache efficiency: ${cacheEfficiencyPercent}%`);
+  console.log(
+    cacheEfficiencyPercent === null
+      ? `   Cache efficiency: n/a (no cache headers could be read)`
+      : `   Cache efficiency: ${cacheEfficiencyPercent}% (of the ${analyzableEntries.length} resources whose cache headers could be read)`
+  );
   console.log(`   Bandwidth saved by cache: ${formatBytes(bandwidthSavedBytes)}`);
   if (cdnHitRate !== null) {
     console.log(
@@ -596,6 +661,8 @@
       { Pattern: "expires-without-cc",      Severity: "🟡 warning", Meaning: "Uses Expires header without Cache-Control — outdated pattern, less reliable" },
       { Pattern: "maxage-zero-static",      Severity: "🟡 warning", Meaning: "Static asset with max-age=0 — browser revalidates on every request" },
       { Pattern: "short-cache-static",      Severity: "🟡 warning", Meaning: "Static asset with max-age < 3600 — consider a longer cache duration" },
+      { Pattern: "uncompressed",            Severity: "🟡 warning", Meaning: "Text resource sent without Brotli or gzip — works for any origin, no headers needed" },
+      { Pattern: "duplicate-uncached",      Severity: "🟡 warning", Meaning: "Same URL loaded more than once with at least one request to the network" },
       { Pattern: "versioned-not-immutable", Severity: "🔵 info",    Meaning: "Hashed URL without immutable directive — adding it avoids conditional GET requests" },
     ]);
     console.groupEnd();
@@ -719,9 +786,9 @@
       "🟡 Replace Expires headers with Cache-Control: max-age — Expires is an outdated mechanism and less reliable."
     );
   }
-  if (entries.length > 0 && cacheEfficiencyPercent < 50) {
+  if (cacheEfficiencyPercent !== null && cacheEfficiencyPercent < 50) {
     recommendations.push(
-      `🔴 Cache efficiency is low (${cacheEfficiencyPercent}%). Review caching strategy for all static assets.`
+      `🔴 Cache efficiency is low (${cacheEfficiencyPercent}%, measured on the ${analyzableEntries.length} resources whose cache headers could be read). Review caching strategy for those static assets.`
     );
   }
   if (cdnHitRate !== null && cdnHitRate < 70) {
@@ -763,12 +830,15 @@
     console.groupEnd();
   }
 
+  logOwnDomainsHint(entries.filter((e) => !e.firstParty).length);
   console.groupEnd(); // Cache Strategy Analysis
 
   // --- Return structured object ---
 
   const cacheEfficiencyRating =
-    cacheEfficiencyPercent >= 80
+    cacheEfficiencyPercent === null
+      ? null
+      : cacheEfficiencyPercent >= 80
       ? "good"
       : cacheEfficiencyPercent >= 50
       ? "needs-improvement"
@@ -791,8 +861,10 @@
       headersAnalyzed,
       corsRestricted,
       excludedFromHeaders: excludedFromHeaders.length,
+      headerCoveragePercent,
       cacheEfficiencyPercent,
       cacheEfficiencyRating,
+      cacheEfficiencyResources: analyzableEntries.length,
       bandwidthSavedBytes,
       strategyDistribution: strategyGroups,
       cdnDetected: cdnEntries.length > 0,
@@ -804,8 +876,9 @@
       uncompressedCount: uncompressedResources.length,
       protocolDistribution,
     },
-    // Only resources with actionable issues, at most 50: the ones with the most anti-patterns
-    // first, then the largest. Clean resources are left out to reduce noise.
+    // Only resources with actionable findings (cache anti-patterns, a weak cache strategy, a costly
+    // duplicate or uncompressed text), at most 50: the ones with the most anti-patterns first, then the
+    // largest. Clean resources are left out to reduce noise.
     items: actionableEntries
       .sort((a, b) => b.antiPatterns.length - a.antiPatterns.length || b.decodedBodySize - a.decodedBodySize)
       .slice(0, MAX_ITEMS)
@@ -819,12 +892,15 @@
         isCached: e.isCached,
         antiPatterns: e.antiPatterns.map((p) => p.id),
       })),
-    issues: allAntiPatterns.map((p) => ({
-      severity: p.severity,
-      id: p.id,
-      resource: p.resource,
-      message: p.message,
-    })),
+    issues: [
+      ...allAntiPatterns.map((p) => ({
+        severity: p.severity,
+        id: p.id,
+        resource: p.resource,
+        message: p.message,
+      })),
+      ...(coverageIssue ? [coverageIssue] : []),
+    ],
     recommendations,
   };
 })();

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

@@ -2,6 +2,10 @@
 // https://webperf-snippets.nucliweb.net
 
 (() => {
+  // 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"];
+  const OWN_DOMAINS = [];
+
   // Auto-detect first-party: same root domain (handles subdomains)
   // @shared getRootDomain
   function getRootDomain(hostname) {
@@ -21,10 +25,23 @@
 
   // @shared isFirstParty
   function isFirstParty(hostname) {
-    return getRootDomain(hostname) === getRootDomain(location.hostname);
+    const root = getRootDomain(hostname);
+    if (root === getRootDomain(location.hostname)) return true;
+    return OWN_DOMAINS.some((d) => getRootDomain(String(d).trim().toLowerCase().replace(/^[a-z]+:\/\//, "").split("/")[0]) === root);
   }
   // @end-shared isFirstParty
 
+  // @shared logOwnDomainsHint
+  function logOwnDomainsHint(thirdPartyCount) {
+    if (OWN_DOMAINS.length === 0 && thirdPartyCount > 0) {
+      console.log(
+        '%cℹ️ OWN_DOMAINS is empty. If this site serves its own assets from other domains (for example a CDN), add them at the top of the snippet, such as const OWN_DOMAINS = ["cdn.example.net"];, and run it again so they count as first party.',
+        "color: #3b82f6;"
+      );
+    }
+  }
+  // @end-shared logOwnDomainsHint
+
   // @shared formatBytes
   function formatBytes(bytes) {
     if (bytes === null || bytes === undefined || Number.isNaN(bytes)) return "-";
@@ -222,6 +239,7 @@
     console.groupEnd();
   }
 
+  logOwnDomainsHint(thirdParty.length);
   console.groupEnd();
 
   // The list keeps the 50 scripts to look at first (render-blocking, then third-party, then the largest); count and details cover all of them

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

@@ -2,6 +2,10 @@
 // https://webperf-snippets.nucliweb.net
 
 (() => {
+  // 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"];
+  const OWN_DOMAINS = [];
+
   // Auto-detect first-party by root domain
   // @shared getRootDomain
   function getRootDomain(hostname) {
@@ -21,10 +25,23 @@
 
   // @shared isFirstParty
   function isFirstParty(hostname) {
-    return getRootDomain(hostname) === getRootDomain(location.hostname);
+    const root = getRootDomain(hostname);
+    if (root === getRootDomain(location.hostname)) return true;
+    return OWN_DOMAINS.some((d) => getRootDomain(String(d).trim().toLowerCase().replace(/^[a-z]+:\/\//, "").split("/")[0]) === root);
   }
   // @end-shared isFirstParty
 
+  // @shared logOwnDomainsHint
+  function logOwnDomainsHint(thirdPartyCount) {
+    if (OWN_DOMAINS.length === 0 && thirdPartyCount > 0) {
+      console.log(
+        '%cℹ️ OWN_DOMAINS is empty. If this site serves its own assets from other domains (for example a CDN), add them at the top of the snippet, such as const OWN_DOMAINS = ["cdn.example.net"];, and run it again so they count as first party.',
+        "color: #3b82f6;"
+      );
+    }
+  }
+  // @end-shared logOwnDomainsHint
+
   // Gather script timing data
   const scripts = performance
     .getEntriesByType("resource")
@@ -51,6 +68,12 @@
         timings.tcp = r.secureConnectionStart - r.connectStart;
       }
 
+      // Without Timing-Allow-Origin the browser reports the phases as 0, so response would be
+      // the whole duration since the epoch. Only the total is real, the phases are unknown.
+      if (!hasTiming) {
+        for (const phase of ["dns", "tcp", "tls", "request", "response"]) timings[phase] = null;
+      }
+
       return {
         name: r.name,
         shortName: url.pathname.split("/").pop() || url.hostname,
@@ -96,6 +119,7 @@
   const thirdStats = calcStats(thirdParty);
 
   // Format helpers
+  const roundOrNull = (ms) => (ms === null ? null : Math.round(ms));
   const formatMs = (ms) => (ms > 0 ? ms.toFixed(1) + "ms" : "-");
   const formatBar = (value, max) => {
     if (value <= 0 || max <= 0) return "";
@@ -274,6 +298,7 @@
     console.groupEnd();
   }
 
+  logOwnDomainsHint(thirdParty.length);
   console.groupEnd();
 
   // The list keeps the 50 slowest scripts; count and details cover all of them
@@ -292,7 +317,7 @@
       firstPartyAvgTotalMs: Math.round(firstStats.stats.total?.avg || 0),
       thirdPartyAvgTotalMs: Math.round(thirdStats.stats.total?.avg || 0),
     },
-    items: slowestScripts.slice(0, MAX_ITEMS).map(s => ({ shortName: s.shortName, host: s.host, firstParty: s.firstParty, totalMs: Math.round(s.total), dnsMs: Math.round(s.dns), tcpMs: Math.round(s.tcp), requestMs: Math.round(s.request), responseMs: Math.round(s.response), hasTiming: s.hasTiming })),
+    items: slowestScripts.slice(0, MAX_ITEMS).map(s => ({ shortName: s.shortName, host: s.host, firstParty: s.firstParty, totalMs: Math.round(s.total), dnsMs: roundOrNull(s.dns), tcpMs: roundOrNull(s.tcp), requestMs: roundOrNull(s.request), responseMs: roundOrNull(s.response), hasTiming: s.hasTiming })),
     issues: [
       ...(slowScripts.length > 0 ? [{ severity: "warning", message: `${slowScripts.length} script(s) take over ${slowThreshold}ms to load` }] : []),
       ...(hasSlowDns ? [{ severity: "warning", message: "Slow DNS lookups detected (>100ms). Add dns-prefetch or preconnect." }] : []),

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

@@ -2,6 +2,10 @@
 // https://webperf-snippets.nucliweb.net
 
 (() => {
+  // 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"];
+  const OWN_DOMAINS = [];
+
   // Helper to extract font filename from URL
   function getFontName(url) {
     try {
@@ -30,10 +34,23 @@
 
   // @shared isFirstParty
   function isFirstParty(hostname) {
-    return getRootDomain(hostname) === getRootDomain(location.hostname);
+    const root = getRootDomain(hostname);
+    if (root === getRootDomain(location.hostname)) return true;
+    return OWN_DOMAINS.some((d) => getRootDomain(String(d).trim().toLowerCase().replace(/^[a-z]+:\/\//, "").split("/")[0]) === root);
   }
   // @end-shared isFirstParty
 
+  // @shared logOwnDomainsHint
+  function logOwnDomainsHint(thirdPartyCount) {
+    if (OWN_DOMAINS.length === 0 && thirdPartyCount > 0) {
+      console.log(
+        '%cℹ️ OWN_DOMAINS is empty. If this site serves its own assets from other domains (for example a CDN), add them at the top of the snippet, such as const OWN_DOMAINS = ["cdn.example.net"];, and run it again so they count as first party.',
+        "color: #3b82f6;"
+      );
+    }
+  }
+  // @end-shared logOwnDomainsHint
+
   // Check if URL is third-party (a different root domain)
   function isThirdParty(url) {
     try {
@@ -313,6 +330,7 @@
   console.log("4. Self-host fonts when possible for better control");
   console.log("5. Subset fonts to include only needed characters");
   console.log("6. Use WOFF2 format for best compression");
+  logOwnDomainsHint(preloadedFonts.filter((f) => f.thirdParty).length);
   console.groupEnd();
 
   console.groupEnd();

package/snippets/Loading/Resource-Hints-Validation.js

@@ -461,15 +461,32 @@
     } catch {}
   });
 
-  const totalIssues = preloadLinks.filter(l => !usedResourceUrls.has(normalizeUrl(l.href))).length +
-    preconnectLinks.filter(l => {
-      const domain = getDomain(l.href);
-      return domain && !usedDomains.has(domain) && !lazyLoadedDomainsForSummary.has(domain);
-    }).length +
-    dnsPrefetchLinks.filter(l => {
-      const domain = getDomain(l.href);
-      return domain && !usedDomains.has(domain) && !lazyLoadedDomainsForSummary.has(domain);
-    }).length;
+  // A preload with a media query that does not match this viewport is conditional, not unused
+  const isConditionalPreload = (l) => {
+    const media = l.getAttribute("media");
+    if (!media) return false;
+    try {
+      return !window.matchMedia(media).matches;
+    } catch {
+      return true;
+    }
+  };
+  const isUnusedConnection = (l) => {
+    const domain = getDomain(l.href);
+    return domain && !usedDomains.has(domain) && !lazyLoadedDomainsForSummary.has(domain);
+  };
+  const unusedHintItems = [
+    ...preloadLinks
+      .filter((l) => !usedResourceUrls.has(normalizeUrl(l.href)) && !isConditionalPreload(l))
+      .map((l) => ({ domain: getDomain(l.href), href: l.href, requestCount: 0, action: "remove-unused-preload", recommendedHint: null })),
+    ...preconnectLinks
+      .filter(isUnusedConnection)
+      .map((l) => ({ domain: getDomain(l.href), href: l.href, requestCount: 0, action: "remove-unused-preconnect", recommendedHint: null })),
+    ...dnsPrefetchLinks
+      .filter(isUnusedConnection)
+      .map((l) => ({ domain: getDomain(l.href), href: l.href, requestCount: 0, action: "remove-unused-dns-prefetch", recommendedHint: null })),
+  ];
+  const totalIssues = unusedHintItems.length;
 
   console.log("");
   if (totalIssues === 0 && missingHints.length === 0) {
@@ -494,16 +511,19 @@
       missingPreconnects: missingHints.length,
       redundantHints: redundantDomains.length,
     },
-    // Origins that need a hint, and those with a redundant dns-prefetch (at most 50)
+    // The hints to remove (unused), the origins that need a hint and those with a redundant dns-prefetch (at most 50)
     items: [
+      ...unusedHintItems,
       ...missingHints.map(([domain, count]) => ({
         domain,
+        href: null,
         requestCount: count,
         action: count >= 5 ? "add-preconnect" : "add-dns-prefetch",
         recommendedHint: count >= 5 ? "preconnect" : "dns-prefetch",
       })),
       ...redundantDomains.map((domain) => ({
         domain,
+        href: null,
         requestCount: domainRequestCounts[domain] || 0,
         action: "remove-dns-prefetch",
         recommendedHint: "preconnect",

package/snippets/Loading/Script-Loading.js

@@ -2,6 +2,10 @@
 // https://webperf-snippets.nucliweb.net
 
 (() => {
+  // 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"];
+  const OWN_DOMAINS = [];
+
   // @shared formatBytes
   function formatBytes(bytes) {
     if (bytes === null || bytes === undefined || Number.isNaN(bytes)) return "-";
@@ -32,10 +36,23 @@
 
   // @shared isFirstParty
   function isFirstParty(hostname) {
-    return getRootDomain(hostname) === getRootDomain(location.hostname);
+    const root = getRootDomain(hostname);
+    if (root === getRootDomain(location.hostname)) return true;
+    return OWN_DOMAINS.some((d) => getRootDomain(String(d).trim().toLowerCase().replace(/^[a-z]+:\/\//, "").split("/")[0]) === root);
   }
   // @end-shared isFirstParty
 
+  // @shared logOwnDomainsHint
+  function logOwnDomainsHint(thirdPartyCount) {
+    if (OWN_DOMAINS.length === 0 && thirdPartyCount > 0) {
+      console.log(
+        '%cℹ️ OWN_DOMAINS is empty. If this site serves its own assets from other domains (for example a CDN), add them at the top of the snippet, such as const OWN_DOMAINS = ["cdn.example.net"];, and run it again so they count as first party.',
+        "color: #3b82f6;"
+      );
+    }
+  }
+  // @end-shared logOwnDomainsHint
+
   // A script whose URL cannot be parsed counts as first party
   const isFirstPartyUrl = (url) => {
     try {
@@ -307,6 +324,7 @@
   console.log("");
   console.log("%cFor critical inline scripts:", "font-weight: bold;");
   console.log('%c<script>/* Only essential initialization */</script>', "font-family: monospace; color: #22c55e;");
+  logOwnDomainsHint(thirdPartyScripts.length);
   console.groupEnd();
 
   console.groupEnd();

package/snippets/Loading/TTFB-Resources.js

@@ -2,6 +2,10 @@
 // https://webperf-snippets.nucliweb.net
 
 (() => {
+  // 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"];
+  const OWN_DOMAINS = [];
+
   // Waiting time for the first byte of a resource: responseStart is measured from the
   // start of the page, so subtract requestStart. Cross-origin resources without a
   // Timing-Allow-Origin header report 0 for both and cannot be measured.
@@ -25,10 +29,23 @@
 
   // @shared isFirstParty
   function isFirstParty(hostname) {
-    return getRootDomain(hostname) === getRootDomain(location.hostname);
+    const root = getRootDomain(hostname);
+    if (root === getRootDomain(location.hostname)) return true;
+    return OWN_DOMAINS.some((d) => getRootDomain(String(d).trim().toLowerCase().replace(/^[a-z]+:\/\//, "").split("/")[0]) === root);
   }
   // @end-shared isFirstParty
 
+  // @shared logOwnDomainsHint
+  function logOwnDomainsHint(thirdPartyCount) {
+    if (OWN_DOMAINS.length === 0 && thirdPartyCount > 0) {
+      console.log(
+        '%cℹ️ OWN_DOMAINS is empty. If this site serves its own assets from other domains (for example a CDN), add them at the top of the snippet, such as const OWN_DOMAINS = ["cdn.example.net"];, and run it again so they count as first party.',
+        "color: #3b82f6;"
+      );
+    }
+  }
+  // @end-shared logOwnDomainsHint
+
   const isThirdPartyUrl = (name) => {
     try {
       return !isFirstParty(new URL(name).hostname);
@@ -113,6 +130,7 @@
     });
   }
 
+  logOwnDomainsHint(thirdPartyCount);
   console.groupEnd();
   }).observe({
     type: "resource",
@@ -133,7 +151,16 @@
     }))
     .sort((a, b) => b.ttfbMs - a.ttfbMs);
   if (resourcesSync.length === 0) {
-    return { script: "TTFB-Resources", status: "error", error: "No resources with TTFB data available", corsLimitedAnalysis: corsRestrictedCount > 0, details: { corsRestrictedCount } };
+    // Nothing to measure is a valid result, such as a page with every resource inline or hidden by CORS
+    return {
+      script: "TTFB-Resources",
+      status: "ok",
+      count: 0,
+      corsLimitedAnalysis: corsRestrictedCount > 0,
+      details: { avgTtfbMs: null, maxTtfbMs: null, minTtfbMs: null, thirdPartyCount: 0, slowCount: 0, corsRestrictedCount },
+      items: [],
+      issues: [{ severity: "info", message: "No resources with TTFB data available" }],
+    };
   }
   const ttfbVals = resourcesSync.map((r) => r.ttfbMs);
   // The list keeps the 50 slowest resources (already sorted); count and details cover all of them