webperf-snippets 0.2.0 → 0.3.0

package/snippets/Loading/Speculation-Rules-Inspector.js

@@ -0,0 +1,134 @@
+// Prerender & Speculation Rules Inspector
+// https://webperf-snippets.nucliweb.net
+
+(() => {
+  const MAX_ITEMS = 50;
+  // Chrome limits eager prerenders per page; more than this is wasted or dropped
+  const EAGER_PRERENDER_LIMIT = 10;
+
+  // Activation of a prerendered page is only observable while the snippet listens
+  const state = { activated: !document.prerendering, activatedAt: null };
+  if (document.prerendering) {
+    document.addEventListener(
+      'prerenderingchange',
+      () => {
+        state.activated = true;
+        state.activatedAt = Math.round(performance.now());
+        console.log('%cPrerendered page activated', 'color: #22c55e; font-weight: bold;');
+      },
+      { once: true }
+    );
+  }
+
+  const inspect = () => {
+    const issues = [];
+    const items = [];
+    const actions = {};
+    const supported = typeof window.HTMLScriptElement.supports === 'function'
+      && window.HTMLScriptElement.supports('speculationrules');
+
+    const [nav] = performance.getEntriesByType('navigation');
+    const activationStart = Math.round(nav?.activationStart ?? 0);
+    const deliveryType = nav?.deliveryType ?? '';
+
+    const scripts = [...document.querySelectorAll('script[type="speculationrules"]')];
+
+    scripts.forEach((script, index) => {
+      let parsed;
+      try {
+        parsed = JSON.parse(script.textContent);
+      } catch (e) {
+        issues.push({
+          severity: 'error',
+          message: `Speculation rules script #${index + 1} is not valid JSON (${e.message}). The browser ignores the whole script.`,
+        });
+        return;
+      }
+
+      for (const [action, rules] of Object.entries(parsed ?? {})) {
+        if (!Array.isArray(rules)) continue;
+        actions[action] = (actions[action] ?? 0) + rules.length;
+
+        for (const rule of rules) {
+          const source = rule.source ?? (rule.where ? 'document' : 'list');
+          const urls = Array.isArray(rule.urls) ? rule.urls : [];
+          const eagerness = rule.eagerness ?? (source === 'document' ? 'conservative' : 'immediate');
+          items.push({
+            action,
+            source,
+            eagerness,
+            urls: urls.slice(0, 20),
+            urlCount: urls.length,
+            where: rule.where ?? null,
+            requires: rule.requires ?? [],
+            referrerPolicy: rule.referrer_policy ?? null,
+            scriptIndex: index,
+          });
+
+          const isPrerender = action === 'prerender' || action === 'prerender_until_script';
+          if (isPrerender && source === 'list' && (eagerness === 'immediate' || eagerness === 'eager') && urls.length > EAGER_PRERENDER_LIMIT) {
+            issues.push({
+              severity: 'warning',
+              message: `A ${action} rule lists ${urls.length} URLs with eagerness "${eagerness}". Chrome caps eager prerenders, so the extra URLs are not prerendered. Fix: list fewer URLs or use "moderate".`,
+            });
+          }
+          if (isPrerender && source === 'document' && (eagerness === 'immediate' || eagerness === 'eager')) {
+            issues.push({
+              severity: 'warning',
+              message: `A document ${action} rule uses eagerness "${eagerness}", which prerenders matching links without a user signal and can waste bandwidth and CPU. Fix: use "moderate" or "conservative".`,
+            });
+          }
+        }
+      }
+    });
+
+    if (scripts.length === 0) {
+      issues.push({ severity: 'info', message: 'No speculation rules found in the DOM. Rules delivered in the Speculation-Rules HTTP header are not readable from JavaScript.' });
+    } else if (items.length === 0 && !issues.some((i) => i.severity === 'error')) {
+      issues.push({ severity: 'info', message: 'Speculation rules scripts were found but contain no prefetch or prerender rules.' });
+    }
+    if (!supported && scripts.length > 0) {
+      issues.push({ severity: 'info', message: 'This browser does not support speculation rules, so the rules are ignored.' });
+    }
+    if (activationStart > 0) {
+      issues.push({ severity: 'info', message: `This page was prerendered and activated at ${activationStart}ms. Navigation timings are relative to activationStart.` });
+    }
+
+    return {
+      script: 'Speculation-Rules-Inspector',
+      status: 'ok',
+      count: items.length,
+      details: {
+        supported,
+        prerendering: document.prerendering === true,
+        activated: state.activated,
+        activatedAt: state.activatedAt,
+        activationStart,
+        deliveryType,
+        scriptCount: scripts.length,
+        actions,
+      },
+      items: items.slice(0, MAX_ITEMS),
+      issues,
+    };
+  };
+
+  window.getSpeculationRulesInspection = inspect;
+  const result = inspect();
+
+  console.group('Speculation rules');
+  console.log(`Prerendering: ${result.details.prerendering}, activationStart: ${result.details.activationStart}ms, deliveryType: "${result.details.deliveryType}"`);
+  if (result.items.length > 0) console.table(result.items.map(({ action, source, eagerness, urlCount }) => ({ action, source, eagerness, urlCount })));
+  result.issues.forEach((i) => console.log(`[${i.severity}] ${i.message}`));
+  console.groupEnd();
+
+  if (document.prerendering) {
+    return {
+      script: 'Speculation-Rules-Inspector',
+      status: 'tracking',
+      message: 'This page is prerendering. Call getSpeculationRulesInspection() after activation to see the final timings.',
+      getDataFn: 'getSpeculationRulesInspection',
+    };
+  }
+  return result;
+})();

package/snippets/Loading/TTFB-Resources.js

@@ -2,17 +2,52 @@
 // https://webperf-snippets.nucliweb.net
 
 (() => {
+  // 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.
+  const waitTime = (entry) => entry.responseStart - entry.requestStart;
+  const hasTiming = (entry) => entry.responseStart > 0;
+  // @shared getRootDomain
+  function getRootDomain(hostname) {
+    const host = hostname.replace(/\.$/, "");
+    // An IP address has no registrable domain, so each address is its own root
+    if (/^\d{1,3}(\.\d{1,3}){3}$/.test(host) || host.includes(":")) return host;
+    const parts = host.split(".");
+    if (parts.length <= 2) return host;
+    // Country-code domains with a second-level suffix: example.co.uk, example.com.au, example.ac.jp
+    const secondLevelSuffixes = ["ac", "co", "com", "edu", "go", "gob", "gouv", "gov", "govt", "mil", "ne", "net", "nom", "or", "org", "sch"];
+    const tld = parts[parts.length - 1];
+    const sld = parts[parts.length - 2];
+    if (tld.length === 2 && secondLevelSuffixes.includes(sld)) return parts.slice(-3).join(".");
+    return parts.slice(-2).join(".");
+  }
+  // @end-shared getRootDomain
+
+  // @shared isFirstParty
+  function isFirstParty(hostname) {
+    return getRootDomain(hostname) === getRootDomain(location.hostname);
+  }
+  // @end-shared isFirstParty
+
+  const isThirdPartyUrl = (name) => {
+    try {
+      return !isFirstParty(new URL(name).hostname);
+    } catch {
+      return false;
+    }
+  };
+
   new PerformanceObserver((entryList) => {
   const entries = entryList.getEntries();
+  const restrictedCount = entries.filter((entry) => !hasTiming(entry)).length;
 
   const resourcesData = entries
-    .filter((entry) => entry.responseStart > 0)
+    .filter(hasTiming)
     .map((entry) => {
-      const url = new URL(entry.name);
-      const isThirdParty = url.hostname !== location.hostname;
+      const isThirdParty = isThirdPartyUrl(entry.name);
 
       return {
-        ttfb: entry.responseStart,
+        ttfb: waitTime(entry),
         duration: entry.duration,
         type: entry.initiatorType,
         thirdParty: isThirdParty,
@@ -44,6 +79,9 @@
   console.log(`   Average TTFB: ${avgTtfb.toFixed(0)}ms`);
   console.log(`   Fastest: ${minTtfb.toFixed(0)}ms | Slowest: ${maxTtfb.toFixed(0)}ms`);
   console.log(`   Third-party resources: ${thirdPartyCount}`);
+  if (restrictedCount > 0) {
+    console.log(`%c   ⚠️ ${restrictedCount} resource(s) not measured: missing Timing-Allow-Origin header`, "color: #f59e0b;");
+  }
   if (slowResources > 0) {
     console.log(`%c   ⚠️ Slow resources (>500ms): ${slowResources}`, "color: #f59e0b;");
   }
@@ -82,34 +120,37 @@
   });
 
   // Synchronous return for agent
-  const resourcesSync = performance.getEntriesByType("resource")
-    .filter((entry) => entry.responseStart > 0)
-    .map((entry) => {
-      const url = new URL(entry.name);
-      return {
-        url: entry.name,
-        ttfbMs: Math.round(entry.responseStart),
-        durationMs: Math.round(entry.duration),
-        type: entry.initiatorType,
-        isThirdParty: url.hostname !== location.hostname,
-      };
-    })
+  const allResources = performance.getEntriesByType("resource");
+  const corsRestrictedCount = allResources.filter((entry) => !hasTiming(entry)).length;
+  const resourcesSync = allResources
+    .filter(hasTiming)
+    .map((entry) => ({
+      url: entry.name,
+      ttfbMs: Math.round(waitTime(entry)),
+      durationMs: Math.round(entry.duration),
+      type: entry.initiatorType,
+      isThirdParty: isThirdPartyUrl(entry.name),
+    }))
     .sort((a, b) => b.ttfbMs - a.ttfbMs);
   if (resourcesSync.length === 0) {
-    return { script: "TTFB-Resources", status: "error", error: "No resources with TTFB data available" };
+    return { script: "TTFB-Resources", status: "error", error: "No resources with TTFB data available", corsLimitedAnalysis: corsRestrictedCount > 0, details: { corsRestrictedCount } };
   }
   const ttfbVals = resourcesSync.map((r) => r.ttfbMs);
+  // The list keeps the 50 slowest resources (already sorted); count and details cover all of them
+  const MAX_ITEMS = 50;
   return {
     script: "TTFB-Resources",
     status: "ok",
     count: resourcesSync.length,
+    corsLimitedAnalysis: corsRestrictedCount > 0,
     details: {
       avgTtfbMs: Math.round(ttfbVals.reduce((a, b) => a + b, 0) / ttfbVals.length),
       maxTtfbMs: Math.max(...ttfbVals),
       minTtfbMs: Math.min(...ttfbVals),
       thirdPartyCount: resourcesSync.filter((r) => r.isThirdParty).length,
       slowCount: resourcesSync.filter((r) => r.ttfbMs > 500).length,
+      corsRestrictedCount,
     },
-    items: resourcesSync,
+    items: resourcesSync.slice(0, MAX_ITEMS),
   };
 })();

package/snippets/Loading/TTFB-Sub-Parts.js

@@ -9,8 +9,12 @@
     const waitEnd = Math.max((pageNav.workerStart || pageNav.fetchStart) - activationStart, 0);
     const dnsStart = Math.max(pageNav.domainLookupStart - activationStart, 0);
     const tcpStart = Math.max(pageNav.connectStart - activationStart, 0);
-    const sslStart = Math.max(pageNav.secureConnectionStart - activationStart, 0);
     const tcpEnd = Math.max(pageNav.connectEnd - activationStart, 0);
+    // secureConnectionStart is 0 on plain HTTP and reused connections: no TLS phase
+    const sslStart =
+      pageNav.secureConnectionStart > 0
+        ? Math.max(pageNav.secureConnectionStart - activationStart, 0)
+        : tcpEnd;
     const responseStart = Math.max(pageNav.responseStart - activationStart, 0);
 
     const formatMs = (ms) => ms.toFixed(2) + " ms";
@@ -90,8 +94,11 @@
   const waitEndSync = Math.max((navSync.workerStart || navSync.fetchStart) - activStartSync, 0);
   const dnsStartSync = Math.max(navSync.domainLookupStart - activStartSync, 0);
   const tcpStartSync = Math.max(navSync.connectStart - activStartSync, 0);
-  const sslStartSync = Math.max(navSync.secureConnectionStart - activStartSync, 0);
   const tcpEndSync = Math.max(navSync.connectEnd - activStartSync, 0);
+  const sslStartSync =
+    navSync.secureConnectionStart > 0
+      ? Math.max(navSync.secureConnectionStart - activStartSync, 0)
+      : tcpEndSync;
   const subPartsSync = [
     { key: "redirectWait", duration: waitEndSync },
     { key: "serviceWorkerCache", duration: dnsStartSync - waitEndSync },

package/snippets/Loading/TTFB.js

@@ -4,7 +4,8 @@
 (() => {
   new PerformanceObserver((entryList) => {
     const [pageNav] = entryList.getEntriesByType("navigation");
-    const ttfb = pageNav.responseStart;
+    // Prerendered pages: measure from activation, not from the start of the prerender
+    const ttfb = Math.max(0, pageNav.responseStart - (pageNav.activationStart || 0));
 
     let rating, color;
     if (ttfb <= 800) {
@@ -30,7 +31,7 @@
   // Synchronous return for agent
   const [nav] = performance.getEntriesByType("navigation");
   if (!nav) return { script: "TTFB", status: "error", error: "No navigation entry" };
-  const value = Math.round(nav.responseStart);
+  const value = Math.round(Math.max(0, nav.responseStart - (nav.activationStart || 0)));
   const rating = value <= 800 ? "good" : value <= 1800 ? "needs-improvement" : "poor";
   return { script: "TTFB", status: "ok", metric: "TTFB", value, unit: "ms", rating,
     thresholds: { good: 800, needsImprovement: 1800 } };

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

@@ -0,0 +1,216 @@
+// Third-Party Impact by Domain
+// Groups third-party requests by root domain and reports requests, transfer size, render-blocking and main-thread time
+// https://webperf-snippets.nucliweb.net
+
+(() => {
+  const MAX_ITEMS = 50;
+  const LOAF_WARNING_MS = 250; // Script time in long animation frames above which one domain is a problem
+  const MAX_LISTED_DOMAINS = 5;
+
+  // Domains that belong to the site but differ from the page's root domain, such as its own CDN.
+  // They count as first party. Example: const OWN_DOMAINS = ["bbci.co.uk", "bbc.co.uk"];
+  const OWN_DOMAINS = [];
+
+  // @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
+
+  // A size that misses some resources is a lower bound, and one that misses all of them is unknown
+  const sizeLabel = (bytes, unknown, total) => {
+    if (total > 0 && unknown === total) return "unknown";
+    return (unknown > 0 ? "≥ " : "") + formatBytes(bytes);
+  };
+
+  // @shared getRootDomain
+  function getRootDomain(hostname) {
+    const host = hostname.replace(/\.$/, "");
+    // An IP address has no registrable domain, so each address is its own root
+    if (/^\d{1,3}(\.\d{1,3}){3}$/.test(host) || host.includes(":")) return host;
+    const parts = host.split(".");
+    if (parts.length <= 2) return host;
+    // Country-code domains with a second-level suffix: example.co.uk, example.com.au, example.ac.jp
+    const secondLevelSuffixes = ["ac", "co", "com", "edu", "go", "gob", "gouv", "gov", "govt", "mil", "ne", "net", "nom", "or", "org", "sch"];
+    const tld = parts[parts.length - 1];
+    const sld = parts[parts.length - 2];
+    if (tld.length === 2 && secondLevelSuffixes.includes(sld)) return parts.slice(-3).join(".");
+    return parts.slice(-2).join(".");
+  }
+  // @end-shared getRootDomain
+
+  // @shared isFirstParty
+  function isFirstParty(hostname) {
+    return getRootDomain(hostname) === getRootDomain(location.hostname);
+  }
+  // @end-shared isFirstParty
+
+  const ownRoots = new Set(
+    OWN_DOMAINS.map((d) => getRootDomain(String(d).trim().toLowerCase().replace(/^[a-z]+:\/\//, "").split("/")[0]))
+  );
+
+  // Root domain of an http(s) URL, or null for anything else (data:, blob:, empty)
+  const rootDomainOf = (url) => {
+    try {
+      const u = new URL(url);
+      return /^https?:$/.test(u.protocol) ? { root: getRootDomain(u.hostname), first: isFirstParty(u.hostname) || ownRoots.has(getRootDomain(u.hostname)) } : null;
+    } catch {
+      return null;
+    }
+  };
+
+  const domains = new Map();
+  const domainEntry = (root) => {
+    if (!domains.has(root)) {
+      domains.set(root, { domain: root, requests: 0, transferBytes: 0, sizeUnknownCount: 0, renderBlocking: false, loafMs: null, loafScripts: 0 });
+    }
+    return domains.get(root);
+  };
+
+  let firstPartyRequests = 0;
+  let thirdPartyRequests = 0;
+  let thirdPartyBytes = 0;
+  let sizeUnknownCount = 0;
+
+  performance.getEntriesByType("resource").forEach((entry) => {
+    const parsed = rootDomainOf(entry.name);
+    if (!parsed) return;
+    if (parsed.first) {
+      firstPartyRequests++;
+      return;
+    }
+    const d = domainEntry(parsed.root);
+    d.requests++;
+    thirdPartyRequests++;
+
+    // Cross-origin resources without Timing-Allow-Origin report every size as zero
+    const sizeKnown = entry.transferSize > 0 || entry.encodedBodySize > 0 || entry.decodedBodySize > 0;
+    if (sizeKnown) {
+      const bytes = entry.transferSize || entry.encodedBodySize || 0;
+      d.transferBytes += bytes;
+      thirdPartyBytes += bytes;
+    } else {
+      d.sizeUnknownCount++;
+      sizeUnknownCount++;
+    }
+
+    if (entry.renderBlockingStatus === "blocking" && (entry.initiatorType === "script" || entry.initiatorType === "link")) {
+      d.renderBlocking = true;
+    }
+  });
+
+  // Main-thread time: script time inside long animation frames, attributed by the script's source URL
+  const loafSupported = !!PerformanceObserver.supportedEntryTypes?.includes("long-animation-frame");
+  let thirdPartyLoafMs = null;
+  if (loafSupported) {
+    thirdPartyLoafMs = 0;
+    domains.forEach((d) => {
+      d.loafMs = 0;
+    });
+    performance.getEntriesByType("long-animation-frame").forEach((frame) => {
+      (frame.scripts || []).forEach((script) => {
+        const parsed = rootDomainOf(script.sourceURL);
+        if (!parsed || parsed.first) return;
+        const d = domainEntry(parsed.root);
+        d.loafMs = (d.loafMs || 0) + script.duration;
+        d.loafScripts++;
+        thirdPartyLoafMs += script.duration;
+      });
+    });
+    domains.forEach((d) => {
+      d.loafMs = Math.round(d.loafMs || 0);
+    });
+    thirdPartyLoafMs = Math.round(thirdPartyLoafMs);
+  }
+
+  // Render-blocking first, then main-thread time, then transfer size
+  const all = [...domains.values()].sort(
+    (a, b) =>
+      Number(b.renderBlocking) - Number(a.renderBlocking) ||
+      (b.loafMs || 0) - (a.loafMs || 0) ||
+      b.transferBytes - a.transferBytes ||
+      a.domain.localeCompare(b.domain)
+  );
+
+  const blocking = all.filter((d) => d.renderBlocking);
+  const heavy = all.filter((d) => (d.loafMs || 0) > LOAF_WARNING_MS);
+  const corsLimitedAnalysis = sizeUnknownCount > 0;
+
+  const listDomains = (list) => {
+    const names = list.slice(0, MAX_LISTED_DOMAINS).map((d) => d.domain);
+    return names.join(", ") + (list.length > MAX_LISTED_DOMAINS ? ` and ${list.length - MAX_LISTED_DOMAINS} more` : "");
+  };
+
+  const issues = [];
+  if (blocking.length > 0) {
+    issues.push({
+      severity: "warning",
+      message: `${blocking.length} third-party domain(s) serve render-blocking resources (${listDomains(blocking)}); load them async or defer, or self-host them`,
+    });
+  }
+  heavy.slice(0, MAX_LISTED_DOMAINS).forEach((d) => {
+    issues.push({
+      severity: "warning",
+      message: `${d.domain} scripts take ${d.loafMs} ms of main-thread time in long animation frames (over ${LOAF_WARNING_MS} ms); defer, delay or remove them`,
+    });
+  });
+  if (corsLimitedAnalysis) {
+    issues.push({
+      severity: "info",
+      message: `${sizeUnknownCount} third-party request(s) without Timing-Allow-Origin report zero sizes, so the transfer size is a lower bound`,
+    });
+  }
+
+  console.group("%c🌐 Third-Party Impact by Domain", "font-weight: bold; font-size: 14px;");
+  console.log(
+    `Third-party domains: ${all.length} | requests: ${thirdPartyRequests} | transfer: ${sizeLabel(thirdPartyBytes, sizeUnknownCount, thirdPartyRequests)} | first-party requests: ${firstPartyRequests}`
+  );
+  if (all.length > 0) {
+    console.table(
+      all.slice(0, MAX_ITEMS).map((d) => ({
+        Domain: d.domain,
+        Requests: d.requests,
+        Size: sizeLabel(d.transferBytes, d.sizeUnknownCount, d.requests),
+        "Render-blocking": d.renderBlocking ? "yes" : "no",
+        "Main thread": d.loafMs === null ? "n/a" : d.loafMs + " ms",
+      }))
+    );
+  } else {
+    console.log("%c✅ No third-party requests found", "color: #22c55e;");
+  }
+  if (!loafSupported) {
+    console.log("%cℹ️ Long Animation Frames are not supported; main-thread time is unavailable (Chrome 123+)", "color: #3b82f6;");
+  }
+  if (corsLimitedAnalysis) {
+    console.log("%cℹ️ Some third-party sizes are hidden (no Timing-Allow-Origin); sizes are a lower bound", "color: #3b82f6;");
+  }
+  if (OWN_DOMAINS.length === 0 && all.length > 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;"
+    );
+  }
+  console.groupEnd();
+
+  return {
+    script: "Third-Party-Impact-by-Domain",
+    status: "ok",
+    count: all.length,
+    corsLimitedAnalysis,
+    details: {
+      thirdPartyRequests,
+      thirdPartyBytes,
+      thirdPartyLoafMs,
+      firstPartyRequests,
+      blockingDomains: blocking.length,
+      loafSupported,
+      sizeUnknownCount,
+    },
+    items: all.slice(0, MAX_ITEMS),
+    issues,
+  };
+})();

package/snippets/Loading/Validate-Preload-Async-Defer-Scripts.js

@@ -378,6 +378,23 @@
 
   console.groupEnd();
 
+  // One item per script (an issue replaces the valid entry of the same URL), at most 50
+  const itemsByUrl = new Map();
+  validPreloads.forEach((v) => itemsByUrl.set(v.url, {
+    url: v.shortUrl,
+    type: v.type === "dynamic" ? "dynamic" : v.type === "mitigated" ? "mitigated" : "blocking",
+    strategy: v.attributes || "blocking-script",
+    location: v.location || "unknown",
+    reviewNote: v.reviewNote || v.note || "",
+  }));
+  issues.forEach((i) => itemsByUrl.set(i.url, {
+    url: i.shortUrl,
+    type: "issue",
+    strategy: i.attributes || i.type,
+    location: i.location || "unknown",
+    reviewNote: i.fix || "",
+  }));
+
   return {
     script: "Validate-Preload-Async-Defer-Scripts",
     status: "ok",
@@ -386,9 +403,10 @@
       validCount: validPreloads.length,
       issueCount: issues.length,
     },
-    items: preloadedScripts.map(p => ({
-      url: p.href.split("/").pop()?.split("?")[0] || p.href,
+    items: Array.from(itemsByUrl.values()).slice(0, 50),
+    issues: issues.map(i => ({
+      severity: i.severity,
+      message: i.fix ? `${i.message.replace(/\.$/, "")}. Fix: ${i.fix}` : i.message,
     })),
-    issues: issues.map(i => ({ severity: i.severity, message: i.message })),
   };
 })();

package/snippets/Loading/WORKFLOWS.md

@@ -19,6 +19,7 @@ When TTFB is slow or the user asks "why is my server slow":
 2. **TTFB-Sub-Parts.js** - Break down into DNS, connection, server time
 3. **Service-Worker-Analysis.js** - Check for SW overhead impacting TTFB
 4. **TTFB-Resources.js** - Identify slow third-party or API endpoints
+5. **Server-Timing-Early-Hints.js** - Read backend phases from `Server-Timing` and check 103 Early Hints
 
 ### Font Loading Optimization
 
@@ -27,6 +28,15 @@ When the user asks about fonts, FOIT, FOUT, or font performance:
 1. **Fonts-Preloaded-Loaded-and-used-above-the-fold.js** - Full font audit
 2. **Resource-Hints-Validation.js** - Verify font preloads are correct
 3. **Find-render-blocking-resources.js** - Check if fonts block rendering
+4. **Webfont-Usage-Analyzer.js** - Find font faces that are unused, never loaded, or use a blocking `font-display`
+
+### Text Compression Audit
+
+When the user asks about compression, gzip, brotli, or large transfer sizes for text resources:
+
+1. **Compression-Audit.js** - Find text resources served without compression and estimate savings
+2. **Find-render-blocking-resources.js** - Prioritize uncompressed CSS/JS that block rendering
+3. **TTFB-Resources.js** - Check server response of the uncompressed resources
 
 ### Script Performance Deep Dive
 
@@ -34,6 +44,7 @@ When scripts are suspected to slow down the page:
 
 1. **Script-Loading.js** - Identify blocking scripts and loading strategy
 2. **First-And-Third-Party-Script-Info.js** - Separate first vs third-party impact
+   - **Third-Party-Impact-by-Domain.js** - Rank third-party domains by render-blocking, main-thread time and size
 3. **First-And-Third-Party-Script-Timings.js** - Diagnose slow script connections
 4. **JS-Execution-Time-Breakdown.js** - Network vs parse/execution time
 5. **Inline-Script-Info-and-Size.js** - Measure inline script overhead
@@ -48,6 +59,7 @@ When the user wants to optimize resource loading priorities:
 3. **Priority-Hints-Audit.js** - Check fetchpriority usage
 4. **Prefetch-Resource-Validation.js** - Validate prefetch strategy
 5. **Validate-Preload-Async-Defer-Scripts.js** - Find conflicts
+6. **Speculation-Rules-Inspector.js** - Inspect prefetch/prerender rules and prerender activation
 
 ### CSS Optimization Workflow
 
@@ -76,6 +88,13 @@ Use this decision tree to automatically run follow-up snippets based on results:
 - **If TTFB > 600ms** → Run **TTFB-Sub-Parts.js** to diagnose where time is spent
 - **If Service Worker detected** → Run **Service-Worker-Analysis.js** to check for SW overhead
 - **If TTFB varies significantly across resources** → Run **TTFB-Resources.js**
+- **If server time dominates TTFB-Sub-Parts.js** → Run **Server-Timing-Early-Hints.js** to see which backend phase is slow
+
+### After Server-Timing-Early-Hints.js
+
+- **If no `Server-Timing` metrics found** → Recommend adding `Server-Timing` headers for database, cache and render phases
+- **If cross-origin resources look hidden** → Recommend `Timing-Allow-Origin` on those responses
+- **If no 103 Early Hints received and server time is high** → Recommend Early Hints for the main stylesheet and LCP image
 
 ### After FCP.js
 
@@ -109,6 +128,19 @@ Use this decision tree to automatically run follow-up snippets based on results:
   2. **Priority-Hints-Audit.js** (LCP candidate)
 - **If preloads on async/defer scripts** → Run **Validate-Preload-Async-Defer-Scripts.js**
 
+### After Compression-Audit.js
+
+- **If uncompressed CSS/JS found** → Run **Find-render-blocking-resources.js** to see if they block rendering
+- **If estimated savings > 100KB** → Recommend enabling gzip or brotli on the server or CDN
+- **If corsLimitedAnalysis is true** → Report the result as a lower bound and suggest `Timing-Allow-Origin` on resources you control
+
+### After Third-Party-Impact-by-Domain.js
+
+- **If a domain is render-blocking** → Recommend `async`, `defer`, lazy loading or self-hosting; run **Script-Loading.js** for the loading strategy
+- **If a domain's main-thread time > 250ms** → Run **Long-Animation-Frames-Script-Attribution.js** (webperf-interaction) to find the functions responsible, and recommend delaying or removing the script
+- **If many domains with few requests each** → Recommend auditing tags and removing unused ones
+- **If corsLimitedAnalysis is true** → Report sizes as a lower bound; use **First-And-Third-Party-Script-Timings.js** for timings of the hidden resources
+
 ### After Service-Worker-Analysis.js
 
 - **If SW overhead > 100ms** → Recommend Navigation Preload API
@@ -119,7 +151,14 @@ Use this decision tree to automatically run follow-up snippets based on results:
 
 - **If fonts preloaded but not used above-the-fold** → Recommend removing preloads
 - **If fonts used but not preloaded** → Recommend adding preload
-- **If many font variants loaded** → Suggest subsetting or reducing variants
+- **If many font variants loaded** → Suggest subsetting or reducing variants, and run **Webfont-Usage-Analyzer.js** to find the unused ones
+
+### After Webfont-Usage-Analyzer.js
+
+- **If fonts loaded but not used** → Recommend removing the `@font-face` declaration or the preload
+- **If faces use `font-display: auto` or `block`** → Recommend `swap` or `optional`, then check **Find-render-blocking-resources.js**
+- **If font bytes are high** → Suggest subsetting with `unicode-range` and WOFF2
+- **If the LCP element is text** → Run **LCP.js** with the **webperf-core-web-vitals** skill
 
 ### After First-And-Third-Party-Script-Info.js
 
@@ -145,6 +184,13 @@ Use this decision tree to automatically run follow-up snippets based on results:
 - **If >10 prefetch hints** → Recommend reducing to critical resources
 - **If individual prefetch > 500KB** → Question necessity
 - **If total prefetch > 2MB** → Flag as mobile bandwidth concern
+- **If few or no prefetch hints for likely next navigations** → Run **Speculation-Rules-Inspector.js** to check for prefetch/prerender rules
+
+### After Speculation-Rules-Inspector.js
+
+- **If no speculation rules found but the site has predictable navigations** → Recommend adding prefetch or prerender rules
+- **If invalid JSON or wasteful rules (eager prerender of many URLs)** → Recommend fixing or lowering eagerness to `moderate` or `conservative`
+- **If the page was prerendered (`activationStart` > 0)** → Subtract `activationStart` when interpreting **TTFB.js**, **FCP.js** and LCP results
 
 ### After Critical-CSS-Detection.js