webperf-snippets 0.2.0 → 0.3.0

package/snippets/Loading/CSS-Media-Queries-Analysis.js

@@ -54,13 +54,15 @@ async function analyzeCSSMediaQueries(minWidth = 768) {
   }
 
   // Helper to format bytes
+  // @shared formatBytes
   function formatBytes(bytes) {
-    if (bytes === 0) return "0 Bytes";
-    const k = 1024;
-    const sizes = ["Bytes", "KB", "MB"];
-    const i = Math.floor(Math.log(bytes) / Math.log(k));
-    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
+    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
 
   // Parse CSS text to find @media rules
   function parseMediaQueriesFromCSS(cssText, source, isInline) {
@@ -254,8 +256,60 @@ async function analyzeCSSMediaQueries(minWidth = 768) {
 // CSS Performance Impact Analyzer
 // Estimates the real-world performance cost of unnecessary CSS on mobile devices
 
+// Device profiles based on real Chrome UX Report data. A function, not a top-level const, so
+// the snippet can be run again in the same console.
+function getDeviceProfiles() {
+  return {
+    "High-end (Pixel 7, iPhone 14)": {
+      cssParsingSpeed: 1.5, // MB/s
+      cssSelectorMatchingMultiplier: 1.0,
+      networkSpeed: 10, // Mbps (4G LTE)
+      description: "Top 25% devices",
+    },
+    "Mid-range (Moto G Power, iPhone SE)": {
+      cssParsingSpeed: 0.8, // MB/s
+      cssSelectorMatchingMultiplier: 1.8,
+      networkSpeed: 5, // Mbps (4G)
+      description: "Median mobile device",
+    },
+    "Low-end (Moto E, older devices)": {
+      cssParsingSpeed: 0.3, // MB/s
+      cssSelectorMatchingMultiplier: 3.5,
+      networkSpeed: 2, // Mbps (3G/slow 4G)
+      description: "Bottom 25% devices",
+    },
+  };
+}
+
+// Estimated cost of the desktop-only CSS on each device profile. No console output.
+function estimateCSSImpact(summary) {
+  const deviceProfiles = getDeviceProfiles();
+  const unnecessaryBytes = summary.total.bytes;
+  const totalClasses = summary.total.classes;
+  const totalProperties = summary.total.properties;
+  const deviceImpact = Object.entries(deviceProfiles).reduce((acc, [name, profile]) => {
+    const download = (unnecessaryBytes * 8) / (profile.networkSpeed * 1000);
+    const parsing = (unnecessaryBytes / (1024 * 1024) / profile.cssParsingSpeed) * 1000;
+    const cssom = totalProperties * 0.01 * profile.cssSelectorMatchingMultiplier;
+    const totalBlocking = download + parsing + cssom;
+    const runtime =
+      (totalClasses * 0.005 + totalProperties * 0.002) * profile.cssSelectorMatchingMultiplier;
+
+    acc[name] = {
+      renderBlockingTimeMs: totalBlocking,
+      runtimeOverheadMs: runtime,
+      fcpImpactMs: totalBlocking * 0.6,
+      lcpImpactMs: totalBlocking * 0.4,
+      inpOverheadMs: runtime,
+    };
+    return acc;
+  }, {});
+  return { unnecessaryBytes, totalClasses, totalProperties, deviceImpact };
+}
+
 async function analyzeCSSPerformanceImpact(minWidth = 768) {
   console.log("🔍 Analyzing CSS performance impact...\n");
+  const deviceProfiles = getDeviceProfiles();
 
   // First, run the media queries analysis
   const mediaQueryResults = await analyzeCSSMediaQueries(minWidth);
@@ -286,28 +340,6 @@ async function analyzeCSSPerformanceImpact(minWidth = 768) {
     return null;
   }
 
-  // Device profiles based on real Chrome UX Report data
-  const deviceProfiles = {
-    "High-end (Pixel 7, iPhone 14)": {
-      cssParsingSpeed: 1.5, // MB/s
-      cssSelectorMatchingMultiplier: 1.0,
-      networkSpeed: 10, // Mbps (4G LTE)
-      description: "Top 25% devices",
-    },
-    "Mid-range (Moto G Power, iPhone SE)": {
-      cssParsingSpeed: 0.8, // MB/s
-      cssSelectorMatchingMultiplier: 1.8,
-      networkSpeed: 5, // Mbps (4G)
-      description: "Median mobile device",
-    },
-    "Low-end (Moto E, older devices)": {
-      cssParsingSpeed: 0.3, // MB/s
-      cssSelectorMatchingMultiplier: 3.5,
-      networkSpeed: 2, // Mbps (3G/slow 4G)
-      description: "Bottom 25% devices",
-    },
-  };
-
   const totalClasses = mediaQueryResults.summary.total.classes;
   const totalProperties = mediaQueryResults.summary.total.properties;
 
@@ -464,23 +496,7 @@ async function analyzeCSSPerformanceImpact(minWidth = 768) {
     totalClasses,
     totalProperties,
     corsBlockedCount: mediaQueryResults.summary.corsBlocked,
-    deviceImpact: Object.entries(deviceProfiles).reduce((acc, [name, profile]) => {
-      const download = (unnecessaryBytes * 8) / (profile.networkSpeed * 1000);
-      const parsing = (unnecessaryBytes / (1024 * 1024) / profile.cssParsingSpeed) * 1000;
-      const cssom = totalProperties * 0.01 * profile.cssSelectorMatchingMultiplier;
-      const totalBlocking = download + parsing + cssom;
-      const runtime =
-        (totalClasses * 0.005 + totalProperties * 0.002) * profile.cssSelectorMatchingMultiplier;
-
-      acc[name] = {
-        renderBlockingTimeMs: totalBlocking,
-        runtimeOverheadMs: runtime,
-        fcpImpactMs: totalBlocking * 0.6,
-        lcpImpactMs: totalBlocking * 0.4,
-        inpOverheadMs: runtime,
-      };
-      return acc;
-    }, {}),
+    deviceImpact: estimateCSSImpact(mediaQueryResults.summary).deviceImpact,
     estimatedConversionLift: ((midRangeTotalBlocking * 0.6) / 100).toFixed(2) + "%",
   };
 }
@@ -502,6 +518,22 @@ window.analyzeCSSPerformanceImpact = analyzeCSSPerformanceImpact;
       inline: result.summary.inline,
       files: result.summary.files,
       corsBlockedCount: result.summary.corsBlocked,
+      // Estimated cost of the desktop-only CSS, computed silently (the console report stays
+      // opt-in through analyzeCSSPerformanceImpact()). null when there is none.
+      performanceImpact: (() => {
+        const impact = estimateCSSImpact(result.summary);
+        if (impact.unnecessaryBytes === 0) return null;
+        const round1 = (n) => Math.round(n * 10) / 10;
+        return {
+          ...impact,
+          deviceImpact: Object.fromEntries(
+            Object.entries(impact.deviceImpact).map(([device, d]) => [
+              device,
+              Object.fromEntries(Object.entries(d).map(([k, v]) => [k, round1(v)])),
+            ])
+          ),
+        };
+      })(),
     },
     items: [...result.details.inline, ...result.details.files],
   };

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

@@ -5,34 +5,37 @@
 (async () => {
   // --- Helpers ---
 
+  // @shared getRootDomain
   function getRootDomain(hostname) {
-    const parts = hostname.split(".");
-    if (parts.length > 2) {
-      const sld = parts[parts.length - 2];
-      if (
-        sld.length <= 3 &&
-        ["co", "com", "org", "net", "gov", "edu"].includes(sld)
-      ) {
-        return parts.slice(-3).join(".");
-      }
-      return parts.slice(-2).join(".");
-    }
-    return hostname;
-  }
-
-  const currentRootDomain = getRootDomain(location.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) === currentRootDomain;
+    return getRootDomain(hostname) === getRootDomain(location.hostname);
   }
+  // @end-shared isFirstParty
 
+  // @shared formatBytes
   function formatBytes(bytes) {
-    if (!bytes || bytes === 0) return "N/A";
-    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];
+    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
 
   function getResourceType(entry) {
     // Use file extension as primary signal — initiatorType reflects the loader
@@ -424,6 +427,19 @@
 
   // --- Phase 7: Console output ---
 
+  if (entries.length === 0) {
+    console.group("%c🔍 Cache Strategy Analysis", "font-weight: bold; font-size: 14px;");
+    console.warn("⚠️ No resources found in the Performance API buffer.");
+    console.log("   This usually means the site called performance.clearResourceTimings() to manage memory.");
+    console.log("   Try: reload the page and run this snippet immediately after load.");
+    console.groupEnd();
+    return {
+      script: "Cache-Strategy-Analysis",
+      status: "error",
+      error: "No resources in the Performance API buffer (performance.clearResourceTimings() may have been called). Reload the page and run the snippet again.",
+    };
+  }
+
   const allAntiPatterns = entries.flatMap((e) =>
     e.antiPatterns.map((ap) => ({ ...ap, resource: e.shortName, url: e.url }))
   );
@@ -703,7 +719,7 @@
       "🟡 Replace Expires headers with Cache-Control: max-age — Expires is an outdated mechanism and less reliable."
     );
   }
-  if (cacheEfficiencyPercent < 50) {
+  if (entries.length > 0 && cacheEfficiencyPercent < 50) {
     recommendations.push(
       `🔴 Cache efficiency is low (${cacheEfficiencyPercent}%). Review caching strategy for all static assets.`
     );
@@ -758,12 +774,20 @@
       ? "needs-improvement"
       : "poor";
 
+  const MAX_ITEMS = 50;
+  const actionableEntries = entries.filter(
+    (e) =>
+      e.antiPatterns.length > 0 ||
+      ["none", "no-store", "no-cache", "short"].includes(e.cacheStrategy)
+  );
   return {
     script: "Cache-Strategy-Analysis",
     status: "ok",
     count: entries.length,
+    corsLimitedAnalysis: corsRestricted > 0,
     details: {
       totalResources: entries.length,
+      actionableCount: actionableEntries.length,
       headersAnalyzed,
       corsRestricted,
       excludedFromHeaders: excludedFromHeaders.length,
@@ -780,13 +804,11 @@
       uncompressedCount: uncompressedResources.length,
       protocolDistribution,
     },
-    // Only resources with actionable issues — omits clean resources to reduce noise
-    items: entries
-      .filter(
-        (e) =>
-          e.antiPatterns.length > 0 ||
-          ["none", "no-store", "no-cache", "short"].includes(e.cacheStrategy)
-      )
+    // Only resources with actionable issues, at most 50: the ones with the most anti-patterns
+    // first, then the largest. Clean resources are left out to reduce noise.
+    items: actionableEntries
+      .sort((a, b) => b.antiPatterns.length - a.antiPatterns.length || b.decodedBodySize - a.decodedBodySize)
+      .slice(0, MAX_ITEMS)
       .map((e) => ({
         shortName: e.shortName,
         host: e.host,

package/snippets/Loading/Compression-Audit.js

@@ -0,0 +1,172 @@
+// Compression Audit
+// Finds text-based resources served without HTTP compression and estimates the savings
+// https://webperf-snippets.nucliweb.net
+
+(() => {
+  const MIN_BYTES = 1024; // Below this, compression saves too little to matter
+  const MAX_ITEMS = 50;
+
+  // Typical size reduction gzip/brotli achieve per resource type (estimate, not a measurement)
+  const SAVINGS_RATIO = { js: 0.7, css: 0.7, html: 0.7, json: 0.7, svg: 0.7, xml: 0.7, font: 0.5 };
+
+  const EXTENSION_TYPES = {
+    js: "js", mjs: "js", cjs: "js",
+    css: "css",
+    html: "html", htm: "html",
+    json: "json", webmanifest: "json",
+    svg: "svg",
+    xml: "xml", rss: "xml", atom: "xml",
+    ttf: "font", otf: "font", eot: "font",
+  };
+
+  // @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 parseUrl = (name) => {
+    try {
+      return new URL(name);
+    } catch {
+      return null;
+    }
+  };
+
+  // Text type of a resource, or null when it is not a compressible text resource
+  const textType = (entry, url) => {
+    if (entry.entryType === "navigation") return "html";
+    const ext = url.pathname.split(".").pop().toLowerCase();
+    if (EXTENSION_TYPES[ext]) return EXTENSION_TYPES[ext];
+    if (entry.initiatorType === "script") return "js";
+    return null;
+  };
+
+  const entries = [...performance.getEntriesByType("navigation"), ...performance.getEntriesByType("resource")];
+  const contentEncodingSupported = entries.some((e) => "contentEncoding" in e);
+
+  const candidates = [];
+  entries.forEach((entry) => {
+    const url = parseUrl(entry.name);
+    if (!url || !/^https?:$/.test(url.protocol)) return;
+    const type = textType(entry, url);
+    if (!type) return;
+    candidates.push({ entry, url, type });
+  });
+
+  const compressed = [];
+  const uncompressed = [];
+  let sizeUnknownCount = 0;
+  let skippedSmallCount = 0;
+  const byEncoding = {};
+
+  candidates.forEach(({ entry, url, type }) => {
+    const decoded = entry.decodedBodySize || 0;
+    const encoded = entry.encodedBodySize || 0;
+
+    // Cross-origin resources without Timing-Allow-Origin report every size as zero
+    if (decoded === 0 && url.origin !== location.origin) {
+      sizeUnknownCount++;
+      return;
+    }
+    if (decoded < MIN_BYTES) {
+      skippedSmallCount++;
+      return;
+    }
+
+    const encoding = (entry.contentEncoding || "").toLowerCase();
+    // Without contentEncoding (older browsers), a body smaller than its decoded form was compressed
+    const isCompressed = encoding ? encoding !== "identity" : encoded < decoded;
+
+    if (isCompressed) {
+      const label = encoding || "unspecified";
+      byEncoding[label] = (byEncoding[label] || 0) + 1;
+      compressed.push(entry);
+      return;
+    }
+
+    const savings = Math.round(decoded * SAVINGS_RATIO[type]);
+    uncompressed.push({
+      url: entry.name,
+      shortName: url.pathname.split("/").filter(Boolean).pop() || url.hostname,
+      type,
+      encoding: "none",
+      encodedBytes: encoded,
+      decodedBytes: decoded,
+      estimatedSavingsBytes: savings,
+    });
+  });
+
+  byEncoding.none = uncompressed.length;
+  uncompressed.sort((a, b) => b.estimatedSavingsBytes - a.estimatedSavingsBytes);
+
+  const totalUncompressedBytes = uncompressed.reduce((n, i) => n + i.decodedBytes, 0);
+  const estimatedSavingsBytes = uncompressed.reduce((n, i) => n + i.estimatedSavingsBytes, 0);
+  const corsLimitedAnalysis = sizeUnknownCount > 0;
+
+  const issues = [];
+  if (uncompressed.length > 0) {
+    issues.push({
+      severity: "warning",
+      message: `${uncompressed.length} text resource(s) served without compression; enabling gzip or brotli could save about ${formatBytes(estimatedSavingsBytes)}`,
+    });
+  }
+  if (corsLimitedAnalysis) {
+    issues.push({
+      severity: "info",
+      message: `${sizeUnknownCount} cross-origin text resource(s) without Timing-Allow-Origin report zero sizes, so their compression is unknown`,
+    });
+  }
+  if (!contentEncodingSupported && candidates.length > 0) {
+    issues.push({
+      severity: "info",
+      message: "PerformanceResourceTiming.contentEncoding is not available; compression is inferred from encodedBodySize versus decodedBodySize",
+    });
+  }
+
+  console.group("%c🗜️ Compression Audit", "font-weight: bold; font-size: 14px;");
+  console.log(
+    `Text resources: ${candidates.length} | compressed: ${compressed.length} | uncompressed: ${uncompressed.length} | size unknown: ${sizeUnknownCount}`
+  );
+  if (uncompressed.length > 0) {
+    console.log(`Estimated savings: ~${formatBytes(estimatedSavingsBytes)} of ${formatBytes(totalUncompressedBytes)}`);
+    console.table(
+      uncompressed.slice(0, MAX_ITEMS).map((i) => ({
+        Resource: i.shortName,
+        Type: i.type,
+        Size: formatBytes(i.decodedBytes),
+        "Est. savings": formatBytes(i.estimatedSavingsBytes),
+      }))
+    );
+  } else {
+    console.log("%c✅ No uncompressed text resources found", "color: #22c55e;");
+  }
+  if (corsLimitedAnalysis) {
+    console.log("%cℹ️ Some cross-origin resources could not be analyzed (no Timing-Allow-Origin)", "color: #3b82f6;");
+  }
+  console.groupEnd();
+
+  return {
+    script: "Compression-Audit",
+    status: "ok",
+    count: uncompressed.length,
+    corsLimitedAnalysis,
+    details: {
+      totalTextResources: candidates.length,
+      compressedCount: compressed.length,
+      uncompressedCount: uncompressed.length,
+      sizeUnknownCount,
+      skippedSmallCount,
+      totalUncompressedBytes,
+      estimatedSavingsBytes,
+      byEncoding,
+      contentEncodingSupported,
+    },
+    items: uncompressed.slice(0, MAX_ITEMS),
+    issues,
+  };
+})();

package/snippets/Loading/Content-Visibility.js

@@ -345,8 +345,13 @@ window.analyzeContentVisibilityOpportunities = analyzeContentVisibilityOpportuni
       ...cvResults.autoElements.map(el => ({ ...el, type: "auto" })),
       ...cvResults.hiddenElements.map(el => ({ ...el, type: "hidden" })),
     ],
-    issues: cvResults.autoElements
-      .filter(el => el.containIntrinsicSize === "not set" || el.containIntrinsicSize === "none")
-      .map(el => ({ severity: "warning", message: `${el.selector}: missing contain-intrinsic-size (CLS risk)` })),
+    issues: [
+      ...cvResults.autoElements
+        .filter(el => el.containIntrinsicSize === "not set" || el.containIntrinsicSize === "none")
+        .map(el => ({ severity: "warning", message: `${el.selector}: missing contain-intrinsic-size (CLS risk)` })),
+      ...(cvResults.autoElements.length + cvResults.hiddenElements.length === 0
+        ? [{ severity: "info", message: "No content-visibility usage found. Consider content-visibility: auto on below-the-fold sections to reduce the initial render cost." }]
+        : []),
+    ],
   };
 })();

package/snippets/Loading/Critical-CSS-Detection.js

@@ -3,13 +3,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
 
   const criticalBudget = 14 * 1024; // 14 KB (first TCP round-trip)
 

package/snippets/Loading/Event-Processing-Time.js

@@ -18,6 +18,12 @@
   new PerformanceObserver((list) => {
     const [entry] = list.getEntries();
 
+    // loadEventEnd is 0 until the load event finishes: the phases would be meaningless
+    if (!entry.loadEventEnd) {
+      console.log("%c⏳ The page is still loading. Run this snippet again after the load event.", "color: #f59e0b;");
+      return;
+    }
+
     const formatMs = (ms) => ms.toFixed(2) + " ms";
     const formatBar = (ms, total) => {
       const pct = total > 0 ? (ms / total) * 100 : 0;
@@ -104,7 +110,7 @@
     // Key milestones
     console.log("");
     console.log("%cKey Milestones:", "font-weight: bold;");
-    console.log(`   TTFB (Time to First Byte): ${entry.responseStart.toFixed(0)}ms`);
+    console.log(`   TTFB (Time to First Byte): ${Math.max(0, entry.responseStart - (entry.activationStart || 0)).toFixed(0)}ms`);
     console.log(`   DOMContentLoaded: ${entry.domContentLoadedEventEnd.toFixed(0)}ms`);
     console.log(`   Load Complete: ${entry.loadEventEnd.toFixed(0)}ms`);
 
@@ -142,6 +148,13 @@
   // Synchronous return for agent
   const [navSync] = performance.getEntriesByType("navigation");
   if (!navSync) return { script: "Event-Processing-Time", status: "error", error: "No navigation entry" };
+  if (!navSync.loadEventEnd) {
+    return {
+      script: "Event-Processing-Time",
+      status: "tracking",
+      message: "The page is still loading. Run this snippet again after the load event.",
+    };
+  }
   const totalTimeSync = navSync.loadEventEnd - navSync.startTime;
   const networkTimeSync = (navSync.responseEnd || 0) - navSync.startTime;
   const ratingSync = totalTimeSync <= 2500 ? "good" : totalTimeSync <= 4000 ? "needs-improvement" : "poor";
@@ -169,7 +182,7 @@
     details: {
       networkTimeMs: Math.round(networkTimeSync),
       processingTimeMs: Math.round(totalTimeSync - networkTimeSync),
-      ttfbMs: Math.round(navSync.responseStart),
+      ttfbMs: Math.round(Math.max(0, navSync.responseStart - (navSync.activationStart || 0))),
       domContentLoadedMs: Math.round(navSync.domContentLoadedEventEnd),
       loadCompleteMs: Math.round(navSync.loadEventEnd),
       phases: Object.fromEntries(phasesSync.map((p) => [p.key, { value: Math.round(p.duration), unit: "ms" }])),

package/snippets/Loading/FCP.js

@@ -18,12 +18,14 @@
     const fcpEntry = list.getEntriesByName("first-contentful-paint")[0];
     if (!fcpEntry) return;
 
-    const fcpTime = fcpEntry.startTime;
+    const navEntry = performance.getEntriesByType("navigation")[0];
+    // Prerendered pages: measure from activation, not from the start of the prerender
+    const activationStart = navEntry?.activationStart || 0;
+    const fcpTime = Math.max(0, fcpEntry.startTime - activationStart);
     const rating = valueToRating(fcpTime);
     const { icon, color } = RATING[rating];
 
-    const navEntry = performance.getEntriesByType("navigation")[0];
-    const ttfb = navEntry?.responseStart ?? 0;
+    const ttfb = Math.max(0, (navEntry?.responseStart ?? 0) - activationStart);
 
     // Render-blocking resources (Chrome 107+, requires renderBlockingStatus API)
     const resources = performance.getEntriesByType("resource");
@@ -32,7 +34,7 @@
     );
 
     const lastBlockingEnd = blockingResources.length
-      ? Math.max(...blockingResources.map((r) => r.responseEnd))
+      ? Math.max(...blockingResources.map((r) => r.responseEnd)) - activationStart
       : ttfb;
 
     console.group(
@@ -87,8 +89,25 @@
   // Synchronous return for agent
   const fcpEntrySync = performance.getEntriesByName("first-contentful-paint")[0];
   if (!fcpEntrySync) return { script: "FCP", status: "error", error: "No FCP entry yet" };
-  const fcpTimeSync = fcpEntrySync.startTime;
+  const navEntrySync = performance.getEntriesByType("navigation")[0];
+  const activationStartSync = navEntrySync?.activationStart || 0;
+  const fcpTimeSync = Math.max(0, fcpEntrySync.startTime - activationStartSync);
   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
+  const ttfbSync = Math.max(0, (navEntrySync?.responseStart ?? 0) - activationStartSync);
+  const blockingSync = performance
+    .getEntriesByType("resource")
+    .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);
+
   return {
     script: "FCP",
     status: "ok",
@@ -97,5 +116,20 @@
     unit: "ms",
     rating: ratingSync,
     thresholds: { good: 1800, needsImprovement: 3000 },
+    details: {
+      ttfbMs,
+      renderBlockingLoadMs,
+      renderDelayMs,
+      blockingResourceCount: blockingSync.length,
+    },
+    // Render-blocking resources, the last to finish first (at most 50)
+    items: [...blockingSync]
+      .sort((a, b) => b.responseEnd - a.responseEnd)
+      .slice(0, 50)
+      .map((r) => ({
+        url: r.name.split("/").pop().split("?")[0] || r.name,
+        type: r.initiatorType === "link" ? "CSS" : "JS",
+        durationMs: Math.round(r.duration),
+      })),
   };
 })();

package/snippets/Loading/Find-Above-The-Fold-Lazy-Loaded-Images.js

@@ -246,7 +246,7 @@
       selector: image.selector,
       lazyType: image.lazyType,
       dimensions: image.dimensions,
-      position: image.position,
+      position: `${image.position.top}px, ${image.position.left}px`,
       distanceFromEdge: image.distanceFromEdge,
       src: image.src,
       srcset: image.srcset,

package/snippets/Loading/Find-non-Lazy-Loaded-Images-outside-of-the-viewport.js

@@ -78,13 +78,15 @@
     return 0;
   }
 
+  // @shared formatBytes
   function formatBytes(bytes) {
-    if (bytes === 0) return "0 Bytes";
-    const k = 1024;
-    const sizes = ["Bytes", "KB", "MB", "GB"];
-    const i = Math.floor(Math.log(bytes) / Math.log(k));
-    return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + " " + sizes[i];
+    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
 
   // Find LCP candidate (largest visible image) to exclude from recommendations
   const allViewportImages = Array.from(document.querySelectorAll("img")).filter(