webperf-snippets 0.1.0

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

@@ -0,0 +1,329 @@
+// Critical CSS Detection
+// Analyzes render-blocking stylesheets, inline CSS budget, and loading strategy
+// https://webperf-snippets.nucliweb.net
+
+(() => {
+  const formatBytes = (bytes) => {
+    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 criticalBudget = 14 * 1024; // 14 KB (first TCP round-trip)
+
+  // --- External stylesheets ---
+  const linkStylesheets = Array.from(
+    document.querySelectorAll('link[rel="stylesheet"]')
+  );
+
+  const perfEntries = performance.getEntriesByType("resource");
+
+  const externalCSSData = linkStylesheets.map((link) => {
+    const href = link.href;
+    const media = link.getAttribute("media") || "all";
+
+    const perfEntry = perfEntries.find((e) => e.name === href);
+
+    // Prefer browser-reported render-blocking status (PerformanceResourceTiming API,
+    // Chrome 107+). This correctly handles the media="print" onload="this.media='all'"
+    // deferral pattern — by page load time the media attribute has already changed to
+    // "all", so a DOM-only check would produce false positives.
+    let isRenderBlocking;
+    if (perfEntry && perfEntry.renderBlockingStatus !== undefined) {
+      isRenderBlocking = perfEntry.renderBlockingStatus === "blocking";
+    } else {
+      // Fallback for browsers without renderBlockingStatus support.
+      // Note: may produce false positives when the media/onload deferral pattern is used.
+      isRenderBlocking =
+        media === "all" ||
+        media === "" ||
+        media === "screen" ||
+        (media.toLowerCase().includes("screen") &&
+          !media.toLowerCase().includes("print"));
+    }
+    const transferSize = perfEntry ? perfEntry.transferSize : 0;
+    const decodedSize = perfEntry ? perfEntry.decodedBodySize : 0;
+
+    const preloadLink = document.querySelector(
+      `link[rel="preload"][as="style"][href="${href}"]`
+    );
+
+    let ruleCount = 0;
+    let corsBlocked = false;
+    try {
+      const sheet = Array.from(document.styleSheets).find(
+        (s) => s.href === href
+      );
+      if (sheet && sheet.cssRules) ruleCount = sheet.cssRules.length;
+    } catch {
+      corsBlocked = true;
+    }
+
+    return {
+      filename: href.split("/").pop().split("?")[0] || href,
+      href,
+      media,
+      isRenderBlocking,
+      transferSize,
+      decodedSize,
+      ruleCount,
+      corsBlocked,
+      preloaded: preloadLink !== null,
+    };
+  });
+
+  // --- Inline styles ---
+  const inlineStyles = Array.from(document.querySelectorAll("style")).map(
+    (style, i) => {
+      const content = style.innerHTML;
+      const size = new Blob([content]).size;
+      const ruleCount = (content.match(/\{[^}]*\}/g) || []).length;
+      return {
+        index: i + 1,
+        size,
+        ruleCount,
+        inHead: style.closest("head") !== null,
+      };
+    }
+  );
+
+  // --- Totals ---
+  const renderBlockingCSS = externalCSSData.filter((s) => s.isRenderBlocking);
+  const nonBlockingCSS = externalCSSData.filter((s) => !s.isRenderBlocking);
+  const totalInlineBytes = inlineStyles.reduce((sum, s) => sum + s.size, 0);
+  const totalRenderBlockingDecoded = renderBlockingCSS.reduce(
+    (sum, s) => sum + s.decodedSize,
+    0
+  );
+  const totalExternalTransfer = externalCSSData.reduce(
+    (sum, s) => sum + s.transferSize,
+    0
+  );
+
+  // --- Output ---
+  console.group(
+    "%c🎯 Critical CSS Detection",
+    "font-weight: bold; font-size: 14px;"
+  );
+
+  console.log("");
+  console.log("%cPage CSS Summary:", "font-weight: bold;");
+  console.log(`   External stylesheets:        ${externalCSSData.length}`);
+  console.log(`   Render-blocking:             ${renderBlockingCSS.length}`);
+  console.log(`   Non-blocking (media query):  ${nonBlockingCSS.length}`);
+  console.log(`   Inline <style> blocks:       ${inlineStyles.length}`);
+  console.log(`   Total external CSS (wire):   ${formatBytes(totalExternalTransfer)}`);
+  console.log(`   Total inline CSS:            ${formatBytes(totalInlineBytes)}`);
+
+  // Render-blocking stylesheets
+  if (renderBlockingCSS.length > 0) {
+    console.log("");
+    console.group(
+      `%c🚫 Render-Blocking Stylesheets (${renderBlockingCSS.length})`,
+      "color: #ef4444; font-weight: bold;"
+    );
+
+    console.table(
+      renderBlockingCSS.map((s) => ({
+        File: s.filename,
+        Media: s.media,
+        "Transfer Size": formatBytes(s.transferSize),
+        "Decoded Size": formatBytes(s.decodedSize),
+        Rules: s.corsBlocked ? "CORS blocked" : s.ruleCount,
+        Preloaded: s.preloaded ? "✅ Yes" : "❌ No",
+      }))
+    );
+
+    const budgetPct = Math.min(
+      (totalRenderBlockingDecoded / criticalBudget) * 100,
+      200
+    );
+    const barWidth = Math.min(Math.round(budgetPct / 10), 20);
+    const bar = "█".repeat(barWidth) + "░".repeat(20 - barWidth);
+    console.log(
+      `\n   Total render-blocking: ${formatBytes(totalRenderBlockingDecoded)}`
+    );
+    console.log(`   vs. 14 KB budget:      [${bar}] ${budgetPct.toFixed(0)}%`);
+
+    console.groupEnd();
+  } else {
+    console.log("");
+    console.log(
+      "%c✅ No render-blocking stylesheets detected.",
+      "color: #22c55e; font-weight: bold;"
+    );
+  }
+
+  // Non-blocking stylesheets
+  if (nonBlockingCSS.length > 0) {
+    console.log("");
+    console.group(
+      `%c✅ Non-Blocking Stylesheets (${nonBlockingCSS.length})`,
+      "color: #22c55e; font-weight: bold;"
+    );
+    console.table(
+      nonBlockingCSS.map((s) => ({
+        File: s.filename,
+        Media: s.media,
+        "Transfer Size": formatBytes(s.transferSize),
+        Rules: s.corsBlocked ? "CORS blocked" : s.ruleCount,
+      }))
+    );
+    console.groupEnd();
+  }
+
+  // Inline styles
+  if (inlineStyles.length > 0) {
+    console.log("");
+    const inlineBudgetPct = ((totalInlineBytes / criticalBudget) * 100).toFixed(0);
+    const inlineRating =
+      totalInlineBytes <= criticalBudget * 0.5
+        ? { label: "Good", color: "#22c55e" }
+        : totalInlineBytes <= criticalBudget
+        ? { label: "Acceptable", color: "#f59e0b" }
+        : { label: "Too Large", color: "#ef4444" };
+
+    console.group(
+      `%c📝 Inline CSS (${inlineStyles.length} block${inlineStyles.length > 1 ? "s" : ""})`,
+      "color: #3b82f6; font-weight: bold;"
+    );
+    console.log(`   Total size:    ${formatBytes(totalInlineBytes)}`);
+    console.log(`   Budget used:   ${inlineBudgetPct}% of 14 KB`);
+    console.log(
+      `   Rating:        %c${inlineRating.label}`,
+      `color: ${inlineRating.color}; font-weight: bold;`
+    );
+    console.table(
+      inlineStyles.map((s) => ({
+        "#": s.index,
+        Location: s.inHead ? "head" : "body",
+        Size: formatBytes(s.size),
+        "Rules (~)": s.ruleCount,
+      }))
+    );
+    console.groupEnd();
+  }
+
+  // Issues
+  const issues = [];
+
+  if (renderBlockingCSS.length > 0 && inlineStyles.length === 0) {
+    issues.push({
+      severity: "high",
+      message: "No critical CSS inlined — all CSS loads via render-blocking requests",
+      suggestion:
+        'Extract above-the-fold styles into a <style> tag in <head> and defer the rest',
+    });
+  }
+
+  if (totalRenderBlockingDecoded > criticalBudget) {
+    issues.push({
+      severity: "high",
+      message: `Render-blocking CSS (${formatBytes(totalRenderBlockingDecoded)}) exceeds the 14 KB critical budget`,
+      suggestion:
+        "Inline critical CSS and defer non-critical stylesheets using the media/onload pattern",
+    });
+  }
+
+  const largeUnpreloaded = renderBlockingCSS.filter(
+    (s) => !s.preloaded && s.transferSize > 10 * 1024
+  );
+  if (largeUnpreloaded.length > 0) {
+    issues.push({
+      severity: "medium",
+      message: `${largeUnpreloaded.length} large render-blocking stylesheet(s) without preload`,
+      details: largeUnpreloaded.map(
+        (s) => `• ${s.filename} (${formatBytes(s.transferSize)})`
+      ),
+      suggestion: 'Add <link rel="preload" as="style" href="..."> to start download earlier',
+    });
+  }
+
+  if (totalInlineBytes > criticalBudget) {
+    issues.push({
+      severity: "high",
+      message: `Inline CSS (${formatBytes(totalInlineBytes)}) exceeds the 14 KB critical budget`,
+      suggestion:
+        "Keep inline critical CSS under 14 KB. Move non-critical styles to an external deferred file.",
+    });
+  }
+
+  const bodyInlineStyles = inlineStyles.filter((s) => !s.inHead);
+  if (bodyInlineStyles.length > 0) {
+    issues.push({
+      severity: "medium",
+      message: `${bodyInlineStyles.length} inline style block(s) found in <body>`,
+      suggestion:
+        "Move critical styles to <head> to avoid potential render-blocking reflows",
+    });
+  }
+
+  if (issues.length > 0) {
+    console.log("");
+    console.group("%c⚠️ Issues Found", "color: #f59e0b; font-weight: bold;");
+    issues.forEach((issue) => {
+      const icon =
+        issue.severity === "high" ? "🔴" : issue.severity === "medium" ? "🟡" : "🔵";
+      console.log(`\n${icon} ${issue.message}`);
+      if (issue.details) issue.details.forEach((d) => console.log(`   ${d}`));
+      console.log(`   → ${issue.suggestion}`);
+    });
+    console.groupEnd();
+  } else {
+    console.log("");
+    console.log(
+      "%c✅ No critical CSS issues detected.",
+      "color: #22c55e; font-weight: bold;"
+    );
+  }
+
+  // Best practices
+  console.log("");
+  console.group(
+    "%c📖 Critical CSS Best Practices",
+    "color: #3b82f6; font-weight: bold;"
+  );
+  console.log("");
+  console.log("• Inline critical above-the-fold CSS in <head> (target: < 14 KB)");
+  console.log("• Defer non-critical CSS:");
+  console.log(
+    '  <link rel="stylesheet" href="styles.css" media="print" onload="this.media=\'all\'">'
+  );
+  console.log('• Preload critical external CSS: <link rel="preload" as="style" href="...">');
+  console.log("• Use Chrome DevTools Coverage tab (Ctrl+Shift+P → Coverage) to find unused CSS");
+  console.log("• Automate critical CSS extraction with tools like critical or Critters");
+  console.groupEnd();
+
+  console.groupEnd();
+
+  return {
+    script: "Critical-CSS-Detection",
+    status: "ok",
+    count: externalCSSData.length,
+    details: {
+      renderBlockingCount: renderBlockingCSS.length,
+      nonBlockingCount: nonBlockingCSS.length,
+      inlineCount: inlineStyles.length,
+      totalExternalTransferBytes: totalExternalTransfer,
+      renderBlockingDecodedBytes: totalRenderBlockingDecoded,
+      inlineBytes: totalInlineBytes,
+      criticalBudgetBytes: criticalBudget,
+    },
+    items: externalCSSData.map(s => ({
+      filename: s.filename,
+      media: s.media,
+      isRenderBlocking: s.isRenderBlocking,
+      transferBytes: s.transferSize,
+      decodedBytes: s.decodedSize,
+      ruleCount: s.ruleCount,
+      preloaded: s.preloaded,
+      corsBlocked: s.corsBlocked,
+    })),
+    issues: issues.map(i => ({
+      severity: i.severity === 'high' ? 'error' : 'warning',
+      message: i.message,
+    })),
+  };
+})();

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

@@ -0,0 +1,179 @@
+// Event Processing Time - Analyze page load phases
+// https://webperf-snippets.nucliweb.net
+
+(() => {
+  const phases = [
+    { name: "Redirect", start: "redirectStart", end: "redirectEnd", icon: "🔄" },
+    { name: "DNS Lookup", start: "domainLookupStart", end: "domainLookupEnd", icon: "🔍" },
+    { name: "TCP Connection", start: "connectStart", end: "connectEnd", icon: "🔌" },
+    { name: "SSL/TLS", start: "secureConnectionStart", end: "connectEnd", icon: "🔒" },
+    { name: "Request", start: "requestStart", end: "responseStart", icon: "📤" },
+    { name: "Response", start: "responseStart", end: "responseEnd", icon: "📥" },
+    { name: "DOM Processing", start: "responseEnd", end: "domContentLoadedEventStart", icon: "🏗️" },
+    { name: "DOMContentLoaded", start: "domContentLoadedEventStart", end: "domContentLoadedEventEnd", icon: "📄" },
+    { name: "Resource Loading", start: "domContentLoadedEventEnd", end: "loadEventStart", icon: "📦" },
+    { name: "Load Event", start: "loadEventStart", end: "loadEventEnd", icon: "✅" },
+  ];
+
+  new PerformanceObserver((list) => {
+    const [entry] = list.getEntries();
+
+    const formatMs = (ms) => ms.toFixed(2) + " ms";
+    const formatBar = (ms, total) => {
+      const pct = total > 0 ? (ms / total) * 100 : 0;
+      const width = Math.min(Math.round(pct / 2.5), 40);
+      return "█".repeat(width) + "░".repeat(Math.max(0, 20 - width));
+    };
+
+    // Calculate all phase durations
+    const phaseData = phases
+      .map((phase) => {
+        const start = entry[phase.start] || 0;
+        const end = entry[phase.end] || 0;
+        let duration = end - start;
+
+        // Handle SSL which shares end with TCP
+        if (phase.name === "SSL/TLS" && entry.secureConnectionStart > 0) {
+          duration = entry.connectEnd - entry.secureConnectionStart;
+        } else if (phase.name === "TCP Connection" && entry.secureConnectionStart > 0) {
+          duration = entry.secureConnectionStart - entry.connectStart;
+        }
+
+        return {
+          ...phase,
+          start,
+          end,
+          duration: Math.max(0, duration),
+        };
+      })
+      .filter((p) => p.duration > 0 || p.name === "Redirect");
+
+    const totalTime = entry.loadEventEnd - entry.startTime;
+    const networkTime = (entry.responseEnd || 0) - entry.startTime;
+    const processingTime = totalTime - networkTime;
+
+    // Rating based on total load time
+    let rating, color;
+    if (totalTime <= 2500) {
+      rating = "Fast";
+      color = "#22c55e";
+    } else if (totalTime <= 4000) {
+      rating = "Moderate";
+      color = "#f59e0b";
+    } else {
+      rating = "Slow";
+      color = "#ef4444";
+    }
+
+    console.group(
+      `%c⏱️ Page Load: ${totalTime.toFixed(0)}ms (${rating})`,
+      `color: ${color}; font-weight: bold; font-size: 14px;`
+    );
+
+    // Summary
+    console.log("");
+    console.log("%cSummary:", "font-weight: bold;");
+    console.log(`   Network time: ${networkTime.toFixed(0)}ms (${((networkTime / totalTime) * 100).toFixed(0)}%)`);
+    console.log(`   Processing time: ${processingTime.toFixed(0)}ms (${((processingTime / totalTime) * 100).toFixed(0)}%)`);
+    console.log(`   Total: ${totalTime.toFixed(0)}ms`);
+
+    // Timeline visualization
+    console.log("");
+    console.log("%cTimeline:", "font-weight: bold;");
+
+    phaseData.forEach(({ name, duration, icon }) => {
+      const pct = (duration / totalTime) * 100;
+      const bar = formatBar(duration, totalTime);
+      const durationStr = formatMs(duration).padStart(12);
+      const pctStr = `${pct.toFixed(1)}%`.padStart(7);
+
+      // Color code long phases
+      let phaseColor = "";
+      if (duration > totalTime * 0.3) {
+        phaseColor = "color: #ef4444;"; // Red for >30%
+      } else if (duration > totalTime * 0.15) {
+        phaseColor = "color: #f59e0b;"; // Orange for >15%
+      }
+
+      console.log(
+        `%c${icon} ${name.padEnd(18)} ${durationStr} ${pctStr}  ${bar}`,
+        phaseColor
+      );
+    });
+
+    // 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(`   DOMContentLoaded: ${entry.domContentLoadedEventEnd.toFixed(0)}ms`);
+    console.log(`   Load Complete: ${entry.loadEventEnd.toFixed(0)}ms`);
+
+    // Find bottleneck
+    const longestPhase = phaseData.reduce((a, b) =>
+      a.duration > b.duration ? a : b
+    );
+
+    if (longestPhase.duration > totalTime * 0.25) {
+      console.log("");
+      console.log("%c💡 Bottleneck Detected:", "color: #3b82f6; font-weight: bold;");
+      console.log(
+        `   ${longestPhase.name} takes ${((longestPhase.duration / totalTime) * 100).toFixed(0)}% of total load time`
+      );
+
+      const tips = {
+        "Redirect": "Minimize redirects. Update links to final URLs.",
+        "DNS Lookup": "Use DNS prefetching (<link rel='dns-prefetch'>). Consider faster DNS.",
+        "TCP Connection": "Enable HTTP/2 or HTTP/3. Use connection preconnect.",
+        "SSL/TLS": "Enable TLS 1.3. Optimize certificate chain. Use session resumption.",
+        "Request": "Optimize server response time. Add caching headers.",
+        "Response": "Enable compression. Reduce HTML size. Use streaming.",
+        "DOM Processing": "Simplify HTML structure. Defer non-critical scripts.",
+        "DOMContentLoaded": "Reduce synchronous JavaScript. Use defer/async.",
+        "Resource Loading": "Lazy load images. Prioritize critical resources.",
+        "Load Event": "Reduce page weight. Optimize resource loading order.",
+      };
+
+      console.log(`   Tip: ${tips[longestPhase.name] || "Investigate this phase."}`);
+    }
+
+    console.groupEnd();
+  }).observe({ type: "navigation", buffered: true });
+
+  // Synchronous return for agent
+  const [navSync] = performance.getEntriesByType("navigation");
+  if (!navSync) return { script: "Event-Processing-Time", status: "error", error: "No navigation entry" };
+  const totalTimeSync = navSync.loadEventEnd - navSync.startTime;
+  const networkTimeSync = (navSync.responseEnd || 0) - navSync.startTime;
+  const ratingSync = totalTimeSync <= 2500 ? "good" : totalTimeSync <= 4000 ? "needs-improvement" : "poor";
+  const phasesSync = [
+    { key: "redirect", duration: Math.max(0, navSync.redirectEnd - navSync.redirectStart) },
+    { key: "dnsLookup", duration: Math.max(0, navSync.domainLookupEnd - navSync.domainLookupStart) },
+    { key: "tcpConnection", duration: Math.max(0, (navSync.secureConnectionStart > 0 ? navSync.secureConnectionStart : navSync.connectEnd) - navSync.connectStart) },
+    { key: "sslTls", duration: navSync.secureConnectionStart > 0 ? Math.max(0, navSync.connectEnd - navSync.secureConnectionStart) : 0 },
+    { key: "request", duration: Math.max(0, navSync.responseStart - navSync.requestStart) },
+    { key: "response", duration: Math.max(0, navSync.responseEnd - navSync.responseStart) },
+    { key: "domProcessing", duration: Math.max(0, navSync.domContentLoadedEventStart - navSync.responseEnd) },
+    { key: "domContentLoaded", duration: Math.max(0, navSync.domContentLoadedEventEnd - navSync.domContentLoadedEventStart) },
+    { key: "resourceLoading", duration: Math.max(0, navSync.loadEventStart - navSync.domContentLoadedEventEnd) },
+    { key: "loadEvent", duration: Math.max(0, navSync.loadEventEnd - navSync.loadEventStart) },
+  ];
+  const nonZeroPhases = phasesSync.filter((p) => p.duration > 0);
+  const slowestPhase = nonZeroPhases.length > 0 ? nonZeroPhases.reduce((a, b) => a.duration > b.duration ? a : b) : phasesSync[0];
+  return {
+    script: "Event-Processing-Time",
+    status: "ok",
+    value: Math.round(totalTimeSync),
+    unit: "ms",
+    rating: ratingSync,
+    thresholds: { good: 2500, needsImprovement: 4000 },
+    details: {
+      networkTimeMs: Math.round(networkTimeSync),
+      processingTimeMs: Math.round(totalTimeSync - networkTimeSync),
+      ttfbMs: Math.round(navSync.responseStart),
+      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" }])),
+      slowestPhase: slowestPhase.key,
+    },
+  };
+})();

package/snippets/Loading/FCP.js

@@ -0,0 +1,101 @@
+// FCP Analysis
+// First Contentful Paint with render-blocking phase breakdown
+// https://webperf-snippets.nucliweb.net
+
+(() => {
+  const valueToRating = (ms) =>
+    ms <= 1800 ? "good" : ms <= 3000 ? "needs-improvement" : "poor";
+
+  const RATING = {
+    good: { icon: "🟢", color: "#0CCE6A" },
+    "needs-improvement": { icon: "🟡", color: "#FFA400" },
+    poor: { icon: "🔴", color: "#FF4E42" },
+  };
+
+  const ms = (val) => `${Math.round(val)}ms`;
+
+  new PerformanceObserver((list) => {
+    const fcpEntry = list.getEntriesByName("first-contentful-paint")[0];
+    if (!fcpEntry) return;
+
+    const fcpTime = fcpEntry.startTime;
+    const rating = valueToRating(fcpTime);
+    const { icon, color } = RATING[rating];
+
+    const navEntry = performance.getEntriesByType("navigation")[0];
+    const ttfb = navEntry?.responseStart ?? 0;
+
+    // Render-blocking resources (Chrome 107+, requires renderBlockingStatus API)
+    const resources = performance.getEntriesByType("resource");
+    const blockingResources = resources.filter(
+      (r) => r.renderBlockingStatus === "blocking"
+    );
+
+    const lastBlockingEnd = blockingResources.length
+      ? Math.max(...blockingResources.map((r) => r.responseEnd))
+      : ttfb;
+
+    console.group(
+      `%cFCP: ${icon} ${(fcpTime / 1000).toFixed(2)}s (${rating})`,
+      `color: ${color}; font-weight: bold; font-size: 14px;`
+    );
+
+    // Phase breakdown
+    console.log("");
+    console.log("%cPhase Breakdown:", "font-weight: bold;");
+    console.log(`   TTFB:                  ${ms(ttfb)}`);
+    if (blockingResources.length > 0) {
+      console.log(
+        `   Render-blocking load:  ${ms(Math.max(0, lastBlockingEnd - ttfb))}`
+      );
+    }
+    console.log(
+      `   Render delay:          ${ms(Math.max(0, fcpTime - lastBlockingEnd))}`
+    );
+
+    // Render-blocking summary
+    console.log("");
+    if (blockingResources.length > 0) {
+      const totalBlockingTime = Math.max(0, lastBlockingEnd - ttfb);
+      console.log(
+        `%c⚠ ${blockingResources.length} render-blocking resource(s) — adding ${ms(totalBlockingTime)} before paint`,
+        "color: #FFA400; font-weight: bold;"
+      );
+      blockingResources
+        .sort((a, b) => b.responseEnd - a.responseEnd)
+        .forEach((r) => {
+          const filename = r.name.split("/").pop().split("?")[0] || r.name;
+          const type = r.initiatorType === "link" ? "CSS" : "JS";
+          console.log(`   [${type}] ${ms(r.duration)}  ${filename}`);
+        });
+      console.log("");
+      console.log(
+        "%c→ Find Render-Blocking Resources: %chttps://webperf-snippets.nucliweb.net/Loading/Find-render-blocking-resources",
+        "color: #3b82f6;",
+        "color: #3b82f6; text-decoration: underline;"
+      );
+    } else {
+      console.log(
+        "%c✓ No render-blocking resources detected",
+        "color: #22c55e;"
+      );
+    }
+
+    console.groupEnd();
+  }).observe({ type: "paint", buffered: true });
+
+  // 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 ratingSync = valueToRating(fcpTimeSync);
+  return {
+    script: "FCP",
+    status: "ok",
+    metric: "FCP",
+    value: Math.round(fcpTimeSync),
+    unit: "ms",
+    rating: ratingSync,
+    thresholds: { good: 1800, needsImprovement: 3000 },
+  };
+})();