webperf-snippets 0.2.0 → 0.4.0

package/snippets/Loading/Service-Worker-Analysis.js

@@ -7,7 +7,15 @@
       '%c⚠️ Service Workers not supported in this browser',
       'color: #f59e0b; font-weight: bold;'
     );
-    return;
+    return {
+      script: "Service-Worker-Analysis",
+      status: "unsupported",
+      error: "Service Workers not supported in this browser",
+      count: 0,
+      details: {},
+      items: [],
+      issues: [{ severity: "error", message: "Service Workers not supported in this browser" }],
+    };
   }
 
   const registrations = await navigator.serviceWorker.getRegistrations();
@@ -17,10 +25,152 @@
 
   // Resources intercepted by SW (workerStart > 0)
   const swResources = resources.filter((r) => r.workerStart > 0);
-  const fromCache = swResources.filter((r) => r.transferSize === 0);
+  // transferSize 0 with a body means served from cache. With no body size either, the
+  // resource is cross-origin without Timing-Allow-Origin and its source is unknown.
+  const fromCache = swResources.filter((r) => r.transferSize === 0 && r.encodedBodySize > 0);
   const fromNetwork = swResources.filter((r) => r.transferSize > 0);
+  const unknownSource = swResources.filter((r) => r.transferSize === 0 && r.encodedBodySize === 0);
+  const knownSource = fromCache.length + fromNetwork.length;
   const notIntercepted = resources.filter((r) => r.workerStart === 0);
 
+  // SW Startup overhead
+  let swOverheadMs = null;
+  if (navEntry && navEntry.workerStart > 0) {
+    const workerStart = navEntry.workerStart - navEntry.startTime;
+    const fetchStart = navEntry.fetchStart - navEntry.startTime;
+    swOverheadMs = Math.round(Math.max(fetchStart - workerStart, 0) * 10) / 10;
+  }
+
+  // Cache hit rate
+  // Computed over the resources whose source is known
+  const cacheHitRate = knownSource > 0
+    ? parseFloat(((fromCache.length / knownSource) * 100).toFixed(1))
+    : null;
+  const savedBytes = fromCache.reduce((sum, r) => sum + (r.encodedBodySize || 0), 0);
+
+  // Navigation preload states (collected once, reused in console output and return)
+  const preloadStates = new Map();
+  for (const reg of registrations) {
+    if (reg.navigationPreload) {
+      try {
+        const state = await reg.navigationPreload.getState();
+        preloadStates.set(reg, state);
+      } catch {
+        // Access may be restricted
+      }
+    }
+  }
+
+  // Cache Storage inventory
+  const cacheStorage = [];
+  if ('caches' in window) {
+    try {
+      const cacheNames = await caches.keys();
+      for (const name of cacheNames) {
+        const cache = await caches.open(name);
+        const keys = await cache.keys();
+        cacheStorage.push({ name, entries: keys.length });
+      }
+    } catch {
+      // Cross-origin restrictions may prevent cache access
+    }
+  }
+
+  const cacheStorageTop = [...cacheStorage].sort((a, b) => b.entries - a.entries).slice(0, 20);
+
+  // Build registration items (homogeneous shape)
+  const items = registrations.map((reg) => {
+    const preload = preloadStates.get(reg) || null;
+    let state = "none";
+    let scriptURL = null;
+    if (reg.active) {
+      state = "active";
+      scriptURL = reg.active.scriptURL;
+    } else if (reg.waiting) {
+      state = "waiting";
+      scriptURL = reg.waiting.scriptURL;
+    } else if (reg.installing) {
+      state = "installing";
+      scriptURL = reg.installing.scriptURL;
+    }
+    return {
+      scope: reg.scope,
+      scriptURL,
+      state,
+      hasWaiting: !!reg.waiting,
+      hasInstalling: !!reg.installing,
+      navigationPreloadEnabled: preload ? preload.enabled : null,
+      navigationPreloadHeaderValue: preload?.headerValue || null,
+    };
+  });
+
+  // Build issues
+  const issues = [];
+
+  if (registrations.length === 0) {
+    issues.push({ severity: "info", message: "No Service Workers registered" });
+  }
+
+  if (registrations.length > 0 && !controller) {
+    issues.push({
+      severity: "warning",
+      message: "Page is not controlled by a Service Worker (hard reload or first visit). Do a normal reload.",
+    });
+  }
+
+  for (const item of items) {
+    if (item.hasWaiting) {
+      issues.push({
+        severity: "warning",
+        message: `Service Worker update pending for ${item.scope}. Call skipWaiting() to activate the new version.`,
+      });
+    }
+    if (item.navigationPreloadEnabled === false) {
+      issues.push({
+        severity: "info",
+        message: `Navigation Preload is disabled for ${item.scope}. Consider enabling it with registration.navigationPreload.enable().`,
+      });
+    }
+  }
+
+  if (swOverheadMs !== null && swOverheadMs > 100) {
+    issues.push({
+      severity: "error",
+      message: `High SW startup time (${swOverheadMs}ms). Enable Navigation Preload to reduce overhead.`,
+    });
+  } else if (swOverheadMs !== null && swOverheadMs > 50) {
+    issues.push({
+      severity: "warning",
+      message: `Moderate SW startup time (${swOverheadMs}ms)`,
+    });
+  }
+
+  if (cacheHitRate !== null && cacheHitRate < 50) {
+    issues.push({
+      severity: "error",
+      message: `Low SW cache hit rate (${cacheHitRate}%). Review the caching strategy.`,
+    });
+  } else if (cacheHitRate !== null && cacheHitRate < 80) {
+    issues.push({
+      severity: "warning",
+      message: `Moderate SW cache hit rate (${cacheHitRate}%). Review the caching strategy for more resources.`,
+    });
+  }
+
+  if (unknownSource.length > 0) {
+    issues.push({
+      severity: "info",
+      message: `${unknownSource.length} intercepted resource(s) are cross-origin without Timing-Allow-Origin, so their source is unknown. The hit rate excludes them.`,
+    });
+  }
+
+  const rating = cacheHitRate === null ? null
+    : cacheHitRate >= 80 ? "good"
+    : cacheHitRate >= 50 ? "needs-improvement"
+    : "poor";
+
+  // --- Console output ---
+
   console.group(
     '%c⚙️ Service Worker Analysis',
     'font-weight: bold; font-size: 14px;'
@@ -33,7 +183,28 @@
   if (registrations.length === 0) {
     console.log('%c   ❌ No Service Workers registered', 'color: #ef4444;');
     console.groupEnd();
-    return;
+    return {
+      script: "Service-Worker-Analysis",
+      status: "ok",
+      count: 0,
+      details: {
+        controlled: false,
+        controllerState: null,
+        swOverheadMs: null,
+        totalResources: resources.length,
+        swIntercepted: 0,
+        notIntercepted: resources.length,
+        fromCache: 0,
+        fromNetwork: 0,
+        fromUnknown: 0,
+        cacheHitRate: null,
+        savedBytes: 0,
+        cacheStorageCount: cacheStorage.length,
+        cacheStorage: cacheStorageTop,
+      },
+      items: [],
+      issues,
+    };
   }
 
   for (const reg of registrations) {
@@ -61,23 +232,18 @@
       console.log('%c   🔄 Installing...', 'color: #3b82f6;');
     }
 
-    // Navigation Preload
-    if (reg.navigationPreload) {
-      try {
-        const preload = await reg.navigationPreload.getState();
-        console.log('');
-        console.log('%c   🚀 Navigation Preload:', 'font-weight: bold;');
-        if (preload.enabled) {
-          console.log('%c      ✅ Enabled', 'color: #22c55e;');
-          console.log(`      Header value: "${preload.headerValue}"`);
-        } else {
-          console.log('%c      ❌ Disabled', 'color: #ef4444;');
-          console.log(
-            '      💡 Enable with: registration.navigationPreload.enable()'
-          );
-        }
-      } catch {
-        // Access may be restricted
+    const preload = preloadStates.get(reg);
+    if (preload !== undefined) {
+      console.log('');
+      console.log('%c   🚀 Navigation Preload:', 'font-weight: bold;');
+      if (preload.enabled) {
+        console.log('%c      ✅ Enabled', 'color: #22c55e;');
+        console.log(`      Header value: "${preload.headerValue}"`);
+      } else {
+        console.log('%c      ❌ Disabled', 'color: #ef4444;');
+        console.log(
+          '      💡 Enable with: registration.navigationPreload.enable()'
+        );
       }
     }
   }
@@ -97,20 +263,19 @@
   if (navEntry && navEntry.workerStart > 0) {
     const workerStart = navEntry.workerStart - navEntry.startTime;
     const fetchStart = navEntry.fetchStart - navEntry.startTime;
-    const swOverhead = Math.max(fetchStart - workerStart, 0);
 
     console.log('');
     console.log('%c⏱️ SW Startup Overhead:', 'font-weight: bold;');
     console.log(`   Worker start:  ${workerStart.toFixed(1)}ms`);
     console.log(`   Fetch start:   ${fetchStart.toFixed(1)}ms`);
-    console.log(`   SW overhead:   ${swOverhead.toFixed(1)}ms`);
+    console.log(`   SW overhead:   ${swOverheadMs.toFixed(1)}ms`);
 
-    if (swOverhead > 100) {
+    if (swOverheadMs > 100) {
       console.log(
         '%c   🔴 High SW startup time — enable Navigation Preload',
         'color: #ef4444;'
       );
-    } else if (swOverhead > 50) {
+    } else if (swOverheadMs > 50) {
       console.log(
         '%c   🟡 Moderate SW startup time',
         'color: #f59e0b;'
@@ -131,21 +296,18 @@
   console.log(`   Not intercepted:     ${notIntercepted.length}`);
 
   if (swResources.length > 0) {
-    const hitRate = ((fromCache.length / swResources.length) * 100).toFixed(1);
-    const savedKB = (
-      fromCache.reduce((sum, r) => sum + (r.encodedBodySize || 0), 0) / 1024
-    ).toFixed(1);
-
     console.log('');
     console.log('   SW-intercepted breakdown:');
-    console.log(`   ├─ Served from cache:   ${fromCache.length} (${hitRate}% hit rate)`);
-    console.log(`   └─ Fetched from network: ${fromNetwork.length}`);
-    console.log(`   Network bytes saved: ~${savedKB} KB`);
+    console.log(`   ├─ Served from cache:   ${fromCache.length} (${cacheHitRate ?? 0}% hit rate)`);
+    console.log(`   ${unknownSource.length > 0 ? '├' : '└'}─ Fetched from network: ${fromNetwork.length}`);
+    if (unknownSource.length > 0) {
+      console.log(`   └─ Unknown source:      ${unknownSource.length} (cross-origin, missing Timing-Allow-Origin)`);
+    }
+    console.log(`   Network bytes saved: ~${(savedBytes / 1024).toFixed(1)} KB`);
 
-    const rate = parseFloat(hitRate);
-    if (rate >= 80) {
+    if (cacheHitRate >= 80) {
       console.log('%c   🟢 Excellent cache hit rate', 'color: #22c55e;');
-    } else if (rate >= 50) {
+    } else if (cacheHitRate >= 50) {
       console.log('%c   🟡 Good cache hit rate', 'color: #f59e0b;');
     } else {
       console.log(
@@ -158,7 +320,7 @@
     console.log('%c📋 SW-intercepted Resources (top 20):', 'font-weight: bold;');
     console.table(
       swResources.slice(0, 20).map((r) => ({
-        'Cache': r.transferSize === 0 ? '✅ Cache' : '🌐 Network',
+        'Cache': r.transferSize > 0 ? '🌐 Network' : r.encodedBodySize > 0 ? '✅ Cache' : '❓ Unknown',
         'Transfer (KB)': r.transferSize > 0 ? (r.transferSize / 1024).toFixed(1) : '0',
         'Duration (ms)': r.duration.toFixed(0),
         'Type': r.initiatorType,
@@ -168,25 +330,39 @@
   }
 
   // Cache Storage inventory
-  if ('caches' in window) {
-    try {
-      const cacheNames = await caches.keys();
-      if (cacheNames.length > 0) {
-        console.log('');
-        console.log('%c💾 Cache Storage:', 'font-weight: bold;');
-        let totalEntries = 0;
-        for (const name of cacheNames) {
-          const cache = await caches.open(name);
-          const keys = await cache.keys();
-          totalEntries += keys.length;
-          console.log(`   ├─ "${name}": ${keys.length} entries`);
-        }
-        console.log(`   Total entries: ${totalEntries}`);
-      }
-    } catch {
-      // Cross-origin restrictions may prevent cache access
+  if (cacheStorage.length > 0) {
+    const totalCacheEntries = cacheStorage.reduce((sum, c) => sum + c.entries, 0);
+    console.log('');
+    console.log('%c💾 Cache Storage:', 'font-weight: bold;');
+    for (const { name, entries } of cacheStorage) {
+      console.log(`   ├─ "${name}": ${entries} entries`);
     }
+    console.log(`   Total entries: ${totalCacheEntries}`);
   }
 
   console.groupEnd();
+
+  return {
+    script: "Service-Worker-Analysis",
+    status: "ok",
+    count: registrations.length,
+    ...(rating !== null && { rating }),
+    details: {
+      controlled: !!controller,
+      controllerState: controller?.state || null,
+      swOverheadMs,
+      totalResources: resources.length,
+      swIntercepted: swResources.length,
+      notIntercepted: notIntercepted.length,
+      fromCache: fromCache.length,
+      fromNetwork: fromNetwork.length,
+      fromUnknown: unknownSource.length,
+      cacheHitRate,
+      savedBytes,
+      cacheStorageCount: cacheStorage.length,
+      cacheStorage: cacheStorageTop,
+    },
+    items,
+    issues,
+  };
 })();

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,69 @@
 // 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.
+  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) {
+    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);
+    } 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 +96,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;");
   }
@@ -75,6 +130,7 @@
     });
   }
 
+  logOwnDomainsHint(thirdPartyCount);
   console.groupEnd();
   }).observe({
     type: "resource",
@@ -82,34 +138,46 @@
   });
 
   // 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" };
+    // 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
+  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 },