webperf-snippets 0.2.0 → 0.4.0

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

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

package/snippets/Loading/Resource-Hints.js

@@ -2,13 +2,15 @@
 // 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
 
   // Resource hint definitions
   const hintTypes = [
@@ -171,6 +173,8 @@
 
   // Get third-party origins that could benefit from preconnect
   const thirdPartyOrigins = new Map();
+  // Third-party resources without Timing-Allow-Origin report every size as 0
+  let sizeUnknownCount = 0;
   loadedResources.forEach((r) => {
     try {
       const url = new URL(r.name);
@@ -181,6 +185,7 @@
         const data = thirdPartyOrigins.get(url.origin);
         data.count++;
         data.size += r.transferSize || 0;
+        if (r.transferSize === 0 && r.encodedBodySize === 0 && r.decodedBodySize === 0 && r.duration > 0) sizeUnknownCount++;
         data.types.add(r.initiatorType);
       }
     } catch {}
@@ -386,15 +391,31 @@
 
   console.groupEnd();
 
+  // The list keeps 50 hints: those with an error or a warning first, then in document order; count and details cover all of them
+  const MAX_ITEMS = 50;
+  const hintRank = (h) => (issues.some((i) => i.hint === h && i.severity === "error") ? 0 : issues.some((i) => i.hint === h) ? 1 : 2);
+  const rankedHints = allHints
+    .map((h, index) => ({ h, index }))
+    .sort((a, b) => hintRank(a.h) - hintRank(b.h) || a.index - b.index)
+    .map(({ h }) => h);
   return {
     script: "Resource-Hints",
     status: "ok",
     count: allHints.length,
+    corsLimitedAnalysis: sizeUnknownCount > 0,
     details: {
+      sizeUnknownCount,
       byType: Object.fromEntries(hintTypes.map(t => [t.rel, allHints.filter(h => h.rel === t.rel).length])),
       missingPreconnectsCount: missingPreconnects.length,
+      missingPreconnects: missingPreconnects.slice(0, 20).map((o) => ({
+        origin: o.origin,
+        requestCount: o.count,
+        sizeBytes: o.size,
+        resourceTypes: Array.from(o.types),
+        recommendedHint: "preconnect",
+      })),
     },
-    items: allHints.map(h => ({ rel: h.rel, href: h.shortHref, as: h.as, crossorigin: h.crossorigin, fetchpriority: h.fetchpriority })),
+    items: rankedHints.slice(0, MAX_ITEMS).map(h => ({ rel: h.rel, href: h.shortHref, as: h.as, crossorigin: h.crossorigin, fetchpriority: h.fetchpriority })),
     issues: issues.map(i => ({ severity: i.severity, message: `${i.hint.rel}: ${i.issue}. Fix: ${i.fix}` })),
   };
 })();

package/snippets/Loading/SSR-Hydration-Data-Analysis.js

@@ -2,13 +2,15 @@
 // https://webperf-snippets.nucliweb.net
 
 (() => {
-  const formatBytes = (bytes) => {
+  // @shared formatBytes
+  function formatBytes(bytes) {
+    if (bytes === null || bytes === undefined || Number.isNaN(bytes)) return "-";
     if (bytes === 0) return "0 B";
-    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(2) + " " + sizes[i];
-  };
+    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
 
   // Framework detection patterns
   const frameworks = [
@@ -168,8 +170,18 @@
   console.log(`   Total hydration data: ${formatBytes(totalHydrationSize)}`);
   console.log(`   Other inline scripts: ${formatBytes(otherSize)}`);
 
+  // Structured findings for the return value
+  const itemsData = [];
+  const issuesData = [];
+
   // Detailed analysis for each framework
   detected.forEach((fw) => {
+    if (fw.exceedsThreshold) {
+      issuesData.push({
+        severity: "warning",
+        message: `${fw.name} hydration data (${Math.round(fw.size / 1024)} KB) exceeds ${Math.round(fw.threshold / 1024)} KB threshold`,
+      });
+    }
     console.log("");
     console.group(
       `%c${fw.exceedsThreshold ? "🔴" : "🟢"} ${fw.name} Analysis`,
@@ -256,6 +268,46 @@
             );
           }
 
+          // Key paths that look sensitive. Only keys are checked: a value that contains
+          // the word "token" is not a sign of leaked data.
+          const sensitiveKeys = [];
+          const findSensitiveKeys = (obj, path, depth) => {
+            if (typeof obj !== "object" || obj === null || depth > 4) return;
+            for (const key of Object.keys(obj)) {
+              const fullPath = path ? `${path}.${key}` : key;
+              if (sensitivePatterns.test(key)) sensitiveKeys.push(fullPath);
+              findSensitiveKeys(obj[key], fullPath, depth + 1);
+            }
+          };
+          findSensitiveKeys(pageProps, "", 0);
+
+          propsKeys.forEach((key) => {
+            const flags = [];
+            if (largeArrays.includes(key)) flags.push("large-array");
+            if (checkDepth(pageProps[key])) flags.push("deeply-nested");
+            if (sensitiveKeys.some((k) => k === key || k.startsWith(`${key}.`))) flags.push("sensitive-key");
+            itemsData.push({
+              framework: "Next.js",
+              kind: "prop",
+              name: key,
+              sizeBytes: new Blob([JSON.stringify(pageProps[key])]).size,
+              flags,
+              detail: null,
+            });
+          });
+          if (largeArrays.length > 0) {
+            issuesData.push({ severity: "warning", message: `pageProps has large arrays (${largeArrays.join(", ")}). Consider pagination.` });
+          }
+          if (checkDepth(pageProps)) {
+            issuesData.push({ severity: "warning", message: "pageProps contains deeply nested data (more than 5 levels)." });
+          }
+          if (sensitiveKeys.length > 0) {
+            issuesData.push({
+              severity: "warning",
+              message: `pageProps has keys that look sensitive (${sensitiveKeys.slice(0, 5).join(", ")}). Everything in pageProps is sent to every visitor.`,
+            });
+          }
+
           if (
             largeArrays.length === 0 &&
             !checkDepth(pageProps) &&
@@ -293,6 +345,21 @@
         };
       });
       console.table(islandTable);
+
+      fw.elements.forEach((island) => {
+        const props = island.getAttribute("props");
+        itemsData.push({
+          framework: "Astro",
+          kind: "island",
+          name: island.getAttribute("component-url")?.split("/").pop() || "Unknown",
+          sizeBytes: props ? new Blob([props]).size : 0,
+          flags: [],
+          detail:
+            island.getAttribute("client") ||
+            Array.from(island.attributes).find((a) => a.name.startsWith("client:"))?.name.replace("client:", "") ||
+            "unknown",
+        });
+      });
     }
 
     // Element reference
@@ -357,8 +424,10 @@
       totalHydrationBytes: totalHydrationSize,
       otherInlineBytes: otherSize,
       hasExceedingThreshold: detected.some(d => d.exceedsThreshold),
+      frameworks: detected.map(fw => ({ name: fw.name, sizeBytes: fw.size, thresholdBytes: fw.threshold, exceedsThreshold: fw.exceedsThreshold })),
     },
-    items: detected.map(fw => ({ name: fw.name, sizeBytes: fw.size, thresholdBytes: fw.threshold, exceedsThreshold: fw.exceedsThreshold })),
-    issues: detected.filter(fw => fw.exceedsThreshold).map(fw => ({ severity: "warning", message: `${fw.name} hydration data (${Math.round(fw.size / 1024)} KB) exceeds ${Math.round(fw.threshold / 1024)} KB threshold` })),
+    // Props and islands, the biggest first (at most 30)
+    items: itemsData.sort((a, b) => b.sizeBytes - a.sizeBytes).slice(0, 30),
+    issues: issuesData,
   };
 })();

package/snippets/Loading/Script-Loading.js

@@ -2,33 +2,61 @@
 // 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];
-  };
+  // 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
 
   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(".");
+  // @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;"
+      );
     }
-    return hostname;
-  };
+  }
+  // @end-shared logOwnDomainsHint
 
-  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 +68,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 +104,7 @@
     }
 
     const isBlocking = strategy === "blocking";
-    const firstParty = isFirstParty(src);
+    const firstParty = isFirstPartyUrl(src);
 
     return {
       src,
@@ -87,6 +117,7 @@
       isAsync,
       isDefer,
       size: timing.size || 0,
+      sizeKnown: !!timing.sizeKnown,
       duration: timing.duration || 0,
       startTime: timing.startTime || 0,
       element: script,
@@ -293,19 +324,30 @@
   console.log("");
   console.log("%cFor critical inline scripts:", "font-weight: bold;");
   console.log('%c<script>/* Only essential initialization */</script>', "font-family: monospace; color: #22c55e;");
+  logOwnDomainsHint(thirdPartyScripts.length);
   console.groupEnd();
 
   console.groupEnd();
 
   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 +360,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,
+  };
+})();