webperf-snippets 1.0.0 → 1.2.0

package/snippets/Interaction/Input-Latency-Breakdown.js

@@ -2,6 +2,11 @@
 // https://webperf-snippets.net
 
 (() => {
+  if (!PerformanceObserver.supportedEntryTypes?.includes("event")) {
+    console.warn("⚠️ event entries are not supported in this browser.");
+    return { script: "Input-Latency-Breakdown", status: "unsupported", error: "event entries not supported in this browser" };
+  }
+
   const formatMs = (ms) => `${Math.round(ms)}ms`;
 
   const valueToRating = (score) =>
@@ -19,34 +24,81 @@
     poor: "🔴",
   };
 
-  // Interactions grouped by event type
-  const byEventType = {};
-
-  const observer = new PerformanceObserver((list) => {
-    // Group entries by interactionId; keep the longest entry per interaction
-    const interactions = {};
-
-    for (const entry of list.getEntries().filter((e) => e.interactionId)) {
-      interactions[entry.interactionId] =
-        interactions[entry.interactionId] || [];
-      interactions[entry.interactionId].push(entry);
-    }
-
-    for (const group of Object.values(interactions)) {
-      const entry = group.reduce((prev, curr) =>
-        prev.duration >= curr.duration ? prev : curr
-      );
+  // @shared createInteractionTracker
+  // Groups Event Timing entries by interactionId across observer callbacks, since the entries of one
+  // interaction (pointerdown, pointerup, click; keydown, keyup) can arrive in separate batches. Each
+  // interaction is measured over its entries painted in the frame of its longest one: Chrome rounds
+  // durations to 8 ms, and an event painted in an earlier frame, such as the keydown of a key held
+  // down, has its own timing. It is reported under the event whose handler ran longest, or under the
+  // click or keydown when no handler took a millisecond more than theirs.
+  function createInteractionTracker() {
+    const byId = new Map();
+    const processing = (e) => e.processingEnd - e.processingStart;
+    const measure = (id, entries) => {
+      const longest = entries.reduce((a, b) => (b.duration > a.duration ? b : a));
+      const paint = longest.startTime + longest.duration;
+      const frame = entries.filter((e) => Math.abs(e.startTime + e.duration - paint) <= 8);
+      const startTime = Math.min(...frame.map((e) => e.startTime));
+      const processingStart = Math.min(...frame.map((e) => e.processingStart));
+      const processingEnd = Math.max(...frame.map((e) => e.processingEnd));
+      const busiest = frame.reduce((a, b) => (processing(b) > processing(a) ? b : a));
+      const primary = frame.find((e) => e.name === "click" || e.name === "keydown");
+      const reported = primary && processing(busiest) - processing(primary) < 1 ? primary : busiest;
+      return {
+        interactionId: id,
+        name: reported.name,
+        target: reported.target ?? frame.find((e) => e.target)?.target ?? null,
+        startTime,
+        duration: longest.duration,
+        phases: {
+          inputDelay: processingStart - startTime,
+          processingTime: processingEnd - processingStart,
+          presentationDelay: Math.max(0, startTime + longest.duration - processingEnd),
+        },
+      };
+    };
+    return {
+      // Adds the entries of one observer callback and returns the interactions they changed
+      add(entries) {
+        const changed = new Set();
+        for (const e of entries) {
+          if (!e.interactionId) continue;
+          const record = byId.get(e.interactionId) ?? { entries: [] };
+          record.entries.push({
+            name: e.name,
+            target: e.target,
+            startTime: e.startTime,
+            duration: e.duration,
+            processingStart: e.processingStart,
+            processingEnd: e.processingEnd,
+          });
+          byId.set(e.interactionId, record);
+          changed.add(e.interactionId);
+        }
+        return [...changed].map((id) => {
+          const record = byId.get(id);
+          record.summary = measure(id, record.entries);
+          return record.summary;
+        });
+      },
+      list() {
+        return [...byId.values()].map((record) => record.summary);
+      },
+    };
+  }
+  // @end-shared createInteractionTracker
 
-      const eventType = entry.name; // "click", "keydown", "pointerdown", etc.
-      const inputDelay = entry.processingStart - entry.startTime;
-      const processingTime = entry.processingEnd - entry.processingStart;
-      const presentationDelay = Math.max(
-        4,
-        entry.startTime + entry.duration - entry.processingEnd
-      );
+  // One record per interaction, even when its entries arrive in separate callbacks
+  const tracker = createInteractionTracker();
+  const observer = new PerformanceObserver((list) => tracker.add(list.getEntries()));
+  observer.observe({ type: "event", durationThreshold: 0, buffered: true });
 
-      if (!byEventType[eventType]) {
-        byEventType[eventType] = {
+  // Interactions grouped by event type: "click", "keydown", "pointerdown", etc.
+  const groupByEventType = () => {
+    const byEventType = {};
+    for (const { name, duration, phases } of tracker.list()) {
+      if (!byEventType[name]) {
+        byEventType[name] = {
           count: 0,
           durations: [],
           inputDelays: [],
@@ -54,17 +106,15 @@
           presentationDelays: [],
         };
       }
-
-      const bucket = byEventType[eventType];
+      const bucket = byEventType[name];
       bucket.count++;
-      bucket.durations.push(entry.duration);
-      bucket.inputDelays.push(inputDelay);
-      bucket.processingTimes.push(processingTime);
-      bucket.presentationDelays.push(presentationDelay);
+      bucket.durations.push(duration);
+      bucket.inputDelays.push(phases.inputDelay);
+      bucket.processingTimes.push(phases.processingTime);
+      bucket.presentationDelays.push(phases.presentationDelay);
     }
-  });
-
-  observer.observe({ type: "event", durationThreshold: 0, buffered: true });
+    return byEventType;
+  };
 
   const p75 = (arr) => {
     const sorted = [...arr].sort((a, b) => a - b);
@@ -74,6 +124,7 @@
   };
 
   window.getInputLatencyBreakdown = () => {
+    const byEventType = groupByEventType();
     const types = Object.keys(byEventType);
 
     if (types.length === 0) {
@@ -101,7 +152,7 @@
       const p75InputDelay = p75(b.inputDelays);
       const p75Processing = p75(b.processingTimes);
       const p75Presentation = p75(b.presentationDelays);
-      const p75Sum = p75InputDelay + p75Processing + p75Presentation;
+      const p75Sum = p75InputDelay + p75Processing + p75Presentation || 1;
 
       const phases = [
         { name: "Input Delay", value: p75InputDelay },

package/snippets/Interaction/Interactions.js

@@ -2,6 +2,11 @@
 // https://webperf-snippets.net
 
 (() => {
+  if (!PerformanceObserver.supportedEntryTypes?.includes("event")) {
+    console.warn("⚠️ event entries are not supported in this browser.");
+    return { script: "Interactions", status: "unsupported", error: "event entries not supported in this browser" };
+  }
+
   const formatMs = (ms) => `${Math.round(ms)}ms`;
 
   // INP thresholds
@@ -20,45 +25,86 @@
     poor: "🔴",
   };
 
-  // Track all interactions for summary
-  const allInteractions = [];
-
-  const observer = new PerformanceObserver((list) => {
-    const interactions = {};
-
-    for (const entry of list
-      .getEntries()
-      .filter((entry) => entry.interactionId)) {
-      interactions[entry.interactionId] = interactions[entry.interactionId] || [];
-      interactions[entry.interactionId].push(entry);
-    }
+  // @shared createInteractionTracker
+  // Groups Event Timing entries by interactionId across observer callbacks, since the entries of one
+  // interaction (pointerdown, pointerup, click; keydown, keyup) can arrive in separate batches. Each
+  // interaction is measured over its entries painted in the frame of its longest one: Chrome rounds
+  // durations to 8 ms, and an event painted in an earlier frame, such as the keydown of a key held
+  // down, has its own timing. It is reported under the event whose handler ran longest, or under the
+  // click or keydown when no handler took a millisecond more than theirs.
+  function createInteractionTracker() {
+    const byId = new Map();
+    const processing = (e) => e.processingEnd - e.processingStart;
+    const measure = (id, entries) => {
+      const longest = entries.reduce((a, b) => (b.duration > a.duration ? b : a));
+      const paint = longest.startTime + longest.duration;
+      const frame = entries.filter((e) => Math.abs(e.startTime + e.duration - paint) <= 8);
+      const startTime = Math.min(...frame.map((e) => e.startTime));
+      const processingStart = Math.min(...frame.map((e) => e.processingStart));
+      const processingEnd = Math.max(...frame.map((e) => e.processingEnd));
+      const busiest = frame.reduce((a, b) => (processing(b) > processing(a) ? b : a));
+      const primary = frame.find((e) => e.name === "click" || e.name === "keydown");
+      const reported = primary && processing(busiest) - processing(primary) < 1 ? primary : busiest;
+      return {
+        interactionId: id,
+        name: reported.name,
+        target: reported.target ?? frame.find((e) => e.target)?.target ?? null,
+        startTime,
+        duration: longest.duration,
+        phases: {
+          inputDelay: processingStart - startTime,
+          processingTime: processingEnd - processingStart,
+          presentationDelay: Math.max(0, startTime + longest.duration - processingEnd),
+        },
+      };
+    };
+    return {
+      // Adds the entries of one observer callback and returns the interactions they changed
+      add(entries) {
+        const changed = new Set();
+        for (const e of entries) {
+          if (!e.interactionId) continue;
+          const record = byId.get(e.interactionId) ?? { entries: [] };
+          record.entries.push({
+            name: e.name,
+            target: e.target,
+            startTime: e.startTime,
+            duration: e.duration,
+            processingStart: e.processingStart,
+            processingEnd: e.processingEnd,
+          });
+          byId.set(e.interactionId, record);
+          changed.add(e.interactionId);
+        }
+        return [...changed].map((id) => {
+          const record = byId.get(id);
+          record.summary = measure(id, record.entries);
+          return record.summary;
+        });
+      },
+      list() {
+        return [...byId.values()].map((record) => record.summary);
+      },
+    };
+  }
+  // @end-shared createInteractionTracker
 
-    for (const interaction of Object.values(interactions)) {
-      const entry = interaction.reduce((prev, curr) =>
-        prev.duration >= curr.duration ? prev : curr
-      );
+  // One record per interaction for the summary, even when its entries arrive in separate callbacks
+  const tracker = createInteractionTracker();
+  const logged = new Set();
 
-      const value = entry.duration;
+  const observer = new PerformanceObserver((list) => {
+    for (const interaction of tracker.add(list.getEntries())) {
+      const value = interaction.duration;
       const rating = valueToRating(value);
       const icon = RATING_ICONS[rating];
       const color = RATING_COLORS[rating];
+      const updated = logged.has(interaction.interactionId);
+      logged.add(interaction.interactionId);
 
-      // Store for summary
-      allInteractions.push({
-        duration: value,
-        rating,
-        target: entry.target,
-        type: entry.name,
-      });
-
-      // Calculate sub-parts
-      const inputDelay = entry.processingStart - entry.startTime;
-      const processingTime = entry.processingEnd - entry.processingStart;
-      const presentationDelay = Math.max(
-        4,
-        entry.startTime + entry.duration - entry.processingEnd
-      );
-      const total = inputDelay + processingTime + presentationDelay;
+      // Sub-parts of the whole interaction
+      const { inputDelay, processingTime, presentationDelay } = interaction.phases;
+      const total = inputDelay + processingTime + presentationDelay || 1;
 
       // Find longest sub-part
       const subParts = [
@@ -69,13 +115,13 @@
       const longest = subParts.reduce((a, b) => (a.value > b.value ? a : b));
 
       console.groupCollapsed(
-        `%c${icon} Interaction: ${formatMs(value)} (${rating})`,
+        `%c${icon} Interaction${updated ? " (updated)" : ""}: ${formatMs(value)} (${rating})`,
         `font-weight: bold; color: ${color};`
       );
 
       // Target info
-      console.log("%cTarget:", "font-weight: bold;", entry.target);
-      console.log(`   Event type: ${entry.name}`);
+      console.log("%cTarget:", "font-weight: bold;", interaction.target);
+      console.log(`   Event type: ${interaction.name}`);
 
       // Sub-parts breakdown
       console.log("");
@@ -129,6 +175,12 @@
 
   // Summary function
   window.getInteractionSummary = () => {
+    const allInteractions = tracker.list().map((i) => ({
+      duration: i.duration,
+      rating: valueToRating(i.duration),
+      target: i.target,
+      type: i.name,
+    }));
     if (allInteractions.length === 0) {
       console.log("%c📊 No interactions recorded yet.", "font-weight: bold;");
       console.log("   Interact with the page (click, type, etc.) and call this again.");
@@ -149,11 +201,11 @@
     console.log("%cStatistics:", "font-weight: bold;");
     console.log(`   Total interactions: ${allInteractions.length}`);
     console.log(
-      `   Worst: %c${formatMs(worst)} (${worstRating})`,
+      `   Worst (approximates INP): %c${formatMs(worst)} (${worstRating})`,
       `color: ${RATING_COLORS[worstRating]};`
     );
     console.log(
-      `   P75 (INP): %c${formatMs(p75)} (${p75Rating})`,
+      `   P75: %c${formatMs(p75)} (${p75Rating})`,
       `color: ${RATING_COLORS[p75Rating]};`
     );
     console.log(`   Average: ${formatMs(avg)}`);

package/snippets/Interaction/Long-Animation-Frames.js

@@ -2,6 +2,22 @@
 // https://webperf-snippets.net
 
 (() => {
+  // Firefox and Safari have no Long Animation Frames: an empty list there is not a pass.
+  // The summary function answers the same, for an agent that calls it later.
+  if (!PerformanceObserver.supportedEntryTypes?.includes("long-animation-frame")) {
+    const unsupported = {
+      script: "Long-Animation-Frames",
+      status: "unsupported",
+      error: "long-animation-frame entries not supported in this browser (Chrome 123+)",
+    };
+    window.getLoAFSummary = () => unsupported;
+    console.log(
+      "%c⚠️ Long Animation Frames are not supported in this browser (Chrome 123+, Edge 123+)",
+      "color: #f59e0b; font-weight: bold;"
+    );
+    return unsupported;
+  }
+
   const formatMs = (ms) => `${Math.round(ms)}ms`;
 
   // Rating based on blocking duration
@@ -185,7 +201,10 @@
   });
 
   loafObserver.observe({ type: "long-animation-frame", buffered: true });
-  eventObserver.observe({ type: "event", buffered: true, durationThreshold: 16 });
+  // Events only add context to the frames, so the frames are tracked without them
+  if (PerformanceObserver.supportedEntryTypes.includes("event")) {
+    eventObserver.observe({ type: "event", buffered: true, durationThreshold: 16 });
+  }
 
   // Summary function
   window.getLoAFSummary = () => {

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

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

package/snippets/Loading/FCP.js

@@ -22,6 +22,17 @@
 
   const ms = (val) => `${Math.round(val)}ms`;
 
+  // @shared supportsRenderBlockingStatus
+  // renderBlockingStatus (Resource Timing) is Chromium-only (Chrome 107+). Without it, which
+  // resources block rendering is unknown: a snippet reports that, not "none".
+  function supportsRenderBlockingStatus() {
+    return !!window.PerformanceResourceTiming && "renderBlockingStatus" in window.PerformanceResourceTiming.prototype;
+  }
+  // @end-shared supportsRenderBlockingStatus
+
+  // Without it, the time after TTFB is not split into render-blocking load and render delay
+  const renderBlockingSupported = supportsRenderBlockingStatus();
+
   new PerformanceObserver((list) => {
     const fcpEntry = list.getEntriesByName("first-contentful-paint")[0];
     if (!fcpEntry) return;
@@ -54,6 +65,16 @@
     console.log("");
     console.log("%cPhase Breakdown:", "font-weight: bold;");
     console.log(`   TTFB:                  ${ms(ttfb)}`);
+    if (!renderBlockingSupported) {
+      console.log(`   Render-blocking load and render delay: ${ms(Math.max(0, fcpTime - ttfb))}`);
+      console.log("");
+      console.log(
+        "%cℹ️ renderBlockingStatus is not supported in this browser (Chrome 107+), so render-blocking resources cannot be identified",
+        "color: #3b82f6;"
+      );
+      console.groupEnd();
+      return;
+    }
     if (blockingResources.length > 0) {
       console.log(
         `   Render-blocking load:  ${ms(Math.max(0, lastBlockingEnd - ttfb))}`
@@ -103,18 +124,23 @@
   const ratingSync = valueToRating(fcpTimeSync);
 
   // Phases, measured from activation like the value: TTFB, then the wait for the last
-  // render-blocking resource, then the rest until the paint
+  // render-blocking resource, then the rest until the paint. Without renderBlockingStatus the
+  // two phases after TTFB are null, not 0 and the whole rest.
   const ttfbSync = Math.max(0, (navEntrySync?.responseStart ?? 0) - activationStartSync);
-  const blockingSync = performance
-    .getEntriesByType("resource").filter((e) => !isOwnRequest(e))
-    .filter((r) => r.renderBlockingStatus === "blocking");
+  const blockingSync = renderBlockingSupported
+    ? performance
+        .getEntriesByType("resource").filter((e) => !isOwnRequest(e))
+        .filter((r) => r.renderBlockingStatus === "blocking")
+    : [];
   const lastBlockingEndSync = Math.max(
     ttfbSync,
     ...blockingSync.map((r) => r.responseEnd - activationStartSync)
   );
   const ttfbMs = Math.round(ttfbSync);
-  const renderBlockingLoadMs = Math.round(lastBlockingEndSync - ttfbSync);
-  const renderDelayMs = Math.max(0, Math.round(fcpTimeSync) - ttfbMs - renderBlockingLoadMs);
+  const renderBlockingLoadMs = renderBlockingSupported ? Math.round(lastBlockingEndSync - ttfbSync) : null;
+  const renderDelayMs = renderBlockingSupported
+    ? Math.max(0, Math.round(fcpTimeSync) - ttfbMs - renderBlockingLoadMs)
+    : null;
 
   return {
     script: "FCP",
@@ -128,7 +154,8 @@
       ttfbMs,
       renderBlockingLoadMs,
       renderDelayMs,
-      blockingResourceCount: blockingSync.length,
+      blockingResourceCount: renderBlockingSupported ? blockingSync.length : null,
+      renderBlockingSupported,
     },
     // Render-blocking resources, the last to finish first (at most 50)
     items: [...blockingSync]

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

@@ -10,8 +10,17 @@
   }
   // @end-shared isOwnRequest
 
+  // @shared supportsRenderBlockingStatus
+  // renderBlockingStatus (Resource Timing) is Chromium-only (Chrome 107+). Without it, which
+  // resources block rendering is unknown: a snippet reports that, not "none".
+  function supportsRenderBlockingStatus() {
+    return !!window.PerformanceResourceTiming && "renderBlockingStatus" in window.PerformanceResourceTiming.prototype;
+  }
+  // @end-shared supportsRenderBlockingStatus
+
   // Domains that belong to the site but differ from the page's root domain, such as its own CDN.
-  // They count as first party. Example: const OWN_DOMAINS = ["bbci.co.uk", "bbc.co.uk"];
+  // They count as first party. Example, for a page on example.com whose CDN is example.net:
+  // const OWN_DOMAINS = ["example.net"];
   const OWN_DOMAINS = [];
 
   // Auto-detect first-party: same root domain (handles subdomains)
@@ -60,10 +69,32 @@
   }
   // @end-shared formatBytes
 
-  // Gather script data
-  const scripts = performance
+  // Without it, renderBlocking is null for every script instead of false
+  const renderBlockingSupported = supportsRenderBlockingStatus();
+
+  // A script fetched through <link rel="preload" as="script"> or <link rel="modulepreload"> has
+  // initiatorType "link" or "other", not "script", so its URL is matched against the document
+  const documentScriptUrls = new Set(
+    Array.from(
+      document.querySelectorAll('script[src], link[rel~="preload" i][as="script" i], link[rel~="modulepreload" i]'),
+      (el) => (el.localName === "link" ? el.href : el.src)
+    )
+  );
+  const isScript = (r) => r.initiatorType === "script" || documentScriptUrls.has(r.name);
+
+  // One entry per URL: a script preloaded in one mode and loaded in another is fetched twice, and
+  // the entry of the <script> is the one that tells whether it blocks rendering
+  const scriptEntries = new Map();
+  performance
     .getEntriesByType("resource").filter((e) => !isOwnRequest(e))
-    .filter((r) => r.initiatorType === "script")
+    .filter(isScript)
+    .forEach((r) => {
+      const seen = scriptEntries.get(r.name);
+      if (!seen || (seen.initiatorType !== "script" && r.initiatorType === "script")) scriptEntries.set(r.name, r);
+    });
+
+  // Gather script data
+  const scripts = [...scriptEntries.values()]
     .map((r) => {
       const url = new URL(r.name);
       const firstParty = isFirstParty(url.hostname);
@@ -79,7 +110,7 @@
         sizeKnown: r.transferSize > 0 || r.encodedBodySize > 0 || r.decodedBodySize > 0,
         startTime: r.startTime,
         responseEnd: r.responseEnd,
-        renderBlocking: r.renderBlockingStatus === "blocking",
+        renderBlocking: renderBlockingSupported ? r.renderBlockingStatus === "blocking" : null,
       };
     });
 
@@ -91,7 +122,7 @@
     count: list.length,
     totalSize: list.reduce((sum, s) => sum + s.transferSize, 0),
     totalDuration: list.reduce((sum, s) => sum + s.duration, 0),
-    blocking: list.filter((s) => s.renderBlocking).length,
+    blocking: renderBlockingSupported ? list.filter((s) => s.renderBlocking).length : null,
     hosts: [...new Set(list.map((s) => s.host))],
   });
 
@@ -129,7 +160,7 @@
     console.log("No first-party scripts found.");
   } else {
     console.log(`   Total size: ${formatBytes(firstMetrics.totalSize)}`);
-    console.log(`   Render-blocking: ${firstMetrics.blocking}`);
+    console.log(`   Render-blocking: ${firstMetrics.blocking ?? "n/a"}`);
     console.log("");
 
     const firstTable = firstParty
@@ -138,7 +169,7 @@
         Script: s.shortName,
         Size: formatBytes(s.transferSize),
         Duration: s.duration.toFixed(0) + "ms",
-        Blocking: s.renderBlocking ? "⚠️ Yes" : "No",
+        Blocking: s.renderBlocking === null ? "n/a" : s.renderBlocking ? "⚠️ Yes" : "No",
         Host: s.host,
       }));
     console.table(firstTable);
@@ -156,7 +187,7 @@
     console.log("%c✅ No third-party scripts found!", "color: #22c55e; font-weight: bold;");
   } else {
     console.log(`   Total size: ${formatBytes(thirdMetrics.totalSize)}`);
-    console.log(`   Render-blocking: ${thirdMetrics.blocking}`);
+    console.log(`   Render-blocking: ${thirdMetrics.blocking ?? "n/a"}`);
     console.log(`   Unique hosts: ${thirdMetrics.hosts.length}`);
     console.log("");
 
@@ -187,7 +218,7 @@
         Host: s.host,
         Size: formatBytes(s.transferSize),
         Duration: s.duration.toFixed(0) + "ms",
-        Blocking: s.renderBlocking ? "⚠️ Yes" : "No",
+        Blocking: s.renderBlocking === null ? "n/a" : s.renderBlocking ? "⚠️ Yes" : "No",
       }));
     console.table(thirdTable);
   }
@@ -221,7 +252,7 @@
       console.log("   • Each host requires DNS lookup + connection");
       console.log("   • Use <link rel='preconnect'> for critical hosts");
       console.log(
-        '%c   <link rel="preconnect" href="https://web.dev">',
+        '%c   <link rel="preconnect" href="https://example.com">',
         "font-family: monospace; color: #22c55e;",
       );
     }
@@ -247,6 +278,11 @@
     console.groupEnd();
   }
 
+  if (!renderBlockingSupported && totalScripts > 0) {
+    console.log("");
+    console.log("%cℹ️ renderBlockingStatus is not supported; render-blocking status is unavailable (Chrome 107+)", "color: #3b82f6;");
+  }
+
   logOwnDomainsHint(thirdParty.length);
   console.groupEnd();
 
@@ -272,6 +308,7 @@
       thirdPartyBlockingCount: thirdMetrics.blocking,
       thirdPartyHostCount: thirdMetrics.hosts.length,
       sizeUnknownCount: scripts.filter((s) => !s.sizeKnown).length,
+      renderBlockingSupported,
     },
     items: rankedScripts.slice(0, MAX_ITEMS).map((s) => ({
       shortName: s.shortName,
@@ -286,6 +323,9 @@
       ...(scripts.some((s) => !s.sizeKnown)
         ? [{ severity: "info", message: `${scripts.filter((s) => !s.sizeKnown).length} script(s) have an unknown size (missing Timing-Allow-Origin); size totals are a lower bound` }]
         : []),
+      ...(!renderBlockingSupported && totalScripts > 0
+        ? [{ severity: "info", message: "renderBlockingStatus is not supported in this browser (Chrome 107+), so which scripts block rendering is unknown; run the snippet in Chrome or Edge to check" }]
+        : []),
       ...(thirdMetrics.blocking > 0
         ? [
             {

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

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

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

@@ -3,7 +3,8 @@
 
 (() => {
   // Domains that belong to the site but differ from the page's root domain, such as its own CDN.
-  // They count as first party. Example: const OWN_DOMAINS = ["bbci.co.uk", "bbc.co.uk"];
+  // They count as first party. Example, for a page on example.com whose CDN is example.net:
+  // const OWN_DOMAINS = ["example.net"];
   const OWN_DOMAINS = [];
 
   // Helper to extract font filename from URL