webperf-snippets 0.1.0 → 0.3.0

package/snippets/Loading/Script-Loading.js

@@ -2,33 +2,44 @@
 // https://webperf-snippets.nucliweb.net
 
 (() => {
-  const formatBytes = (bytes) => {
-    if (!bytes || bytes === 0) return "-";
-    const k = 1024;
-    const sizes = ["B", "KB", "MB"];
-    const i = Math.floor(Math.log(bytes) / Math.log(k));
-    return (bytes / Math.pow(k, i)).toFixed(1) + " " + sizes[i];
-  };
+  // @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
 
   const formatMs = (ms) => (ms > 0 ? ms.toFixed(0) + "ms" : "-");
 
-  // Get current page's root domain for first/third party detection
-  const getRootDomain = (hostname) => {
-    const parts = hostname.split(".");
-    if (parts.length > 2) {
-      const sld = parts[parts.length - 2];
-      if (["co", "com", "org", "net", "gov", "edu"].includes(sld) && sld.length <= 3) {
-        return parts.slice(-3).join(".");
-      }
-      return parts.slice(-2).join(".");
-    }
-    return hostname;
-  };
+  // @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 currentDomain = getRootDomain(location.hostname);
-  const isFirstParty = (url) => {
+  // A script whose URL cannot be parsed counts as first party
+  const isFirstPartyUrl = (url) => {
     try {
-      return getRootDomain(new URL(url).hostname) === currentDomain;
+      return isFirstParty(new URL(url).hostname);
     } catch {
       return true;
     }
@@ -40,6 +51,8 @@
     if (r.initiatorType === "script") {
       resourceTiming.set(r.name, {
         size: r.transferSize || 0,
+        // Cross-origin scripts without Timing-Allow-Origin report every size as 0
+        sizeKnown: r.transferSize > 0 || r.encodedBodySize > 0 || r.decodedBodySize > 0,
         duration: r.duration,
         startTime: r.startTime,
       });
@@ -74,7 +87,7 @@
     }
 
     const isBlocking = strategy === "blocking";
-    const firstParty = isFirstParty(src);
+    const firstParty = isFirstPartyUrl(src);
 
     return {
       src,
@@ -87,6 +100,7 @@
       isAsync,
       isDefer,
       size: timing.size || 0,
+      sizeKnown: !!timing.sizeKnown,
       duration: timing.duration || 0,
       startTime: timing.startTime || 0,
       element: script,
@@ -299,13 +313,23 @@
 
   const agentRating = blockingInHead.length === 0 ? "good" :
     (blockingInHead.length <= 2 && thirdPartyBlocking.length === 0) ? "needs-improvement" : "poor";
+  // 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
+  const MAX_ITEMS = 50;
+  const rankedScripts = [...scripts].sort(
+    (a, b) =>
+      Number(b.isBlocking) - Number(a.isBlocking) ||
+      Number(a.firstParty) - Number(b.firstParty) ||
+      b.size - a.size
+  );
   return {
     script: "Script-Loading",
     status: "ok",
     count: scripts.length,
+    corsLimitedAnalysis: scripts.some((s) => !s.sizeKnown),
     rating: agentRating,
     details: {
       totalSizeBytes: totalSize,
+      sizeUnknownCount: scripts.filter((s) => !s.sizeKnown).length,
       byStrategy: {
         blocking: blocking.length,
         async: asyncScripts.length,
@@ -318,15 +342,21 @@
       },
       thirdPartyBlockingCount: thirdPartyBlocking.length,
     },
-    items: scripts.map((s) => ({
+    items: rankedScripts.slice(0, MAX_ITEMS).map((s) => ({
       url: s.src,
       shortName: s.shortSrc,
       strategy: s.strategy,
       location: s.inHead ? "head" : "body",
       party: s.firstParty ? "first" : "third",
       sizeBytes: s.size,
+      sizeKnown: s.sizeKnown,
       durationMs: Math.round(s.duration),
     })),
-    issues: issues.map((i) => ({ severity: i.severity, message: i.message })),
+    issues: [
+      ...issues.map((i) => ({ severity: i.severity, message: i.message })),
+      ...(scripts.some((s) => !s.sizeKnown)
+        ? [{ severity: "info", message: `${scripts.filter((s) => !s.sizeKnown).length} script(s) have an unknown size (missing Timing-Allow-Origin); total size is a lower bound` }]
+        : []),
+    ],
   };
 })();

package/snippets/Loading/Server-Timing-Early-Hints.js

@@ -0,0 +1,126 @@
+// Server-Timing & Early Hints Viewer
+// https://webperf-snippets.nucliweb.net
+
+(() => {
+  const SCRIPT = "Server-Timing-Early-Hints";
+  const MAX_ITEMS = 50;
+
+  const [nav] = performance.getEntriesByType("navigation");
+  if (!nav) {
+    return { script: SCRIPT, status: "error", error: "No navigation entry available" };
+  }
+  if (!Array.isArray(nav.serverTiming)) {
+    return {
+      script: SCRIPT,
+      status: "unsupported",
+      error: "Server-Timing entries are not supported in this browser",
+    };
+  }
+
+  const round = (n) => Math.round(n * 100) / 100;
+  // Times are relative to the time origin; a prerendered page starts at activationStart
+  const activationStart = Math.max(0, nav.activationStart ?? 0);
+  const rel = (t) => (t > 0 ? round(Math.max(0, t - activationStart)) : 0);
+
+  const toItem = (entry, source, url) => ({
+    source,
+    url,
+    name: entry.name,
+    durationMs: round(entry.duration || 0),
+    description: entry.description || "",
+  });
+
+  // Server-Timing entries of the document
+  const all = nav.serverTiming.map((m) => toItem(m, "navigation", location.href));
+
+  // Server-Timing entries of the resources. A cross-origin response without
+  // Timing-Allow-Origin exposes no Server-Timing and reports zero for every size, so it is
+  // counted as unreadable instead of being treated as a resource with no metrics.
+  let resourcesWithServerTiming = 0;
+  let corsRestrictedCount = 0;
+  for (const r of performance.getEntriesByType("resource")) {
+    if (r.serverTiming.length > 0) {
+      resourcesWithServerTiming++;
+      for (const m of r.serverTiming) all.push(toItem(m, "resource", r.name));
+      continue;
+    }
+    let crossOrigin = false;
+    try {
+      crossOrigin = new URL(r.name).origin !== location.origin;
+    } catch {
+      // Not a valid URL; treat as same-origin
+    }
+    if (crossOrigin && r.transferSize === 0 && r.encodedBodySize === 0 && r.decodedBodySize === 0) {
+      corsRestrictedCount++;
+    }
+  }
+
+  all.sort((a, b) => b.durationMs - a.durationMs);
+  const items = all.slice(0, MAX_ITEMS);
+
+  // 103 Early Hints. firstInterimResponseStart is 0 when the server sent no interim
+  // response, or when the browser did not expose it (Early Hints needs HTTP/2 or later).
+  const firstInterim = rel(nav.firstInterimResponseStart ?? 0);
+  const finalHeaders = rel(nav.finalResponseHeadersStart ?? nav.responseStart);
+  const earlyHintsReceived = firstInterim > 0;
+  const navigation = {
+    responseStartMs: rel(nav.responseStart),
+    firstInterimResponseStartMs: firstInterim,
+    finalResponseHeadersStartMs: finalHeaders,
+    earlyHintsReceived,
+    earlyHintsLeadMs: earlyHintsReceived ? round(Math.max(0, finalHeaders - firstInterim)) : 0,
+    serverTimingCount: nav.serverTiming.length,
+  };
+
+  const issues = [];
+  if (nav.serverTiming.length === 0) {
+    issues.push({
+      severity: "info",
+      message:
+        "The document response sends no Server-Timing header. Add one, for example Server-Timing: db;dur=53, to expose backend timings in DevTools and in the Performance API.",
+    });
+  }
+  if (corsRestrictedCount > 0) {
+    issues.push({
+      severity: "info",
+      message: `${corsRestrictedCount} cross-origin resource(s) hide their timing because they lack Timing-Allow-Origin, so their Server-Timing cannot be read. Add Timing-Allow-Origin to expose it.`,
+    });
+  }
+  if (!earlyHintsReceived) {
+    issues.push({
+      severity: "info",
+      message:
+        "No 103 Early Hints response was observed for the document. If the server can send Link preload or preconnect headers before the final response, Early Hints lets the browser start those fetches earlier.",
+    });
+  }
+
+  // Human output
+  console.group("%cServer-Timing & Early Hints", "font-weight: bold; font-size: 14px;");
+  console.log(
+    `Document: ${nav.serverTiming.length} Server-Timing metric(s); resources with Server-Timing: ${resourcesWithServerTiming}`
+  );
+  console.log(
+    earlyHintsReceived
+      ? `103 Early Hints at ${firstInterim} ms, final headers at ${finalHeaders} ms (${navigation.earlyHintsLeadMs} ms lead)`
+      : `No 103 Early Hints observed; final headers at ${finalHeaders} ms`
+  );
+  if (corsRestrictedCount > 0) {
+    console.log(`${corsRestrictedCount} cross-origin resource(s) unreadable (no Timing-Allow-Origin)`);
+  }
+  if (items.length > 0) console.table(items);
+  console.groupEnd();
+
+  return {
+    script: SCRIPT,
+    status: "ok",
+    count: all.length,
+    corsLimitedAnalysis: corsRestrictedCount > 0,
+    details: {
+      navigation,
+      resourcesWithServerTiming,
+      corsRestrictedCount,
+    },
+    items,
+    issues,
+  };
+})();

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,
+  };
 })();