# WebPerf Snippets — Full Reference

A curated collection of JavaScript snippets for web performance measurement.
Each snippet runs in the browser console or Chrome DevTools.
Source: https://webperf-snippets.nucliweb.net

---

# Core Web Vitals

## Cumulative Layout Shift (CLS)
URL: https://webperf-snippets.nucliweb.net/CoreWebVitals/CLS

Quick check for Cumulative Layout Shift, a Core Web Vital that measures visual stability. CLS tracks how much the page layout shifts unexpectedly during its lifetime, providing a single score that represents the cumulative impact of all unexpected layout shifts. Why this matters: Unexpected layout shifts are frustrating and can cause users to click the wrong element or lose their reading position. CLS directly impacts user experience and is a ranking factor for Google Search. Common causes include images without dimensions, web fonts, and dynamically injected content. CLS Rating Thresholds:

```js
// CLS Quick Check
// https://webperf-snippets.nucliweb.net

(async () => {
  let cls = 0;

  const valueToRating = (score) =>
    score <= 0.1 ? "good" : score <= 0.25 ? "needs-improvement" : "poor";

  const RATING = {
    good: { icon: "🟢", color: "#0CCE6A" },
    "needs-improvement": { icon: "🟡", color: "#FFA400" },
    poor: { icon: "🔴", color: "#FF4E42" },
  };

  const logCLS = () => {
    const rating = valueToRating(cls);
    const { icon, color } = RATING[rating];
    console.log(
      `%cCLS: ${icon} ${cls.toFixed(4)} (${rating})`,
      `color: ${color}; font-weight: bold; font-size: 14px;`
    );
  };

  const observer = new PerformanceObserver((list) => {
    for (const entry of list.getEntries()) {
      if (!entry.hadRecentInput) {
        cls += entry.value;
      }
    }
    logCLS();
  });

  observer.observe({ type: "layout-shift", buffered: true });

  // Update on visibility change (final CLS)
  document.addEventListener("visibilitychange", () => {
    if (document.visibilityState === "hidden") {
      observer.takeRecords();
      console.log("%c📊 Final CLS (on page hide):", "font-weight: bold;");
      logCLS();
    }
  });

  // Expose function for manual check
  window.getCLS = () => {
    logCLS();
    const rating = valueToRating(cls);
    return {
      script: "CLS",
      status: "ok",
      metric: "CLS",
      value: Math.round(cls * 10000) / 10000,
      unit: "score",
      rating,
      thresholds: { good: 0.1, needsImprovement: 0.25 },
    };
  };

  console.log(
    "   Call %cgetCLS()%c anytime to check current value.",
    "font-family: monospace; background: #f3f4f6; padding: 2px 4px;",
    ""
  );

  // Return for agent — collect via buffered observer (getEntriesByType does not
  // expose layout-shift entries in Chrome without an active observer).
  const clsSync = await new Promise((resolve) => {
    let sum = 0;
    const obs = new PerformanceObserver((list) => {
      for (const e of list.getEntries()) if (!e.hadRecentInput) sum += e.value;
    });
    obs.observe({ type: "layout-shift", buffered: true });
    setTimeout(() => { obs.disconnect(); resolve(sum); }, 100);
  });
  const clsRating = valueToRating(clsSync);
  return {
    script: "CLS",
    status: "ok",
    metric: "CLS",
    value: Math.round(clsSync * 10000) / 10000,
    unit: "score",
    rating: clsRating,
    thresholds: { good: 0.1, needsImprovement: 0.25 },
    message: "CLS tracking active. Call getCLS() for updated value after page interactions.",
    getDataFn: "getCLS",
  };
})();
```

---

## Interaction to Next Paint (INP)
URL: https://webperf-snippets.nucliweb.net/CoreWebVitals/INP

Tracks Interaction to Next Paint, a Core Web Vital that measures responsiveness. INP evaluates how quickly a page responds to user interactions throughout the entire page visit, replacing First Input Delay (FID) as a Core Web Vital in March 2024. Why this matters: INP directly measures user frustration. When users click a button and nothing happens for seconds, they abandon tasks. Unlike FID which only measured first interaction, INP tracks ALL interactions, making it a more comprehensive responsiveness metric and a key ranking factor for Google Search. INP Rating Thresholds:

```js
// INP (Interaction to Next Paint) Tracking
// https://webperf-snippets.nucliweb.net

(() => {
  const interactions = [];
  let inpValue = 0;
  let inpEntry = null;

  const valueToRating = (ms) =>
    ms <= 200 ? "good" : ms <= 500 ? "needs-improvement" : "poor";

  const RATING = {
    good: { icon: "🟢", color: "#0CCE6A" },
    "needs-improvement": { icon: "🟡", color: "#FFA400" },
    poor: { icon: "🔴", color: "#FF4E42" },
  };

  const formatMs = (ms) => `${Math.round(ms)}ms`;

  // Calculate INP (98th percentile of all interactions)
  const calculateINP = () => {
    if (interactions.length === 0) return { value: 0, entry: null };

    // Sort by duration
    const sorted = [...interactions].sort((a, b) => b.duration - a.duration);

    // Get 98th percentile (or worst if < 50 interactions)
    const index = interactions.length < 50
      ? 0
      : Math.floor(interactions.length * 0.02);

    return {
      value: sorted[index].duration,
      entry: sorted[index],
    };
  };

  // Format interaction name
  const getInteractionName = (entry) => {
    const target = entry.target;
    if (!target) return entry.name;

    let selector = target.tagName.toLowerCase();
    if (target.id) selector += `#${target.id}`;
    else if (target.className && typeof target.className === "string") {
      const classes = target.className.trim().split(/\s+/).slice(0, 2).join(".");
      if (classes) selector += `.${classes}`;
    }

    return `${entry.name} → ${selector}`;
  };

  // Get phase breakdown (requires LoAF support)
  const getPhaseBreakdown = (entry) => {
    const phases = {
      inputDelay: 0,
      processingTime: 0,
      presentationDelay: 0,
    };

    if (entry.processingStart && entry.processingEnd) {
      phases.inputDelay = entry.processingStart - entry.startTime;
      phases.processingTime = entry.processingEnd - entry.processingStart;
      phases.presentationDelay = entry.duration - phases.inputDelay - phases.processingTime;
    }

    return phases;
  };

  // Observer for interactions
  const observer = new PerformanceObserver((list) => {
    for (const entry of list.getEntries()) {
      // Only track interactions with interactionId (meaningful interactions)
      if (!entry.interactionId) continue;

      // Avoid duplicate entries for the same interaction
      const existing = interactions.find(
        (i) => i.interactionId === entry.interactionId
      );

      if (!existing || entry.duration > existing.duration) {
        // Remove old entry if exists
        if (existing) {
          const idx = interactions.indexOf(existing);
          interactions.splice(idx, 1);
        }

        interactions.push({
          name: entry.name,
          duration: entry.duration,
          startTime: entry.startTime,
          interactionId: entry.interactionId,
          target: entry.target,
          processingStart: entry.processingStart,
          processingEnd: entry.processingEnd,
          formattedName: getInteractionName(entry),
          phases: getPhaseBreakdown(entry),
          entry,
        });
      }

      // Recalculate INP
      const result = calculateINP();
      inpValue = result.value;
      inpEntry = result.entry;
    }
  });

  // Observe event timing
  observer.observe({
    type: "event",
    buffered: true,
    durationThreshold: 16, // Only interactions > 16ms (1 frame)
  });

  // Log INP summary
  const logINP = () => {
    const rating = valueToRating(inpValue);
    const { icon, color } = RATING[rating];

    console.group(
      `%cINP: ${icon} ${formatMs(inpValue)} (${rating})`,
      `color: ${color}; font-weight: bold; font-size: 14px;`
    );

    console.log("");
    console.log(`%c📊 Analysis:`, "font-weight: bold;");
    console.log(`   Total interactions tracked: ${interactions.length}`);
    console.log(`   INP (98th percentile): ${formatMs(inpValue)}`);

    if (inpEntry) {
      console.log("");
      console.log(`%c🎯 Worst Interaction (INP):`, "font-weight: bold; color: ${color};");
      console.log(`   Event: ${inpEntry.formattedName}`);
      console.log(`   Duration: ${formatMs(inpEntry.duration)}`);

      // Element attribution
      if (inpEntry.target) {
        console.log(`   Target Element:`, inpEntry.target);

        // Get element path for better context
        const getElementPath = (el) => {
          if (!el) return "";
          const parts = [];
          let current = el;
          while (current && current !== document.body && parts.length < 5) {
            let selector = current.tagName.toLowerCase();
            if (current.id) selector += `#${current.id}`;
            else if (current.className && typeof current.className === "string") {
              const classes = current.className.trim().split(/\s+/).slice(0, 2).join(".");
              if (classes) selector += `.${classes}`;
            }
            parts.unshift(selector);
            current = current.parentElement;
          }
          return parts.join(" > ");
        };

        const path = getElementPath(inpEntry.target);
        if (path) {
          console.log(`   Element Path: ${path}`);
        }
      }

      // Phase breakdown
      const phases = inpEntry.phases;
      if (phases.inputDelay > 0) {
        console.log("");
        console.log(`%c⏱️ Phase Breakdown:`, "font-weight: bold;");
        console.log(`   Input Delay: ${formatMs(phases.inputDelay)}`);
        console.log(`   Processing Time: ${formatMs(phases.processingTime)}`);
        console.log(`   Presentation Delay: ${formatMs(phases.presentationDelay)}`);

        // Visual bar
        const total = inpEntry.duration;
        const barWidth = 40;
        const inputBar = "▓".repeat(Math.round((phases.inputDelay / total) * barWidth));
        const processBar = "█".repeat(Math.round((phases.processingTime / total) * barWidth));
        const presentBar = "░".repeat(Math.round((phases.presentationDelay / total) * barWidth));
        console.log(`   ${inputBar}${processBar}${presentBar}`);
        console.log("   ▓ Input  █ Processing  ░ Presentation");
      }

      // Recommendations based on phases
      if (inpValue > 200 && phases.inputDelay > 0) {
        console.log("");
        console.log("%c💡 Recommendations:", "color: #3b82f6; font-weight: bold;");

        if (phases.inputDelay > 100) {
          console.log("   • High input delay - Break up long tasks before interaction");
        }
        if (phases.processingTime > 200) {
          console.log("   • Long processing time - Optimize event handlers");
          console.log("   • Consider debouncing, use requestIdleCallback for non-critical work");
        }
        if (phases.presentationDelay > 100) {
          console.log("   • High presentation delay - Reduce render complexity");
          console.log("   • Batch DOM updates, use content-visibility");
        }
      }
    }

    // Slow interactions breakdown
    const slowInteractions = interactions
      .filter((i) => i.duration > 200)
      .sort((a, b) => b.duration - a.duration)
      .slice(0, 10);

    if (slowInteractions.length > 0) {
      console.log("");
      console.log(`%c🐌 Slow Interactions (> 200ms):`, "color: #ef4444; font-weight: bold;");
      console.table(
        slowInteractions.map((i) => ({
          Event: i.formattedName,
          "Duration (ms)": Math.round(i.duration),
          "Start Time (ms)": Math.round(i.startTime),
        }))
      );

      // Show element attribution for top 3
      console.log("");
      console.log(`%c🎯 Element Attribution (top 3):`, "font-weight: bold;");
      slowInteractions.slice(0, 3).forEach((interaction, idx) => {
        console.log(`   ${idx + 1}. ${interaction.formattedName} (${Math.round(interaction.duration)}ms)`);
        if (interaction.target) {
          console.log(`      Element:`, interaction.target);
        } else {
          console.log(`      Element: (no target available)`);
        }
      });
    }

    // Interaction types breakdown
    const byType = {};
    interactions.forEach((i) => {
      const type = i.name;
      if (!byType[type]) {
        byType[type] = { count: 0, totalDuration: 0, maxDuration: 0 };
      }
      byType[type].count++;
      byType[type].totalDuration += i.duration;
      byType[type].maxDuration = Math.max(byType[type].maxDuration, i.duration);
    });

    if (Object.keys(byType).length > 0) {
      console.log("");
      console.log(`%c📋 By Interaction Type:`, "font-weight: bold;");
      console.table(
        Object.entries(byType).map(([type, stats]) => ({
          Type: type,
          Count: stats.count,
          "Avg (ms)": Math.round(stats.totalDuration / stats.count),
          "Max (ms)": Math.round(stats.maxDuration),
        }))
      );
    }

    // General recommendations if no phases available
    if (inpValue > 200 && (!inpEntry || !inpEntry.phases || inpEntry.phases.inputDelay === 0)) {
      console.log("");
      console.log("%c💡 Recommendations:", "color: #3b82f6; font-weight: bold;");
      console.log("   • Break up long tasks using scheduler.yield() or setTimeout");
      console.log("   • Optimize event handlers - reduce computation time");
      console.log("   • Consider debouncing for frequent events");
      console.log("   • Move heavy work to Web Workers");
      console.log("   • Use requestIdleCallback for non-critical work");

      console.log("");
      console.log("   Run getINPDetails() for full interaction list");
      console.log("   Use Long Animation Frames snippet to identify blocking scripts");
    }

    console.groupEnd();
  };

  // Expose function to check INP anytime
  window.getINP = () => {
    const result = calculateINP();
    inpValue = result.value;
    inpEntry = result.entry;
    logINP();
    const rating = valueToRating(inpValue);
    const details = { totalInteractions: interactions.length };
    if (inpEntry) {
      details.worstEvent = inpEntry.formattedName;
      details.phases = {
        inputDelay: Math.round(inpEntry.phases.inputDelay),
        processingTime: Math.round(inpEntry.phases.processingTime),
        presentationDelay: Math.round(inpEntry.phases.presentationDelay),
      };
    }
    if (interactions.length === 0) {
      return {
        script: "INP",
        status: "error",
        error: "No interactions recorded yet. Interact with the page and call getINP() again.",
        getDataFn: "getINP",
        details,
      };
    }
    return {
      script: "INP",
      status: "ok",
      metric: "INP",
      value: Math.round(inpValue),
      unit: "ms",
      rating,
      thresholds: { good: 200, needsImprovement: 500 },
      details,
    };
  };

  // Expose function to get all interactions
  window.getINPDetails = () => {
    console.group("%c📊 All Interactions Detail", "font-weight: bold; font-size: 14px;");

    if (interactions.length === 0) {
      console.log("   No interactions recorded yet.");
      console.groupEnd();
      return [];
    }

    const sorted = [...interactions].sort((a, b) => b.duration - a.duration);

    console.log("");
    console.log("%cInteraction Summary:", "font-weight: bold;");
    console.table(
      sorted.map((i, idx) => ({
        "#": idx + 1,
        Event: i.formattedName,
        "Duration (ms)": Math.round(i.duration),
        "Start (ms)": Math.round(i.startTime),
        "Input Delay": Math.round(i.phases.inputDelay),
        Processing: Math.round(i.phases.processingTime),
        Presentation: Math.round(i.phases.presentationDelay),
      }))
    );

    // Show element attribution for all interactions
    console.log("");
    console.log("%c🎯 Element Attribution:", "font-weight: bold;");

    const maxToShow = Math.min(sorted.length, 15); // Show up to 15
    sorted.slice(0, maxToShow).forEach((interaction, idx) => {
      const phases = interaction.phases;
      const hasPhases = phases.inputDelay > 0;

      console.group(
        `${idx + 1}. ${interaction.formattedName} - ${Math.round(interaction.duration)}ms`
      );

      if (interaction.target) {
        console.log("Element:", interaction.target);

        // Get element path for better identification
        const getPath = (el) => {
          if (!el) return "";
          const parts = [];
          let current = el;
          while (current && current !== document.body && parts.length < 5) {
            let selector = current.tagName.toLowerCase();
            if (current.id) selector += `#${current.id}`;
            else if (current.className && typeof current.className === "string") {
              const classes = current.className.trim().split(/\s+/).slice(0, 2).join(".");
              if (classes) selector += `.${classes}`;
            }
            parts.unshift(selector);
            current = current.parentElement;
          }
          return parts.join(" > ");
        };

        const path = getPath(interaction.target);
        if (path) {
          console.log("Path:", path);
        }
      } else {
        console.log("Element: (no target available)");
      }

      if (hasPhases) {
        console.log(
          `Phases: Input ${Math.round(phases.inputDelay)}ms | ` +
          `Processing ${Math.round(phases.processingTime)}ms | ` +
          `Presentation ${Math.round(phases.presentationDelay)}ms`
        );
      }

      console.groupEnd();
    });

    if (sorted.length > maxToShow) {
      console.log(`   ... and ${sorted.length - maxToShow} more interactions`);
    }

    console.groupEnd();
    return sorted;
  };

  // Log on page hide (final INP)
  document.addEventListener("visibilitychange", () => {
    if (document.visibilityState === "hidden") {
      observer.takeRecords();
      const result = calculateINP();
      inpValue = result.value;
      inpEntry = result.entry;

      console.log("%c📊 Final INP (on page hide):", "font-weight: bold;");
      logINP();
    }
  });

  console.log("%c⚡ INP Tracking Active", "font-weight: bold; font-size: 14px;");
  console.log("   Interactions with duration > 16ms will be tracked.");
  console.log(
    "   Call %cgetINP()%c to see current INP value.",
    "font-family: monospace; background: #f3f4f6; padding: 2px 4px;",
    ""
  );
  console.log(
    "   Call %cgetINPDetails()%c for full interaction list.",
    "font-family: monospace; background: #f3f4f6; padding: 2px 4px;",
    ""
  );

  return {
    script: "INP",
    status: "tracking",
    message: "INP tracking active. Interact with the page then call getINP() for results.",
    getDataFn: "getINP",
  };
})();
```

---

## LCP Image Entropy
URL: https://webperf-snippets.nucliweb.net/CoreWebVitals/LCP-Image-Entropy

Checks if images qualify as LCP candidates based on their entropy (bits per pixel). Since Chrome 112, low-entropy images are ignored for LCP measurement. Based on Stoyan Stefanov's BPP check. What is BPP (Bits Per Pixel)? BPP measures image complexity/entropy: ``` BPP = (file size in bits) / (width × height)     = (encodedBodySize × 8) / (width × height) ``` LCP eligibility threshold:

```js
// LCP Image Entropy Check
// https://webperf-snippets.nucliweb.net

(() => {
  const formatBytes = (bytes) => {
    if (!bytes) 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];
  };

  const LCP_THRESHOLD = 0.05; // Chrome's threshold for low-entropy

  // Get current LCP element
  let lcpElement = null;
  let lcpUrl = null;

  const lcpObserver = new PerformanceObserver((list) => {
    const entries = list.getEntries();
    const lastEntry = entries[entries.length - 1];
    if (lastEntry) {
      lcpElement = lastEntry.element;
      lcpUrl = lastEntry.url;
    }
  });

  lcpObserver.observe({ type: "largest-contentful-paint", buffered: true });

  // Wait a tick to ensure LCP is captured (for human console output)
  setTimeout(() => {
    lcpObserver.disconnect();

    // Get all images
    const images = [...document.images]
      .filter((img) => {
        const src = img.currentSrc || img.src;
        return src && !src.startsWith("data:image");
      })
      .map((img) => {
        const src = img.currentSrc || img.src;
        const resource = performance.getEntriesByName(src)[0];
        const fileSize = resource?.encodedBodySize || 0;
        const pixels = img.naturalWidth * img.naturalHeight;
        const bpp = pixels > 0 ? (fileSize * 8) / pixels : 0;

        const isLowEntropy = bpp > 0 && bpp < LCP_THRESHOLD;
        const isLCP = lcpElement === img || lcpUrl === src;

        return {
          element: img,
          src,
          shortSrc: src.split("/").pop()?.split("?")[0] || src,
          width: img.naturalWidth,
          height: img.naturalHeight,
          fileSize,
          bpp,
          isLowEntropy,
          isLCP,
          lcpEligible: !isLowEntropy && bpp > 0,
        };
      })
      .filter((img) => img.bpp > 0); // Only images with measurable BPP

    console.group("%c🖼️ Image Entropy Analysis", "font-weight: bold; font-size: 14px;");

    if (images.length === 0) {
      console.log("   No images with measurable entropy found.");
      console.log("   (Data URLs and cross-origin images without CORS are excluded)");
      console.groupEnd();
      return;
    }

    // Summary
    const lowEntropy = images.filter((img) => img.isLowEntropy);
    const normalEntropy = images.filter((img) => !img.isLowEntropy);
    const lcpImage = images.find((img) => img.isLCP);

    console.log("");
    console.log("%cSummary:", "font-weight: bold;");
    console.log(`   Total images analyzed: ${images.length}`);
    console.log(`   🟢 Normal entropy (LCP eligible): ${normalEntropy.length}`);
    console.log(`   🔴 Low entropy (LCP ineligible): ${lowEntropy.length}`);

    if (lcpImage) {
      const icon = lcpImage.isLowEntropy ? "⚠️" : "✅";
      console.log("");
      console.log(`%c${icon} Current LCP image:`, "font-weight: bold;");
      console.log(`   ${lcpImage.shortSrc}`);
      console.log(`   BPP: ${lcpImage.bpp.toFixed(4)} ${lcpImage.isLowEntropy ? "(LOW - may be skipped!)" : "(OK)"}`);
    }

    // Table
    console.log("");
    console.log("%cAll Images:", "font-weight: bold;");

    const tableData = images
      .sort((a, b) => b.bpp - a.bpp)
      .map((img) => ({
        Image: img.shortSrc.length > 30 ? "..." + img.shortSrc.slice(-27) : img.shortSrc,
        Dimensions: `${img.width}×${img.height}`,
        Size: formatBytes(img.fileSize),
        BPP: img.bpp.toFixed(4),
        Entropy: img.isLowEntropy ? "🔴 Low" : "🟢 Normal",
        "LCP Eligible": img.lcpEligible ? "✅" : "❌",
        "Is LCP": img.isLCP ? "👈" : "",
      }));

    console.table(tableData);

    // Warnings
    if (lowEntropy.length > 0) {
      console.log("");
      console.log("%c⚠️ Low Entropy Images:", "font-weight: bold; color: #f59e0b;");
      console.log("   These images will NOT be considered for LCP in Chrome 112+:");
      lowEntropy.forEach((img) => {
        console.log(`   • ${img.shortSrc} (BPP: ${img.bpp.toFixed(4)})`, img.element);
      });
    }

    if (lcpImage && lcpImage.isLowEntropy) {
      console.log("");
      console.log("%c🚨 Warning:", "font-weight: bold; color: #ef4444;");
      console.log("   Your LCP image has low entropy and may be skipped by Chrome!");
      console.log("   Chrome will use the next largest element instead.");
      console.log("");
      console.log("%c💡 Solutions:", "font-weight: bold; color: #3b82f6;");
      console.log("   • Replace placeholder with actual content image");
      console.log("   • Use a text element as LCP instead");
      console.log("   • Ensure hero image loads with sufficient detail");
    }

    // Elements for inspection
    console.log("");
    console.log("%c🔎 Inspect elements:", "font-weight: bold;");
    images.forEach((img, i) => {
      const icon = img.isLowEntropy ? "🔴" : "🟢";
      const lcpMark = img.isLCP ? " 👈 LCP" : "";
      console.log(`   ${i + 1}. ${icon} ${img.shortSrc}${lcpMark}`, img.element);
    });

    console.groupEnd();
  }, 100);

  // Synchronous return for agent (buffered entries + DOM)
  const lcpEntriesSync = performance.getEntriesByType("largest-contentful-paint");
  const lcpEntrySync = lcpEntriesSync.at(-1);
  const lcpElementSync = lcpEntrySync?.element ?? null;
  const lcpUrlSync = lcpEntrySync?.url ?? null;
  const imagesSync = [...document.images]
    .filter((img) => { const src = img.currentSrc || img.src; return src && !src.startsWith("data:image"); })
    .map((img) => {
      const src = img.currentSrc || img.src;
      const resource = performance.getEntriesByName(src)[0];
      const fileSize = resource?.encodedBodySize || 0;
      const pixels = img.naturalWidth * img.naturalHeight;
      const bpp = pixels > 0 ? (fileSize * 8) / pixels : 0;
      const isLowEntropy = bpp > 0 && bpp < LCP_THRESHOLD;
      const isLCP = lcpElementSync === img || lcpUrlSync === src;
      return {
        url: src.split("/").pop()?.split("?")[0] || src,
        width: img.naturalWidth,
        height: img.naturalHeight,
        fileSizeBytes: fileSize,
        bpp: Math.round(bpp * 10000) / 10000,
        isLowEntropy,
        lcpEligible: !isLowEntropy && bpp > 0,
        isLCP,
      };
    })
    .filter((img) => img.bpp > 0);
  const lowEntropyCount = imagesSync.filter((img) => img.isLowEntropy).length;
  const lcpImageSync = imagesSync.find((img) => img.isLCP);
  if (lcpElementSync) {
    lcpElementSync.style.outline = "3px dashed lime";
    lcpElementSync.style.outlineOffset = "2px";
  }
  const issuesSync = [];
  if (lowEntropyCount > 0) {
    issuesSync.push({ severity: "warning", message: `${lowEntropyCount} image(s) have low entropy and are LCP-ineligible in Chrome 112+` });
  }
  if (lcpImageSync?.isLowEntropy) {
    issuesSync.push({ severity: "error", message: "Current LCP image has low entropy and may be skipped by Chrome" });
  }
  return {
    script: "LCP-Image-Entropy",
    status: "ok",
    count: imagesSync.length,
    details: {
      totalImages: imagesSync.length,
      lowEntropyCount,
      lcpImageEligible: lcpImageSync ? !lcpImageSync.isLowEntropy : null,
      lcpImage: lcpImageSync ? { url: lcpImageSync.url, bpp: lcpImageSync.bpp, isLowEntropy: lcpImageSync.isLowEntropy } : null,
    },
    items: imagesSync,
    issues: issuesSync,
  };
})();
```

---

## LCP Subparts
URL: https://webperf-snippets.nucliweb.net/CoreWebVitals/LCP-Subparts

Breaks down Largest Contentful Paint into its four phases to identify optimization opportunities. Understanding which phase is slowest helps you focus your optimization efforts where they'll have the most impact. Based on the Web Vitals Chrome Extension. Why this matters: LCP is a critical Core Web Vital that measures when the largest content element becomes visible. By breaking it into sub-parts, you can pinpoint exactly where delays occur and apply targeted optimizations instead of guessing. The four phases of LCP: ```mermaid flowchart LR     A([Navigation<br/>Start]) --> B["⏱️ TTFB<br/><small>Server Response</small>"]     B --> C["⏳ Load Delay<br/><small>Resource Discovery</small>"]     C --> D["📥 Load Time<br/><small>Download Resource</small>"]     D --> E["🎨 Render Delay<br/><small>Paint Element</small>"]     E --> F([✅ LCP<br/>Complete])     style B fill:#FFE5E5,stroke:#FF4444,stroke-width:2px     style C fill:#FFF3E5,stroke:#FF8800,stroke-width:2px     style D fill:#FFFBE5,stroke:#FFBB00,stroke-width:2px     style E fill:#E5FFE5,stroke:#44AA44,stroke-width:2px     style F fill:#E5F2FF,stroke:#4488FF,stroke-width:3px ```

```js
// LCP Subparts Analysis
// https://webperf-snippets.nucliweb.net

(async () => {
  const formatMs = (ms) => `${Math.round(ms)}ms`;
  const formatPercent = (value, total) => `${Math.round((value / total) * 100)}%`;

  const valueToRating = (ms) =>
    ms <= 2500 ? "good" : ms <= 4000 ? "needs-improvement" : "poor";

  const RATING = {
    good: { icon: "🟢", color: "#0CCE6A" },
    "needs-improvement": { icon: "🟡", color: "#FFA400" },
    poor: { icon: "🔴", color: "#FF4E42" },
  };

  const SUB_PARTS = [
    { name: "Time to First Byte", key: "ttfb", target: 800 },
    { name: "Resource Load Delay", key: "resourceLoadDelay", targetPercent: 10 },
    { name: "Resource Load Time", key: "resourceLoadTime", targetPercent: 40 },
    { name: "Element Render Delay", key: "elementRenderDelay", targetPercent: 10 },
  ];

  const getNavigationEntry = () => {
    const navEntry = performance.getEntriesByType("navigation")[0];
    if (navEntry?.responseStart > 0 && navEntry.responseStart < performance.now()) {
      return navEntry;
    }
    return null;
  };

  const observer = new PerformanceObserver((list) => {
    const lcpEntry = list.getEntries().at(-1);
    if (!lcpEntry) return;

    const navEntry = getNavigationEntry();
    if (!navEntry) return;

    const lcpResEntry = performance
      .getEntriesByType("resource")
      .find((e) => e.name === lcpEntry.url);

    const activationStart = navEntry.activationStart || 0;

    // Calculate sub-parts
    const ttfb = Math.max(0, navEntry.responseStart - activationStart);

    const lcpRequestStart = Math.max(
      ttfb,
      lcpResEntry
        ? (lcpResEntry.requestStart || lcpResEntry.startTime) - activationStart
        : 0
    );

    const lcpResponseEnd = Math.max(
      lcpRequestStart,
      lcpResEntry ? lcpResEntry.responseEnd - activationStart : 0
    );

    const lcpRenderTime = Math.max(
      lcpResponseEnd,
      lcpEntry.startTime - activationStart
    );

    const subPartValues = {
      ttfb: ttfb,
      resourceLoadDelay: lcpRequestStart - ttfb,
      resourceLoadTime: lcpResponseEnd - lcpRequestStart,
      elementRenderDelay: lcpRenderTime - lcpResponseEnd,
    };

    // LCP Rating
    const rating = valueToRating(lcpRenderTime);
    const { icon, color } = RATING[rating];

    console.group(
      `%cLCP: ${icon} ${formatMs(lcpRenderTime)} (${rating})`,
      `color: ${color}; font-weight: bold; font-size: 14px;`
    );

    // Element info
    if (lcpEntry.element) {
      const el = lcpEntry.element;
      let selector = el.tagName.toLowerCase();
      if (el.id) selector = `#${el.id}`;
      else if (el.className && typeof el.className === "string") {
        const classes = el.className.trim().split(/\s+/).slice(0, 2).join(".");
        if (classes) selector = `${el.tagName.toLowerCase()}.${classes}`;
      }

      console.log("");
      console.log("%cLCP Element:", "font-weight: bold;");
      console.log(`   ${selector}`, el);
      if (lcpEntry.url) {
        const shortUrl = (() => {
          try {
            const u = new URL(lcpEntry.url);
            return u.hostname !== location.hostname
              ? `${u.hostname}/…/${u.pathname.split("/").pop()?.split("?")[0]}`
              : u.pathname.split("/").pop()?.split("?")[0] || lcpEntry.url;
          } catch { return lcpEntry.url; }
        })();
        console.log(`   URL: ${shortUrl}`);
      }

      // Highlight
      el.style.outline = "3px dashed lime";
      el.style.outlineOffset = "2px";
    }

    // Sub-parts table
    console.log("");
    console.log("%cSub-Parts Breakdown:", "font-weight: bold;");

    // Find the slowest phase
    const phases = SUB_PARTS.map((part) => ({
      ...part,
      value: subPartValues[part.key],
      percent: (subPartValues[part.key] / lcpRenderTime) * 100,
    }));

    const slowest = phases.reduce((a, b) => (a.value > b.value ? a : b));

    const tableData = phases.map((part) => {
      const isSlowest = part.key === slowest.key;
      const isOverTarget = part.target
        ? part.value > part.target
        : part.percent > part.targetPercent;

      return {
        "Sub-part": isSlowest ? `⚠️ ${part.name}` : part.name,
        Time: formatMs(part.value),
        "%": formatPercent(part.value, lcpRenderTime),
        Status: isOverTarget ? "🔴 Over target" : "✅ OK",
      };
    });

    console.table(tableData);

    // Visual bar
    const barWidth = 40;
    const bars = phases.map((p) => {
      const width = Math.max(1, Math.round((p.value / lcpRenderTime) * barWidth));
      return { key: p.key, bar: width };
    });

    const ttfbBar = "█".repeat(bars[0].bar);
    const delayBar = "▓".repeat(bars[1].bar);
    const loadBar = "▒".repeat(bars[2].bar);
    const renderBar = "░".repeat(bars[3].bar);

    console.log("");
    console.log(`   ${ttfbBar}${delayBar}${loadBar}${renderBar}`);
    console.log("   █ TTFB  ▓ Load Delay  ▒ Load Time  ░ Render Delay");

    // Recommendations based on slowest phase
    console.log("");
    console.log("%c💡 Optimization Focus:", "font-weight: bold; color: #3b82f6;");
    console.log(`   Slowest phase: ${slowest.name} (${formatPercent(slowest.value, lcpRenderTime)})`);

    if (slowest.key === "ttfb") {
      console.log("   → Use a CDN to reduce latency");
      console.log("   → Enable server-side caching");
      console.log("   → Optimize server response time");
    } else if (slowest.key === "resourceLoadDelay") {
      console.log("   → Preload the LCP image: <link rel=\"preload\" as=\"image\" href=\"...\">");
      console.log("   → Remove render-blocking resources");
      console.log("   → Inline critical CSS");
    } else if (slowest.key === "resourceLoadTime") {
      console.log("   → Compress and resize the LCP image");
      console.log("   → Use modern formats (WebP, AVIF)");
      console.log("   → Use a CDN for faster delivery");
    } else if (slowest.key === "elementRenderDelay") {
      console.log("   → Reduce render-blocking JavaScript");
      console.log("   → Avoid client-side rendering for LCP element");
      console.log("   → Use fetchpriority=\"high\" on LCP image");
    }

    // Performance entries for DevTools
    SUB_PARTS.forEach((part) => performance.clearMeasures(part.name));

    phases.forEach((part) => {
      const startTimes = {
        ttfb: 0,
        resourceLoadDelay: ttfb,
        resourceLoadTime: lcpRequestStart,
        elementRenderDelay: lcpResponseEnd,
      };
      performance.measure(part.name, {
        start: startTimes[part.key],
        end: startTimes[part.key] + part.value,
      });
    });

    console.log("");
    console.log("%c📊 Measures added to Performance timeline", "color: #666;");
    console.log("   Open DevTools → Performance → reload to see waterfall");

    console.groupEnd();
  });

  observer.observe({ type: "largest-contentful-paint", buffered: true });

  console.log("%c📊 LCP Subparts Analysis Active", "font-weight: bold; font-size: 14px;");
  console.log("   Waiting for LCP...");

  // Return for agent — collect via buffered observer (getEntriesByType does not
  // expose largest-contentful-paint entries in Chrome without an active observer).
  const lcpEntry = await new Promise((resolve) => {
    const entries = [];
    const obs = new PerformanceObserver((list) => entries.push(...list.getEntries()));
    obs.observe({ type: "largest-contentful-paint", buffered: true });
    setTimeout(() => { obs.disconnect(); resolve(entries.at(-1) ?? null); }, 100);
  });
  if (!lcpEntry) {
    return { script: "LCP-Subparts", status: "error", error: "No LCP entries buffered" };
  }
  const navEntrySync = getNavigationEntry();
  if (!navEntrySync) {
    return { script: "LCP-Subparts", status: "error", error: "No navigation entry" };
  }
  const lcpResEntrySync = performance.getEntriesByType("resource")
    .find((e) => e.name === lcpEntry.url);
  const activationStartSync = navEntrySync.activationStart || 0;
  const ttfbSync = Math.max(0, navEntrySync.responseStart - activationStartSync);
  const lcpRequestStartSync = Math.max(ttfbSync,
    lcpResEntrySync ? (lcpResEntrySync.requestStart || lcpResEntrySync.startTime) - activationStartSync : 0
  );
  const lcpResponseEndSync = Math.max(lcpRequestStartSync,
    lcpResEntrySync ? lcpResEntrySync.responseEnd - activationStartSync : 0
  );
  const lcpRenderTimeSync = Math.max(lcpResponseEndSync, lcpEntry.startTime - activationStartSync);
  const totalSync = Math.round(lcpRenderTimeSync);
  const ratingSync = valueToRating(totalSync);
  const ttfbVal = Math.round(ttfbSync);
  const loadDelayVal = Math.round(lcpRequestStartSync - ttfbSync);
  const loadTimeVal = Math.round(lcpResponseEndSync - lcpRequestStartSync);
  const renderDelayVal = Math.round(lcpRenderTimeSync - lcpResponseEndSync);
  const subPartsForRank = [
    { key: "ttfb", value: ttfbVal },
    { key: "resourceLoadDelay", value: loadDelayVal },
    { key: "resourceLoadTime", value: loadTimeVal },
    { key: "elementRenderDelay", value: renderDelayVal },
  ];
  const slowestPhaseSync = subPartsForRank.reduce((a, b) => a.value > b.value ? a : b).key;
  let lcpSelectorSync = null;
  if (lcpEntry.element) {
    const el = lcpEntry.element;
    lcpSelectorSync = el.tagName.toLowerCase();
    if (el.id) lcpSelectorSync = `#${el.id}`;
    else if (el.className && typeof el.className === "string") {
      const classes = el.className.trim().split(/\s+/).slice(0, 2).join(".");
      if (classes) lcpSelectorSync = `${el.tagName.toLowerCase()}.${classes}`;
    }
  }
  const shortUrlSync = lcpEntry.url
    ? (() => {
        try {
          const u = new URL(lcpEntry.url);
          return u.hostname !== location.hostname
            ? `${u.hostname}/…/${u.pathname.split("/").pop()?.split("?")[0]}`
            : u.pathname.split("/").pop()?.split("?")[0] || lcpEntry.url;
        } catch { return lcpEntry.url; }
      })()
    : null;
  return {
    script: "LCP-Subparts",
    status: "ok",
    metric: "LCP",
    value: totalSync,
    unit: "ms",
    rating: ratingSync,
    thresholds: { good: 2500, needsImprovement: 4000 },
    details: {
      element: lcpSelectorSync,
      url: shortUrlSync,
      subParts: {
        ttfb: { value: ttfbVal, percent: Math.round((ttfbVal / totalSync) * 100), overTarget: ttfbVal > 800 },
        resourceLoadDelay: { value: loadDelayVal, percent: Math.round((loadDelayVal / totalSync) * 100), overTarget: (loadDelayVal / totalSync) * 100 > 10 },
        resourceLoadTime: { value: loadTimeVal, percent: Math.round((loadTimeVal / totalSync) * 100), overTarget: (loadTimeVal / totalSync) * 100 > 40 },
        elementRenderDelay: { value: renderDelayVal, percent: Math.round((renderDelayVal / totalSync) * 100), overTarget: (renderDelayVal / totalSync) * 100 > 10 },
      },
      slowestPhase: slowestPhaseSync,
    },
  };
})();
```

---

## LCP Trail
URL: https://webperf-snippets.nucliweb.net/CoreWebVitals/LCP-Trail

Tracks every LCP candidate element during page load and highlights each one with a distinct pastel-colored dashed outline — so you can see the full trail from first candidate to final LCP. Each time the browser promotes a larger element as the new LCP, the snippet assigns the next color in the palette and highlights it. All previous candidates remain visible on the page for easy comparison.

```js
// LCP Trail
// Tracks all LCP candidate elements during page load
// https://webperf-snippets.nucliweb.net

(() => {
  const PALETTE = [
    { color: "#EF4444", name: "Red" },
    { color: "#F97316", name: "Orange" },
    { color: "#22C55E", name: "Green" },
    { color: "#3B82F6", name: "Blue" },
    { color: "#A855F7", name: "Purple" },
    { color: "#EC4899", name: "Pink" },
  ];

  const valueToRating = (ms) =>
    ms <= 2500 ? "good" : ms <= 4000 ? "needs-improvement" : "poor";

  const RATING = {
    good: { icon: "🟢", color: "#0CCE6A" },
    "needs-improvement": { icon: "🟡", color: "#FFA400" },
    poor: { icon: "🔴", color: "#FF4E42" },
  };

  const getActivationStart = () => {
    const navEntry = performance.getEntriesByType("navigation")[0];
    return navEntry?.activationStart || 0;
  };

  const getSelector = (element) => {
    if (element.id) return `#${element.id}`;
    if (element.className && typeof element.className === "string") {
      const classes = element.className.trim().split(/\s+/).slice(0, 2).join(".");
      if (classes) return `${element.tagName.toLowerCase()}.${classes}`;
    }
    return element.tagName.toLowerCase();
  };

  const getElementInfo = (element, entry) => {
    const tag = element.tagName.toLowerCase();
    if (tag === "img") return { type: "Image", url: entry.url || element.src };
    if (tag === "video") return { type: "Video poster", url: entry.url || element.poster };
    if (window.getComputedStyle(element).backgroundImage !== "none") return { type: "Background image", url: entry.url };
    return { type: tag === "h1" || tag === "p" ? "Text block" : tag };
  };

  const candidates = [];

  const logTrail = () => {
    const current = candidates[candidates.length - 1];
    if (!current) return;

    const rating = valueToRating(current.time);
    const { icon, color: ratingColor } = RATING[rating];

    console.group(
      `%cLCP: ${icon} ${(current.time / 1000).toFixed(2)}s (${rating})`,
      `color: ${ratingColor}; font-weight: bold; font-size: 14px;`
    );

    // Current LCP element attribution
    console.log("");
    console.log("%cLCP Element:", "font-weight: bold;");
    console.log(`   Element: ${current.selector}`, current.element);

    const { type, url } = getElementInfo(current.element, current.entry);
    console.log(`   Type: ${type}`);
    if (url) console.log(`   URL: ${url}`);
    if (current.element.naturalWidth) {
      console.log(
        `   Dimensions: ${current.element.naturalWidth}×${current.element.naturalHeight}`
      );
    }
    if (current.entry.size) {
      console.log(`   Size: ${current.entry.size.toLocaleString()} px²`);
    }

    // Trail legend
    console.log("");
    console.log("%cCandidates Trail:", "font-weight: bold;");
    candidates.forEach(({ index, selector, color, name, time, element }) => {
      const isCurrent = index === candidates.length;
      console.log(
        `%c  ● ${index}. ${selector}`,
        `color: ${color}; font-weight: ${isCurrent ? "bold" : "normal"};`,
        `| ${(time / 1000).toFixed(2)}s — ${name}${isCurrent ? " ← LCP" : ""}`,
        element
      );
    });

    console.log("");
    console.log(
      "%c✓ Each candidate highlighted with a colored dashed outline",
      "color: #22c55e;"
    );
    console.groupEnd();
  };

  const observer = new PerformanceObserver((list) => {
    const activationStart = getActivationStart();
    const seen = new Set(candidates.map((c) => c.element));

    for (const entry of list.getEntries()) {
      const { element } = entry;
      if (!element || seen.has(element)) continue;

      const { color, name } = PALETTE[candidates.length % PALETTE.length];

      element.style.outline = `3px dashed ${color}`;
      element.style.outlineOffset = "2px";

      candidates.push({
        index: candidates.length + 1,
        element,
        selector: getSelector(element),
        color,
        name,
        time: Math.max(0, entry.startTime - activationStart),
        entry,
      });

      seen.add(element);
    }

    logTrail();
  });

  observer.observe({ type: "largest-contentful-paint", buffered: true });

  console.log("%c⏱️ LCP Trail Active", "font-weight: bold; font-size: 14px;");
  console.log("   Highlights all LCP candidate elements with distinct colors.");

  // Synchronous return for agent (buffered entries)
  const trailEntries = performance.getEntriesByType("largest-contentful-paint");
  if (trailEntries.length === 0) {
    return { script: "LCP-Trail", status: "error", error: "No LCP entries yet" };
  }
  const trailActivationStart = getActivationStart();
  const seenEls = new Set();
  const syncCandidates = [];
  for (const entry of trailEntries) {
    const el = entry.element;
    if (!el || seenEls.has(el)) continue;
    seenEls.add(el);
    const selector = getSelector(el);
    const time = Math.round(Math.max(0, entry.startTime - trailActivationStart));
    const { type, url } = getElementInfo(el, entry);
    syncCandidates.push({
      index: syncCandidates.length + 1,
      selector,
      time,
      elementType: type,
      ...(url ? {
        url: (() => {
          try {
            const u = new URL(url);
            return u.hostname !== location.hostname
              ? `${u.hostname}/…/${u.pathname.split("/").pop()?.split("?")[0]}`
              : u.pathname.split("/").pop()?.split("?")[0] || url;
          } catch { return url; }
        })(),
      } : {}),
    });
  }
  if (syncCandidates.length === 0) {
    return { script: "LCP-Trail", status: "error", error: "No LCP elements in DOM" };
  }
  const lastCandidate = syncCandidates.at(-1);
  const trailValue = lastCandidate.time;
  const trailRating = valueToRating(trailValue);
  return {
    script: "LCP-Trail",
    status: "ok",
    metric: "LCP",
    value: trailValue,
    unit: "ms",
    rating: trailRating,
    thresholds: { good: 2500, needsImprovement: 4000 },
    details: {
      candidateCount: syncCandidates.length,
      finalElement: lastCandidate.selector,
      candidates: syncCandidates,
    },
  };
})();
```

---

## LCP Video Candidate
URL: https://webperf-snippets.nucliweb.net/CoreWebVitals/LCP-Video-Candidate

Detects whether the LCP element is a `<video>` and audits the poster image configuration — the most common source of avoidable LCP delay when video is the hero element. When a `<video>` element has a `poster` attribute, the browser treats the poster image as the LCP candidate. The browser cannot discover the poster URL until the parser reaches the `<video>` tag, so without a `<link rel="preload">` the poster is fetched late, increasing LCP. What this snippet checks:

```js
// LCP Video Candidate
// https://webperf-snippets.nucliweb.net

(() => {
  const lcpEntries = performance.getEntriesByType("largest-contentful-paint");

  if (lcpEntries.length === 0) {
    console.warn(
      "⚠️ No LCP entries found. Run this snippet before interacting with the page, or reload and run it immediately.",
    );
    return { script: "LCP-Video-Candidate", status: "error", error: "No LCP entries found" };
  }

  const lcp = lcpEntries[lcpEntries.length - 1];
  const element = lcp.element;

  function valueToRating(ms) {
    return ms <= 2500 ? "good" : ms <= 4000 ? "needs-improvement" : "poor";
  }

  const RATING = {
    good: { icon: "🟢", label: "Good (≤ 2.5 s)" },
    "needs-improvement": { icon: "🟡", label: "Needs Improvement (≤ 4 s)" },
    poor: { icon: "🔴", label: "Poor (> 4 s)" },
  };

  function detectFormat(url) {
    if (!url) return "unknown";
    const path = url.toLowerCase().split("?")[0];
    const ext = path.match(/\.(avif|webp|jxl|png|gif|jpg|jpeg|svg)(?:[?#]|$)/);
    if (ext) return ext[1] === "jpeg" ? "jpg" : ext[1];
    return "unknown";
  }

  function normalizeUrl(url) {
    try {
      return new URL(url, location.origin).href;
    } catch {
      return url;
    }
  }

  console.group("%c🎬 LCP Video Candidate", "font-weight: bold; font-size: 14px;");
  console.log("");

  const activationStart = (() => {
    const nav = performance.getEntriesByType("navigation")[0];
    return nav?.activationStart || 0;
  })();
  const lcpTime = Math.round(Math.max(0, lcp.startTime - activationStart));

  // --- LCP is NOT a video ---
  if (!element || element.tagName !== "VIDEO") {
    const tag = element ? `<${element.tagName.toLowerCase()}>` : "(element no longer in DOM)";
    const rating = valueToRating(lcpTime);
    console.log("%cLCP element is not a <video>", "font-weight: bold;");
    console.log("");
    console.log(`   LCP time : ${lcpTime} ms  ${RATING[rating].icon} ${RATING[rating].label}`);
    console.log(`   Tag      : ${tag}`);
    if (lcp.url) console.log(`   URL      : ${lcp.url}`);
    if (element) console.log("   Element  :", element);
    console.groupEnd();
    return {
      script: "LCP-Video-Candidate",
      status: "ok",
      metric: "LCP",
      value: lcpTime,
      unit: "ms",
      rating,
      thresholds: { good: 2500, needsImprovement: 4000 },
      details: { isVideo: false },
      issues: [],
    };
  }

  // --- LCP IS a video ---
  const posterAttr = element.getAttribute("poster") || "";
  const posterUrl = posterAttr ? normalizeUrl(posterAttr) : "";
  const lcpUrl = lcp.url || "";

  // Chrome considers both poster image and first video frame as LCP candidates.
  // lcpUrl is set when the LCP came from the poster; empty when from the first frame.
  const lcpSource = lcpUrl ? "poster" : posterAttr ? "unknown" : "first-frame";

  const rating = valueToRating(lcpTime);
  const posterFormat = detectFormat(lcpUrl || posterUrl);
  const isModernFormat = ["avif", "webp", "jxl"].includes(posterFormat);
  const isCrossOrigin = lcp.renderTime === 0 && lcp.loadTime > 0;

  const preloadLinks = Array.from(document.querySelectorAll('link[rel="preload"][as="image"]'));
  const posterPreload = preloadLinks.find((link) => {
    const href = link.getAttribute("href");
    if (!href) return false;
    try {
      return normalizeUrl(href) === posterUrl || normalizeUrl(href) === lcpUrl;
    } catch {
      return false;
    }
  }) ?? null;

  const preload = element.getAttribute("preload");
  const autoplay = element.hasAttribute("autoplay");
  const muted = element.hasAttribute("muted") || element.muted;
  const playsinline = element.hasAttribute("playsinline");

  const issues = [];

  if (lcpSource === "first-frame") {
    issues.push({ s: "info", msg: "LCP is the first video frame — adding a poster gives explicit control over the LCP image" });
  }
  if (lcpSource === "first-frame" && (!autoplay || !muted)) {
    issues.push({ s: "warning", msg: "First-frame LCP requires autoplay + muted for the browser to render it immediately" });
  }

  if (posterAttr && !posterPreload) {
    issues.push({ s: "warning", msg: 'No <link rel="preload" as="image"> for the poster — browser discovers it late' });
  } else if (posterPreload && posterPreload.getAttribute("fetchpriority") !== "high") {
    issues.push({ s: "info", msg: 'Preload found but missing fetchpriority="high" — may be deprioritised' });
  }

  if (posterAttr && !isModernFormat && posterFormat !== "unknown") {
    issues.push({ s: "info", msg: `Poster uses ${posterFormat} — AVIF or WebP would reduce file size and LCP load time` });
  }

  if (isCrossOrigin) {
    issues.push({ s: "info", msg: "renderTime is 0 — resource is cross-origin and the server does not send Timing-Allow-Origin" });
  }

  if (!autoplay && preload === "none") {
    issues.push({ s: "warning", msg: 'preload="none" on a non-autoplay video may delay poster image loading in some browsers' });
  }

  // Summary
  console.log("%c✅ LCP element is a <video>", "color: #22c55e; font-weight: bold;");
  console.log("");

  // LCP metrics
  console.log("%cLCP Metrics", "font-weight: bold;");
  console.log(`   LCP time    : ${lcpTime} ms  ${RATING[rating].icon} ${RATING[rating].label}`);
  console.log(`   LCP source  : ${lcpSource === "poster" ? "poster image" : lcpSource === "first-frame" ? "first video frame" : "unknown"}`);
  console.log(`   Render time : ${lcp.renderTime > 0 ? Math.round(lcp.renderTime) + " ms" : "0 (cross-origin — add Timing-Allow-Origin)"}`);
  console.log(`   Load time   : ${Math.round(lcp.loadTime)} ms`);
  console.log(`   Size        : ${Math.round(lcp.size)} px²`);
  console.log(`   Poster URL  : ${lcpUrl || posterUrl || "⚠️ (none)"}`);
  console.log(`   Format      : ${posterFormat}`);

  // Video element
  console.log("");
  console.log("%cVideo Element", "font-weight: bold;");
  console.log(`   poster      : ${posterAttr || "⚠️ (not set)"}`);
  console.log(`   preload     : ${preload ?? "(not set)"}`);
  console.log(`   autoplay    : ${autoplay ? "✓" : "—"}`);
  console.log(`   muted       : ${muted ? "✓" : "—"}`);
  console.log(`   playsinline : ${playsinline ? "✓" : "—"}`);
  console.log("   Element     :", element);

  // Preload link
  console.log("");
  console.log("%cPreload Link", "font-weight: bold;");
  if (posterPreload) {
    const fp = posterPreload.getAttribute("fetchpriority");
    console.log(`   Status       : ✅ found`);
    console.log(`   fetchpriority: ${fp ?? "⚠️ (not set)"}`);
    console.log("   Element      :", posterPreload);
  } else {
    console.log(`   Status       : ⚠️ not found`);
    if (posterAttr) {
      console.log(
        `   Recommended  : <link rel="preload" as="image" href="${posterAttr}" fetchpriority="high">`,
      );
    }
  }

  // Issues
  if (issues.length > 0) {
    const totalErrors = issues.filter((i) => i.s === "error").length;
    const totalWarnings = issues.filter((i) => i.s === "warning").length;
    const totalInfos = issues.filter((i) => i.s === "info").length;
    console.log("");
    console.group(
      `%c⚠️ Issues (${totalErrors} errors · ${totalWarnings} warnings · ${totalInfos} info)`,
      "color: #ef4444; font-weight: bold;",
    );
    issues.forEach((issue) => {
      const prefix = issue.s === "error" ? "🔴" : issue.s === "warning" ? "⚠️" : "ℹ️";
      console.log(`${prefix} ${issue.msg}`);
    });
    console.groupEnd();
  } else {
    console.log("");
    console.log("%c✅ No issues found.", "color: #22c55e; font-weight: bold;");
  }

  // Quick reference
  console.log("");
  console.group("%c📝 Quick Reference", "color: #3b82f6; font-weight: bold;");
  console.log("");
  console.log("%c  ✅ Optimal video LCP setup:", "color: #22c55e;");
  const ref = posterAttr || "poster.avif";
  console.log(
    `%c  <link rel="preload" as="image" href="${ref}" fetchpriority="high">\n  <video autoplay muted playsinline loop poster="${ref}" width="1280" height="720">\n    <source src="hero.av1.webm" type="video/webm; codecs=av01.0.04M.08">\n    <source src="hero.mp4" type="video/mp4">\n  </video>`,
    "font-family: monospace;",
  );
  console.groupEnd();

  console.groupEnd();

  return {
    script: "LCP-Video-Candidate",
    status: "ok",
    metric: "LCP",
    value: lcpTime,
    unit: "ms",
    rating,
    thresholds: { good: 2500, needsImprovement: 4000 },
    details: {
      isVideo: true,
      lcpSource,
      posterUrl: lcpUrl || posterUrl || null,
      posterFormat,
      posterPreloaded: !!posterPreload,
      fetchpriorityOnPreload: posterPreload?.getAttribute("fetchpriority") ?? null,
      isCrossOrigin,
      videoAttributes: { autoplay, muted, playsinline, preload },
    },
    issues: issues.map((i) => ({ severity: i.s === "warning" ? "warning" : "info", message: i.msg })),
  };
})();
```

---

## Largest Contentful Paint (LCP)
URL: https://webperf-snippets.nucliweb.net/CoreWebVitals/LCP

Quick check for Largest Contentful Paint, a Core Web Vital that measures loading performance. LCP marks when the largest content element becomes visible in the viewport. LCP Rating Thresholds:

```js
// LCP Quick Check
// https://webperf-snippets.nucliweb.net

(async () => {
  const valueToRating = (ms) =>
    ms <= 2500 ? "good" : ms <= 4000 ? "needs-improvement" : "poor";

  const RATING = {
    good: { icon: "🟢", color: "#0CCE6A" },
    "needs-improvement": { icon: "🟡", color: "#FFA400" },
    poor: { icon: "🔴", color: "#FF4E42" },
  };

  const getActivationStart = () => {
    const navEntry = performance.getEntriesByType("navigation")[0];
    return navEntry?.activationStart || 0;
  };

  let lastPrintedTime = -1;

  const printLCP = (entry) => {
    const activationStart = getActivationStart();
    const lcpTime = Math.max(0, entry.startTime - activationStart);
    if (lcpTime === lastPrintedTime) return;
    lastPrintedTime = lcpTime;

    const rating = valueToRating(lcpTime);
    const { icon, color } = RATING[rating];

    console.group(`%cLCP: ${icon} ${(lcpTime / 1000).toFixed(2)}s (${rating})`, `color: ${color}; font-weight: bold; font-size: 14px;`);

    const element = entry.element;
    if (element) {
      console.log("");
      console.log("%cLCP Element:", "font-weight: bold;");

      let selector = element.tagName.toLowerCase();
      if (element.id) selector = `#${element.id}`;
      else if (element.className && typeof element.className === "string") {
        const classes = element.className.trim().split(/\s+/).slice(0, 2).join(".");
        if (classes) selector = `${element.tagName.toLowerCase()}.${classes}`;
      }

      console.log(`   Element: ${selector}`, element);

      const tagName = element.tagName.toLowerCase();
      if (tagName === "img") {
        console.log(`   Type: Image`);
        console.log(`   URL: ${entry.url || element.src}`);
        if (element.naturalWidth) {
          console.log(`   Dimensions: ${element.naturalWidth}×${element.naturalHeight}`);
        }
      } else if (tagName === "video") {
        console.log(`   Type: Video poster`);
        console.log(`   URL: ${entry.url || element.poster}`);
      } else if (window.getComputedStyle(element).backgroundImage !== "none") {
        console.log(`   Type: Background image`);
        console.log(`   URL: ${entry.url}`);
      } else {
        console.log(`   Type: ${tagName === "h1" || tagName === "p" ? "Text block" : tagName}`);
      }

      if (entry.size) {
        console.log(`   Size: ${entry.size.toLocaleString()} px²`);
      }

      element.style.outline = "3px dashed lime";
      element.style.outlineOffset = "2px";
      console.log("");
      console.log("%c✓ Element highlighted with green dashed outline", "color: #22c55e;");
    }

    console.groupEnd();
  };

  const observer = new PerformanceObserver((list) => {
    const entries = list.getEntries();
    const lastEntry = entries[entries.length - 1];
    if (lastEntry) printLCP(lastEntry);
  });

  observer.observe({ type: "largest-contentful-paint", buffered: true });

  console.log("%c⏱️ LCP Tracking Active", "font-weight: bold; font-size: 14px;");
  console.log("   LCP may update as larger elements load.");

  // Return for agent — collect via buffered observer (getEntriesByType does not
  // expose largest-contentful-paint entries in Chrome without an active observer).
  // 100ms gives the observer time to process buffered entries on busy pages.
  const lastLcpEntry = await new Promise((resolve) => {
    const entries = [];
    const obs = new PerformanceObserver((list) => entries.push(...list.getEntries()));
    obs.observe({ type: "largest-contentful-paint", buffered: true });
    setTimeout(() => { obs.disconnect(); resolve(entries.at(-1) ?? null); }, 100);
  });
  if (!lastLcpEntry) {
    return { script: "LCP", status: "error", error: "No LCP entries buffered" };
  }

  const lcpActivationStart = getActivationStart();
  const lcpValue = Math.round(Math.max(0, lastLcpEntry.startTime - lcpActivationStart));
  const lcpRating = valueToRating(lcpValue);
  const lcpEl = lastLcpEntry.element;
  let lcpSelector = null;
  let lcpType = null;
  if (lcpEl) {
    lcpSelector = lcpEl.tagName.toLowerCase();
    if (lcpEl.id) lcpSelector = `#${lcpEl.id}`;
    else if (lcpEl.className && typeof lcpEl.className === "string") {
      const classes = lcpEl.className.trim().split(/\s+/).slice(0, 2).join(".");
      if (classes) lcpSelector = `${lcpEl.tagName.toLowerCase()}.${classes}`;
    }
    const tag = lcpEl.tagName.toLowerCase();
    lcpType = tag === "img" ? "Image" : tag === "video" ? "Video poster" :
      window.getComputedStyle(lcpEl).backgroundImage !== "none" ? "Background image" :
      (tag === "h1" || tag === "p" ? "Text block" : tag);
  }
  return {
    script: "LCP",
    status: "ok",
    metric: "LCP",
    value: lcpValue,
    unit: "ms",
    rating: lcpRating,
    thresholds: { good: 2500, needsImprovement: 4000 },
    details: {
      element: lcpSelector,
      elementType: lcpType,
      url: lastLcpEntry.url || null,
      sizePixels: lastLcpEntry.size || null,
    },
  };
})();
```

---

# Loading

## Back/Forward Cache (bfcache)
URL: https://webperf-snippets.nucliweb.net/Loading/Back-Forward-Cache

Analyzes Back/Forward Cache (bfcache) to determine if your page is eligible for instant back/forward navigations. When bfcache works, users get instant (0ms) page loads when using browser back/forward buttons, dramatically improving perceived performance. Why this matters: bfcache is one of the most impactful performance optimizations available - it can make navigation instantaneous. However, many pages are unknowingly ineligible due to common patterns like `unload` handlers, `Cache-Control: no-store`, or ongoing network requests. This snippet helps identify why your page isn't being cached and how to fix it. bfcache Impact:

```js
// Back/Forward Cache (bfcache) Analysis
// https://webperf-snippets.nucliweb.net

(() => {
  const results = {
    supported: 'PerformanceNavigationTiming' in window,
    wasRestored: false,
    eligibility: null,
    blockingReasons: [],
    recommendations: [],
  };

  // Check if current page was restored from bfcache
  const checkRestoration = () => {
    // Check via pageshow event
    window.addEventListener('pageshow', (event) => {
      if (event.persisted) {
        results.wasRestored = true;
        console.log(
          '%c⚡ Page restored from bfcache!',
          'color: #22c55e; font-weight: bold; font-size: 14px;'
        );
        console.log('   Navigation was instant (0ms)');
      }
    });

    // Check via Performance Navigation Timing
    if (results.supported) {
      const navEntry = performance.getEntriesByType('navigation')[0];
      if (navEntry && navEntry.type === 'back_forward') {
        // Check activation timing for bfcache restore
        if (navEntry.activationStart > 0) {
          results.wasRestored = true;
        }
      }
    }
  };

  // Test bfcache eligibility
  const testEligibility = () => {
    const issues = [];
    const recs = [];

    // 1. Check for unload handlers
    const hasUnload = window.onunload !== null || window.onbeforeunload !== null;
    if (hasUnload) {
      issues.push({
        reason: 'unload/beforeunload handler detected',
        severity: 'high',
        description: 'These handlers block bfcache',
      });
      recs.push('Remove unload/beforeunload handlers. Use pagehide or visibilitychange instead.');
    }

    // 2. Check for Cache-Control: no-store
    // Note: Can't check response headers from JS, but we can detect it indirectly
    const meta = document.querySelector('meta[http-equiv="Cache-Control"]');
    if (meta && meta.content.includes('no-store')) {
      issues.push({
        reason: 'Cache-Control: no-store in meta tag',
        severity: 'high',
        description: 'Prevents page from being cached',
      });
      recs.push('Remove Cache-Control: no-store or change to no-cache.');
    }

    // 3. Check for open IndexedDB connections
    if (window.indexedDB) {
      // Can't directly check open connections, but we can warn
      const hasIndexedDB = performance.getEntriesByType('resource').some(
        r => r.name.includes('indexedDB')
      );
      if (hasIndexedDB) {
        issues.push({
          reason: 'IndexedDB may be in use',
          severity: 'medium',
          description: 'Open IndexedDB transactions block bfcache',
        });
        recs.push('Close IndexedDB connections before page hide.');
      }
    }

    // 4. Check for broadcast channels
    // Can't directly detect, but can check if BroadcastChannel exists
    if (window.BroadcastChannel) {
      // Just a warning - we can't detect if actually in use
      issues.push({
        reason: 'BroadcastChannel API available (check if in use)',
        severity: 'low',
        description: 'Open BroadcastChannel connections may block bfcache',
      });
    }

    // 5. Check for embedded iframes with issues
    const iframes = document.querySelectorAll('iframe');
    if (iframes.length > 0) {
      issues.push({
        reason: `${iframes.length} iframe(s) detected`,
        severity: 'medium',
        description: 'Iframes with bfcache blockers will block parent page',
      });
      recs.push('Ensure iframes are also bfcache compatible.');
    }

    // 6. Check for Service Worker
    if ('serviceWorker' in navigator && navigator.serviceWorker.controller) {
      // Service workers are OK, but just noting it
      issues.push({
        reason: 'Service Worker active',
        severity: 'info',
        description: 'Service Workers with fetch handlers are generally OK, but check for ongoing operations',
      });
    }

    // 7. Check for open WebSocket/WebRTC
    // Can't directly detect, but we can check for common libraries
    if (window.WebSocket) {
      issues.push({
        reason: 'WebSocket API available (check if connections are open)',
        severity: 'medium',
        description: 'Open WebSocket connections block bfcache',
      });
      recs.push('Close WebSocket connections before page hide.');
    }

    // 8. Check for ongoing fetch/XHR
    // Check if there are active resource requests
    const resources = performance.getEntriesByType('resource');
    const recent = resources.filter(r => r.responseEnd === 0 || (performance.now() - r.responseEnd < 100));
    if (recent.length > 0) {
      issues.push({
        reason: `${recent.length} recent/ongoing network requests`,
        severity: 'low',
        description: 'Ongoing requests may prevent bfcache',
      });
      recs.push('Ensure requests complete or are aborted on page hide.');
    }

    results.blockingReasons = issues;
    results.recommendations = recs;

    // Determine eligibility
    const highSeverity = issues.filter(i => i.severity === 'high').length;
    const mediumSeverity = issues.filter(i => i.severity === 'medium').length;

    if (highSeverity > 0) {
      results.eligibility = 'blocked';
    } else if (mediumSeverity > 1) {
      results.eligibility = 'likely-blocked';
    } else if (issues.length > 0) {
      results.eligibility = 'potentially-eligible';
    } else {
      results.eligibility = 'likely-eligible';
    }

    return results.eligibility;
  };

  // Display results
  const displayResults = () => {
    const statusIcons = {
      'likely-eligible': '🟢',
      'potentially-eligible': '🟡',
      'likely-blocked': '🟠',
      'blocked': '🔴',
    };

    const statusColors = {
      'likely-eligible': '#22c55e',
      'potentially-eligible': '#f59e0b',
      'likely-blocked': '#fb923c',
      'blocked': '#ef4444',
    };

    const statusText = {
      'likely-eligible': 'Likely Eligible',
      'potentially-eligible': 'Potentially Eligible',
      'likely-blocked': 'Likely Blocked',
      'blocked': 'Blocked',
    };

    const icon = statusIcons[results.eligibility] || '⚪';
    const color = statusColors[results.eligibility] || '#6b7280';
    const text = statusText[results.eligibility] || 'Unknown';

    console.group(
      `%c${icon} bfcache Status: ${text}`,
      `color: ${color}; font-weight: bold; font-size: 14px;`
    );

    console.log('');
    console.log('%c📊 Status:', 'font-weight: bold;');

    if (results.wasRestored) {
      console.log('%c   ✅ This page WAS restored from bfcache', 'color: #22c55e;');
      console.log('      Navigation was instant!');
    } else {
      console.log('   ℹ️  This page was NOT restored from bfcache');
      console.log('      (Either first visit or bfcache was blocked on previous navigation)');
    }

    // Navigation timing comparison
    if (results.supported) {
      const navEntry = performance.getEntriesByType('navigation')[0];
      if (navEntry) {
        console.log('');
        console.log('%c🕐 Navigation Timing:', 'font-weight: bold;');
        console.log(`   Type: ${navEntry.type}`);
        console.log(`   Duration: ${Math.round(navEntry.duration)}ms`);

        if (navEntry.type === 'back_forward') {
          if (navEntry.duration < 10) {
            console.log('%c   ⚡ Fast back/forward (likely from bfcache)', 'color: #22c55e;');
          } else {
            console.log('%c   🐌 Slow back/forward (full reload)', 'color: #ef4444;');
          }
        }
      }
    }

    // Display issues
    if (results.blockingReasons.length > 0) {
      console.log('');
      console.log('%c🔍 Potential Issues:', 'font-weight: bold;');

      const issueTable = results.blockingReasons.map(issue => ({
        Severity: issue.severity.toUpperCase(),
        Issue: issue.reason,
        Impact: issue.description,
      }));

      console.table(issueTable);
    } else {
      console.log('');
      console.log('%c✅ No obvious bfcache blockers detected!', 'color: #22c55e; font-weight: bold;');
    }

    // Recommendations
    if (results.recommendations.length > 0) {
      console.log('');
      console.log('%c💡 Recommendations:', 'color: #3b82f6; font-weight: bold;');
      results.recommendations.forEach((rec, idx) => {
        console.log(`   ${idx + 1}. ${rec}`);
      });
    }

    // How to test
    console.log('');
    console.log('%c🧪 How to Test:', 'font-weight: bold;');
    console.log('%c   IMPORTANT: Run snippet BEFORE navigating away!', 'color: #f59e0b;');
    console.log('');
    console.log('   1. Run this snippet (you already did this ✓)');
    console.log('   2. Navigate to another page');
    console.log('   3. Click browser Back button');
    console.log('   4. Check console for restoration message');
    console.log('');
    console.log('   Or use Chrome DevTools → Application → Back/forward cache');

    console.groupEnd();

    return results;
  };

  // Check for NotRestoredReasons API (Chrome 123+)
  const checkNotRestoredReasons = () => {
    if (!('PerformanceNavigationTiming' in window)) {
      return null;
    }

    const navEntry = performance.getEntriesByType('navigation')[0];
    if (!navEntry || !navEntry.notRestoredReasons) {
      return null;
    }

    console.group('%c🔬 Not Restored Reasons (Chrome 123+)', 'font-weight: bold; color: #3b82f6;');

    const reasons = navEntry.notRestoredReasons;

    console.log('');
    console.log('%cPage-level information:', 'font-weight: bold;');

    if (reasons.blocked === true) {
      console.log('%c   ❌ Page was blocked from bfcache', 'color: #ef4444;');
    } else {
      console.log('%c   ✅ Page was not blocked', 'color: #22c55e;');
    }

    if (reasons.url) {
      console.log(`   URL: ${reasons.url}`);
    }

    if (reasons.id) {
      console.log(`   Frame ID: ${reasons.id}`);
    }

    if (reasons.name) {
      console.log(`   Frame name: ${reasons.name}`);
    }

    if (reasons.src) {
      console.log(`   Source: ${reasons.src}`);
    }

    // Parse NotRestoredReasonDetails array
    // Each entry is an object with { reason: string, source: string }
    // Common reasons: "WebSocket", "unload-listener", "IndexedDB", etc.
    // Sources: "JavaScript", "UserAgentOnly", etc.
    if (reasons.reasons && reasons.reasons.length > 0) {
      console.log('');
      console.log('%cBlocking reasons:', 'font-weight: bold; color: #ef4444;');

      reasons.reasons.forEach((reasonDetail, idx) => {
        // reasonDetail is a NotRestoredReasonDetails object
        const reasonName = reasonDetail.reason || 'Unknown reason';
        const reasonSource = reasonDetail.source || 'Unknown source';

        console.group(`   ${idx + 1}. ${reasonName}`);

        // Show detailed information
        console.log(`      Reason: ${reasonName}`);
        console.log(`      Source: ${reasonSource}`);

        // Add helpful context for common reasons
        const reasonExplanations = {
          'WebSocket': 'Open WebSocket connections prevent bfcache. Close them on pagehide event.',
          'unload-listener': 'unload event listeners block bfcache. Use pagehide or visibilitychange instead.',
          'response-cache-control-no-store': 'Cache-Control: no-store header prevents caching. Change to no-cache.',
          'IndexedDB': 'Open IndexedDB transactions block bfcache. Close connections on pagehide.',
          'BroadcastChannel': 'Open BroadcastChannel prevents bfcache. Close it on pagehide.',
          'dedicated-worker': 'Dedicated workers can block bfcache. Terminate them on pagehide.',
        };

        if (reasonExplanations[reasonName]) {
          console.log(`      💡 ${reasonExplanations[reasonName]}`);
        }

        console.groupEnd();
      });
    }

    // Check children (iframes)
    if (reasons.children && reasons.children.length > 0) {
      console.log('');
      console.log('%cEmbedded frames:', 'font-weight: bold;');

      reasons.children.forEach((child, idx) => {
        console.group(`   ${idx + 1}. ${child.url || child.src || 'iframe'}`);

        if (child.blocked) {
          console.log('%c      Status: BLOCKED', 'color: #ef4444;');
        } else {
          console.log('%c      Status: OK', 'color: #22c55e;');
        }

        if (child.id) {
          console.log(`      Frame ID: ${child.id}`);
        }

        if (child.name) {
          console.log(`      Frame name: ${child.name}`);
        }

        if (child.reasons && child.reasons.length > 0) {
          console.log('      Blocking reasons:');
          child.reasons.forEach(reasonDetail => {
            console.log(`        • ${reasonDetail.reason || 'Unknown'}`);
            if (reasonDetail.source) {
              console.log(`          Source: ${reasonDetail.source}`);
            }
          });
        }

        console.groupEnd();
      });
    }

    // Summary table for easier visualization
    if (reasons.reasons && reasons.reasons.length > 0) {
      console.log('');
      console.log('%c📋 Summary Table:', 'font-weight: bold;');

      const reasonsTable = reasons.reasons.map(r => ({
        Reason: r.reason || 'Unknown',
        Source: r.source || 'N/A',
      }));

      console.table(reasonsTable);
    }

    console.groupEnd();
    return reasons;
  };

  // Check if snippet was executed after a back/forward navigation
  const checkExecutionTiming = () => {
    const navEntry = performance.getEntriesByType('navigation')[0];
    if (navEntry && navEntry.type === 'back_forward') {
      console.log('');
      console.group('%c⚠️  Timing Warning', 'color: #f59e0b; font-weight: bold;');
      console.log('%cSnippet executed AFTER back/forward navigation.', 'color: #f59e0b;');
      console.log('');
      console.log('For complete analysis including bfcache restoration detection:');
      console.log('   1. Run this snippet FIRST');
      console.log('   2. Then navigate away');
      console.log('   3. Then click Back button');
      console.log('');
      console.log('Current analysis shows NotRestoredReasons from the navigation that just occurred.');
      console.groupEnd();
      console.log('');
    }
  };

  // Initialize
  checkRestoration();
  testEligibility();

  // Display after a short delay to ensure pageshow event fires
  setTimeout(() => {
    checkExecutionTiming();
    displayResults();

    // Check NotRestoredReasons API if available
    const notRestoredReasons = checkNotRestoredReasons();
    if (!notRestoredReasons) {
      console.log('');
      console.log('%cℹ️  For detailed reasons, use Chrome 123+ and navigate back to this page.', 'color: #6b7280;');
    }
  }, 100);

  // Expose function for manual check
  window.checkBfcache = () => {
    testEligibility();
    displayResults();
    checkNotRestoredReasons();
    return {
      script: "Back-Forward-Cache",
      status: "ok",
      details: {
        eligibility: results.eligibility,
        wasRestored: results.wasRestored,
        supported: results.supported,
      },
      issues: results.blockingReasons.map(i => ({
        severity: i.severity === 'high' ? 'error' : i.severity === 'medium' ? 'warning' : 'info',
        message: i.reason,
      })),
    };
  };

  console.log('%c🚀 bfcache Analysis Running...', 'font-weight: bold; font-size: 14px;');
  console.log('   Results will appear shortly.');
  console.log(
    '   Call %ccheckBfcache()%c anytime to re-run analysis.',
    'font-family: monospace; background: #f3f4f6; padding: 2px 4px;',
    ''
  );

  return {
    script: "Back-Forward-Cache",
    status: "ok",
    details: {
      eligibility: results.eligibility,
      wasRestored: results.wasRestored,
      supported: results.supported,
    },
    issues: results.blockingReasons.map(i => ({
      severity: i.severity === 'high' ? 'error' : i.severity === 'medium' ? 'warning' : 'info',
      message: i.reason,
    })),
    message: "bfcache analysis running. Call checkBfcache() to re-run analysis.",
    getDataFn: "checkBfcache",
  };
})();
```

---

## CSS Media Queries Analysis
URL: https://webperf-snippets.nucliweb.net/Loading/CSS-Media-Queries-Analysis

Analyze all `@media` rules in CSS stylesheets to identify classes and properties targeting viewports bigger than a specified breakpoint (default: 768px). Results are grouped by inline CSS and external files, with byte size estimates for potential mobile savings. This page provides two complementary analysis functions: 1. `analyzeCSSMediaQueries(minWidth)` - Identifies desktop-specific CSS and calculates byte savings 2. `analyzeCSSPerformanceImpact(minWidth)` - Estimates real-world performance impact across device profiles, including Core Web Vitals effects, render-blocking time, and business impact projections

```js
// Analyze CSS @media rules for viewports bigger than a specified breakpoint
// Default minWidth = 768 (px), but you can customize it

async function analyzeCSSMediaQueries(minWidth = 768) {
  const stylesheets = [...document.styleSheets];
  const inlineMediaQueries = [];
  const fileMediaQueries = [];
  let inlineTotalClasses = 0;
  let inlineTotalProperties = 0;
  let filesTotalClasses = 0;
  let filesTotalProperties = 0;
  let inlineTotalBytes = 0;
  let filesTotalBytes = 0;
  let corsBlockedCount = 0;

  // Helper to check if media query targets bigger than specified breakpoint
  function isBiggerThanBreakpoint(mediaText) {
    if (!mediaText) return false;

    // Check for min-width greater than specified breakpoint
    const minWidthMatch = mediaText.match(/min-width:\s*(\d+)(px|em|rem)/i);
    if (minWidthMatch) {
      const value = parseInt(minWidthMatch[1]);
      const unit = minWidthMatch[2].toLowerCase();

      if (unit === "px" && value > minWidth) return true;
      if (unit === "em" && value > minWidth / 16) return true; // Convert to em
      if (unit === "rem" && value > minWidth / 16) return true; // Convert to rem
    }

    // Check for max-width to exclude (mobile-only queries)
    const maxWidthMatch = mediaText.match(/max-width:\s*(\d+)(px|em|rem)/i);
    if (maxWidthMatch && !minWidthMatch) {
      return false; // max-width only queries are for smaller viewports
    }

    return false;
  }

  // Helper to count classes and properties in CSS text
  function countClassesAndProperties(cssText) {
    const classMatches = cssText.match(/\.[a-zA-Z0-9_-]+/g) || [];
    const propertyMatches = cssText.match(/[a-z-]+\s*:/g) || [];

    return {
      classes: classMatches.length,
      properties: propertyMatches.length,
    };
  }

  // Helper to calculate byte size
  function getByteSize(text) {
    return new Blob([text]).size;
  }

  // Helper to format bytes
  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];
  }

  // Parse CSS text to find @media rules
  function parseMediaQueriesFromCSS(cssText, source, isInline) {
    // Improved regex to capture complete @media rules
    const mediaRegex = /@media\s*([^{]+)\{((?:[^{}]|\{[^{}]*\})*)\}/g;
    let match;

    while ((match = mediaRegex.exec(cssText)) !== null) {
      const mediaText = match[1].trim();
      const mediaContent = match[2];

      if (isBiggerThanBreakpoint(mediaText)) {
        const counts = countClassesAndProperties(mediaContent);
        const byteSize = getByteSize(match[0]);

        const mediaQueryData = {
          source: source,
          mediaQuery: mediaText,
          classes: counts.classes,
          properties: counts.properties,
          bytes: byteSize,
          bytesFormatted: formatBytes(byteSize),
        };

        if (isInline) {
          inlineMediaQueries.push(mediaQueryData);
          inlineTotalClasses += counts.classes;
          inlineTotalProperties += counts.properties;
          inlineTotalBytes += byteSize;
        } else {
          fileMediaQueries.push(mediaQueryData);
          filesTotalClasses += counts.classes;
          filesTotalProperties += counts.properties;
          filesTotalBytes += byteSize;
        }
      }
    }
  }

  // Process stylesheets
  for (let sheetIndex = 0; sheetIndex < stylesheets.length; sheetIndex++) {
    const sheet = stylesheets[sheetIndex];
    const isInline = !sheet.href;
    const source = sheet.href || `<style> tag #${sheetIndex}`;

    try {
      // Try to access via cssRules first
      const rules = sheet.cssRules || sheet.rules;
      if (rules) {
        [...rules].forEach((rule) => {
          if (rule.type === CSSRule.MEDIA_RULE) {
            const mediaText = rule.media.mediaText;
            if (isBiggerThanBreakpoint(mediaText)) {
              const cssText = rule.cssText;
              const counts = countClassesAndProperties(cssText);
              const byteSize = getByteSize(cssText);

              const mediaQueryData = {
                source: source,
                mediaQuery: mediaText,
                classes: counts.classes,
                properties: counts.properties,
                bytes: byteSize,
                bytesFormatted: formatBytes(byteSize),
              };

              if (isInline) {
                inlineMediaQueries.push(mediaQueryData);
                inlineTotalClasses += counts.classes;
                inlineTotalProperties += counts.properties;
                inlineTotalBytes += byteSize;
              } else {
                fileMediaQueries.push(mediaQueryData);
                filesTotalClasses += counts.classes;
                filesTotalProperties += counts.properties;
                filesTotalBytes += byteSize;
              }
            }
          }
        });
      }
    } catch {
      // If CORS blocked, try to fetch the CSS
      if (sheet.href) {
        try {
          const response = await fetch(sheet.href);
          const cssText = await response.text();
          parseMediaQueriesFromCSS(cssText, sheet.href, false);
        } catch {
          // Silently count CORS blocked files
          corsBlockedCount++;
        }
      }
    }
  }

  const totalBytes = inlineTotalBytes + filesTotalBytes;

  // Display results
  console.group(`📊 CSS Media Queries Analysis (min-width > ${minWidth}px)`);
  console.log(`Total @media rules found: ${inlineMediaQueries.length + fileMediaQueries.length}`);
  console.log(`Total classes: ${inlineTotalClasses + filesTotalClasses}`);
  console.log(`Total properties: ${inlineTotalProperties + filesTotalProperties}`);
  console.groupEnd();

  // Mobile Savings Estimate
  console.group("💾 POTENTIAL MOBILE SAVINGS");
  console.log(
    `%cEstimated CSS bytes that mobile doesn't need: ${formatBytes(totalBytes)}`,
    "font-weight: bold; color: #22c55e; font-size: 14px;",
  );
  console.log(`  └─ From inline CSS: ${formatBytes(inlineTotalBytes)}`);
  console.log(`  └─ From external files: ${formatBytes(filesTotalBytes)}`);
  console.log("");
  console.log("💡 By splitting these styles into separate files with media queries,");
  console.log("   mobile users won't need to download, parse, or process this CSS.");
  console.groupEnd();

  // Inline CSS Results
  console.group("🔷 INLINE CSS (<style> tags)");
  console.log(`Media queries: ${inlineMediaQueries.length}`);
  console.log(`Classes: ${inlineTotalClasses}`);
  console.log(`Properties: ${inlineTotalProperties}`);
  console.log(`Total size: ${formatBytes(inlineTotalBytes)}`);
  if (inlineMediaQueries.length === 0) {
    console.log(`No inline media queries found for viewports > ${minWidth}px.`);
  }
  console.groupEnd();

  // External Files Results
  console.group("📁 EXTERNAL FILES (.css files)");
  console.log(`Media queries: ${fileMediaQueries.length}`);
  console.log(`Classes: ${filesTotalClasses}`);
  console.log(`Properties: ${filesTotalProperties}`);
  console.log(`Total size: ${formatBytes(filesTotalBytes)}`);
  if (fileMediaQueries.length === 0) {
    console.log(`No external file media queries found for viewports > ${minWidth}px.`);
  }
  console.groupEnd();

  // CORS warning if applicable
  if (corsBlockedCount > 0) {
    console.group("⚠️ CORS LIMITATIONS");
    console.log(
      `%c${corsBlockedCount} external CSS file(s) could not be analyzed due to CORS restrictions.`,
      "color: #f59e0b; font-weight: bold",
    );
    console.log("");
    console.log("These files are loaded by the browser but cannot be read via JavaScript.");
    console.log("The analysis above reflects only the CSS files that were accessible.");
    console.log("");
    console.log("💡 To analyze CORS-blocked files:");
    console.log("   • Download the CSS files manually and run the analysis locally");
    console.log("   • Use Chrome DevTools Coverage tab to measure unused CSS");
    console.log("   • Run this analysis from the same origin as the CSS files");
    console.groupEnd();
  }

  return {
    summary: {
      total: {
        mediaQueries: inlineMediaQueries.length + fileMediaQueries.length,
        classes: inlineTotalClasses + filesTotalClasses,
        properties: inlineTotalProperties + filesTotalProperties,
        bytes: totalBytes,
        bytesFormatted: formatBytes(totalBytes),
      },
      inline: {
        mediaQueries: inlineMediaQueries.length,
        classes: inlineTotalClasses,
        properties: inlineTotalProperties,
        bytes: inlineTotalBytes,
        bytesFormatted: formatBytes(inlineTotalBytes),
      },
      files: {
        mediaQueries: fileMediaQueries.length,
        classes: filesTotalClasses,
        properties: filesTotalProperties,
        bytes: filesTotalBytes,
        bytesFormatted: formatBytes(filesTotalBytes),
      },
      corsBlocked: corsBlockedCount,
    },
    details: {
      inline: inlineMediaQueries,
      files: fileMediaQueries,
    },
  };
}

// CSS Performance Impact Analyzer
// Estimates the real-world performance cost of unnecessary CSS on mobile devices

async function analyzeCSSPerformanceImpact(minWidth = 768) {
  console.log("🔍 Analyzing CSS performance impact...\n");

  // First, run the media queries analysis
  const mediaQueryResults = await analyzeCSSMediaQueries(minWidth);
  const unnecessaryBytes = mediaQueryResults.summary.total.bytes;

  // If no data was found, show early exit message
  if (unnecessaryBytes === 0 && mediaQueryResults.summary.corsBlocked > 0) {
    console.log(
      "%c⚠️ Unable to perform performance analysis",
      "color: #f59e0b; font-weight: bold; font-size: 14px",
    );
    console.log("");
    console.log(`All CSS files (${mediaQueryResults.summary.corsBlocked}) are blocked by CORS.`);
    console.log("No desktop-specific @media queries could be analyzed.");
    console.log("");
    console.log("Please try one of these alternatives:");
    console.log("  • Run this script from the same domain as the CSS files");
    console.log("  • Use Chrome DevTools Coverage tab for manual analysis");
    console.log("  • Download CSS files and analyze them locally");
    return null;
  }

  if (unnecessaryBytes === 0) {
    console.log("%c✅ Great news!", "color: #22c55e; font-weight: bold; font-size: 14px");
    console.log("");
    console.log("No desktop-specific CSS found (min-width > " + minWidth + "px).");
    console.log("This site appears to be optimized for mobile-first delivery.");
    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;

  console.group("⚡ PERFORMANCE IMPACT ANALYSIS");
  console.log(`Unnecessary CSS size: ${mediaQueryResults.summary.total.bytesFormatted}`);
  console.log(`Classes to process: ${totalClasses}`);
  console.log(`Properties to compute: ${totalProperties}\n`);

  Object.entries(deviceProfiles).forEach(([deviceName, profile]) => {
    console.group(`📱 ${deviceName}`);
    console.log(`   ${profile.description}`);
    console.log("");

    // 1. Network download time
    const downloadTimeMs = (unnecessaryBytes * 8) / (profile.networkSpeed * 1000);

    // 2. CSS Parsing time (converting bytes to styles)
    const parsingTimeMs = (unnecessaryBytes / (1024 * 1024) / profile.cssParsingSpeed) * 1000;

    // 3. CSSOM construction (creating the CSS Object Model)
    // Approximation: ~0.01ms per CSS property on mid-range devices
    const cssomConstructionMs = totalProperties * 0.01 * profile.cssSelectorMatchingMultiplier;

    // 4. Selector matching overhead
    // Each class needs to be evaluated against the DOM (even if it doesn't match)
    // ~0.005ms per selector on mid-range devices
    const selectorMatchingMs = totalClasses * 0.005 * profile.cssSelectorMatchingMultiplier;

    // 5. Style recalculation overhead during interactions
    // More CSS rules = more time in each style recalc
    const recalcOverheadMs = totalProperties * 0.002 * profile.cssSelectorMatchingMultiplier;

    const totalBlockingTime = downloadTimeMs + parsingTimeMs + cssomConstructionMs;
    const totalRuntimeOverhead = selectorMatchingMs + recalcOverheadMs;

    console.log("🚦 Render-blocking impact:");
    console.log(`   • Network download: ${downloadTimeMs.toFixed(2)}ms`);
    console.log(`   • CSS parsing: ${parsingTimeMs.toFixed(2)}ms`);
    console.log(`   • CSSOM construction: ${cssomConstructionMs.toFixed(2)}ms`);
    console.log(
      `   📊 Total blocking time: %c${totalBlockingTime.toFixed(2)}ms`,
      "font-weight: bold; color: #ef4444",
    );
    console.log("");

    console.log("⚙️ Runtime overhead (per page interaction):");
    console.log(`   • Selector matching: ${selectorMatchingMs.toFixed(2)}ms`);
    console.log(`   • Style recalculation: ${recalcOverheadMs.toFixed(2)}ms`);
    console.log(
      `   📊 Total per-interaction: %c${totalRuntimeOverhead.toFixed(2)}ms`,
      "font-weight: bold; color: #f59e0b",
    );
    console.log("");

    // Core Web Vitals impact estimation
    console.log("📈 Core Web Vitals Impact:");

    // FCP impact (part of blocking time)
    const fcpImpact = totalBlockingTime * 0.6; // ~60% affects FCP
    console.log(`   • FCP delay: ~${fcpImpact.toFixed(0)}ms`);

    // LCP impact (if there are images/text affected by these styles)
    const lcpImpact = totalBlockingTime * 0.4;
    console.log(`   • LCP delay: ~${lcpImpact.toFixed(0)}ms`);

    // INP impact (runtime overhead affects each interaction)
    console.log(`   • INP overhead: ~${totalRuntimeOverhead.toFixed(0)}ms per interaction`);

    // TBT (Total Blocking Time) - time where main thread is blocked
    const tbtContribution = Math.max(0, totalBlockingTime - 50); // Tasks >50ms contribute to TBT
    console.log(`   • TBT contribution: ~${tbtContribution.toFixed(0)}ms`);

    console.groupEnd();
    console.log("");
  });

  console.groupEnd();

  // Savings summary
  console.group("💰 POTENTIAL SAVINGS");

  const midRangeProfile = deviceProfiles["Mid-range (Moto G Power, iPhone SE)"];
  const midRangeDownload = (unnecessaryBytes * 8) / (midRangeProfile.networkSpeed * 1000);
  const midRangeParsing =
    (unnecessaryBytes / (1024 * 1024) / midRangeProfile.cssParsingSpeed) * 1000;
  const midRangeCSSOM = totalProperties * 0.01 * midRangeProfile.cssSelectorMatchingMultiplier;
  const midRangeTotalBlocking = midRangeDownload + midRangeParsing + midRangeCSSOM;

  console.log("For the median mobile user (mid-range device):");
  console.log("");
  console.log(
    `%c✓ Eliminate ${midRangeTotalBlocking.toFixed(0)}ms of render-blocking time`,
    "font-weight: bold; color: #22c55e; font-size: 13px",
  );
  console.log(
    `%c✓ Reduce INP by ~${(totalProperties * 0.002 * midRangeProfile.cssSelectorMatchingMultiplier).toFixed(0)}ms per interaction`,
    "font-weight: bold; color: #22c55e; font-size: 13px",
  );
  console.log(
    `%c✓ Save ${mediaQueryResults.summary.total.bytesFormatted} of bandwidth`,
    "font-weight: bold; color: #22c55e; font-size: 13px",
  );
  console.log("");

  console.log("Implementation strategy:");
  console.log("1. Split desktop-specific CSS into separate file(s)");
  console.log(
    '2. Load with media query: <link rel="stylesheet" href="desktop.css" media="(min-width: 768px)">',
  );
  console.log("3. Consider critical CSS inlining for above-the-fold mobile content");
  console.log("");

  // Business impact estimation
  const fcpImprovement = midRangeTotalBlocking * 0.6;
  console.log("📊 Estimated business impact:");
  console.log(`   • FCP improvement: ~${fcpImprovement.toFixed(0)}ms`);
  console.log("   • 100ms FCP improvement ≈ 1% conversion increase (Google/Deloitte research)");
  console.log(`   • Potential conversion lift: ~${(fcpImprovement / 100).toFixed(2)}%`);

  console.groupEnd();

  // Memory impact
  console.group("🧠 MEMORY IMPACT");

  // CSSOM memory estimation
  // Approximately: each CSS rule = ~1KB in memory (including selector, properties, computed values)
  const totalMediaRules = mediaQueryResults.summary.total.mediaQueries;
  const estimatedMemoryKB = totalMediaRules * 1.0; // 1KB per rule

  console.log(`Estimated CSSOM memory overhead: ~${estimatedMemoryKB.toFixed(1)} KB`);
  console.log(
    `Total unnecessary memory allocation: ~${(unnecessaryBytes / 1024 + estimatedMemoryKB).toFixed(1)} KB`,
  );
  console.log("");
  console.log("💡 This memory stays allocated throughout the page lifecycle,");
  console.log("   contributing to memory pressure on low-end devices.");

  console.groupEnd();

  // CORS disclaimer if applicable
  if (mediaQueryResults.summary.corsBlocked > 0) {
    console.log("");
    console.log(
      `%c⚠️ Note: ${mediaQueryResults.summary.corsBlocked} CSS file(s) blocked by CORS were not analyzed.`,
      "color: #f59e0b; font-weight: bold",
    );
    console.log("The actual performance impact could be higher than shown above.");
  }

  // Return structured data
  return {
    unnecessaryBytes,
    unnecessaryCss: mediaQueryResults.summary.total.bytesFormatted,
    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;
    }, {}),
    estimatedConversionLift: ((midRangeTotalBlocking * 0.6) / 100).toFixed(2) + "%",
  };
}

window.analyzeCSSPerformanceImpact = analyzeCSSPerformanceImpact;

// Run with default breakpoint (768px)
(async () => {
  const result = await analyzeCSSMediaQueries();
  if (!result) {
    return { script: "CSS-Media-Queries-Analysis", status: "error", error: "No analyzable CSS found (CORS blocked or no desktop media queries)" };
  }
  return {
    script: "CSS-Media-Queries-Analysis",
    status: "ok",
    count: result.summary.total.mediaQueries,
    details: {
      total: result.summary.total,
      inline: result.summary.inline,
      files: result.summary.files,
      corsBlockedCount: result.summary.corsBlocked,
    },
    items: [...result.details.inline, ...result.details.files],
  };
})();

// Or customize the breakpoint:
// analyzeCSSMediaQueries(1024);  // for desktop
// analyzeCSSMediaQueries(480);   // for small tablets
```

---

## Cache Strategy Analysis
URL: https://webperf-snippets.nucliweb.net/Loading/Cache-Strategy-Analysis

Audits HTTP caching strategies across all page resources, identifying resources without cache, short-lived cache configurations, cache anti-patterns, and CDN cache hit rates. Provides a cache efficiency score and actionable recommendations. What this snippet analyzes: - Cache strategy classification for every resource (immutable, long, medium, short, no-cache, no-store, etc.) - Resources missing cache headers entirely - Static assets with insufficient cache duration - Cache anti-patterns (versioned files without `immutable`, large uncached resources, outdated `Expires` usage) - CDN cache hit/miss detection (Cloudflare, Vercel, CloudFront, and generic proxies) - Cache efficiency score and estimated bandwidth savings - Protocol distribution (HTTP/1.1 vs H2/H3) - Uncompressed text resources and duplicate resource loads How the browser decides to serve a resource: ```mermaid flowchart TD     A[Resource Request] --> B{In browser cache?}     B -- No --> C[Fetch from network]     B -- Yes --> D{Cache-Control directive?}     D -- no-store --> C     D -- no-cache / max-age=0 --> E[Revalidate with server]     D -- max-age not expired --> F[Serve from cache ✅]     D -- max-age expired --> E     E -- 304 Not Modified --> F     E -- 200 OK --> G[New response + update cache]     C --> G ``` Why caching matters for performance:

```js
// Cache Strategy Analysis
// Analyzes HTTP caching strategies, CDN hit rates, and cache anti-patterns across all page resources
// https://webperf-snippets.nucliweb.net

(async () => {
  // --- Helpers ---

  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);

  function isFirstParty(hostname) {
    return getRootDomain(hostname) === currentRootDomain;
  }

  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];
  }

  function getResourceType(entry) {
    // Use file extension as primary signal — initiatorType reflects the loader
    // (e.g. a font loaded from CSS has initiatorType "css", not "font")
    const path = (entry.name || "").split("?")[0].toLowerCase();
    if (/\.(woff2?|ttf|otf|eot)$/.test(path)) return "font";
    if (/\.(png|jpe?g|gif|webp|avif|svg|ico|bmp)$/.test(path)) return "image";
    if (/\.(mp4|webm|ogg|mov)$/.test(path)) return "video";
    if (/\.(mp3|wav|flac|aac)$/.test(path)) return "audio";
    if (/\.css$/.test(path)) return "style";
    if (/\.js$/.test(path)) return "script";

    // Fall back to initiatorType map
    const map = {
      script: "script",
      link: "style",
      css: "style",
      img: "image",
      image: "image",
      video: "video",
      audio: "audio",
      font: "font",
      fetch: "fetch",
      xmlhttprequest: "xhr",
      iframe: "iframe",
      other: "other",
    };
    return map[entry.initiatorType] || entry.initiatorType || "other";
  }

  function detectHashInUrl(url) {
    // Detects content-hash patterns in file paths or query strings.
    // Real content hashes are hex-only (a-f0-9) — broad alphanumeric patterns
    // produce false positives on descriptive filenames like "sprite-placeholder.png".
    const hashPatterns = [
      // Hex hash embedded in filename: .abc12345def.ext or -abc12345def.ext (min 8 hex chars)
      /[.-][a-f0-9]{8,32}\.(js|css|woff2?|ttf|eot|svg|png|jpe?g|webp|avif)(\?|$)/,
      // Query string version params: ?v=abc123, ?hash=..., ?rev=...
      /[?&](v|version|hash|rev|_v)=[a-zA-Z0-9._-]+/,
    ];
    return hashPatterns.some((re) => re.test(url));
  }

  function isStaticAsset(type) {
    return ["script", "style", "font", "image"].includes(type);
  }

  function parseCacheControl(headerValue) {
    const directives = {};
    if (!headerValue) return directives;
    for (const part of headerValue.split(",")) {
      const [key, val] = part.trim().split("=");
      const k = key.trim().toLowerCase();
      directives[k] = val !== undefined ? val.trim().replace(/"/g, "") : true;
    }
    return directives;
  }

  function classifyCacheStrategy(headers) {
    if (!headers) return "unknown";

    const cc = parseCacheControl(headers["cache-control"] || "");
    const hasEtag = !!headers["etag"];
    const hasLastModified = !!headers["last-modified"];
    const hasExpires = !!headers["expires"];
    const hasValidators = hasEtag || hasLastModified;

    if (cc["no-store"]) return "no-store";
    if (cc["no-cache"]) return "no-cache";
    if (cc["immutable"]) return "immutable";
    if (cc["stale-while-revalidate"]) return "swr";
    if (cc["must-revalidate"] && hasValidators) return "must-revalidate";

    const maxAge =
      cc["max-age"] !== undefined ? parseInt(cc["max-age"], 10) : null;
    const sMaxAge =
      cc["s-maxage"] !== undefined ? parseInt(cc["s-maxage"], 10) : null;
    const effectiveMaxAge = sMaxAge ?? maxAge;

    if (effectiveMaxAge !== null) {
      if (effectiveMaxAge === 0) return "no-cache";
      if (effectiveMaxAge < 3600) return "short";
      if (effectiveMaxAge <= 86400) return "medium";
      return "long";
    }

    if (hasExpires && !headers["cache-control"]) return "expires-only";
    if (Object.keys(cc).length === 0 && !hasExpires) return "none";

    return "unknown";
  }

  function detectCdnStatus(headers) {
    if (!headers) return { cdn: "unknown", status: "unknown" };

    if (headers["cf-cache-status"]) {
      return { cdn: "Cloudflare", status: headers["cf-cache-status"] };
    }
    if (headers["x-vercel-cache"]) {
      return { cdn: "Vercel", status: headers["x-vercel-cache"] };
    }
    if (headers["x-cache"]) {
      const val = headers["x-cache"].toUpperCase();
      const cdn = headers["x-amz-cf-id"] ? "CloudFront" : "CDN";
      return { cdn, status: val.includes("HIT") ? "HIT" : "MISS" };
    }
    if (headers["age"]) {
      return {
        cdn: "Proxy/CDN",
        status: `HIT (Age: ${headers["age"]}s)`,
      };
    }
    if (headers["via"]) {
      return { cdn: `Proxy (${headers["via"]})`, status: "proxied" };
    }
    if (headers["server-timing"]) {
      const st = headers["server-timing"].toLowerCase();
      if (st.includes("cdn-cache") || st.includes("cache;")) {
        return {
          cdn: "CDN (Server-Timing)",
          status: st.includes("hit") ? "HIT" : "MISS",
        };
      }
    }
    return { cdn: "none", status: "no-cdn-headers" };
  }

  // --- Phase 1: Gather resource entries ---

  // Exclude HEAD/aborted-GET entries injected by this snippet's own fetch calls
  // on previous runs. Those entries have no body (encodedBodySize=0, decodedBodySize=0)
  // but did transfer bytes (transferSize>0, i.e. only response headers were received).
  // Real page resources always have encodedBodySize > 0 (or transferSize = 0 if cached).
  const resources = performance.getEntriesByType("resource").filter(
    (r) => !(r.encodedBodySize === 0 && r.decodedBodySize === 0 && r.transferSize > 0)
  );

  // Detect duplicate URLs
  const urlCounts = new Map();
  for (const r of resources) {
    urlCounts.set(r.name, (urlCounts.get(r.name) || 0) + 1);
  }

  const entries = resources.map((r) => {
    let url;
    try {
      url = new URL(r.name);
    } catch {
      url = { hostname: location.hostname, pathname: r.name };
    }
    const firstParty = isFirstParty(url.hostname);
    const isCached = r.encodedBodySize > 0 && r.transferSize === 0;
    const isCorsRestricted =
      r.encodedBodySize === 0 && r.transferSize === 0 && !firstParty;

    return {
      url: r.name,
      shortName:
        (url.pathname || r.name).split("/").filter(Boolean).pop() ||
        url.hostname,
      host: url.hostname,
      firstParty,
      type: getResourceType(r),
      transferSize: r.transferSize || 0,
      encodedBodySize: r.encodedBodySize || 0,
      decodedBodySize: r.decodedBodySize || 0,
      isCached,
      isCorsRestricted,
      nextHopProtocol: r.nextHopProtocol || "unknown",
      duration: r.duration,
      hasHash: detectHashInUrl(r.name),
      isDuplicate: (urlCounts.get(r.name) || 1) > 1,
      // Populated in Phase 2
      headers: null,
      cacheStrategy: null,
      cdnInfo: null,
      antiPatterns: [],
    };
  });

  // --- Phase 2: Fetch headers for same-origin static assets ---

  // Scope: true same-origin only (same scheme+host+port, not just root domain).
  // isFirstParty() matches root domains (api.fedex.com = first party for www.fedex.com)
  // but the browser enforces CORS per full origin, causing console errors.
  // Also limit to static asset types — API endpoints and iframes tend to reject HEAD
  // (503/403) and pollute the console without adding useful cache strategy data.
  const FETCHABLE_TYPES = new Set(["script", "style", "font", "image"]);

  const fetchableEntries = entries.filter(
    (e) => e.url.startsWith(location.origin + "/") && FETCHABLE_TYPES.has(e.type)
  );
  const uniqueUrls = [...new Set(fetchableEntries.map((e) => e.url))];

  const headerCache = new Map();
  const BATCH_SIZE = 10;

  for (let i = 0; i < uniqueUrls.length; i += BATCH_SIZE) {
    const batch = uniqueUrls.slice(i, i + BATCH_SIZE);
    await Promise.allSettled(
      batch.map(async (url) => {
        try {
          const resp = await fetch(url, { method: "HEAD", cache: "no-store" });
          if (!resp.ok) {
            headerCache.set(url, null);
            return;
          }
          const headers = {};
          for (const [key, value] of resp.headers) {
            headers[key.toLowerCase()] = value;
          }
          headerCache.set(url, headers);
        } catch {
          // Network error or CORS — skip silently, Tier 1 heuristics apply
          headerCache.set(url, null);
        }
      })
    );
  }

  // Attach headers to entries
  for (const entry of entries) {
    entry.headers = headerCache.get(entry.url) || null;
  }

  // --- Phase 3: Classify cache strategies ---

  for (const entry of entries) {
    if (entry.headers) {
      entry.cacheStrategy = classifyCacheStrategy(entry.headers);
    } else if (entry.isCorsRestricted) {
      entry.cacheStrategy = "unknown (CORS)";
    } else if (entry.isCached) {
      // Tier 1 heuristic: no headers but we know it was cached
      entry.cacheStrategy = "cached (inferred)";
    } else {
      entry.cacheStrategy = "unknown";
    }
    entry.cdnInfo = detectCdnStatus(entry.headers);
  }

  // --- Phase 4: Detect anti-patterns ---

  const EFFECTIVE_CACHE_STRATEGIES = new Set([
    "immutable",
    "long",
    "medium",
    "swr",
    "must-revalidate",
    "cached (inferred)",
  ]);

  for (const entry of entries) {
    if (!entry.headers) continue;
    const cc = parseCacheControl(entry.headers["cache-control"] || "");
    const maxAge =
      cc["max-age"] !== undefined ? parseInt(cc["max-age"], 10) : null;
    const strategy = entry.cacheStrategy;
    const type = entry.type;

    if (isStaticAsset(type) && cc["no-store"]) {
      entry.antiPatterns.push({
        id: "static-no-store",
        severity: "error",
        message: `${type} asset with no-store — static assets should be cacheable`,
      });
    }

    if (entry.hasHash && maxAge !== null && maxAge < 86400 && !cc["no-store"]) {
      entry.antiPatterns.push({
        id: "versioned-short-cache",
        severity: "warning",
        message: `Versioned URL (hash detected) but max-age=${maxAge}s — consider long cache or immutable`,
      });
    }

    if (entry.hasHash && !cc["immutable"] && !cc["no-store"] && (maxAge === null || maxAge >= 86400)) {
      entry.antiPatterns.push({
        id: "versioned-not-immutable",
        severity: "info",
        message: `Versioned URL (hash detected) without Cache-Control: immutable`,
      });
    }

    if (
      entry.decodedBodySize > 100 * 1024 &&
      ["none", "no-store", "no-cache"].includes(strategy)
    ) {
      entry.antiPatterns.push({
        id: "large-no-cache",
        severity: "error",
        message: `Large resource (${formatBytes(entry.decodedBodySize)}) with no effective cache`,
      });
    }

    if (entry.headers["expires"] && !entry.headers["cache-control"]) {
      entry.antiPatterns.push({
        id: "expires-without-cc",
        severity: "warning",
        message: `Uses Expires header without Cache-Control (outdated pattern)`,
      });
    }

    if (isStaticAsset(type) && maxAge === 0) {
      entry.antiPatterns.push({
        id: "maxage-zero-static",
        severity: "warning",
        message: `Static asset with max-age=0 — forces revalidation on every request`,
      });
    }

    if (
      isStaticAsset(type) &&
      maxAge !== null &&
      maxAge > 0 &&
      maxAge < 3600 &&
      !cc["no-store"]
    ) {
      entry.antiPatterns.push({
        id: "short-cache-static",
        severity: "warning",
        message: `Static asset with max-age=${maxAge}s (< 1h) — consider a longer cache duration`,
      });
    }
  }

  // --- Phase 5: CDN analysis ---

  const cdnEntries = entries.filter(
    (e) => e.cdnInfo && e.cdnInfo.cdn !== "none" && e.cdnInfo.cdn !== "unknown"
  );
  const cdnHits = cdnEntries.filter((e) =>
    e.cdnInfo.status.toUpperCase().startsWith("HIT")
  ).length;
  const cdnHitRate =
    cdnEntries.length > 0
      ? Math.round((cdnHits / cdnEntries.length) * 100)
      : null;

  // --- Phase 6: Value-add metrics ---

  const effectiveEntries = entries.filter((e) =>
    EFFECTIVE_CACHE_STRATEGIES.has(e.cacheStrategy)
  );
  const cacheEfficiencyPercent =
    entries.length > 0
      ? Math.round((effectiveEntries.length / entries.length) * 100)
      : 0;

  const bandwidthSavedBytes = entries
    .filter((e) => e.isCached)
    .reduce((sum, e) => sum + e.decodedBodySize, 0);

  // Protocol distribution
  const protocolDistribution = {};
  for (const entry of entries) {
    const proto = entry.nextHopProtocol || "unknown";
    protocolDistribution[proto] = (protocolDistribution[proto] || 0) + 1;
  }

  // Uncompressed text resources (encoded ≈ decoded, size > 1KB, text type)
  const uncompressedResources = entries.filter(
    (e) =>
      e.encodedBodySize > 1024 &&
      e.decodedBodySize > 0 &&
      e.encodedBodySize / e.decodedBodySize > 0.9 &&
      ["script", "style", "fetch", "xhr"].includes(e.type)
  );

  // Duplicate resources — group by URL and track whether any load was uncached
  const uniqueDuplicates = [...new Set(
    entries.filter((e) => e.isDuplicate).map((e) => e.url)
  )].map((url) => {
    const group = entries.filter((e) => e.url === url);
    const uncachedLoads = group.filter((e) => !e.isCached).length;
    return {
      url,
      shortName: group[0]?.shortName || url,
      count: urlCounts.get(url),
      type: group[0]?.type || "unknown",
      uncachedLoads,
      // Only "costly" if at least one load went to the network
      costly: uncachedLoads > 0,
    };
  });
  // Separate costly duplicates (network requests) from cached duplicates (cheap)
  const costlyDuplicates = uniqueDuplicates.filter((d) => d.costly);
  const cachedDuplicates = uniqueDuplicates.filter((d) => !d.costly);

  // --- 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: "no-data", count: 0 };
  }

  const allAntiPatterns = entries.flatMap((e) =>
    e.antiPatterns.map((ap) => ({ ...ap, resource: e.shortName, url: e.url }))
  );

  const strategyGroups = {};
  for (const entry of entries) {
    const s = entry.cacheStrategy;
    if (!strategyGroups[s]) strategyGroups[s] = 0;
    strategyGroups[s]++;
  }

  const noCacheEntries = entries.filter((e) =>
    ["none", "no-store", "no-cache"].includes(e.cacheStrategy)
  );
  const shortCacheEntries = entries.filter(
    (e) => e.cacheStrategy === "short"
  );

  const headersAnalyzed = entries.filter((e) => e.headers !== null).length;
  const corsRestricted = entries.filter((e) => e.isCorsRestricted).length;

  // Resources excluded from header analysis — cross-origin or non-static types.
  // Cross-origin (different scheme/host/port) cannot be fetched due to CORS.
  // Non-static types (xhr, fetch, iframe, beacon…) are excluded intentionally:
  // their servers commonly reject HEAD requests (4xx/5xx) and their caching
  // rules differ from static assets — they are still visible in Tier 1 data.
  const excludedFromHeaders = entries.filter(
    (e) =>
      e.headers === null &&
      !e.isCorsRestricted &&
      (!e.url.startsWith(location.origin + "/") ||
        !FETCHABLE_TYPES.has(e.type))
  );

  console.group(
    "%c🔍 Cache Strategy Analysis",
    "font-weight: bold; font-size: 14px;"
  );

  console.log("");
  console.log("%c📊 Summary", "font-weight: bold;");
  console.log(`   Total resources: ${entries.length}`);
  console.log(
    `   Headers analyzed: ${headersAnalyzed} | CORS-restricted: ${corsRestricted} | Excluded (non-static/cross-origin): ${excludedFromHeaders.length}`
  );
  if (excludedFromHeaders.length > 0) {
    const excludedTypes = [...new Set(excludedFromHeaders.map((e) => e.type))].join(", ");
    console.log(
      `   ℹ️  Excluded resources (${excludedTypes}) are analyzed with Tier 1 data only (Performance API) — header inspection requires same-origin static assets due to CORS restrictions.`
    );
  }
  console.log(`   Cache efficiency: ${cacheEfficiencyPercent}%`);
  console.log(`   Bandwidth saved by cache: ${formatBytes(bandwidthSavedBytes)}`);
  if (cdnHitRate !== null) {
    console.log(
      `   CDN hit rate: ${cdnHitRate}% (${cdnHits}/${cdnEntries.length} resources)`
    );
  }
  if (allAntiPatterns.length > 0) {
    const errors = allAntiPatterns.filter((p) => p.severity === "error").length;
    const warnings = allAntiPatterns.filter(
      (p) => p.severity === "warning"
    ).length;
    const infos = allAntiPatterns.filter((p) => p.severity === "info").length;
    console.log(
      `   Anti-patterns: ${allAntiPatterns.length} (${errors} errors, ${warnings} warnings, ${infos} info)`
    );
  }

  // Strategy distribution
  console.log("");
  console.group("%c📋 Cache Strategy Distribution", "font-weight: bold;");
  const strategyOrder = [
    "immutable",
    "long",
    "medium",
    "short",
    "swr",
    "must-revalidate",
    "no-cache",
    "no-store",
    "expires-only",
    "none",
    "cached (inferred)",
    "unknown (CORS)",
    "unknown",
  ];
  const strategyTable = strategyOrder
    .filter((s) => strategyGroups[s])
    .map((s) => ({
      Strategy: s,
      Count: strategyGroups[s],
      "% of Total": `${Math.round((strategyGroups[s] / entries.length) * 100)}%`,
      Effective: EFFECTIVE_CACHE_STRATEGIES.has(s) ? "✅" : "❌",
    }));
  console.table(strategyTable);
  console.groupEnd();

  // Resources without cache
  if (noCacheEntries.length > 0) {
    console.log("");
    console.group(
      `%c🚫 Resources Without Cache (${noCacheEntries.length})`,
      "font-weight: bold; color: #ef4444;"
    );
    console.table(
      noCacheEntries.map((e) => ({
        Resource: e.shortName,
        Type: e.type,
        Strategy: e.cacheStrategy,
        Size: formatBytes(e.decodedBodySize),
        Host: e.host,
        "First Party": e.firstParty ? "✅" : "❌",
      }))
    );
    console.groupEnd();
  }

  // Short cache resources
  if (shortCacheEntries.length > 0) {
    console.log("");
    console.group(
      `%c⏱ Short Cache Resources (${shortCacheEntries.length})`,
      "font-weight: bold; color: #f59e0b;"
    );
    console.table(
      shortCacheEntries.map((e) => {
        const cc = parseCacheControl(e.headers?.["cache-control"] || "");
        return {
          Resource: e.shortName,
          Type: e.type,
          "max-age": cc["max-age"] ? `${cc["max-age"]}s` : "N/A",
          Size: formatBytes(e.decodedBodySize),
          "Has Hash": e.hasHash ? "✅" : "❌",
          Host: e.host,
        };
      })
    );
    console.groupEnd();
  }

  // Anti-patterns
  if (allAntiPatterns.length > 0) {
    console.log("");
    console.group(
      `%c⚠️ Cache Anti-patterns (${allAntiPatterns.length})`,
      "font-weight: bold; color: #f59e0b;"
    );
    console.groupCollapsed("📖 Legend");
    console.table([
      { Pattern: "static-no-store",        Severity: "🔴 error",   Meaning: "JS/CSS/font/image with no-store — static assets should always be cacheable" },
      { Pattern: "large-no-cache",          Severity: "🔴 error",   Meaning: "Resource > 100 KB with no effective cache — significant bandwidth waste per visit" },
      { Pattern: "versioned-short-cache",   Severity: "🟡 warning", Meaning: "Hashed URL with max-age < 86400 — safe to use immutable since URL changes with content" },
      { Pattern: "expires-without-cc",      Severity: "🟡 warning", Meaning: "Uses Expires header without Cache-Control — outdated pattern, less reliable" },
      { Pattern: "maxage-zero-static",      Severity: "🟡 warning", Meaning: "Static asset with max-age=0 — browser revalidates on every request" },
      { Pattern: "short-cache-static",      Severity: "🟡 warning", Meaning: "Static asset with max-age < 3600 — consider a longer cache duration" },
      { Pattern: "versioned-not-immutable", Severity: "🔵 info",    Meaning: "Hashed URL without immutable directive — adding it avoids conditional GET requests" },
    ]);
    console.groupEnd();
    for (const severity of ["error", "warning", "info"]) {
      const filtered = allAntiPatterns.filter((p) => p.severity === severity);
      if (filtered.length === 0) continue;
      const icon = { error: "🔴", warning: "🟡", info: "🔵" }[severity];
      console.group(`${icon} ${severity.charAt(0).toUpperCase() + severity.slice(1)} (${filtered.length})`);
      console.table(
        filtered.map((p) => ({
          Resource: p.resource,
          Pattern: p.id,
          Detail: p.message,
        }))
      );
      console.groupEnd();
    }
    console.groupEnd();
  }

  // CDN status
  if (cdnEntries.length > 0) {
    console.log("");
    console.group(
      `%c🌐 CDN Cache Status`,
      "font-weight: bold; color: #3b82f6;"
    );
    console.log(
      `   Hit rate: ${cdnHitRate}% (${cdnHits} hits / ${cdnEntries.length} CDN resources)`
    );
    console.table(
      cdnEntries.map((e) => ({
        Resource: e.shortName,
        CDN: e.cdnInfo.cdn,
        Status: e.cdnInfo.status,
        "Cache-Control": e.headers?.["cache-control"] || "N/A",
        Type: e.type,
      }))
    );
    console.groupEnd();
  }

  // Additional insights
  console.log("");
  console.group("%c💡 Additional Insights", "font-weight: bold;");

  // Protocol
  console.group("Protocol Distribution");
  console.table(
    Object.entries(protocolDistribution)
      .sort((a, b) => b[1] - a[1])
      .map(([proto, count]) => ({
        Protocol: proto,
        Count: count,
        "% of Total": `${Math.round((count / entries.length) * 100)}%`,
      }))
  );
  console.groupEnd();

  // Uncompressed
  if (uncompressedResources.length > 0) {
    console.group(`Likely Uncompressed Resources (${uncompressedResources.length})`);
    console.table(
      uncompressedResources.map((e) => ({
        Resource: e.shortName,
        Type: e.type,
        "Encoded Size": formatBytes(e.encodedBodySize),
        "Decoded Size": formatBytes(e.decodedBodySize),
        "Compression Ratio": `${((1 - e.encodedBodySize / e.decodedBodySize) * 100).toFixed(0)}%`,
      }))
    );
    console.groupEnd();
  }

  // Duplicates — show costly (network) first, then cached-only
  if (costlyDuplicates.length > 0) {
    console.group(
      `Duplicate Resources — Network Impact (${costlyDuplicates.length} URLs with uncached loads)`
    );
    console.table(
      costlyDuplicates.map((d) => ({
        Resource: d.shortName,
        Type: d.type,
        "Times Loaded": d.count,
        "Uncached Loads": d.uncachedLoads,
      }))
    );
    console.groupEnd();
  }
  if (cachedDuplicates.length > 0) {
    console.group(
      `Duplicate Resources — Cache Only (${cachedDuplicates.length} URLs loaded multiple times, all cached)`
    );
    console.table(
      cachedDuplicates.map((d) => ({
        Resource: d.shortName,
        Type: d.type,
        "Times Loaded": d.count,
      }))
    );
    console.groupEnd();
  }

  console.groupEnd(); // Additional Insights

  // Recommendations
  const recommendations = [];

  if (noCacheEntries.filter((e) => isStaticAsset(e.type)).length > 0) {
    recommendations.push(
      "🔴 Add Cache-Control headers to static assets (JS, CSS, fonts, images). Start with max-age=86400 and move to immutable for versioned files."
    );
  }
  if (shortCacheEntries.filter((e) => e.hasHash).length > 0) {
    recommendations.push(
      "🟡 Versioned files (with content hash) should use long cache or Cache-Control: immutable — they can be cached indefinitely since the URL changes on update."
    );
  }
  if (allAntiPatterns.some((p) => p.id === "expires-without-cc")) {
    recommendations.push(
      "🟡 Replace Expires headers with Cache-Control: max-age — Expires is an outdated mechanism and less reliable."
    );
  }
  if (entries.length > 0 && cacheEfficiencyPercent < 50) {
    recommendations.push(
      `🔴 Cache efficiency is low (${cacheEfficiencyPercent}%). Review caching strategy for all static assets.`
    );
  }
  if (cdnHitRate !== null && cdnHitRate < 70) {
    recommendations.push(
      `🟡 CDN hit rate is ${cdnHitRate}%. Check CDN cache rules and ensure static assets have appropriate TTLs.`
    );
  }
  if (protocolDistribution["http/1.1"] > 0) {
    recommendations.push(
      `🟡 ${protocolDistribution["http/1.1"]} resources still use HTTP/1.1. Consider upgrading to HTTP/2 for better multiplexing.`
    );
  }
  if (uncompressedResources.length > 0) {
    recommendations.push(
      `🟡 ${uncompressedResources.length} text resources appear uncompressed. Enable Brotli or gzip compression on your server.`
    );
  }
  if (costlyDuplicates.length > 0) {
    recommendations.push(
      `🟡 ${costlyDuplicates.length} resources are loaded multiple times with uncached network requests. Check for duplicate script, stylesheet, or fetch includes.`
    );
  } else if (cachedDuplicates.length > 0) {
    recommendations.push(
      `ℹ️ ${cachedDuplicates.length} resources are requested multiple times but served from cache — low performance impact, but worth reviewing for correctness.`
    );
  }
  if (corsRestricted > 0 && headersAnalyzed === 0) {
    recommendations.push(
      `ℹ️ All resources are cross-origin CORS-restricted — header analysis was limited. Add Timing-Allow-Origin for more insights.`
    );
  }

  if (recommendations.length > 0) {
    console.log("");
    console.group("%c📌 Recommendations", "font-weight: bold;");
    for (const rec of recommendations) {
      console.log(`   ${rec}`);
    }
    console.groupEnd();
  }

  console.groupEnd(); // Cache Strategy Analysis

  // --- Return structured object ---

  const cacheEfficiencyRating =
    cacheEfficiencyPercent >= 80
      ? "good"
      : cacheEfficiencyPercent >= 50
      ? "needs-improvement"
      : "poor";

  return {
    script: "Cache-Strategy-Analysis",
    status: "ok",
    count: entries.length,
    details: {
      totalResources: entries.length,
      headersAnalyzed,
      corsRestricted,
      excludedFromHeaders: excludedFromHeaders.length,
      cacheEfficiencyPercent,
      cacheEfficiencyRating,
      bandwidthSavedBytes,
      strategyDistribution: strategyGroups,
      cdnDetected: cdnEntries.length > 0,
      cdnHitRate,
      cdnHitRateRating:
        cdnHitRate === null ? null : cdnHitRate >= 70 ? "good" : "poor",
      antiPatternCount: allAntiPatterns.length,
      duplicatesCostlyCount: costlyDuplicates.length,
      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)
      )
      .map((e) => ({
        shortName: e.shortName,
        host: e.host,
        type: e.type,
        firstParty: e.firstParty,
        cacheStrategy: e.cacheStrategy,
        sizeBytes: e.decodedBodySize,
        isCached: e.isCached,
        antiPatterns: e.antiPatterns.map((p) => p.id),
      })),
    issues: allAntiPatterns.map((p) => ({
      severity: p.severity,
      id: p.id,
      resource: p.resource,
      message: p.message,
    })),
    recommendations,
  };
})();
```

---

## Client-Side Redirect Detection
URL: https://webperf-snippets.nucliweb.net/Loading/Client-Side-Redirect-Detection

Detects client-side redirects that add unnecessary latency to page load and impact Core Web Vitals, particularly LCP. Client-side redirects implemented via JavaScript or SPA routers can add seconds to the critical rendering path, yet they're often invisible to standard monitoring tools. Why this matters: Client-side redirects are one of the most impactful but hardest-to-detect performance issues: - Add complete navigation overhead (HTML download, JS parsing, execution) just to redirect - Can increase LCP by 3 to 6 seconds on first visit - Waste bandwidth downloading resources that won't be displayed - Not visible in basic performance metrics - Often introduced accidentally during localization or A/B testing Common patterns that trigger client-side redirects:

```js
// Client-Side Redirect Detection
// https://webperf-snippets.nucliweb.net

(async () => {
  const navEntries = performance.getEntriesByType('navigation');

  if (navEntries.length === 0) {
    console.log(
      '%c⚠️ Navigation Timing not available',
      'color: #f59e0b; font-weight: bold;'
    );
    return { script: "Client-Side-Redirect-Detection", status: "unsupported", error: "Navigation Timing not available" };
  }

  const navEntry = navEntries[0];
  const currentURL = new URL(window.location.href);
  const resources = performance.getEntriesByType('resource');

  // Check for document navigations (only navigation type, exclude iframes)
  // Filter out third-party iframes (analytics, ads, etc.)
  const documentNavigations = resources.filter(
    (r) => {
      if (r.initiatorType !== 'navigation') return false;

      // Only count same-origin navigations as potential redirects
      try {
        const resourceURL = new URL(r.name);
        return resourceURL.origin === currentURL.origin;
      } catch {
        return false;
      }
    }
  );

  // Check for server-side redirects
  const serverRedirects = navEntry.redirectCount || 0;
  const redirectTime = navEntry.redirectEnd - navEntry.redirectStart;

  // Detect client-side redirect patterns
  const hasSPARouter = !!window.history?.state;
  const historyLength = window.history.length;

  // Check document.referrer for same-origin navigation
  const referrer = document.referrer ? new URL(document.referrer) : null;
  const sameOrigin = referrer && referrer.origin === currentURL.origin;
  const referrerPath = referrer?.pathname || '';
  const currentPath = currentURL.pathname;

  // Detect redirect indicators
  const hasRedirectParam =
    currentURL.searchParams.has('redirect') ||
    currentURL.searchParams.has('from') ||
    currentURL.searchParams.has('origin');

  console.group(
    '%c🔄 Client-Side Redirect Detection',
    'font-weight: bold; font-size: 14px;'
  );

  // Current page info
  console.log('');
  console.log('%c📍 Current Page:', 'font-weight: bold;');
  console.log(`   URL: ${currentURL.href}`);
  console.log(`   Path: ${currentPath}`);
  if (referrer) {
    console.log(`   Referrer: ${referrer.href}`);
    console.log(`   Referrer path: ${referrerPath}`);
  } else {
    console.log('   Referrer: (none - direct navigation or blocked)');
  }

  // Server-side redirects
  console.log('');
  console.log('%c🌐 Server-Side Redirects:', 'font-weight: bold;');
  if (serverRedirects > 0) {
    console.log(`%c   ⚠️ ${serverRedirects} redirect(s) detected`, 'color: #f59e0b;');
    console.log(`   Redirect time: ${redirectTime.toFixed(1)}ms`);
    console.log('   💡 Minimize redirect chains for better performance');
  } else {
    console.log('%c   ✅ No server-side redirects', 'color: #22c55e;');
  }

  // Client-side navigation detection
  console.log('');
  console.log('%c📱 Client-Side Navigation Indicators:', 'font-weight: bold;');

  let hasClientRedirect = false;
  const indicators = [];

  // Check 1: Same-origin referrer with different path (potential redirect)
  if (sameOrigin && referrerPath !== currentPath && referrerPath !== '') {
    hasClientRedirect = true;
    indicators.push({
      type: 'Same-origin navigation',
      from: referrerPath,
      to: currentPath,
      severity: 'warning'
    });
  }

  // Check 2: Document navigations in resource timing
  if (documentNavigations.length > 0) {
    hasClientRedirect = true;
    documentNavigations.forEach((nav) => {
      indicators.push({
        type: 'Document navigation',
        url: nav.name,
        duration: nav.duration.toFixed(1) + 'ms',
        severity: 'error'
      });
    });
  }

  // Check 3: Redirect URL parameters
  if (hasRedirectParam) {
    indicators.push({
      type: 'Redirect parameter in URL',
      params: Array.from(currentURL.searchParams.entries())
        .filter(([key]) =>
          key.toLowerCase().includes('redirect') ||
          key.toLowerCase().includes('from') ||
          key.toLowerCase().includes('origin')
        )
        .map(([key, val]) => `${key}=${val}`)
        .join(', '),
      severity: 'info'
    });
  }

  // Check 4: SPA router state
  if (hasSPARouter && historyLength > 1) {
    indicators.push({
      type: 'SPA router detected',
      historyLength: historyLength,
      state: JSON.stringify(window.history.state)?.slice(0, 100) || '{}',
      severity: 'info'
    });
  }

  // Check 5: Very fast navigation with minimal content (possible JS redirect)
  const navDuration = navEntry.loadEventEnd - navEntry.startTime;
  const domContentLoaded = navEntry.domContentLoadedEventEnd - navEntry.startTime;
  const responseSize = navEntry.transferSize || navEntry.encodedBodySize || 0;

  // Only flag if it's BOTH fast AND small (likely a redirect page)
  if (sameOrigin && domContentLoaded < 500 && responseSize < 10000) {
    indicators.push({
      type: 'Fast minimal-content navigation',
      duration: domContentLoaded.toFixed(1) + 'ms',
      size: (responseSize / 1024).toFixed(1) + ' KB',
      note: 'Small page that loads quickly - possible redirect page',
      severity: 'warning'
    });
  }

  if (indicators.length === 0) {
    console.log('%c   ✅ No client-side redirect detected', 'color: #22c55e;');
  } else {
    console.log(
      `%c   ⚠️ ${indicators.length} indicator(s) found`,
      'color: #f59e0b;'
    );
    console.log('');
    indicators.forEach((indicator, index) => {
      const icon =
        indicator.severity === 'error' ? '🔴' :
        indicator.severity === 'warning' ? '⚠️' : 'ℹ️';

      console.log(`   ${icon} ${indicator.type}`);
      Object.entries(indicator).forEach(([key, value]) => {
        if (key !== 'type' && key !== 'severity') {
          console.log(`      ${key}: ${value}`);
        }
      });
      if (index < indicators.length - 1) console.log('');
    });
  }

  // LCP Impact Analysis
  if (hasClientRedirect && documentNavigations.length > 0) {
    console.log('');
    console.log('%c⚡ Performance Impact:', 'font-weight: bold;');

    const totalRedirectOverhead = documentNavigations.reduce(
      (sum, nav) => sum + nav.duration,
      0
    );

    console.log(`   Total redirect overhead: ${totalRedirectOverhead.toFixed(0)}ms`);

    if (totalRedirectOverhead > 3000) {
      console.log(
        '%c   🔴 CRITICAL: High impact on LCP',
        'color: #ef4444; font-weight: bold;'
      );
      console.log('   💡 This redirect adds significant delay to page load');
    } else if (totalRedirectOverhead > 1000) {
      console.log(
        '%c   🟡 MODERATE: Noticeable impact on LCP',
        'color: #f59e0b;'
      );
    } else {
      console.log('%c   🟢 Low impact', 'color: #22c55e;');
    }
  }

  // Recommendations
  const hasDocumentNavigation = documentNavigations.length > 0;
  const hasSameOriginRedirect = sameOrigin && referrerPath !== currentPath && referrerPath !== '';
  if (hasDocumentNavigation || serverRedirects > 0) {
    console.log('');
    console.log('%c💡 Recommendations:', 'font-weight: bold;');

    if (serverRedirects > 0) {
      console.log('');
      console.log('   Server-side redirects detected:');
      console.log('   • Minimize redirect chains');
      console.log('   • Use direct links when possible');
      console.log('   • Cache redirect responses with appropriate headers');
    }

    if (hasDocumentNavigation) {
      console.log('');
      console.log('   Client-side redirect detected:');
      console.log('   • Replace with server-side 301/302 redirects for better performance');

      if (referrerPath && currentPath) {
        console.log('');
        console.log('   Example Nginx config:');
        console.log('     %clocation = ' + referrerPath + ' {', 'color: #3b82f6; font-family: monospace;');
        console.log('     %c  return 301 ' + currentPath + ';', 'color: #3b82f6; font-family: monospace;');
        console.log('     %c}', 'color: #3b82f6; font-family: monospace;');

        if (referrerPath === '/' && currentPath.match(/^\/[a-z]{2}\//)) {
          console.log('');
          console.log('   Or with language detection:');
          console.log('     %cmap $http_accept_language $lang {', 'color: #3b82f6; font-family: monospace;');
          console.log('     %c  default ' + currentPath.split('/')[1] + ';', 'color: #3b82f6; font-family: monospace;');
          console.log('     %c  ~*^en en;', 'color: #3b82f6; font-family: monospace;');
          console.log('     %c}', 'color: #3b82f6; font-family: monospace;');
          console.log('     %clocation = / {', 'color: #3b82f6; font-family: monospace;');
          console.log('     %c  return 301 /$lang/;', 'color: #3b82f6; font-family: monospace;');
          console.log('     %c}', 'color: #3b82f6; font-family: monospace;');
        }
      }
    } else if (hasSameOriginRedirect) {
      console.log('');
      console.log('   Same-origin navigation detected (no document navigation overhead):');
      console.log('   • This may be SPA routing or a fast redirect');
      console.log('   • If this is intentional SPA behavior, no action needed');
      console.log('   • If this is a redirect, consider server-side 301/302 for consistency');
    }
  }

  // Detailed timing breakdown
  console.log('');
  console.log('%c⏱️ Navigation Timing:', 'font-weight: bold;');
  console.table({
    'TTFB': `${(navEntry.responseStart - navEntry.startTime).toFixed(1)}ms`,
    'DOM Content Loaded': `${domContentLoaded.toFixed(1)}ms`,
    'Load Complete': `${navDuration.toFixed(1)}ms`,
    'Redirect Time': serverRedirects > 0 ? `${redirectTime.toFixed(1)}ms` : 'N/A',
    'DNS Lookup': `${(navEntry.domainLookupEnd - navEntry.domainLookupStart).toFixed(1)}ms`,
    'TCP Connect': `${(navEntry.connectEnd - navEntry.connectStart).toFixed(1)}ms`,
    'Request/Response': `${(navEntry.responseEnd - navEntry.requestStart).toFixed(1)}ms`,
  });

  // Resource timing for document navigations
  if (documentNavigations.length > 0) {
    console.log('');
    console.log(
      '%c🔴 Same-Origin Document Navigations Detected (Potential Client-Side Redirects):',
      'font-weight: bold; color: #ef4444;'
    );
    console.log('');
    console.log(
      '   These are same-origin navigations that suggest client-side redirects.'
    );
    console.log(
      '   If these are not expected, consider replacing with server-side redirects.'
    );
    console.log('');
    console.table(
      documentNavigations.map((nav) => ({
        'Type': nav.initiatorType,
        'Duration (ms)': nav.duration.toFixed(1),
        'TTFB (ms)': (nav.responseStart - nav.startTime).toFixed(1),
        'Transfer (KB)': nav.transferSize > 0 ? (nav.transferSize / 1024).toFixed(1) : '0',
        'URL': nav.name.length > 60 ? '...' + nav.name.slice(-57) : nav.name,
      }))
    );
  }

  console.log('');

  if (hasDocumentNavigation) {
    console.log(
      '%cℹ️ Note: Document navigations detected indicate actual client-side redirects. ' +
      'For best performance, replace with server-side 301/302 redirects.',
      'color: #6b7280; font-style: italic;'
    );
  } else if (hasSameOriginRedirect) {
    console.log(
      '%cℹ️ Note: Same-origin navigation detected without document navigation overhead. ' +
      'This may be SPA routing or browser navigation, which is typically acceptable.',
      'color: #6b7280; font-style: italic;'
    );
  } else {
    console.log(
      '%cℹ️ Note: No client-side redirects detected. ' +
      'The current page was loaded directly or through server-side redirects.',
      'color: #6b7280; font-style: italic;'
    );
  }

  console.groupEnd();

  return {
    script: "Client-Side-Redirect-Detection",
    status: "ok",
    details: {
      serverRedirects,
      redirectTimeMs: Math.round(redirectTime),
      clientRedirectIndicators: indicators.length,
      documentNavigations: documentNavigations.length,
      hasSPARouter,
      historyLength,
      currentPath,
      referrerPath,
    },
    issues: [
      ...(serverRedirects > 0 ? [{ severity: "warning", message: `${serverRedirects} server-side redirect(s) detected (${Math.round(redirectTime)}ms)` }] : []),
      ...(documentNavigations.length > 0 ? [{ severity: "error", message: `${documentNavigations.length} same-origin document navigation(s) detected — likely client-side redirect` }] : []),
      ...indicators.filter(i => i.severity === "warning").map(i => ({ severity: "warning", message: i.type })),
    ],
  };
})();
```

---

## Content Visibility
URL: https://webperf-snippets.nucliweb.net/Loading/Content-Visibility

Detect and analyze all elements using `content-visibility: auto` on a page. This CSS property is a powerful rendering optimization that allows browsers to skip layout and painting work for offscreen content, significantly improving initial page load performance. This page provides two complementary analysis functions: 1. `detectContentVisibility()` - Finds all elements with `content-visibility: auto` and provides inspection tools 2. `analyzeContentVisibilityOpportunities(options)` - Walks the DOM to find offscreen elements that could benefit from `content-visibility: auto`, with configurable thresholds for distance, height, and child count This snippet code is based on the script by Arjen Karel

```js
// Detect elements with content-visibility: auto and analyze optimization opportunities

function detectContentVisibility() {
  // Create an object to store the results
  const results = {
    autoElements: [],
    hiddenElements: [],
    visibleElements: [],
    nodeArray: [],
  };

  // Get the name of the node
  function getName(node) {
    const name = node.nodeName;
    return node.nodeType === 1 ? name.toLowerCase() : name.toUpperCase().replace(/^#/, "");
  }

  // Get the selector for an element
  function getSelector(node) {
    let sel = "";

    try {
      while (node && node.nodeType !== 9) {
        const el = node;
        const part = el.id
          ? "#" + el.id
          : getName(el) +
            (el.classList &&
            el.classList.value &&
            el.classList.value.trim() &&
            el.classList.value.trim().length
              ? "." + el.classList.value.trim().replace(/\s+/g, ".")
              : "");
        if (sel.length + part.length > 100 - 1) return sel || part;
        sel = sel ? part + ">" + sel : part;
        if (el.id) break;
        node = el.parentNode;
      }
    } catch {
      // Do nothing...
    }
    return sel;
  }

  // Check if element is in viewport
  function isInViewport(element) {
    const rect = element.getBoundingClientRect();
    return (
      rect.top < window.innerHeight &&
      rect.bottom > 0 &&
      rect.left < window.innerWidth &&
      rect.right > 0
    );
  }

  // Get element dimensions and position
  function getElementInfo(node) {
    const rect = node.getBoundingClientRect();
    const cs = window.getComputedStyle(node);

    return {
      selector: getSelector(node),
      contentVisibility: cs["content-visibility"],
      containIntrinsicSize: cs["contain-intrinsic-size"] || "not set",
      width: Math.round(rect.width),
      height: Math.round(rect.height),
      top: Math.round(rect.top + window.scrollY),
      inViewport: isInViewport(node),
    };
  }

  // Recursively find all elements with content-visibility
  function findContentVisibilityElements(node) {
    const cs = window.getComputedStyle(node);
    const cv = cs["content-visibility"];

    if (cv && cv !== "visible") {
      const info = getElementInfo(node);

      if (cv === "auto") {
        results.autoElements.push(info);
        results.nodeArray.push(node);
      } else if (cv === "hidden") {
        results.hiddenElements.push(info);
      }
    }

    for (let i = 0; i < node.children.length; i++) {
      findContentVisibilityElements(node.children[i]);
    }
  }

  // Run the detection
  findContentVisibilityElements(document.body);

  // Display results
  console.group("🔍 Content-Visibility Detection");

  if (results.autoElements.length === 0 && results.hiddenElements.length === 0) {
    console.log("%cNo content-visibility usage found.", "color: orange; font-weight: bold;");
    console.log("");
    console.log("💡 Consider applying content-visibility: auto to:");
    console.log("   • Footer sections");
    console.log("   • Below-the-fold content");
    console.log("   • Long lists or card grids");
    console.log("   • Tab content that is not initially visible");
    console.log("   • Accordion/collapsible content");
  } else {
    // Auto elements
    if (results.autoElements.length > 0) {
      console.group("✅ content-visibility: auto");
      console.log(`Found ${results.autoElements.length} element(s)`);
      console.table(results.autoElements);
      console.groupEnd();
    }

    // Hidden elements
    if (results.hiddenElements.length > 0) {
      console.group("🔒 content-visibility: hidden");
      console.log(`Found ${results.hiddenElements.length} element(s)`);
      console.table(results.hiddenElements);
      console.groupEnd();
    }

    // Check for missing contain-intrinsic-size
    const missingIntrinsicSize = results.autoElements.filter(
      (el) => el.containIntrinsicSize === "not set" || el.containIntrinsicSize === "none",
    );

    if (missingIntrinsicSize.length > 0) {
      console.group("⚠️ Missing contain-intrinsic-size");
      console.log(
        "%cThese elements lack contain-intrinsic-size, which may cause layout shifts:",
        "color: #f59e0b; font-weight: bold",
      );
      console.table(
        missingIntrinsicSize.map((el) => ({
          selector: el.selector,
          height: el.height + "px",
        })),
      );
      console.log("");
      console.log("💡 Add contain-intrinsic-size to prevent CLS:");
      console.log("   contain-intrinsic-size: auto 500px;");
      console.groupEnd();
    }

    // Nodes for inspection
    console.group("🔎 Elements for inspection");
    console.log("Click to expand and inspect in Elements panel:");
    results.nodeArray.forEach((node, i) => {
      console.log(`${i + 1}. `, node);
    });
    console.groupEnd();
  }

  console.groupEnd();

  return results;
}

// Analyze opportunities for content-visibility optimization
// Options:
//   - threshold: distance from viewport bottom to consider "offscreen" (default: 0)
//   - minHeight: minimum element height in px (default: 100)
//   - minChildren: minimum child elements to be considered (default: 5)
function analyzeContentVisibilityOpportunities(options = {}) {
  const { threshold = 0, minHeight = 100, minChildren = 5 } = options;

  const viewportHeight = window.innerHeight;
  const opportunities = [];
  const processedElements = new Set();

  function getSelector(node) {
    let sel = "";
    try {
      while (node && node.nodeType !== 9) {
        const el = node;
        const name = el.nodeName.toLowerCase();
        const part = el.id
          ? "#" + el.id
          : name +
            (el.classList && el.classList.value && el.classList.value.trim()
              ? "." + el.classList.value.trim().split(/\s+/).slice(0, 2).join(".")
              : "");
        if (sel.length + part.length > 80) return sel || part;
        sel = sel ? part + ">" + sel : part;
        if (el.id) break;
        node = el.parentNode;
      }
    } catch {}
    return sel;
  }

  function estimateRenderSavings(childCount) {
    const baseMs = childCount * 0.2;
    if (baseMs < 5) return "Low (~" + baseMs.toFixed(1) + "ms)";
    if (baseMs < 20) return "Medium (~" + baseMs.toFixed(1) + "ms)";
    return "High (~" + baseMs.toFixed(1) + "ms)";
  }

  function isAncestorProcessed(el) {
    let parent = el.parentElement;
    while (parent) {
      if (processedElements.has(parent)) return true;
      parent = parent.parentElement;
    }
    return false;
  }

  function analyzeElement(el) {
    // Skip already processed or descendant of processed
    if (processedElements.has(el) || isAncestorProcessed(el)) return;

    const rect = el.getBoundingClientRect();
    const cs = window.getComputedStyle(el);

    // Skip if already using content-visibility
    if (cs["content-visibility"] && cs["content-visibility"] !== "visible") return;

    // Skip elements not meeting size criteria
    if (rect.height < minHeight || rect.width === 0) return;

    // Check if element is below the viewport + threshold
    const distanceFromViewport = rect.top - viewportHeight;
    if (distanceFromViewport < threshold) return;

    const childCount = el.querySelectorAll("*").length;

    // Skip elements with too few children
    if (childCount < minChildren) return;

    processedElements.add(el);

    opportunities.push({
      selector: getSelector(el),
      height: Math.round(rect.height) + "px",
      distanceFromViewport: Math.round(distanceFromViewport) + "px",
      childElements: childCount,
      estimatedSavings: estimateRenderSavings(childCount),
      element: el,
    });
  }

  // Walk all elements in the DOM
  const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_ELEMENT, null, false);

  while (walker.nextNode()) {
    analyzeElement(walker.currentNode);
  }

  // Sort by child count (highest impact first)
  opportunities.sort((a, b) => b.childElements - a.childElements);

  // Display results
  console.group("💡 Content-Visibility Opportunities");
  console.log(
    `%cSettings: threshold=${threshold}px, minHeight=${minHeight}px, minChildren=${minChildren}`,
    "color: #888;",
  );
  console.log("");

  if (opportunities.length === 0) {
    console.log("%c✅ No opportunities found with current settings.", "color: #22c55e; font-weight: bold");
    console.log("Try adjusting: analyzeContentVisibilityOpportunities({ threshold: -200, minHeight: 50, minChildren: 3 })");
  } else {
    console.log(
      `%cFound ${opportunities.length} element(s) that could benefit from content-visibility: auto`,
      "font-weight: bold;",
    );
    console.log("");

    // Show table without element reference
    const tableData = opportunities.slice(0, 20).map((opportunity) => ({
      selector: opportunity.selector,
      height: opportunity.height,
      distanceFromViewport: opportunity.distanceFromViewport,
      childElements: opportunity.childElements,
      estimatedSavings: opportunity.estimatedSavings,
    }));
    console.table(tableData);

    if (opportunities.length > 20) {
      console.log(`... and ${opportunities.length - 20} more elements`);
    }

    // Log elements for inspection
    console.log("");
    console.group("🔎 Elements for inspection");
    opportunities.slice(0, 10).forEach((opp, i) => {
      console.log(`${i + 1}. `, opp.element);
    });
    console.groupEnd();

    console.log("");
    console.group("📝 Implementation Example");
    console.log("Add this CSS to optimize rendering:");
    console.log("");
    console.log(
      "%c/* Optimize offscreen content */\n" +
        ".your-selector {\n" +
        "  content-visibility: auto;\n" +
        "  contain-intrinsic-size: auto 500px; /* Use actual height */\n" +
        "}",
      "font-family: monospace; background: #1e1e1e; color: #9cdcfe; padding: 10px; border-radius: 4px;",
    );
    console.groupEnd();
  }

  console.groupEnd();

  return {
    opportunities: opportunities.map((opportunity) => ({
      selector: opportunity.selector,
      height: opportunity.height,
      distanceFromViewport: opportunity.distanceFromViewport,
      childElements: opportunity.childElements,
      estimatedSavings: opportunity.estimatedSavings,
    })),
    totalElements: opportunities.length,
    highImpact: opportunities.filter((o) => o.estimatedSavings.startsWith("High")).length,
    elements: opportunities.map((o) => o.element),
  };
}

window.analyzeContentVisibilityOpportunities = analyzeContentVisibilityOpportunities;

// Run detection
(() => {
  const cvResults = detectContentVisibility();
  console.log(
    "%c\n To find optimization opportunities, run: %canalyzeContentVisibilityOpportunities()",
    "color: #3b82f6; font-weight: bold;",
    "color: #22c55e; font-weight: bold; font-family: monospace;"
  );
  return {
    script: "Content-Visibility",
    status: "ok",
    count: cvResults.autoElements.length + cvResults.hiddenElements.length,
    details: {
      autoCount: cvResults.autoElements.length,
      hiddenCount: cvResults.hiddenElements.length,
    },
    items: [
      ...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)` })),
  };
})();
```

---

## Critical CSS Detection
URL: https://webperf-snippets.nucliweb.net/Loading/Critical-CSS-Detection

Analyzes the CSS loading strategy of a page — identifying render-blocking stylesheets, measuring their size against the critical 14 KB budget, and detecting whether critical CSS is properly inlined for above-the-fold content. What makes CSS "critical":

```js
// 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,
    })),
  };
})();
```

---

## Event Processing Time
URL: https://webperf-snippets.nucliweb.net/Loading/Event-Processing-Time

Analyzes the time spent in each phase of page navigation, from initial redirect to the load event. This helps identify bottlenecks in the page loading process and understand where time is being spent. Key phases in page load: ```mermaid gantt     title Page Load Timeline     dateFormat X     axisFormat %s     section Network     Redirect           :0, 50     DNS Lookup         :50, 80     TCP Connection     :80, 120     SSL/TLS            :120, 180     Request/Response   :180, 350     section Processing     DOM Processing     :350, 500     DOMContentLoaded   :500, 520     Resources Loading  :520, 800     Load Event         :800, 820 ``` What each phase means:

```js
// 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,
    },
  };
})();
```

---

## First Contentful Paint (FCP)
URL: https://webperf-snippets.nucliweb.net/Loading/FCP

Quick check for First Contentful Paint, the metric that marks when the browser renders the first piece of DOM content — text, image, canvas, or SVG. FCP measures the user's perception of whether the page is loading. Unlike LCP, FCP fires as soon as _any_ content appears, making it the earliest signal of loading progress. A slow FCP almost always points to TTFB or render-blocking resources. FCP Rating Thresholds:

```js
// 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 },
  };
})();
```

---

## Find Above The Fold Lazy Loaded Images
URL: https://webperf-snippets.nucliweb.net/Loading/Find-Above-The-Fold-Lazy-Loaded-Images

Detect images with lazy loading that are incorrectly placed above the fold (in the viewport). Lazy loading above-the-fold images is a common performance anti-pattern that can significantly harm your Largest Contentful Paint (LCP) score. The snippet identifies images with `loading="lazy"` or `[data-src]` in the viewport, detects the LCP candidate, and provides detailed performance metrics.

```js
// Detect lazy loaded images above the fold
// https://webperf-snippets.nucliweb.net

(function() {
  function getSelector(node) {
    let sel = "";
    try {
      while (node && node.nodeType !== 9) {
        const el = node;
        const name = el.nodeName.toLowerCase();
        const part = el.id
          ? "#" + el.id
          : name +
            (el.classList && el.classList.value && el.classList.value.trim()
              ? "." + el.classList.value.trim().split(/\s+/).slice(0, 2).join(".")
              : "");
        if (sel.length + part.length > 80) return sel || part;
        sel = sel ? part + ">" + sel : part;
        if (el.id) break;
        node = el.parentNode;
      }
    } catch {}
    return sel;
  }

  function isInViewport(element) {
    const rect = element.getBoundingClientRect();
    return (
      rect.top < window.innerHeight &&
      rect.bottom > 0 &&
      rect.left < window.innerWidth &&
      rect.right > 0 &&
      rect.width > 0 &&
      rect.height > 0
    );
  }

  function getDistanceFromViewportEdge(element) {
    const rect = element.getBoundingClientRect();
    const distances = [
      rect.top,
      window.innerHeight - rect.bottom,
      rect.left,
      window.innerWidth - rect.right
    ];
    return Math.min(...distances.map(d => Math.abs(d)));
  }

  function getFileSize(src) {
    if (!src) return null;
    try {
      const entries = performance.getEntriesByType("resource");
      const entry = entries.find(e => e.name === src || e.name.includes(src.split("/").pop()));
      if (entry && entry.transferSize) {
        return (entry.transferSize / 1024).toFixed(1) + " KB";
      }
    } catch {}
    return null;
  }

  function getLazyType(element) {
    const hasLoadingLazy = element.getAttribute("loading") === "lazy";
    const hasDataSrc = element.hasAttribute("data-src") || element.hasAttribute("data-lazy");

    if (hasLoadingLazy && hasDataSrc) return "both";
    if (hasLoadingLazy) return "loading-lazy";
    if (hasDataSrc) return "data-src";
    return null;
  }

  function getElementInfo(img) {
    const rect = img.getBoundingClientRect();
    const area = rect.width * rect.height;

    return {
      selector: getSelector(img),
      lazyType: getLazyType(img),
      dimensions: `${Math.round(rect.width)}×${Math.round(rect.height)}`,
      position: {
        top: Math.round(rect.top + window.scrollY),
        left: Math.round(rect.left + window.scrollX)
      },
      distanceFromEdge: Math.round(getDistanceFromViewportEdge(img)) + "px",
      src: img.currentSrc || img.src || img.getAttribute("data-src") || "",
      srcset: img.srcset || null,
      sizes: img.sizes || null,
      alt: img.alt || "(no alt)",
      fetchPriority: img.fetchPriority || "auto",
      fileSize: getFileSize(img.currentSrc || img.src),
      area: area,
      element: img
    };
  }

  const results = {
    lazyImages: [],
    lcpCandidate: null,
    nodeArray: [],
    summary: {
      total: 0,
      withLoadingLazy: 0,
      withDataSrc: 0,
      lcpAffected: false
    }
  };

  // Find all images with lazy loading
  const lazySelectors = '[loading="lazy"], [data-src], [data-lazy]';
  const lazyElements = document.querySelectorAll(`img${lazySelectors}, picture source${lazySelectors}`);

  // Also check all images in viewport to find LCP candidate
  const allViewportImages = Array.from(document.querySelectorAll("img"))
    .filter(img => isInViewport(img) && img.getBoundingClientRect().width > 0);

  // Find LCP candidate (largest visible image)
  let lcpCandidate = null;
  let maxArea = 0;

  allViewportImages.forEach(img => {
    const rect = img.getBoundingClientRect();
    const area = rect.width * rect.height;
    if (area > maxArea) {
      maxArea = area;
      lcpCandidate = img;
    }
  });

  // Process lazy loaded images in viewport
  lazyElements.forEach(element => {
    const img = element.tagName === "SOURCE"
      ? element.closest("picture")?.querySelector("img")
      : element;

    if (!img || !isInViewport(img)) return;

    const info = getElementInfo(img);
    info.isLcpCandidate = img === lcpCandidate;

    results.lazyImages.push(info);
    results.nodeArray.push(img);

    // Update summary
    results.summary.total++;
    if (info.lazyType === "loading-lazy" || info.lazyType === "both") {
      results.summary.withLoadingLazy++;
    }
    if (info.lazyType === "data-src" || info.lazyType === "both") {
      results.summary.withDataSrc++;
    }
    if (info.isLcpCandidate) {
      results.summary.lcpAffected = true;
      results.lcpCandidate = info;
    }
  });

  // Display results
  console.group("🔍 Lazy Loading Detection - Above The Fold");

  if (results.lazyImages.length === 0) {
    console.log(
      "%c✅ Good job! No lazily loaded images found in the viewport.",
      "background: #222; color: #22c55e; padding: 0.5ch 1ch; font-weight: bold;"
    );
  } else {
    // Summary
    console.log(
      `%c⚠️ Found ${results.summary.total} lazily loaded image(s) above the fold`,
      "color: #f59e0b; font-weight: bold; font-size: 14px;"
    );
    console.log("");

    // LCP Warning
    if (results.summary.lcpAffected) {
      console.group("🚨 Critical: LCP Candidate Has Lazy Loading");
      console.log(
        "%cThe largest image in your viewport has lazy loading enabled!",
        "color: #ef4444; font-weight: bold;"
      );
      console.log("This can significantly delay your Largest Contentful Paint.");
      console.log("");
      console.log("LCP Candidate:", results.lcpCandidate.selector);
      console.log("Dimensions:", results.lcpCandidate.dimensions);
      console.log("File size:", results.lcpCandidate.fileSize || "unknown");
      console.log("");
      console.log("%cFix: Remove loading=\"lazy\" and add fetchpriority=\"high\"", "color: #22c55e;");
      console.groupEnd();
      console.log("");
    }

    // Table of all problematic images
    console.group("📋 Lazy Loaded Images in Viewport");
    const tableData = results.lazyImages.map((image) => ({
      selector: image.selector,
      lazyType: image.lazyType,
      dimensions: image.dimensions,
      top: image.position.top + "px",
      distanceFromEdge: image.distanceFromEdge,
      src: image.src,
      srcset: image.srcset,
      sizes: image.sizes,
      alt: image.alt,
      fetchPriority: image.fetchPriority,
      fileSize: image.fileSize,
      isLcpCandidate: image.isLcpCandidate ? "⚠️ YES" : "no",
    }));
    console.table(tableData);
    console.groupEnd();

    // Elements for inspection
    console.group("🔎 Elements for inspection");
    console.log("Click to expand and inspect in Elements panel:");
    results.nodeArray.forEach((node, i) => {
      const marker = node === lcpCandidate ? " 🚨 LCP" : "";
      console.log(`${i + 1}.${marker}`, node);
    });
    console.groupEnd();

    // Quick fix suggestion
    console.log("");
    console.group("📝 Suggested Fix");
    console.log("For above-the-fold images, use:");
    console.log("");
    console.log(
      '%c<img src="hero.jpg" fetchpriority="high" alt="...">',
      "font-family: monospace; background: #1e1e1e; color: #9cdcfe; padding: 8px; border-radius: 4px;"
    );
    console.log("");
    console.log("Remove: loading=\"lazy\", data-src, data-lazy");
    console.log("Add: fetchpriority=\"high\" for LCP candidate");
    console.groupEnd();
  }

  console.groupEnd();

  return {
    script: "Find-Above-The-Fold-Lazy-Loaded-Images",
    status: "ok",
    count: results.lazyImages.length,
    details: {
      total: results.summary.total,
      withLoadingLazy: results.summary.withLoadingLazy,
      withDataSrc: results.summary.withDataSrc,
      lcpAffected: results.summary.lcpAffected,
    },
    items: results.lazyImages.map((image) => ({
      selector: image.selector,
      lazyType: image.lazyType,
      dimensions: image.dimensions,
      position: `${image.position.top}px, ${image.position.left}px`,
      distanceFromEdge: image.distanceFromEdge,
      src: image.src,
      srcset: image.srcset,
      sizes: image.sizes,
      alt: image.alt,
      fetchPriority: image.fetchPriority,
      fileSize: image.fileSize,
      isLcpCandidate: image.isLcpCandidate,
    })),
    issues: [
      ...(results.summary.lcpAffected ? [{ severity: "error", message: 'LCP candidate image has lazy loading — remove loading="lazy" and add fetchpriority="high"' }] : []),
      ...(results.lazyImages.filter(i => !i.isLcpCandidate).length > 0 ? [{ severity: "warning", message: `${results.lazyImages.filter(i => !i.isLcpCandidate).length} above-fold image(s) have lazy loading — remove loading="lazy"` }] : []),
    ],
  };
})();
```

---

## Find Images With Loading Lazy and Fetchpriority
URL: https://webperf-snippets.nucliweb.net/Loading/Find-Images-With-Lazy-and-Fetchpriority

Detects images that have both `loading="lazy"` and `fetchpriority="high"` - a contradictory combination that indicates a misconfiguration. Why this is a problem:

```js
// Find images with contradictory loading="lazy" and fetchpriority="high"
// https://webperf-snippets.nucliweb.net

(() => {
  function getSelector(node) {
    let sel = "";
    try {
      while (node && node.nodeType !== 9) {
        const el = node;
        const name = el.nodeName.toLowerCase();
        const part = el.id
          ? "#" + el.id
          : name +
            (el.classList && el.classList.value && el.classList.value.trim()
              ? "." + el.classList.value.trim().split(/\s+/).slice(0, 2).join(".")
              : "");
        if (sel.length + part.length > 80) return sel || part;
        sel = sel ? part + ">" + sel : part;
        if (el.id) break;
        node = el.parentNode;
      }
    } catch {}
    return sel;
  }

  function isInViewport(element) {
    const rect = element.getBoundingClientRect();
    return (
      rect.top < window.innerHeight &&
      rect.bottom > 0 &&
      rect.left < window.innerWidth &&
      rect.right > 0 &&
      rect.width > 0 &&
      rect.height > 0
    );
  }

  // Find LCP candidate for context
  const viewportImages = Array.from(document.querySelectorAll("img")).filter(
    (img) => isInViewport(img) && img.getBoundingClientRect().width > 0
  );

  let lcpCandidate = null;
  let maxArea = 0;
  viewportImages.forEach((img) => {
    const rect = img.getBoundingClientRect();
    const area = rect.width * rect.height;
    if (area > maxArea) {
      maxArea = area;
      lcpCandidate = img;
    }
  });

  // Find conflicting elements
  const conflictingElements = document.querySelectorAll(
    "[loading=lazy][fetchpriority=high]"
  );

  console.group("%c🔍 Lazy + Fetchpriority Conflict Check", "font-weight: bold; font-size: 14px;");

  if (conflictingElements.length === 0) {
    console.log(
      "%c✅ No conflicts found. No elements have both loading=\"lazy\" and fetchpriority=\"high\".",
      "color: #22c55e; font-weight: bold;"
    );
  } else {
    console.log(
      `%c⚠️ Found ${conflictingElements.length} element(s) with contradictory attributes`,
      "color: #ef4444; font-weight: bold; font-size: 14px;"
    );
    console.log("");

    // Analyze each element
    const tableData = Array.from(conflictingElements).map((el) => {
      const rect = el.getBoundingClientRect();
      const inViewport = isInViewport(el);
      const isLcp = el === lcpCandidate;

      return {
        selector: getSelector(el),
        dimensions: `${Math.round(rect.width)}×${Math.round(rect.height)}`,
        inViewport: inViewport ? "Yes" : "No",
        isLcpCandidate: isLcp ? "⚠️ Yes" : "No",
        src: (el.currentSrc || el.src || "").slice(-50),
        element: el,
      };
    });

    console.log("%c📋 Conflicting Elements:", "font-weight: bold;");
    console.table(tableData.map((item) => ({
      selector: item.selector,
      dimensions: item.dimensions,
      inViewport: item.inViewport,
      isLcpCandidate: item.isLcpCandidate,
      src: item.src,
    })));

    // Elements for inspection
    console.log("");
    console.log("%c🔎 Elements for inspection:", "font-weight: bold;");
    tableData.forEach(({ element, isLcpCandidate }, i) => {
      const marker = isLcpCandidate === "⚠️ Yes" ? " 🚨 LCP" : "";
      console.log(`${i + 1}.${marker}`, element);
    });

    // Recommendation
    console.log("");
    console.log("%c📝 How to fix:", "color: #3b82f6; font-weight: bold;");
    console.log("");

    tableData.forEach(({ selector, inViewport, isLcpCandidate }) => {
      console.log(`%c${selector}:`, "font-weight: bold;");
      if (inViewport === "Yes" || isLcpCandidate === "⚠️ Yes") {
        console.log("   → Image is in viewport. Remove loading=\"lazy\", keep fetchpriority=\"high\"");
        console.log(
          '%c   <img src="..." fetchpriority="high">',
          "font-family: monospace; color: #22c55e;"
        );
      } else {
        console.log("   → Image is outside viewport. Remove fetchpriority=\"high\", keep loading=\"lazy\"");
        console.log(
          '%c   <img src="..." loading="lazy">',
          "font-family: monospace; color: #22c55e;"
        );
      }
      console.log("");
    });

    console.log("%c💡 General rule:", "font-weight: bold;");
    console.log("   • Above the fold (LCP): fetchpriority=\"high\", NO lazy loading");
    console.log("   • Below the fold: loading=\"lazy\", NO fetchpriority");
  }

  console.groupEnd();

  return {
    script: "Find-Images-With-Lazy-and-Fetchpriority",
    status: "ok",
    count: conflictingElements.length,
    items: Array.from(conflictingElements).map((el) => {
      const rect = el.getBoundingClientRect();
      return {
        selector: getSelector(el),
        src: el.currentSrc || el.src || "",
        inViewport: isInViewport(el),
        isLcpCandidate: el === lcpCandidate,
        widthPx: Math.round(rect.width),
        heightPx: Math.round(rect.height),
      };
    }),
    issues: conflictingElements.length > 0
      ? [{ severity: "error", message: `${conflictingElements.length} element(s) have conflicting loading="lazy" and fetchpriority="high"` }]
      : [],
  };
})();
```

---

## Find non Lazy Loaded Images outside of the viewport
URL: https://webperf-snippets.nucliweb.net/Loading/Find-non-Lazy-Loaded-Images-outside-of-the-viewport

Identifies images that are loaded eagerly but not visible in the initial viewport, representing wasted bandwidth and parsing time that delays page interactivity. The snippet analyzes all `<img>` elements to find optimization opportunities for lazy loading. Images outside the viewport that load immediately: - Waste bandwidth by downloading resources users may never see - Block the main thread during decoding and rendering - Delay LCP by competing for network and CPU resources - Increase memory usage unnecessarily This script detects images without `loading="lazy"` or `[data-src]` attributes that are positioned outside the initial viewport, including images in hidden containers (tabs, modals, carousels). It also identifies the LCP candidate to ensure you don't accidentally lazy-load it.

```js
// Execute after page load without user interaction (scroll, click, etc)
// https://webperf-snippets.nucliweb.net

(function () {
  function getSelector(node) {
    let sel = "";
    try {
      while (node && node.nodeType !== 9) {
        const el = node;
        const name = el.nodeName.toLowerCase();
        const part = el.id
          ? "#" + el.id
          : name +
            (el.classList && el.classList.value && el.classList.value.trim()
              ? "." + el.classList.value.trim().split(/\s+/).slice(0, 2).join(".")
              : "");
        if (sel.length + part.length > 80) return sel || part;
        sel = sel ? part + ">" + sel : part;
        if (el.id) break;
        node = el.parentNode;
      }
    } catch {}
    return sel;
  }

  function isInViewport(element) {
    const rect = element.getBoundingClientRect();
    return (
      rect.top < window.innerHeight &&
      rect.bottom > 0 &&
      rect.left < window.innerWidth &&
      rect.right > 0 &&
      rect.width > 0 &&
      rect.height > 0
    );
  }

  function isInHiddenContainer(element) {
    let parent = element.parentElement;
    const hiddenSelectors = [
      "[hidden]",
      '[aria-hidden="true"]',
      ".modal:not(.show)",
      ".tab-pane:not(.active)",
      '[role="tabpanel"]:not(.active)',
      ".accordion-collapse:not(.show)",
      ".carousel-item:not(.active)",
      ".swiper-slide:not(.swiper-slide-active)",
    ];

    while (parent && parent !== document.body) {
      const cs = window.getComputedStyle(parent);
      if (cs.display === "none" || cs.visibility === "hidden") {
        return { hidden: true, reason: "CSS hidden", container: getSelector(parent) };
      }
      for (const selector of hiddenSelectors) {
        try {
          if (parent.matches(selector)) {
            return { hidden: true, reason: selector, container: getSelector(parent) };
          }
        } catch {}
      }
      parent = parent.parentElement;
    }
    return { hidden: false };
  }

  function getImageSize(imgElement) {
    const src = imgElement.currentSrc || imgElement.src;
    if (!src || src.startsWith("data:")) return 0;

    const perfEntries = performance.getEntriesByType("resource");
    const imgEntry = perfEntries.find((entry) => entry.name === src);

    if (imgEntry) {
      return imgEntry.transferSize || imgEntry.encodedBodySize || 0;
    }
    return 0;
  }

  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];
  }

  // Find LCP candidate (largest visible image) to exclude from recommendations
  const allViewportImages = Array.from(document.querySelectorAll("img")).filter(
    (img) => isInViewport(img) && img.getBoundingClientRect().width > 0
  );

  let lcpCandidate = null;
  let maxArea = 0;

  allViewportImages.forEach((img) => {
    const rect = img.getBoundingClientRect();
    const area = rect.width * rect.height;
    if (area > maxArea) {
      maxArea = area;
      lcpCandidate = img;
    }
  });

  // Find images without lazy loading
  const notLazyImages = document.querySelectorAll('img:not([data-src]):not([loading="lazy"])');

  const results = {
    belowFold: [],
    hiddenContainers: [],
    excluded: {
      inViewport: 0,
      lcpCandidate: null,
      tooSmall: 0,
    },
    elements: [],
  };

  notLazyImages.forEach((img) => {
    const rect = img.getBoundingClientRect();

    // Skip images in viewport (they shouldn't be lazy loaded)
    if (isInViewport(img)) {
      if (img === lcpCandidate) {
        results.excluded.lcpCandidate = getSelector(img);
      } else {
        results.excluded.inViewport++;
      }
      return;
    }

    // Skip very small images (likely icons/tracking pixels)
    if (rect.width < 50 || rect.height < 50) {
      results.excluded.tooSmall++;
      return;
    }

    const src = img.currentSrc || img.src;
    const size = getImageSize(img);
    const hiddenCheck = isInHiddenContainer(img);

    const imageData = {
      selector: getSelector(img),
      src: src.length > 60 ? "..." + src.slice(-57) : src,
      fullSrc: src,
      dimensions: `${img.naturalWidth}×${img.naturalHeight}`,
      size: size,
      sizeFormatted: size > 0 ? formatBytes(size) : "unknown",
      element: img,
    };

    if (hiddenCheck.hidden) {
      imageData.hiddenReason = hiddenCheck.reason;
      imageData.container = hiddenCheck.container;
      results.hiddenContainers.push(imageData);
    } else {
      imageData.distanceFromViewport = Math.round(rect.top - window.innerHeight) + "px";
      results.belowFold.push(imageData);
    }

    results.elements.push(img);
  });

  // Sort below-fold images by distance (furthest first)
  results.belowFold.sort((a, b) => parseInt(b.distanceFromViewport) - parseInt(a.distanceFromViewport));

  const totalImages = results.belowFold.length + results.hiddenContainers.length;
  const totalSize = [...results.belowFold, ...results.hiddenContainers].reduce((sum, img) => sum + img.size, 0);

  // Display results
  console.group("💡 Lazy Loading Opportunities");

  if (totalImages === 0) {
    console.log(
      "%c✅ Good job! All images outside the viewport have lazy loading.",
      "background: #222; color: #22c55e; padding: 0.5ch 1ch; font-weight: bold"
    );
  } else {
    console.log(
      `%c⚠️ Found ${totalImages} image(s) that should have lazy loading`,
      "color: #f59e0b; font-weight: bold; font-size: 14px"
    );

    if (totalSize > 0) {
      console.log(
        `%c📊 Potential savings: ${formatBytes(totalSize)} on initial load`,
        "color: #22c55e; font-weight: bold"
      );
    }
    console.log("");

    // Below the fold images
    if (results.belowFold.length > 0) {
      console.group(`📍 Below The Fold (${results.belowFold.length} images)`);
      const tableData = results.belowFold.slice(0, 20).map((img) => ({
        selector: img.selector,
        src: img.src,
        dimensions: img.dimensions,
        size: img.size,
        sizeFormatted: img.sizeFormatted,
        distanceFromViewport: img.distanceFromViewport,
      }));
      console.table(tableData);
      if (results.belowFold.length > 20) {
        console.log(`... and ${results.belowFold.length - 20} more images`);
      }
      console.groupEnd();
    }

    // Hidden container images
    if (results.hiddenContainers.length > 0) {
      console.log("");
      console.group(`🔒 In Hidden Containers (${results.hiddenContainers.length} images)`);
      console.log("Images in tabs, modals, carousels, or other hidden elements:");
      console.log("");
      const tableData = results.hiddenContainers.slice(0, 15).map((img) => ({
        selector: img.selector,
        src: img.src,
        dimensions: img.dimensions,
        size: img.size,
        sizeFormatted: img.sizeFormatted,
        hiddenReason: img.hiddenReason,
        container: img.container,
      }));
      console.table(tableData);
      if (results.hiddenContainers.length > 15) {
        console.log(`... and ${results.hiddenContainers.length - 15} more images`);
      }
      console.groupEnd();
    }

    // Excluded summary
    console.log("");
    console.group("ℹ️ Correctly Excluded (should NOT be lazy loaded)");
    console.log(`• LCP candidate: ${results.excluded.lcpCandidate || "none detected"}`);
    console.log(`• Other in-viewport images: ${results.excluded.inViewport}`);
    console.log(`• Too small (<50px): ${results.excluded.tooSmall}`);
    console.groupEnd();

    // Elements for inspection
    console.log("");
    console.group("🔎 Elements for inspection");
    console.log("Click to inspect in Elements panel:");
    results.elements.slice(0, 15).forEach((img, i) => console.log(`${i + 1}.`, img));
    if (results.elements.length > 15) {
      console.log(`... and ${results.elements.length - 15} more`);
    }
    console.groupEnd();

    // Quick fix
    console.log("");
    console.group("📝 Quick Fix");
    console.log("Add lazy loading to these images:");
    console.log("");
    console.log(
      '%c<img src="image.jpg" loading="lazy" alt="...">',
      "font-family: monospace; background: #1e1e1e; color: #9cdcfe; padding: 8px; border-radius: 4px"
    );
    console.groupEnd();
  }

  console.groupEnd();

  return {
    script: "Find-non-Lazy-Loaded-Images-outside-of-the-viewport",
    status: "ok",
    count: totalImages,
    details: {
      belowFoldCount: results.belowFold.length,
      hiddenContainerCount: results.hiddenContainers.length,
      totalSizeBytes: totalSize,
      excluded: {
        inViewport: results.excluded.inViewport,
        lcpCandidate: results.excluded.lcpCandidate,
        tooSmall: results.excluded.tooSmall,
      },
    },
    items: [
      ...results.belowFold.map((img) => ({
        selector: img.selector,
        src: img.fullSrc,
        sizeBytes: img.size,
        category: "below-fold",
        distancePx: parseInt(img.distanceFromViewport),
      })),
      ...results.hiddenContainers.map((img) => ({
        selector: img.selector,
        src: img.fullSrc,
        sizeBytes: img.size,
        category: "hidden-container",
        hiddenReason: img.hiddenReason,
        container: img.container,
      })),
    ],
    issues: totalImages > 0
      ? [{ severity: "warning", message: `${totalImages} image(s) outside the viewport are missing loading="lazy"` }]
      : [],
  };
})();
```

---

## Find render-blocking resources
URL: https://webperf-snippets.nucliweb.net/Loading/Find-render-blocking-resources

Identifies resources that block the browser from rendering the page. These resources must be fully downloaded and processed before the browser can display any content, directly impacting First Contentful Paint (FCP) and Largest Contentful Paint (LCP). Render-blocking resources are the primary cause of slow initial page renders. Users see a blank white screen while CSS and JavaScript files download and parse. On slow connections or mobile networks, this can add several seconds to your load time. Eliminating or deferring render-blocking resources is one of the highest-impact optimizations you can make.

```js
// Find render-blocking resources
// https://webperf-snippets.nucliweb.net

(() => {
  // Check browser support
  const testEntry = performance.getEntriesByType("resource")[0];
  if (testEntry && !("renderBlockingStatus" in testEntry)) {
    console.log(
      "%c⚠️ renderBlockingStatus not supported in this browser",
      "color: #f59e0b; font-weight: bold;"
    );
    console.log("This API is currently Chromium-only (Chrome 107+, Edge 107+).");
    console.log("Try using Chrome or Edge to analyze render-blocking resources.");
    return { script: "Find-render-blocking-resources", status: "unsupported", error: "renderBlockingStatus API requires Chrome 107+" };
  }

  const blockingResources = performance
    .getEntriesByType("resource")
    .filter((entry) => entry.renderBlockingStatus === "blocking")
    .map((entry) => {
      const url = new URL(entry.name);
      return {
        name: entry.name,
        shortName: url.pathname.split("/").pop() || url.pathname,
        type: entry.initiatorType,
        startTime: entry.startTime,
        duration: entry.duration,
        responseEnd: entry.responseEnd,
        size: entry.transferSize || 0,
      };
    })
    .sort((a, b) => b.responseEnd - a.responseEnd);

  const lastBlockingEnd = blockingResources.length
    ? Math.max(...blockingResources.map((r) => r.responseEnd))
    : 0;
  const totalSizeBytes = blockingResources.reduce((sum, r) => sum + r.size, 0);
  const byType = blockingResources.reduce((acc, r) => {
    acc[r.type] = (acc[r.type] || 0) + 1;
    return acc;
  }, {});

  console.group("%c🚧 Render-Blocking Resources", "font-weight: bold; font-size: 14px;");

  if (blockingResources.length === 0) {
    console.log(
      "%c✅ No render-blocking resources found!",
      "color: #22c55e; font-weight: bold;"
    );
    console.log("The page has no resources blocking initial render.");
    console.log("");
    console.log("%c💡 This could mean:", "font-weight: bold;");
    console.log("   • CSS is inlined or loaded asynchronously");
    console.log("   • Scripts use async or defer attributes");
    console.log("   • Critical resources are optimized");
  } else {
    // Summary
    console.log(
      `%c⚠️ Found ${blockingResources.length} render-blocking resource(s)`,
      "color: #ef4444; font-weight: bold; font-size: 14px;"
    );
    console.log("");

    console.log("%c📊 Impact Summary:", "font-weight: bold;");
    console.log(`   Rendering blocked until: ${lastBlockingEnd.toFixed(0)}ms`);
    console.log(`   Total blocking resources: ${blockingResources.length}`);
    if (totalSizeBytes > 0) {
      const sizeKB = (totalSizeBytes / 1024).toFixed(1);
      console.log(`   Total size: ${sizeKB} KB`);
    }
    console.log(`   By type: ${Object.entries(byType).map(([k, v]) => `${k} (${v})`).join(", ")}`);

    // Timeline visualization
    console.log("");
    console.log("%c⏱️ Timeline (sorted by completion):", "font-weight: bold;");

    const formatBar = (end, max) => {
      const pct = (end / max) * 100;
      const width = Math.round(pct / 5);
      return "█".repeat(width) + "░".repeat(20 - width);
    };

    blockingResources.forEach((r) => {
      const bar = formatBar(r.responseEnd, lastBlockingEnd);
      const sizeInfo = r.size > 0 ? ` (${(r.size / 1024).toFixed(1)} KB)` : "";
      console.log(
        `   ${r.type.padEnd(8)} ${r.responseEnd.toFixed(0).padStart(5)}ms ${bar} ${r.shortName}${sizeInfo}`
      );
    });

    // Table with details
    console.log("");
    console.log("%c📋 Details:", "font-weight: bold;");
    const tableData = blockingResources.map((r) => ({
      Type: r.type,
      "Response End": r.responseEnd.toFixed(0) + "ms",
      Duration: r.duration.toFixed(0) + "ms",
      Size: r.size > 0 ? (r.size / 1024).toFixed(1) + " KB" : "N/A",
      Resource: r.name.length > 60 ? "..." + r.name.slice(-57) : r.name,
    }));
    console.table(tableData);

    // Recommendations
    console.log("");
    console.log("%c📝 How to fix:", "color: #3b82f6; font-weight: bold;");
    console.log("");

    if (byType.script) {
      console.log("%c   Scripts:", "font-weight: bold;");
      console.log("   • Add 'defer' for scripts that don't need to run immediately");
      console.log("   • Add 'async' for independent scripts (analytics, etc.)");
      console.log("   • Move non-critical scripts to end of <body>");
      console.log('%c   <script src="app.js" defer></script>', "font-family: monospace; color: #22c55e;");
      console.log("");
    }

    if (byType.link || byType.css) {
      console.log("%c   CSS:", "font-weight: bold;");
      console.log("   • Inline critical CSS in <head>");
      console.log("   • Load non-critical CSS asynchronously with media='print' trick");
      console.log("   • Use <link rel='preload'> for critical stylesheets");
      console.log('%c   <link rel="preload" href="style.css" as="style" onload="this.rel=\'stylesheet\'">', "font-family: monospace; color: #22c55e;");
      console.log("");
    }

    if (byType.font) {
      console.log("%c   Fonts:", "font-weight: bold;");
      console.log("   • Use font-display: swap in @font-face");
      console.log("   • Preload critical fonts");
      console.log("   • Consider system font stack for initial render");
      console.log('%c   <link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>', "font-family: monospace; color: #22c55e;");
      console.log("");
    }
  }

  console.groupEnd();

  return {
    script: "Find-render-blocking-resources",
    status: "ok",
    count: blockingResources.length,
    details: {
      totalBlockingUntilMs: Math.round(lastBlockingEnd),
      totalSizeBytes,
      byType,
    },
    items: blockingResources.map((r) => ({
      type: r.type,
      url: r.name,
      shortName: r.shortName,
      responseEndMs: Math.round(r.responseEnd),
      durationMs: Math.round(r.duration),
      sizeBytes: r.size,
    })),
    issues: blockingResources.length > 0
      ? [{ severity: "error", message: `${blockingResources.length} render-blocking resource(s) delay rendering until ${Math.round(lastBlockingEnd)}ms` }]
      : [],
  };
})();
```

---

## First And Third Party Script Info
URL: https://webperf-snippets.nucliweb.net/Loading/First-And-Third-Party-Script-Info

Analyzes all scripts loaded on the page, separating them into first-party (your domain) and third-party (external) scripts. This helps identify the performance impact of external dependencies. Why this matters:

```js
// First and Third Party Script Analysis
// https://webperf-snippets.nucliweb.net

(() => {
  // Auto-detect first-party: same root domain (handles subdomains)
  function getRootDomain(hostname) {
    const parts = hostname.split(".");
    // Handle cases like co.uk, com.au, etc.
    if (parts.length > 2) {
      // Simple heuristic: if second-to-last part is short (co, com, org, net), take 3 parts
      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);

  function isFirstParty(hostname) {
    return getRootDomain(hostname) === currentRootDomain;
  }

  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];
  }

  // Gather script data
  const scripts = performance
    .getEntriesByType("resource")
    .filter((r) => r.initiatorType === "script")
    .map((r) => {
      const url = new URL(r.name);
      const firstParty = isFirstParty(url.hostname);

      return {
        name: r.name,
        shortName: url.pathname.split("/").pop() || url.pathname,
        host: url.hostname,
        firstParty,
        duration: r.duration,
        transferSize: r.transferSize || 0,
        startTime: r.startTime,
        responseEnd: r.responseEnd,
        renderBlocking: r.renderBlockingStatus === "blocking",
      };
    });

  const firstParty = scripts.filter((s) => s.firstParty);
  const thirdParty = scripts.filter((s) => !s.firstParty);

  // Calculate metrics
  const calcMetrics = (list) => ({
    count: list.length,
    totalSize: list.reduce((sum, s) => sum + s.transferSize, 0),
    totalDuration: list.reduce((sum, s) => sum + s.duration, 0),
    blocking: list.filter((s) => s.renderBlocking).length,
    hosts: [...new Set(list.map((s) => s.host))],
  });

  const firstMetrics = calcMetrics(firstParty);
  const thirdMetrics = calcMetrics(thirdParty);
  const totalScripts = scripts.length;
  const thirdPartyPct =
    totalScripts > 0 ? ((thirdParty.length / totalScripts) * 100).toFixed(0) : 0;

  // Display results
  console.group(
    "%c📊 Script Analysis: First vs Third Party",
    "font-weight: bold; font-size: 14px;",
  );

  // Overall summary
  console.log("");
  console.log("%cOverall Summary:", "font-weight: bold;");
  console.log(`   Total scripts: ${totalScripts}`);
  console.log(`   First-party: ${firstParty.length} (${100 - thirdPartyPct}%)`);
  console.log(`   Third-party: ${thirdParty.length} (${thirdPartyPct}%)`);

  if (thirdParty.length > firstParty.length) {
    console.log(`%c   ⚠️ More third-party scripts than first-party!`, "color: #f59e0b;");
  }

  // First Party Section
  console.log("");
  console.group(
    `%c🏠 First-Party Scripts (${firstParty.length})`,
    "color: #22c55e; font-weight: bold;",
  );

  if (firstParty.length === 0) {
    console.log("No first-party scripts found.");
  } else {
    console.log(`   Total size: ${formatBytes(firstMetrics.totalSize)}`);
    console.log(`   Render-blocking: ${firstMetrics.blocking}`);
    console.log("");

    const firstTable = firstParty
      .sort((a, b) => b.transferSize - a.transferSize)
      .map((s) => ({
        Script: s.shortName,
        Size: formatBytes(s.transferSize),
        Duration: s.duration.toFixed(0) + "ms",
        Blocking: s.renderBlocking ? "⚠️ Yes" : "No",
        Host: s.host,
      }));
    console.table(firstTable);
  }
  console.groupEnd();

  // Third Party Section
  console.log("");
  console.group(
    `%c🌐 Third-Party Scripts (${thirdParty.length})`,
    "color: #ef4444; font-weight: bold;",
  );

  if (thirdParty.length === 0) {
    console.log("%c✅ No third-party scripts found!", "color: #22c55e; font-weight: bold;");
  } else {
    console.log(`   Total size: ${formatBytes(thirdMetrics.totalSize)}`);
    console.log(`   Render-blocking: ${thirdMetrics.blocking}`);
    console.log(`   Unique hosts: ${thirdMetrics.hosts.length}`);
    console.log("");

    // Group by host
    console.log("%c   By host:", "font-weight: bold;");
    const byHost = thirdParty.reduce((acc, s) => {
      if (!acc[s.host]) acc[s.host] = { count: 0, size: 0, blocking: 0 };
      acc[s.host].count++;
      acc[s.host].size += s.transferSize;
      if (s.renderBlocking) acc[s.host].blocking++;
      return acc;
    }, {});

    Object.entries(byHost)
      .sort((a, b) => b[1].size - a[1].size)
      .forEach(([host, data]) => {
        const blockingMark = data.blocking > 0 ? " ⚠️" : "";
        console.log(
          `      ${host}: ${data.count} script(s), ${formatBytes(data.size)}${blockingMark}`,
        );
      });

    console.log("");
    const thirdTable = thirdParty
      .sort((a, b) => b.transferSize - a.transferSize)
      .map((s) => ({
        Script: s.shortName,
        Host: s.host,
        Size: formatBytes(s.transferSize),
        Duration: s.duration.toFixed(0) + "ms",
        Blocking: s.renderBlocking ? "⚠️ Yes" : "No",
      }));
    console.table(thirdTable);
  }
  console.groupEnd();

  // Recommendations
  if (thirdParty.length > 0) {
    console.log("");
    console.group("%c📝 Recommendations", "color: #3b82f6; font-weight: bold;");

    if (thirdMetrics.blocking > 0) {
      console.log("");
      console.log(
        "%c⚠️ Render-blocking third-party scripts:",
        "font-weight: bold; color: #ef4444;",
      );
      console.log("   • Load with 'async' or 'defer' attribute");
      console.log("   • Consider lazy-loading after user interaction");
      console.log(
        '%c   <script src="..." async></script>',
        "font-family: monospace; color: #22c55e;",
      );
    }

    if (thirdMetrics.hosts.length > 3) {
      console.log("");
      console.log(
        `%c⚠️ ${thirdMetrics.hosts.length} different third-party hosts:`,
        "font-weight: bold; color: #f59e0b;",
      );
      console.log("   • Each host requires DNS lookup + connection");
      console.log("   • Use <link rel='preconnect'> for critical hosts");
      console.log(
        '%c   <link rel="preconnect" href="https://web.dev">',
        "font-family: monospace; color: #22c55e;",
      );
    }

    if (thirdMetrics.totalSize > 100 * 1024) {
      console.log("");
      console.log(
        `%c⚠️ Third-party scripts total ${formatBytes(thirdMetrics.totalSize)}:`,
        "font-weight: bold; color: #f59e0b;",
      );
      console.log("   • Audit necessity of each script");
      console.log("   • Consider self-hosting critical scripts");
      console.log("   • Look for lighter alternatives");
    }

    console.log("");
    console.log("%c💡 General tips:", "font-weight: bold;");
    console.log("   • Regularly audit third-party scripts");
    console.log("   • Set up Content Security Policy (CSP)");
    console.log("   • Monitor third-party performance with RUM");
    console.log("   • Have fallbacks for critical functionality");

    console.groupEnd();
  }

  console.groupEnd();

  return {
    script: "First-And-Third-Party-Script-Info",
    status: "ok",
    count: totalScripts,
    details: {
      firstPartyCount: firstParty.length,
      thirdPartyCount: thirdParty.length,
      thirdPartyPercent: Number(thirdPartyPct),
      firstPartySizeBytes: firstMetrics.totalSize,
      thirdPartySizeBytes: thirdMetrics.totalSize,
      thirdPartyBlockingCount: thirdMetrics.blocking,
      thirdPartyHostCount: thirdMetrics.hosts.length,
    },
    items: scripts.map((s) => ({
      shortName: s.shortName,
      host: s.host,
      firstParty: s.firstParty,
      transferBytes: s.transferSize,
      durationMs: Math.round(s.duration),
      renderBlocking: s.renderBlocking,
    })),
    issues: [
      ...(thirdMetrics.blocking > 0
        ? [
            {
              severity: "error",
              message: `${thirdMetrics.blocking} render-blocking third-party script(s)`,
            },
          ]
        : []),
      ...(thirdMetrics.hosts.length > 3
        ? [
            {
              severity: "warning",
              message: `${thirdMetrics.hosts.length} different third-party hosts require separate DNS lookups`,
            },
          ]
        : []),
      ...(thirdMetrics.totalSize > 100 * 1024
        ? [
            {
              severity: "warning",
              message: `Third-party scripts total ${Math.round(thirdMetrics.totalSize / 1024)} KB`,
            },
          ]
        : []),
    ],
  };
})();
```

---

## First And Third Party Script Timings
URL: https://webperf-snippets.nucliweb.net/Loading/First-And-Third-Party-Script-Timings

Analyzes detailed timing phases for all scripts, comparing first-party vs third-party performance. This helps identify slow connection phases, DNS issues, or server response problems. Timing phases explained: ```mermaid sequenceDiagram     participant B as Browser     participant D as DNS     participant S as Server     B->>B: Redirect (if any)     B->>D: DNS Lookup     D-->>B: IP Address     B->>S: TCP Connection     B->>S: TLS/SSL Handshake     B->>S: Request     S-->>B: Response Start     S-->>B: Response End ```

```js
// First and Third Party Script Timings Analysis
// https://webperf-snippets.nucliweb.net

(() => {
  // Auto-detect first-party by root domain
  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);

  function isFirstParty(hostname) {
    return getRootDomain(hostname) === currentRootDomain;
  }

  // Gather script timing data
  const scripts = performance
    .getEntriesByType("resource")
    .filter((r) => r.initiatorType === "script")
    .map((r) => {
      const url = new URL(r.name);
      const firstParty = isFirstParty(url.hostname);

      // Check if timing data is available (CORS)
      const hasTiming = r.requestStart > 0;

      // Calculate timing phases
      const timings = {
        dns: r.domainLookupEnd - r.domainLookupStart,
        tcp: r.connectEnd - r.connectStart,
        tls: r.secureConnectionStart > 0 ? r.connectEnd - r.secureConnectionStart : 0,
        request: r.responseStart - r.requestStart,
        response: r.responseEnd - r.responseStart,
        total: r.responseEnd - r.startTime,
      };

      // Adjust TCP to exclude TLS time
      if (r.secureConnectionStart > 0) {
        timings.tcp = r.secureConnectionStart - r.connectStart;
      }

      return {
        name: r.name,
        shortName: url.pathname.split("/").pop() || url.hostname,
        host: url.hostname,
        firstParty,
        hasTiming,
        size: r.transferSize || 0,
        ...timings,
      };
    });

  const firstParty = scripts.filter((s) => s.firstParty);
  const thirdParty = scripts.filter((s) => !s.firstParty);

  // Calculate aggregate metrics
  function calcStats(list) {
    const withTiming = list.filter((s) => s.hasTiming);
    const phases = ["dns", "tcp", "tls", "request", "response", "total"];

    const stats = {};
    phases.forEach((phase) => {
      const values = withTiming.map((s) => s[phase]).filter((v) => v > 0);
      if (values.length > 0) {
        stats[phase] = {
          avg: values.reduce((a, b) => a + b, 0) / values.length,
          max: Math.max(...values),
          total: values.reduce((a, b) => a + b, 0),
        };
      } else {
        stats[phase] = { avg: 0, max: 0, total: 0 };
      }
    });

    return {
      count: list.length,
      withTiming: withTiming.length,
      withoutTiming: list.length - withTiming.length,
      stats,
    };
  }

  const firstStats = calcStats(firstParty);
  const thirdStats = calcStats(thirdParty);

  // Format helpers
  const formatMs = (ms) => (ms > 0 ? ms.toFixed(1) + "ms" : "-");
  const formatBar = (value, max) => {
    if (value <= 0 || max <= 0) return "";
    const width = Math.min(Math.round((value / max) * 15), 15);
    return "█".repeat(width) + "░".repeat(15 - width);
  };

  // Display results
  console.group("%c⏱️ Script Timing Analysis", "font-weight: bold; font-size: 14px;");

  // Summary comparison
  console.log("");
  console.log("%cSummary (averages):", "font-weight: bold;");

  const phases = [
    { key: "dns", name: "DNS Lookup", icon: "🔍" },
    { key: "tcp", name: "TCP Connection", icon: "🔌" },
    { key: "tls", name: "TLS/SSL", icon: "🔒" },
    { key: "request", name: "Request (TTFB)", icon: "📤" },
    { key: "response", name: "Response", icon: "📥" },
    { key: "total", name: "Total", icon: "⏱️" },
  ];

  console.log("");
  console.log("                        First-Party    Third-Party");
  console.log("                        ───────────    ───────────");

  phases.forEach(({ key, name, icon }) => {
    const fp = formatMs(firstStats.stats[key]?.avg || 0).padStart(10);
    const tp = formatMs(thirdStats.stats[key]?.avg || 0).padStart(10);
    console.log(`${icon} ${name.padEnd(18)} ${fp}       ${tp}`);
  });

  // First-party details
  console.log("");
  console.group(`%c🏠 First-Party Scripts (${firstParty.length})`, "color: #22c55e; font-weight: bold;");

  if (firstParty.length === 0) {
    console.log("No first-party scripts found.");
  } else {
    if (firstStats.withoutTiming > 0) {
      console.log(`%c⚠️ ${firstStats.withoutTiming} script(s) have no detailed timing (cached or same-origin)`, "color: #f59e0b;");
    }

    const maxTotal = Math.max(...firstParty.map((s) => s.total));

    const tableData = firstParty
      .sort((a, b) => b.total - a.total)
      .slice(0, 15)
      .map((s) => ({
        Script: s.shortName,
        DNS: formatMs(s.dns),
        TCP: formatMs(s.tcp),
        TLS: formatMs(s.tls),
        Request: formatMs(s.request),
        Response: formatMs(s.response),
        Total: formatMs(s.total),
        "": formatBar(s.total, maxTotal),
      }));

    console.table(tableData);

    if (firstParty.length > 15) {
      console.log(`... and ${firstParty.length - 15} more scripts`);
    }
  }
  console.groupEnd();

  // Third-party details
  console.log("");
  console.group(`%c🌐 Third-Party Scripts (${thirdParty.length})`, "color: #ef4444; font-weight: bold;");

  if (thirdParty.length === 0) {
    console.log("%c✅ No third-party scripts!", "color: #22c55e; font-weight: bold;");
  } else {
    const corsRestricted = thirdStats.withoutTiming;
    if (corsRestricted > 0) {
      console.log(`%c⚠️ ${corsRestricted} script(s) restricted by CORS (no Timing-Allow-Origin header)`, "color: #f59e0b;");
      console.log("   Only total duration available for these scripts.");
      console.log("");
    }

    const maxTotal = Math.max(...thirdParty.map((s) => s.total));

    const tableData = thirdParty
      .sort((a, b) => b.total - a.total)
      .slice(0, 15)
      .map((s) => ({
        Script: s.shortName,
        Host: s.host.length > 25 ? s.host.slice(0, 22) + "..." : s.host,
        DNS: formatMs(s.dns),
        TCP: formatMs(s.tcp),
        TLS: formatMs(s.tls),
        Request: formatMs(s.request),
        Response: formatMs(s.response),
        Total: formatMs(s.total),
        "": formatBar(s.total, maxTotal),
      }));

    console.table(tableData);

    if (thirdParty.length > 15) {
      console.log(`... and ${thirdParty.length - 15} more scripts`);
    }
  }
  console.groupEnd();

  // Identify slow scripts
  const slowThreshold = 500; // ms
  const slowScripts = scripts.filter((s) => s.total > slowThreshold);

  if (slowScripts.length > 0) {
    console.log("");
    console.group(`%c🐌 Slow Scripts (>${slowThreshold}ms)`, "color: #ef4444; font-weight: bold;");

    slowScripts
      .sort((a, b) => b.total - a.total)
      .forEach((s) => {
        const party = s.firstParty ? "1st" : "3rd";
        const phases = [];
        if (s.dns > 50) phases.push(`DNS: ${formatMs(s.dns)}`);
        if (s.tcp > 50) phases.push(`TCP: ${formatMs(s.tcp)}`);
        if (s.tls > 50) phases.push(`TLS: ${formatMs(s.tls)}`);
        if (s.request > 100) phases.push(`Request: ${formatMs(s.request)}`);
        if (s.response > 200) phases.push(`Response: ${formatMs(s.response)}`);

        console.log(`${party} ${formatMs(s.total).padStart(8)} - ${s.shortName}`);
        if (phases.length > 0 && s.hasTiming) {
          console.log(`%c         Slow phases: ${phases.join(", ")}`, "color: #666;");
        }
      });

    console.groupEnd();
  }

  // Recommendations
  const hasSlowDns = scripts.some((s) => s.dns > 100);
  const hasSlowTcp = scripts.some((s) => s.tcp > 100);
  const hasSlowRequest = scripts.some((s) => s.request > 200);
  const hasCorsIssues = thirdStats.withoutTiming > 0;

  if (hasSlowDns || hasSlowTcp || hasSlowRequest || hasCorsIssues) {
    console.log("");
    console.group("%c📝 Recommendations", "color: #3b82f6; font-weight: bold;");

    if (hasSlowDns) {
      console.log("");
      console.log("%c🔍 Slow DNS lookups detected:", "font-weight: bold;");
      console.log("   • Use <link rel='dns-prefetch'> for third-party domains");
      console.log("   • Consider using a faster DNS provider");
    }

    if (hasSlowTcp) {
      console.log("");
      console.log("%c🔌 Slow TCP connections detected:", "font-weight: bold;");
      console.log("   • Use <link rel='preconnect'> for critical third-party origins");
      console.log("   • Enable HTTP/2 or HTTP/3 for multiplexing");
    }

    if (hasSlowRequest) {
      console.log("");
      console.log("%c📤 Slow server response times detected:", "font-weight: bold;");
      console.log("   • Optimize server processing");
      console.log("   • Use a CDN closer to users");
      console.log("   • Consider self-hosting critical third-party scripts");
    }

    if (hasCorsIssues) {
      console.log("");
      console.log("%c🔒 CORS-restricted timing data:", "font-weight: bold;");
      console.log("   • Third-party servers need Timing-Allow-Origin header");
      console.log("   • Contact vendors to enable resource timing");
      console.log("   • Self-host scripts to get full timing data");
    }

    console.groupEnd();
  }

  console.groupEnd();

  return {
    script: "First-And-Third-Party-Script-Timings",
    status: "ok",
    count: scripts.length,
    details: {
      firstPartyCount: firstParty.length,
      thirdPartyCount: thirdParty.length,
      corsRestrictedCount: thirdStats.withoutTiming,
      slowScriptCount: slowScripts.length,
      firstPartyAvgTotalMs: Math.round(firstStats.stats.total?.avg || 0),
      thirdPartyAvgTotalMs: Math.round(thirdStats.stats.total?.avg || 0),
    },
    items: scripts.map(s => ({ shortName: s.shortName, host: s.host, firstParty: s.firstParty, totalMs: Math.round(s.total), dnsMs: Math.round(s.dns), tcpMs: Math.round(s.tcp), requestMs: Math.round(s.request), responseMs: Math.round(s.response), hasTiming: s.hasTiming })),
    issues: [
      ...(slowScripts.length > 0 ? [{ severity: "warning", message: `${slowScripts.length} script(s) take over ${slowThreshold}ms to load` }] : []),
      ...(hasSlowDns ? [{ severity: "warning", message: "Slow DNS lookups detected (>100ms). Add dns-prefetch or preconnect." }] : []),
      ...(hasSlowTcp ? [{ severity: "warning", message: "Slow TCP connections detected (>100ms). Add preconnect for critical origins." }] : []),
      ...(hasSlowRequest ? [{ severity: "warning", message: "Slow server response times detected (>200ms). Consider CDN or self-hosting." }] : []),
    ],
  };
})();
```

---

## Fonts Preloaded, Loaded, and Used Above The Fold
URL: https://webperf-snippets.nucliweb.net/Loading/Fonts-Preloaded-Loaded-and-used-above-the-fold

Analyzes font loading strategy by comparing preloaded fonts, loaded fonts, and fonts actually used above the fold. This helps identify optimization opportunities and wasted resources. Why font loading matters:

```js
// Font Loading Analysis - Preloaded, Loaded, and Used Above The Fold
// https://webperf-snippets.nucliweb.net

(() => {
  // Helper to extract font filename from URL
  function getFontName(url) {
    try {
      const path = new URL(url).pathname;
      return path.split("/").pop() || path;
    } catch {
      return url;
    }
  }

  // Check if URL is third-party
  function isThirdParty(url) {
    try {
      return new URL(url).hostname !== location.hostname;
    } catch {
      return false;
    }
  }

  // Normalize font family name for comparison
  function normalizeFontFamily(family) {
    return family
      .split(",")[0]
      .trim()
      .replace(/["']/g, "")
      .toLowerCase();
  }

  // 1. Get preloaded fonts
  const preloadedFonts = Array.from(
    document.querySelectorAll('link[rel="preload"][as="font"]')
  ).map((link) => ({
    href: link.href,
    name: getFontName(link.href),
    crossorigin: link.crossOrigin,
    type: link.type || "unknown",
    thirdParty: isThirdParty(link.href),
  }));

  // 2. Get loaded fonts from document.fonts API
  const loadedFonts = Array.from(document.fonts.values())
    .filter((font) => font.status === "loaded")
    .map((font) => ({
      family: font.family.replace(/["']/g, ""),
      weight: font.weight,
      style: font.style,
      display: font.display || "unknown",
      key: `${font.family.replace(/["']/g, "")}-${font.weight}-${font.style}`,
    }));

  // Deduplicate loaded fonts
  const uniqueLoadedFonts = Array.from(
    new Map(loadedFonts.map((f) => [f.key, f])).values()
  );

  // 3. Get fonts used above the fold
  const viewportHeight = window.innerHeight;
  const viewportWidth = window.innerWidth;

  const aboveFoldElements = Array.from(
    document.querySelectorAll("body *:not(script):not(style):not(link):not(source)")
  ).filter((el) => {
    const rect = el.getBoundingClientRect();
    return (
      rect.top < viewportHeight &&
      rect.bottom > 0 &&
      rect.left < viewportWidth &&
      rect.right > 0 &&
      rect.width > 0 &&
      rect.height > 0
    );
  });

  const usedFontsMap = new Map();
  aboveFoldElements.forEach((el) => {
    const style = getComputedStyle(el);
    const family = style.fontFamily;
    const weight = style.fontWeight;
    const fontStyle = style.fontStyle;
    const key = `${family}-${weight}-${fontStyle}`;

    if (!usedFontsMap.has(key)) {
      usedFontsMap.set(key, {
        family: family.split(",")[0].trim().replace(/["']/g, ""),
        fullFamily: family,
        weight,
        style: fontStyle,
        elements: 1,
      });
    } else {
      usedFontsMap.get(key).elements++;
    }
  });

  const usedFonts = Array.from(usedFontsMap.values());

  // 4. Analysis - find mismatches
  const preloadedNames = preloadedFonts.map((f) =>
    normalizeFontFamily(f.name.replace(/\.(woff2?|ttf|otf|eot)$/i, ""))
  );

  const usedFamilies = usedFonts.map((f) => normalizeFontFamily(f.family));

  // Fonts preloaded but not used above the fold
  const preloadedNotUsed = preloadedFonts.filter((f) => {
    const name = normalizeFontFamily(
      f.name.replace(/\.(woff2?|ttf|otf|eot)$/i, "")
    );
    return !usedFamilies.some(
      (used) => used.includes(name) || name.includes(used)
    );
  });

  // Fonts used but not preloaded (potential optimization)
  const usedNotPreloaded = usedFonts.filter((f) => {
    const family = normalizeFontFamily(f.family);
    // Exclude system fonts
    const systemFonts = [
      "arial",
      "helvetica",
      "times",
      "georgia",
      "verdana",
      "system-ui",
      "-apple-system",
      "segoe ui",
      "roboto",
      "sans-serif",
      "serif",
      "monospace",
    ];
    if (systemFonts.some((sf) => family.includes(sf))) return false;
    return !preloadedNames.some(
      (preloaded) => preloaded.includes(family) || family.includes(preloaded)
    );
  });

  // Display results
  console.group("%c🔤 Font Loading Analysis", "font-weight: bold; font-size: 14px;");

  // Summary
  console.log("");
  console.log("%cSummary:", "font-weight: bold;");
  console.log(`   Preloaded fonts: ${preloadedFonts.length}`);
  console.log(`   Loaded fonts: ${uniqueLoadedFonts.length}`);
  console.log(`   Used above the fold: ${usedFonts.length}`);

  // Preloaded fonts
  console.log("");
  console.group(
    `%c⬇️ Preloaded Fonts (${preloadedFonts.length})`,
    "color: #8b5cf6; font-weight: bold;"
  );

  if (preloadedFonts.length === 0) {
    console.log("No fonts preloaded via <link rel='preload'>.");
  } else {
    const preloadTable = preloadedFonts.map((f) => ({
      Font: f.name,
      Type: f.type,
      "Third-Party": f.thirdParty ? "Yes" : "No",
      Crossorigin: f.crossorigin || "missing ⚠️",
    }));
    console.table(preloadTable);

    // Check for missing crossorigin
    const missingCrossorigin = preloadedFonts.filter((f) => !f.crossorigin);
    if (missingCrossorigin.length > 0) {
      console.log(
        "%c⚠️ Fonts preloaded without crossorigin attribute will be fetched twice!",
        "color: #f59e0b;"
      );
    }
  }
  console.groupEnd();

  // Loaded fonts
  console.log("");
  console.group(
    `%c📦 Loaded Fonts (${uniqueLoadedFonts.length})`,
    "color: #3b82f6; font-weight: bold;"
  );

  if (uniqueLoadedFonts.length === 0) {
    console.log("No web fonts loaded (using system fonts only).");
  } else {
    const loadedTable = uniqueLoadedFonts.map((f) => ({
      Family: f.family,
      Weight: f.weight,
      Style: f.style,
      Display: f.display,
    }));
    console.table(loadedTable);

    // Check font-display
    const autoDisplay = uniqueLoadedFonts.filter(
      (f) => f.display === "auto" || f.display === "unknown"
    );
    if (autoDisplay.length > 0) {
      console.log(
        `%c💡 ${autoDisplay.length} font(s) using default font-display. Consider using 'swap' or 'optional'.`,
        "color: #f59e0b;"
      );
    }
  }
  console.groupEnd();

  // Used above the fold
  console.log("");
  console.group(
    `%c👁️ Fonts Used Above The Fold (${usedFonts.length})`,
    "color: #22c55e; font-weight: bold;"
  );

  if (usedFonts.length === 0) {
    console.log("No text elements found above the fold.");
  } else {
    const usedTable = usedFonts
      .sort((a, b) => b.elements - a.elements)
      .map((f) => ({
        Family: f.family,
        Weight: f.weight,
        Style: f.style,
        "Elements Using": f.elements,
      }));
    console.table(usedTable);
  }
  console.groupEnd();

  // Issues and recommendations
  const hasIssues = preloadedNotUsed.length > 0 || usedNotPreloaded.length > 0;

  if (hasIssues) {
    console.log("");
    console.group("%c⚠️ Potential Issues", "color: #ef4444; font-weight: bold;");

    if (preloadedNotUsed.length > 0) {
      console.log("");
      console.log(
        `%c🗑️ Preloaded but NOT used above the fold (${preloadedNotUsed.length}):`,
        "font-weight: bold;"
      );
      console.log("   These preloads may be wasting bandwidth:");
      preloadedNotUsed.forEach((f) => {
        console.log(`   • ${f.name}`);
      });
      console.log("");
      console.log("   Consider:");
      console.log("   • Removing the preload if font is only used below the fold");
      console.log("   • The font may be for a different viewport/breakpoint");
    }

    if (usedNotPreloaded.length > 0) {
      console.log("");
      console.log(
        `%c🚀 Used above the fold but NOT preloaded (${usedNotPreloaded.length}):`,
        "font-weight: bold;"
      );
      console.log("   These fonts could benefit from preloading:");
      usedNotPreloaded.forEach((f) => {
        console.log(`   • ${f.family} (${f.weight})`);
      });
      console.log("");
      console.log("%cExample preload:", "font-weight: bold;");
      console.log(
        '%c<link rel="preload" href="/fonts/font.woff2" as="font" type="font/woff2" crossorigin>',
        "font-family: monospace; color: #22c55e;"
      );
    }

    console.groupEnd();
  } else if (preloadedFonts.length > 0 && usedFonts.length > 0) {
    console.log("");
    console.log(
      "%c✅ Font loading looks optimized! Preloaded fonts match usage above the fold.",
      "color: #22c55e; font-weight: bold;"
    );
  }

  // Best practices
  console.log("");
  console.group("%c📝 Font Loading Best Practices", "color: #3b82f6; font-weight: bold;");
  console.log("");
  console.log("1. Preload critical fonts used above the fold");
  console.log("2. Use font-display: swap or optional");
  console.log("3. Always include crossorigin attribute on font preloads");
  console.log("4. Self-host fonts when possible for better control");
  console.log("5. Subset fonts to include only needed characters");
  console.log("6. Use WOFF2 format for best compression");
  console.groupEnd();

  console.groupEnd();

  return {
    script: "Fonts-Preloaded-Loaded-and-used-above-the-fold",
    status: "ok",
    count: uniqueLoadedFonts.length,
    details: {
      preloadedCount: preloadedFonts.length,
      loadedCount: uniqueLoadedFonts.length,
      usedAboveFoldCount: usedFonts.length,
      preloadedNotUsedCount: preloadedNotUsed.length,
      usedNotPreloadedCount: usedNotPreloaded.length,
    },
    items: uniqueLoadedFonts.map(f => ({ family: f.family, weight: f.weight, style: f.style, display: f.display })),
  usedFonts: usedFonts.map(f => ({ family: f.family, weight: f.weight, style: f.style, elements: f.elements })),
    issues: [
      ...preloadedNotUsed.map(f => ({ severity: "warning", message: `Preloaded but not used above fold: ${f.name}` })),
      ...usedNotPreloaded.map(f => ({ severity: "warning", message: `Used above fold but not preloaded: ${f.family} (${f.weight})` })),
      ...preloadedFonts.filter(f => !f.crossorigin).map(f => ({ severity: "error", message: `Font preloaded without crossorigin (double fetch): ${f.name}` })),
    ],
  };
})();
```

---

## Get your `<head>` in order
URL: https://webperf-snippets.nucliweb.net/Loading/Get-Your-Head-in-Order

---

## Inline CSS Info and Size
URL: https://webperf-snippets.nucliweb.net/Loading/Inline-CSS-Info-and-Size

Analyzes all inline `<style>` tags on the page, measuring their size and identifying optimization opportunities. This helps understand how much CSS is inlined and whether it's being used effectively. When inline CSS is good:

```js
// Inline CSS Analysis - Find and analyze all inline style tags
// 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 formatKB = (bytes) => (bytes / 1024).toFixed(2);

  // Get all inline style tags
  const styleTags = Array.from(document.querySelectorAll("style"));

  if (styleTags.length === 0) {
    console.group("%c📝 Inline CSS Analysis", "font-weight: bold; font-size: 14px;");
    console.log("%c✅ No inline <style> tags found.", "color: #22c55e; font-weight: bold;");
    console.log("The page uses external stylesheets only.");
    console.groupEnd();
    return { script: "Inline-CSS-Info-and-Size", status: "ok", count: 0, items: [], issues: [] };
  }

  // Analyze each style tag
  const styles = styleTags.map((style, index) => {
    const content = style.innerHTML;
    const size = new Blob([content]).size;
    const parent = style.parentElement?.tagName.toLowerCase() || "unknown";
    const inHead = style.closest("head") !== null;

    // Count approximate number of rules
    const ruleCount = (content.match(/\{[^}]*\}/g) || []).length;

    // Get preview (first 100 chars, cleaned up)
    const preview = content
      .replace(/\s+/g, " ")
      .trim()
      .slice(0, 80);

    // Check for media queries
    const hasMediaQueries = /@media/i.test(content);

    // Check for keyframes (animation)
    const hasKeyframes = /@keyframes/i.test(content);

    return {
      index: index + 1,
      element: style,
      size,
      sizeKB: formatKB(size),
      parent,
      inHead,
      ruleCount,
      preview: preview + (content.length > 80 ? "..." : ""),
      hasMediaQueries,
      hasKeyframes,
      content,
    };
  });

  // Calculate totals and find issues
  const totalSize = styles.reduce((sum, s) => sum + s.size, 0);
  const totalRules = styles.reduce((sum, s) => sum + s.ruleCount, 0);
  const criticalBudget = 14 * 1024; // 14 KB

  // Find duplicated content
  const contentMap = new Map();
  styles.forEach((s) => {
    const normalized = s.content.replace(/\s+/g, " ").trim();
    if (!contentMap.has(normalized)) {
      contentMap.set(normalized, []);
    }
    contentMap.get(normalized).push(s.index);
  });
  const duplicates = Array.from(contentMap.entries())
    .filter(([, indices]) => indices.length > 1)
    .map(([, indices]) => indices);

  // Rating based on total size
  let rating, ratingColor;
  if (totalSize <= criticalBudget * 0.5) {
    rating = "Good";
    ratingColor = "#22c55e";
  } else if (totalSize <= criticalBudget) {
    rating = "Acceptable";
    ratingColor = "#f59e0b";
  } else {
    rating = "Too Large";
    ratingColor = "#ef4444";
  }

  // Display results
  console.group("%c📝 Inline CSS Analysis", "font-weight: bold; font-size: 14px;");

  // Summary
  console.log("");
  console.log("%cSummary:", "font-weight: bold;");
  console.log(`   Total inline <style> tags: ${styles.length}`);
  console.log(`   Total size: ${formatBytes(totalSize)} (${formatKB(totalSize)} KB)`);
  console.log(`   Total CSS rules: ~${totalRules}`);
  console.log(
    `   Budget used: ${((totalSize / criticalBudget) * 100).toFixed(0)}% of 14 KB`
  );
  console.log(`   Rating: %c${rating}`, `color: ${ratingColor}; font-weight: bold;`);

  // Visual budget bar
  const budgetPct = Math.min((totalSize / criticalBudget) * 100, 100);
  const barWidth = Math.round(budgetPct / 5);
  const bar = "█".repeat(barWidth) + "░".repeat(20 - barWidth);
  console.log(`   [${bar}] ${budgetPct.toFixed(0)}%`);

  // Details table
  console.log("");
  console.group(
    `%c📊 Style Tags (${styles.length})`,
    "color: #3b82f6; font-weight: bold;"
  );

  const tableData = styles.map((s) => ({
    "#": s.index,
    Location: s.inHead ? "head" : "body",
    Size: formatBytes(s.size),
    Rules: s.ruleCount,
    "Media Queries": s.hasMediaQueries ? "Yes" : "-",
    Animations: s.hasKeyframes ? "Yes" : "-",
    Preview: s.preview,
  }));
  console.table(tableData);

  // Elements for inspection
  console.log("");
  console.log("%c🔎 Elements for inspection:", "font-weight: bold;");
  styles.forEach((s) => {
    const warning = s.size > 5 * 1024 ? " ⚠️ Large" : "";
    console.log(`${s.index}. (${formatBytes(s.size)})${warning}`, s.element);
  });

  console.groupEnd();

  // Issues
  const issues = [];

  if (totalSize > criticalBudget) {
    issues.push({
      type: "size",
      message: `Total inline CSS (${formatBytes(totalSize)}) exceeds 14 KB critical budget`,
      suggestion: "Move non-critical styles to external stylesheet",
    });
  }

  if (duplicates.length > 0) {
    issues.push({
      type: "duplicate",
      message: `Found ${duplicates.length} duplicated style block(s)`,
      details: duplicates.map((d) => `Tags #${d.join(", #")} have identical content`),
      suggestion: "Consolidate duplicate styles into a single block",
    });
  }

  const largeBlocks = styles.filter((s) => s.size > 5 * 1024);
  if (largeBlocks.length > 0) {
    issues.push({
      type: "large",
      message: `${largeBlocks.length} style block(s) over 5 KB`,
      details: largeBlocks.map((s) => `Tag #${s.index}: ${formatBytes(s.size)}`),
      suggestion: "Consider moving large blocks to external cached stylesheets",
    });
  }

  const bodyStyles = styles.filter((s) => !s.inHead);
  if (bodyStyles.length > 0) {
    issues.push({
      type: "location",
      message: `${bodyStyles.length} style block(s) in <body>`,
      details: bodyStyles.map((s) => `Tag #${s.index}`),
      suggestion: "Move styles to <head> or use external stylesheets for better parsing",
    });
  }

  if (issues.length > 0) {
    console.log("");
    console.group("%c⚠️ Issues Found", "color: #ef4444; font-weight: bold;");

    issues.forEach((issue) => {
      console.log("");
      console.log(`%c${issue.message}`, "font-weight: bold;");
      if (issue.details) {
        issue.details.forEach((d) => console.log(`   • ${d}`));
      }
      console.log(`   → ${issue.suggestion}`);
    });

    console.groupEnd();
  } else {
    console.log("");
    console.log(
      "%c✅ No issues found. Inline CSS is within recommended limits.",
      "color: #22c55e; font-weight: bold;"
    );
  }

  // Recommendations
  console.log("");
  console.group("%c📝 Best Practices", "color: #3b82f6; font-weight: bold;");
  console.log("");
  console.log("• Keep critical CSS under 14 KB (fits in first TCP round-trip)");
  console.log("• Inline only above-the-fold critical styles");
  console.log("• Move large stylesheets to external files for caching");
  console.log("• Avoid duplicate style blocks");
  console.log("• Place <style> tags in <head> for optimal parsing");
  console.log("");
  console.log("%cExample critical CSS pattern:", "font-weight: bold;");
  console.log('%c<head>\n  <style>/* Critical above-fold CSS here */</style>\n  <link rel="preload" href="main.css" as="style">\n  <link rel="stylesheet" href="main.css" media="print" onload="this.media=\'all\'">\n</head>', "font-family: monospace; color: #22c55e;");
  console.groupEnd();

  console.groupEnd();

  return {
    script: "Inline-CSS-Info-and-Size",
    status: "ok",
    count: styles.length,
    details: {
      totalSizeBytes: totalSize,
      totalRules,
      criticalBudgetBytes: criticalBudget,
      duplicateBlocks: duplicates.length,
      bodyStyleBlocks: styles.filter(s => !s.inHead).length,
    },
    items: styles.map(s => ({ index: s.index, sizeBytes: s.size, parent: s.parent, inHead: s.inHead, ruleCount: s.ruleCount, hasMediaQueries: s.hasMediaQueries, hasKeyframes: s.hasKeyframes })),
    issues: issues.map(i => ({ severity: "warning", message: i.message })),
  };
})();
```

---

## Inline Script Info and Size
URL: https://webperf-snippets.nucliweb.net/Loading/Inline-Script-Info-and-Size

Analyzes all inline `<script>` tags on the page, measuring their size and identifying potential performance issues. This helps understand the impact of inline JavaScript on page load. When inline scripts are good:

```js
// Inline Script Analysis - Find and analyze all inline scripts
// 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 formatKB = (bytes) => (bytes / 1024).toFixed(2);

  // Get all inline scripts (no src attribute)
  const scriptTags = Array.from(
    document.querySelectorAll("script:not([src])")
  ).filter((s) => s.innerHTML.trim().length > 0);

  if (scriptTags.length === 0) {
    console.group("%c📜 Inline Script Analysis", "font-weight: bold; font-size: 14px;");
    console.log("%c✅ No inline scripts found.", "color: #22c55e; font-weight: bold;");
    console.log("The page uses external scripts only.");
    console.groupEnd();
    return { script: "Inline-Script-Info-and-Size", status: "ok", count: 0, items: [], issues: [] };
  }

  // Analyze each script
  const scripts = scriptTags.map((script, index) => {
    const content = script.innerHTML;
    const size = new Blob([content]).size;
    const type = script.type || "text/javascript";
    const inHead = script.closest("head") !== null;

    // Determine script category
    let category = "classic";
    if (type === "module") {
      category = "module";
    } else if (type === "application/ld+json") {
      category = "json-ld";
    } else if (type.includes("template") || type === "text/html") {
      category = "template";
    } else if (type !== "text/javascript" && type !== "") {
      category = "other";
    }

    // Check if parser-blocking (classic scripts without async/defer)
    const isParserBlocking =
      category === "classic" &&
      !script.hasAttribute("async") &&
      !script.hasAttribute("defer");

    // Get preview (first 80 chars, cleaned up)
    const preview = content
      .replace(/\s+/g, " ")
      .trim()
      .slice(0, 80);

    // Check for common patterns
    const hasGlobalVars = /^(var|let|const|window\.)/.test(content.trim());
    const isConfig = /config|settings|options|__/i.test(content.slice(0, 200));
    const isAnalytics = /gtag|analytics|gtm|fbq|_gaq/i.test(content);

    return {
      index: index + 1,
      element: script,
      size,
      sizeKB: formatKB(size),
      type,
      category,
      inHead,
      isParserBlocking,
      hasGlobalVars,
      isConfig,
      isAnalytics,
      preview: preview + (content.length > 80 ? "..." : ""),
      content,
    };
  });

  // Separate by category
  const executableScripts = scripts.filter(
    (s) => s.category === "classic" || s.category === "module"
  );
  const jsonLdScripts = scripts.filter((s) => s.category === "json-ld");
  const otherScripts = scripts.filter(
    (s) => s.category === "template" || s.category === "other"
  );

  // Calculate totals for executable scripts
  const totalSize = executableScripts.reduce((sum, s) => sum + s.size, 0);
  const parserBlockingScripts = executableScripts.filter((s) => s.isParserBlocking);
  const parserBlockingInHead = parserBlockingScripts.filter((s) => s.inHead);

  // Find duplicated content
  const contentMap = new Map();
  executableScripts.forEach((s) => {
    const normalized = s.content.replace(/\s+/g, " ").trim();
    if (normalized.length > 50) {
      // Only check substantial scripts
      if (!contentMap.has(normalized)) {
        contentMap.set(normalized, []);
      }
      contentMap.get(normalized).push(s.index);
    }
  });
  const duplicates = Array.from(contentMap.entries())
    .filter(([, indices]) => indices.length > 1)
    .map(([, indices]) => indices);

  // Rating
  let rating, ratingColor;
  const inlineThreshold = 3 * 1024; // 3 KB recommended max
  if (totalSize <= inlineThreshold && parserBlockingInHead.length === 0) {
    rating = "Good";
    ratingColor = "#22c55e";
  } else if (totalSize <= inlineThreshold * 2 || parserBlockingInHead.length <= 2) {
    rating = "Needs Review";
    ratingColor = "#f59e0b";
  } else {
    rating = "Needs Optimization";
    ratingColor = "#ef4444";
  }

  // Display results
  console.group("%c📜 Inline Script Analysis", "font-weight: bold; font-size: 14px;");

  // Summary
  console.log("");
  console.log("%cSummary:", "font-weight: bold;");
  console.log(`   Total inline scripts: ${scripts.length}`);
  console.log(`   Executable scripts: ${executableScripts.length}`);
  if (jsonLdScripts.length > 0) {
    console.log(`   JSON-LD (structured data): ${jsonLdScripts.length}`);
  }
  if (otherScripts.length > 0) {
    console.log(`   Templates/Other: ${otherScripts.length}`);
  }
  console.log(`   Total executable size: ${formatBytes(totalSize)} (${formatKB(totalSize)} KB)`);
  console.log(`   Parser-blocking scripts: ${parserBlockingScripts.length}`);
  if (parserBlockingInHead.length > 0) {
    console.log(
      `   %c⚠️ Parser-blocking in <head>: ${parserBlockingInHead.length}`,
      "color: #ef4444;"
    );
  }
  console.log(`   Rating: %c${rating}`, `color: ${ratingColor}; font-weight: bold;`);

  // Executable scripts table
  if (executableScripts.length > 0) {
    console.log("");
    console.group(
      `%c⚡ Executable Scripts (${executableScripts.length})`,
      "color: #f59e0b; font-weight: bold;"
    );

    const execTable = executableScripts
      .sort((a, b) => b.size - a.size)
      .map((s) => ({
        "#": s.index,
        Location: s.inHead ? "head" : "body",
        Type: s.category,
        Size: formatBytes(s.size),
        "Parser-Blocking": s.isParserBlocking ? "⚠️ Yes" : "No",
        Pattern: s.isAnalytics
          ? "Analytics"
          : s.isConfig
          ? "Config"
          : s.hasGlobalVars
          ? "Globals"
          : "-",
        Preview: s.preview,
      }));
    console.table(execTable);

    // Elements for inspection
    console.log("");
    console.log("%c🔎 Elements for inspection:", "font-weight: bold;");
    executableScripts
      .sort((a, b) => b.size - a.size)
      .forEach((s) => {
        const warnings = [];
        if (s.isParserBlocking && s.inHead) warnings.push("blocking");
        if (s.size > 2 * 1024) warnings.push("large");
        const warningStr = warnings.length > 0 ? ` ⚠️ ${warnings.join(", ")}` : "";
        console.log(`${s.index}. (${formatBytes(s.size)})${warningStr}`, s.element);
      });

    console.groupEnd();
  }

  // JSON-LD scripts
  if (jsonLdScripts.length > 0) {
    console.log("");
    console.group(
      `%c📋 JSON-LD Structured Data (${jsonLdScripts.length})`,
      "color: #8b5cf6; font-weight: bold;"
    );

    const jsonTable = jsonLdScripts.map((s) => {
      let schemaType = "-";
      try {
        const parsed = JSON.parse(s.content);
        schemaType = parsed["@type"] || (Array.isArray(parsed) ? "Array" : "-");
      } catch {}
      return {
        "#": s.index,
        "Schema Type": schemaType,
        Size: formatBytes(s.size),
      };
    });
    console.table(jsonTable);
    console.groupEnd();
  }

  // Issues
  const issues = [];

  if (parserBlockingInHead.length > 0) {
    issues.push({
      type: "blocking",
      message: `${parserBlockingInHead.length} parser-blocking script(s) in <head>`,
      details: parserBlockingInHead.map(
        (s) => `Script #${s.index}: ${formatBytes(s.size)}`
      ),
      suggestion: "Move to end of <body> or add 'defer' attribute",
    });
  }

  const largeScripts = executableScripts.filter((s) => s.size > 2 * 1024);
  if (largeScripts.length > 0) {
    issues.push({
      type: "large",
      message: `${largeScripts.length} script(s) over 2 KB`,
      details: largeScripts.map((s) => `Script #${s.index}: ${formatBytes(s.size)}`),
      suggestion: "Consider moving large scripts to external cacheable files",
    });
  }

  if (duplicates.length > 0) {
    issues.push({
      type: "duplicate",
      message: `${duplicates.length} duplicated script(s) detected`,
      details: duplicates.map((d) => `Scripts #${d.join(", #")} have identical content`),
      suggestion: "Remove duplicate scripts or consolidate into one",
    });
  }

  const analyticsInHead = executableScripts.filter(
    (s) => s.isAnalytics && s.inHead && s.isParserBlocking
  );
  if (analyticsInHead.length > 0) {
    issues.push({
      type: "analytics",
      message: `${analyticsInHead.length} analytics script(s) blocking in <head>`,
      details: analyticsInHead.map((s) => `Script #${s.index}`),
      suggestion: "Load analytics scripts with 'async' or move to <body>",
    });
  }

  if (issues.length > 0) {
    console.log("");
    console.group("%c⚠️ Issues Found", "color: #ef4444; font-weight: bold;");

    issues.forEach((issue) => {
      console.log("");
      console.log(`%c${issue.message}`, "font-weight: bold;");
      if (issue.details) {
        issue.details.forEach((d) => console.log(`   • ${d}`));
      }
      console.log(`   → ${issue.suggestion}`);
    });

    console.groupEnd();
  } else if (executableScripts.length > 0) {
    console.log("");
    console.log(
      "%c✅ No major issues found. Inline scripts look reasonable.",
      "color: #22c55e; font-weight: bold;"
    );
  }

  // Best practices
  console.log("");
  console.group("%c📝 Best Practices", "color: #3b82f6; font-weight: bold;");
  console.log("");
  console.log("• Keep inline scripts small (< 1-2 KB)");
  console.log("• Avoid parser-blocking scripts in <head>");
  console.log("• Use 'defer' or 'async' for non-critical scripts");
  console.log("• Move large scripts to external files for caching");
  console.log("• Place non-critical scripts at end of <body>");
  console.log("");
  console.log("%cFor critical inline scripts:", "font-weight: bold;");
  console.log(
    '%c<script>\n  // Small critical code only\n  window.__CONFIG = { ... };\n</script>',
    "font-family: monospace; color: #22c55e;"
  );
  console.log("");
  console.log("%cFor larger scripts:", "font-weight: bold;");
  console.log(
    '%c<script src="app.js" defer></script>',
    "font-family: monospace; color: #22c55e;"
  );
  console.groupEnd();

  console.groupEnd();

  return {
    script: "Inline-Script-Info-and-Size",
    status: "ok",
    count: scripts.length,
    details: {
      executableCount: executableScripts.length,
      jsonLdCount: jsonLdScripts.length,
      otherCount: otherScripts.length,
      totalSizeBytes: totalSize,
      parserBlockingCount: parserBlockingScripts.length,
      parserBlockingInHeadCount: parserBlockingInHead.length,
    },
    items: executableScripts.map(s => ({ index: s.index, sizeBytes: s.size, category: s.category, inHead: s.inHead, isParserBlocking: s.isParserBlocking, isAnalytics: s.isAnalytics, isConfig: s.isConfig })),
    issues: issues.map(i => ({ severity: i.type === "blocking" ? "error" : "warning", message: i.message })),
  };
})();
```

---

## JavaScript Execution Time Breakdown
URL: https://webperf-snippets.nucliweb.net/Loading/JS-Execution-Time-Breakdown

Identifies where JavaScript time goes during page load: network download vs browser parsing. Shows which scripts delay `domInteractive` (TTI proxy) and flags code splitting opportunities. Why this matters: Knowing a script is "slow" isn't enough — the bottleneck can be the network download or the browser parsing and compiling the code after downloading. These require different fixes:

```js
// JavaScript Execution Time Breakdown
// https://webperf-snippets.nucliweb.net

(() => {
  const formatMs = (ms) => (ms > 0 ? ms.toFixed(0) + "ms" : "-");
  const formatBytes = (bytes) => {
    if (!bytes || bytes === 0) return "-";
    const k = 1024;
    const sizes = ["B", "KB", "MB"];
    const i = Math.floor(Math.log(Math.max(bytes, 1)) / Math.log(k));
    return (bytes / Math.pow(k, i)).toFixed(1) + " " + sizes[i];
  };
  const formatBar = (value, max, width = 16) => {
    if (value <= 0 || max <= 0) return "░".repeat(width);
    const filled = Math.min(Math.round((value / max) * width), width);
    return "█".repeat(filled) + "░".repeat(width - filled);
  };

  // 1. Page load timeline
  const nav = performance.getEntriesByType("navigation")[0];
  const domInteractive = nav?.domInteractive || 0;
  const domContentLoaded = nav?.domContentLoadedEventEnd || 0;
  const loadEvent = nav?.loadEventEnd || 0;
  // 2. Script resource timing (download phase)
  const scriptResources = performance
    .getEntriesByType("resource")
    .filter((r) => r.initiatorType === "script")
    .map((r) => {
      let shortName;
      try {
        const url = new URL(r.name);
        shortName = url.pathname.split("/").pop() || url.hostname;
      } catch {
        shortName = r.name.split("/").pop() || r.name;
      }

      const transferSize = r.transferSize || 0;
      const decodedSize = r.decodedBodySize || 0;
      const downloadDuration = Math.round(r.responseEnd - r.startTime);

      // CORS-restricted: third-party scripts without Timing-Allow-Origin return 0 for sizes
      const corsRestricted = transferSize === 0 && decodedSize === 0 && downloadDuration > 0;

      // Parse time estimates based on V8 data (v8.dev/blog/cost-of-javascript-2019)
      // Mobile (~1ms/KB): Moto G4 class device — worst-case baseline
      // Desktop (~0.3ms/KB): ~3x faster than mobile baseline
      const estimatedParseMobile = Math.round(decodedSize / 1024);
      const estimatedParseDesktop = Math.round(decodedSize / 1024 / 3);

      return {
        name: r.name,
        shortName: shortName.split("?")[0] || shortName,
        startTime: r.startTime,
        responseEnd: r.responseEnd,
        downloadDuration,
        transferSize,
        decodedSize,
        corsRestricted,
        estimatedParseMobile,
        estimatedParseDesktop,
        totalCostMs: downloadDuration + estimatedParseMobile,
      };
    })
    .sort((a, b) => a.startTime - b.startTime);

  // 3. Detect render-blocking scripts (in <head>, no async/defer/module)
  const blockingSet = new Set();
  Array.from(document.querySelectorAll("script[src]")).forEach((el) => {
    const isModule = el.type === "module";
    if (!el.async && !el.defer && !isModule && el.closest("head")) {
      blockingSet.add(el.src);
    }
  });

  const scripts = scriptResources.map((s) => ({
    ...s,
    isBlocking: blockingSet.has(s.name),
  }));

  // 4. Summary calculations
  const blocking = scripts.filter((s) => s.isBlocking);
  const nonBlocking = scripts.filter((s) => !s.isBlocking);
  const totalDownload = scripts.reduce((sum, s) => sum + s.downloadDuration, 0);
  const totalEstParse = scripts.reduce((sum, s) => sum + s.estimatedParseMobile, 0);
  const totalSize = scripts.reduce((sum, s) => sum + s.transferSize, 0);
  const totalDecodedSize = scripts.reduce((sum, s) => sum + s.decodedSize, 0);

  // Estimate how much blocking scripts delay domInteractive
  // The critical path ends when the last blocking script finishes download + parse
  const blockingCriticalPathEnd = blocking.reduce((max, s) => {
    const estimatedDone = s.responseEnd + s.estimatedParseMobile;
    return Math.max(max, estimatedDone);
  }, 0);

  const jsBlockingDelay =
    blocking.length > 0 && domInteractive > 0
      ? Math.min(blockingCriticalPathEnd, domInteractive)
      : 0;

  // Large script threshold (50KB compressed = good candidate for splitting)
  const SPLIT_THRESHOLD = 50 * 1024;
  const splitCandidates = scripts.filter((s) => s.decodedSize > SPLIT_THRESHOLD);

  // 5. Output
  console.group(
    "%c⚡ JavaScript Execution Time Breakdown",
    "font-weight: bold; font-size: 14px;"
  );

  // Page load timeline
  console.log("");
  console.log("%c📅 Page Load Timeline:", "font-weight: bold;");

  if (domInteractive > 0) {
    const timelineMax = loadEvent || domContentLoaded || domInteractive;
    const rows = [
      { label: "Navigation start", time: 0 },
      { label: "DOM Interactive", time: domInteractive },
      { label: "DOM Content Loaded", time: domContentLoaded },
      { label: "Load event", time: loadEvent },
    ].filter((r) => r.time > 0);

    rows.forEach(({ label, time }) => {
      const bar = formatBar(time, timelineMax, 20);
      console.log(`   ${label.padEnd(22)} ${formatMs(time).padStart(8)}  ${bar}`);
    });

    if (domInteractive > 0) {
      const jsPct =
        domInteractive > 0 ? ((jsBlockingDelay / domInteractive) * 100).toFixed(0) : 0;
      console.log("");
      console.log(
        `   JS blocking scripts contribute ~${jsPct}% of domInteractive (${formatMs(jsBlockingDelay)} est.)`
      );
    }
  } else {
    console.log("   %c⚠️ Navigation Timing unavailable", "color: #f59e0b;");
  }

  // Script overview
  console.log("");
  console.log("%c📊 Script Overview:", "font-weight: bold;");
  console.log(`   Total scripts:          ${scripts.length}`);
  console.log(`   Render-blocking:        ${blocking.length}`);
  console.log(`   Non-blocking:           ${nonBlocking.length}`);
  console.log(`   Total transfer size:    ${formatBytes(totalSize)}`);
  console.log(`   Total decoded size:     ${formatBytes(totalDecodedSize)}`);
  console.log(`   Compression ratio:      ${totalDecodedSize > 0 && totalSize > 0 ? (totalDecodedSize / totalSize).toFixed(1) + "x" : "-"}`);
  console.log("");
  console.log("%c   Cost Estimates (download + parse):", "color: #6b7280;");
  console.log(`   Total download time:    ${formatMs(totalDownload)}`);
  console.log(`   Est. total parse time:  ${formatMs(totalEstParse)} (~1ms/KB decoded)`);
  console.log(`   Est. total JS cost:     ${formatMs(totalDownload + totalEstParse)}`);

  // Per-script breakdown table
  if (scripts.length > 0) {
    console.log("");
    console.group("%c📋 Per-Script Breakdown", "color: #3b82f6; font-weight: bold;");

    console.log("%c📱 Parse estimates: mobile ~1ms/KB · desktop ~0.3ms/KB (source: v8.dev/blog/cost-of-javascript-2019)", "color: #6b7280;");
    console.log("");

    const corsCount = scripts.filter((s) => s.corsRestricted).length;
    if (corsCount > 0) {
      console.log(
        `%c⚠️ ${corsCount} script(s) show "CORS" — third-party size data blocked by missing Timing-Allow-Origin header`,
        "color: #f59e0b;"
      );
      console.log("   Parse columns unavailable for these scripts.");
      console.log("");
    }

    const maxCost = Math.max(...scripts.map((s) => s.totalCostMs));
    const tableData = scripts
      .sort((a, b) => b.totalCostMs - a.totalCostMs)
      .slice(0, 20)
      .map((s) => {
        const name = s.shortName.length > 35 ? s.shortName.slice(0, 32) + "..." : s.shortName;
        return {
          "": s.isBlocking ? "🔴" : "✅",
          Script: name,
          Download: formatMs(s.downloadDuration),
          "Parse(mob)": s.corsRestricted ? "CORS" : formatMs(s.estimatedParseMobile),
          "Parse(dsk)": s.corsRestricted ? "CORS" : formatMs(s.estimatedParseDesktop),
          "Transfer": s.corsRestricted ? "CORS" : formatBytes(s.transferSize),
          "Decoded": s.corsRestricted ? "CORS" : formatBytes(s.decodedSize),
          "": formatBar(s.totalCostMs, maxCost),
        };
      });

    console.table(tableData);

    if (scripts.length > 20) {
      console.log(`   ... and ${scripts.length - 20} more scripts`);
    }

    // Critical bundle warning (> 1 MB decoded)
    const criticalBundles = scripts.filter((s) => !s.corsRestricted && s.decodedSize > 1024 * 1024);
    if (criticalBundles.length > 0) {
      console.log("");
      console.log("%c🚨 Critically large bundles (> 1 MB decoded):", "color: #ef4444; font-weight: bold;");
      criticalBundles
        .sort((a, b) => b.decodedSize - a.decodedSize)
        .forEach((s) => {
          console.log(`   ${s.shortName}`);
          console.log(`      Decoded: ${formatBytes(s.decodedSize)} | Mobile parse: ~${formatMs(s.estimatedParseMobile)} | Desktop parse: ~${formatMs(s.estimatedParseDesktop)}`);
          console.log("      → Split with dynamic import() — only load what the current route needs");
        });
    }

    console.groupEnd();
  }

  // Blocking scripts TTI impact
  if (blocking.length > 0) {
    console.log("");
    console.group(
      `%c🚦 Render-Blocking Scripts (${blocking.length})`,
      "color: #ef4444; font-weight: bold;"
    );

    blocking
      .sort((a, b) => b.totalCostMs - a.totalCostMs)
      .forEach((s) => {
        const name = s.shortName.length > 40 ? s.shortName.slice(0, 37) + "..." : s.shortName;
        console.log(
          `   🔴 ${name}`
        );
        console.log(
          `      Download: ${formatMs(s.downloadDuration)} | Parse mob: ~${formatMs(s.estimatedParseMobile)} | Parse dsk: ~${formatMs(s.estimatedParseDesktop)} | Size: ${formatBytes(s.transferSize)}`
        );
      });

    console.log("");
    console.log("   These scripts block HTML parsing until fully downloaded and executed.");
    console.log("   → Add defer to execute after parsing without blocking.");
    console.log("   → Add async for independent scripts (analytics, ads).");
    console.groupEnd();
  }

  // Code splitting opportunities
  if (splitCandidates.length > 0) {
    console.log("");
    console.group(
      `%c✂️ Code Splitting Candidates (${splitCandidates.length} scripts > 50KB decoded)`,
      "color: #8b5cf6; font-weight: bold;"
    );

    splitCandidates
      .sort((a, b) => b.decodedSize - a.decodedSize)
      .forEach((s) => {
        const name = s.shortName.length > 40 ? s.shortName.slice(0, 37) + "..." : s.shortName;
        console.log(
          `   📦 ${name}`
        );
        console.log(
          `      Decoded: ${formatBytes(s.decodedSize)} | Parse mob: ~${formatMs(s.estimatedParseMobile)} | Parse dsk: ~${formatMs(s.estimatedParseDesktop)} | Transfer: ${formatBytes(s.transferSize)}`
        );
      });

    console.log("");
    console.log("   Large scripts increase parse time on every page load, even if cached.");
    console.log("   → Use dynamic import() to split at route or feature boundaries.");
    console.log("   → Enable tree-shaking to eliminate unused exports.");
    console.log("   → Consider module/nomodule pattern for modern browsers.");
    console.groupEnd();
  }

  // Recommendations
  const hasHighParseTime = totalEstParse > 500;
  const hasBlockingScripts = blocking.length > 0;
  const compressionRatio = totalDecodedSize / Math.max(totalSize, 1);
  const poorCompression = compressionRatio < 2 && totalSize > 10 * 1024;

  console.log("");
  console.group("%c📝 Recommendations", "color: #3b82f6; font-weight: bold;");

  if (!hasBlockingScripts && !hasHighParseTime && splitCandidates.length === 0) {
    console.log("   %c✅ No critical JS issues found.", "color: #22c55e; font-weight: bold;");
  }

  if (hasBlockingScripts) {
    console.log(`   🔴 ${blocking.length} render-blocking script(s) delay the page:`);
    console.log("      → defer: safe for most scripts (runs after parsing, in order)");
    console.log("      → async: for independent scripts with no DOM dependency");
  }

  if (hasHighParseTime) {
    console.log(`   ⚠️ High estimated parse cost (~${formatMs(totalEstParse)}):`);
    console.log("      → Split bundles with dynamic import() at route boundaries");
    console.log("      → Lazy-load non-critical features on demand");
    console.log("      → Use module preload for critical chunks: <link rel='modulepreload'>");
  }

  if (poorCompression) {
    console.log(`   📦 Low compression ratio (${compressionRatio.toFixed(1)}x) for ${formatBytes(totalSize)} transferred:`);
    console.log("      → Enable Brotli compression on your server/CDN");
    console.log("      → Ensure minification is enabled in your build");
  }

  console.log("");
  console.log("%c   💡 For measured execution time (not estimates):", "color: #6b7280;");
  console.log(
    "      Run the Long Animation Frames Script Attribution snippet to measure"
  );
  console.log("      actual execution time during user interactions.");

  console.groupEnd();

  console.groupEnd();

  return {
    script: "JS-Execution-Time-Breakdown",
    status: "ok",
    count: scripts.length,
    details: {
      blockingCount: blocking.length,
      nonBlockingCount: nonBlocking.length,
      totalTransferBytes: totalSize,
      totalDecodedBytes: totalDecodedSize,
      totalDownloadMs: Math.round(totalDownload),
      totalEstParseMobileMs: Math.round(totalEstParse),
      splitCandidatesCount: splitCandidates.length,
      domInteractiveMs: Math.round(domInteractive),
      domContentLoadedMs: Math.round(domContentLoaded),
      loadEventMs: Math.round(loadEvent),
    },
    items: scripts.slice(0, 50).map(s => ({ shortName: s.shortName, isBlocking: s.isBlocking, downloadMs: Math.round(s.downloadDuration), estimatedParseMobileMs: s.estimatedParseMobile, transferBytes: s.transferSize, decodedBytes: s.decodedSize, corsRestricted: s.corsRestricted })),
    issues: [
      ...(blocking.length > 0 ? [{ severity: "error", message: `${blocking.length} render-blocking script(s) delay HTML parsing` }] : []),
      ...(hasHighParseTime ? [{ severity: "warning", message: `High estimated parse cost (~${Math.round(totalEstParse)}ms on mobile)` }] : []),
      ...(splitCandidates.length > 0 ? [{ severity: "warning", message: `${splitCandidates.length} script(s) over 50KB decoded — consider code splitting` }] : []),
      ...(poorCompression ? [{ severity: "warning", message: `Low compression ratio (${compressionRatio.toFixed(1)}x) — enable Brotli/gzip` }] : []),
    ],
  };
})();
```

---

## Prefetch Resource Validation
URL: https://webperf-snippets.nucliweb.net/Loading/Prefetch-Resource-Validation

Detects potential performance issues with `rel="prefetch"` resource hints by analyzing quantity, size, type, and appropriateness of prefetched resources. Excessive or incorrect prefetch usage can waste bandwidth, delay critical resources, and negatively impact mobile users. What is prefetch? `rel="prefetch"` is a resource hint that tells the browser to fetch and cache resources that may be needed for future navigations, during idle time. Unlike `preload`, which is for the current page, prefetch is for anticipated next-page resources. Difference between preload and prefetch:

```js
// Prefetch Resource Validation
// https://webperf-snippets.nucliweb.net

(() => {
  // Get all prefetch hints
  const prefetchLinks = Array.from(document.querySelectorAll('link[rel="prefetch"]'));

  if (prefetchLinks.length === 0) {
    // Early return is safe here - console.group hasn't been opened yet
    console.log(
      '%c✅ No prefetch hints found (rel="prefetch").',
      "color: #22c55e; font-weight: bold;",
    );
    console.log(
      "%cℹ️ Prefetch is for future navigation resources. Use it sparingly for predictable user journeys.",
      "color: #3b82f6;",
    );
    return { script: "Prefetch-Resource-Validation", status: "ok", count: 0, items: [], issues: [] };
  }

  // Get performance entries for all resources
  const performanceEntries = performance.getEntriesByType("resource");

  // Pre-normalize URLs for efficient matching (avoids repeated URL parsing in nested loops)
  const entryUrlMap = new Map();
  performanceEntries.forEach((entry) => {
    try {
      const normalizedUrl = new URL(entry.name, location.origin).href;
      if (!entryUrlMap.has(normalizedUrl)) {
        entryUrlMap.set(normalizedUrl, []);
      }
      entryUrlMap.get(normalizedUrl).push(entry);
    } catch {
      // Ignore malformed URLs in performance entries
    }
  });

  // Valid 'as' attribute values for prefetch (per HTML spec)
  const validAsValues = new Set([
    "script",
    "style",
    "font",
    "image",
    "video",
    "audio",
    "document",
    "fetch",
    "track",
    "worker",
    // Note: "media" is not a valid spec value, use "video" or "audio" instead
  ]);

  // Thresholds
  const THRESHOLDS = {
    maxCount: 10,
    largeFileSize: 500 * 1024, // 500KB
    largeScriptSize: 1024 * 1024, // 1MB for scripts specifically
    totalSizeWarning: 2 * 1024 * 1024, // 2MB
    totalSizeCritical: 5 * 1024 * 1024, // 5MB
  };

  // Analyze each prefetch
  const issues = [];
  const validPrefetch = [];
  const seenUrls = new Set(); // Track duplicates
  let totalSize = 0;
  let totalTransferSize = 0;

  prefetchLinks.forEach((link) => {
    const href = link.href;
    const as = link.getAttribute("as") || "unknown";
    // Extract filename from URL; fallback to full href if URL is just origin
    // Note: Removes query params but preserves hash (e.g., page#section)
    const shortUrl = href.split("/").pop()?.split("?")[0]?.split("#")[0] || href;

    // Normalize URL for matching
    let normalizedUrl;
    try {
      normalizedUrl = new URL(href, location.origin).href;
    } catch {
      // Invalid href - will be caught later
      normalizedUrl = href;
    }

    // Find matching performance entries using pre-built map
    const matchingEntries = entryUrlMap.get(normalizedUrl) || [];
    const perfEntry = matchingEntries[0]; // Use first matching entry

    const analysis = {
      link,
      href,
      shortUrl,
      as,
      size: 0,
      transferSize: 0,
      duration: 0,
      loaded: false,
      isCurrentPage: false,
      warnings: [],
    };

    // Check for missing or invalid 'as' attribute
    if (as === "unknown") {
      analysis.warnings.push({
        type: "missing-as",
        severity: "warning",
        message: "Missing 'as' attribute - browser cannot apply correct MIME type matching",
      });
    } else if (!validAsValues.has(as)) {
      analysis.warnings.push({
        type: "invalid-as",
        severity: "warning",
        message: `Invalid 'as' value: "${as}" - should be one of: ${Array.from(validAsValues).join(", ")}`,
      });
    }

    // Check for duplicate prefetch
    if (seenUrls.has(normalizedUrl)) {
      analysis.warnings.push({
        type: "duplicate-prefetch",
        severity: "warning",
        message: "Duplicate prefetch - this URL is prefetched multiple times",
      });
    }
    seenUrls.add(normalizedUrl);

    // Check if resource was actually loaded
    if (perfEntry) {
      analysis.loaded = true;
      analysis.size = perfEntry.decodedBodySize || 0;
      analysis.transferSize = perfEntry.transferSize || 0;
      analysis.duration = perfEntry.duration || 0;

      // Cache status detection with CORS considerations
      // transferSize === 0 can mean: (1) cached, or (2) cross-origin without Timing-Allow-Origin
      if (perfEntry.encodedBodySize > 0 && perfEntry.transferSize === 0) {
        analysis.cacheStatus = "cached";
      } else if (perfEntry.encodedBodySize === 0 && perfEntry.transferSize === 0) {
        // Both zero = likely CORS-blocked timing info
        analysis.cacheStatus = "unknown (CORS)";
      } else {
        analysis.cacheStatus = "network";
      }

      totalSize += analysis.size;
      totalTransferSize += analysis.transferSize;

      // Check if it's a current page resource
      // Uses 5s heuristic: resources loaded in first 5s are likely for current page, not prefetch
      // This cutoff works for most pages but may flag slow pages incorrectly
      const isCurrentPageResource = matchingEntries.some(
        (entry) => entry.initiatorType !== "link" && entry.startTime < 5000,
      );

      if (isCurrentPageResource) {
        analysis.isCurrentPage = true;
        analysis.warnings.push({
          type: "wrong-hint",
          severity: "error",
          message: "Resource used on current page - should use preload instead",
        });
      }

      // Check file size
      if (analysis.size > THRESHOLDS.largeFileSize) {
        const sizeMB = (analysis.size / (1024 * 1024)).toFixed(2);
        analysis.warnings.push({
          type: "large-file",
          severity: "warning",
          message: `Large file (${sizeMB}MB) - consider if prefetch is appropriate`,
        });
      }

      // Check resource type appropriateness (size-based)
      // Note: Only checks if resource has loaded (has perfEntry with size)
      let isInappropriate = false;
      let inappropriateReason = "";

      if (as === "video" || as === "audio") {
        isInappropriate = true;
        inappropriateReason = "Video/audio files are typically too large for prefetch";
      } else if (as === "image" && analysis.size > 200 * 1024) {
        isInappropriate = true;
        inappropriateReason = `Image is ${(analysis.size / 1024).toFixed(0)}KB (>200KB threshold)`;
      } else if (as === "script" && analysis.size > THRESHOLDS.largeScriptSize) {
        isInappropriate = true;
        inappropriateReason = `Script is ${(analysis.size / 1024).toFixed(0)}KB (>1MB threshold)`;
      }

      if (isInappropriate) {
        analysis.warnings.push({
          type: "inappropriate-type",
          severity: "warning",
          message: `Type "${as}" may not be suitable for prefetch: ${inappropriateReason}`,
        });
      }
    } else {
      // Prefetch defined but not loaded yet (or failed)
      analysis.warnings.push({
        type: "not-loaded",
        severity: "info",
        message: "Not loaded yet or failed to load",
      });
    }

    // Categorize
    if (analysis.warnings.length > 0) {
      issues.push(analysis);
    } else {
      validPrefetch.push(analysis);
    }
  });

  // Check total count
  const countIssues = [];
  if (prefetchLinks.length > THRESHOLDS.maxCount) {
    countIssues.push({
      type: "excessive-count",
      severity: "warning",
      message: `${prefetchLinks.length} prefetch hints found (recommended: <${THRESHOLDS.maxCount})`,
      explanation: "Excessive prefetch can waste bandwidth, especially on mobile networks",
    });
  }

  // Check total size
  const totalSizeMB = (totalSize / (1024 * 1024)).toFixed(2);
  const totalTransferMB = (totalTransferSize / (1024 * 1024)).toFixed(2);

  if (totalSize > THRESHOLDS.totalSizeCritical) {
    countIssues.push({
      type: "excessive-size",
      severity: "error",
      message: `Total prefetch size: ${totalSizeMB}MB (critical threshold exceeded)`,
      explanation: "This is very high and will significantly impact mobile users",
    });
  } else if (totalSize > THRESHOLDS.totalSizeWarning) {
    countIssues.push({
      type: "high-size",
      severity: "warning",
      message: `Total prefetch size: ${totalSizeMB}MB (warning threshold exceeded)`,
      explanation: "Consider reducing prefetch to improve mobile experience",
    });
  }

  // Display results
  console.group("%c🔍 Prefetch Resource Validation", "font-weight: bold; font-size: 14px;");

  // Count actually loaded resources
  const loadedCount = [...issues, ...validPrefetch].filter((item) => item.loaded).length;

  // Count meaningful issues (exclude "info" severity)
  const meaningfulIssues = issues.filter((i) =>
    i.warnings.some((w) => w.severity === "error" || w.severity === "warning"),
  );
  const totalMeaningfulIssues = meaningfulIssues.length + countIssues.length;

  console.log("");
  console.log("%cSummary:", "font-weight: bold;");
  console.log(`   Total prefetch hints: ${prefetchLinks.length}`);
  console.log(`   Loaded resources: ${loadedCount}`);
  console.log(`   Total size: ${totalSizeMB} MB (decompressed)`);
  console.log(`   Transfer size: ${totalTransferMB} MB (over network)`);
  console.log(`   Issues found: ${totalMeaningfulIssues} (excluding "not loaded" info)`);

  // Show count/size issues first
  if (countIssues.length > 0) {
    console.log("");
    console.group(
      `%c⚠️ Overall Issues (${countIssues.length})`,
      "color: #ef4444; font-weight: bold;",
    );

    countIssues.forEach((issue) => {
      const color = issue.severity === "error" ? "#ef4444" : "#f59e0b";
      const icon = issue.severity === "error" ? "🔴" : "⚠️";
      console.log("");
      console.log(`%c${icon} ${issue.message}`, `color: ${color}; font-weight: bold;`);
      console.log(`   ${issue.explanation}`);
    });

    console.groupEnd();
  }

  // Show resource-specific issues
  const errors = issues.filter((i) => i.warnings.some((w) => w.severity === "error"));
  const warnings = issues.filter(
    (i) =>
      !i.warnings.some((w) => w.severity === "error") &&
      i.warnings.some((w) => w.severity === "warning"),
  );
  const infos = issues.filter((i) => i.warnings.every((w) => w.severity === "info"));

  if (errors.length > 0) {
    console.log("");
    console.group(`%c🔴 Critical Issues (${errors.length})`, "color: #ef4444; font-weight: bold;");

    const errorTable = errors.map((item) => ({
      Resource: item.shortUrl,
      Type: item.as,
      Size: item.size > 0 ? `${(item.size / 1024).toFixed(1)} KB` : "Unknown",
      Duration: item.duration > 0 ? `${item.duration.toFixed(0)} ms` : "N/A",
      Issue: item.warnings.map((w) => w.message).join("; "),
    }));

    console.table(errorTable);

    console.log("");
    console.log("%cDetails:", "font-weight: bold;");
    errors.forEach((item, i) => {
      console.log("");
      console.log(`%c${i + 1}. ${item.shortUrl}`, "font-weight: bold;");
      console.log(`   URL: ${item.href}`);
      console.log(`   Type: ${item.as}`);
      if (item.size > 0) {
        console.log(`   Size: ${(item.size / 1024).toFixed(1)} KB`);
      }
      item.warnings.forEach((w) => {
        console.log(`   ❌ ${w.message}`);
      });
      console.log("   Element:", item.link);
    });

    console.groupEnd();
  }

  if (warnings.length > 0) {
    console.log("");
    console.group(`%c⚠️ Warnings (${warnings.length})`, "color: #f59e0b; font-weight: bold;");

    const warningTable = warnings.map((item) => ({
      Resource: item.shortUrl,
      Type: item.as,
      Size: item.size > 0 ? `${(item.size / 1024).toFixed(1)} KB` : "Unknown",
      Duration: item.duration > 0 ? `${item.duration.toFixed(0)} ms` : "N/A",
      Issue: item.warnings.map((w) => w.message).join("; "),
    }));

    console.table(warningTable);

    console.groupEnd();
  }

  if (infos.length > 0) {
    console.log("");
    console.group(`%cℹ️ Info (${infos.length})`, "color: #3b82f6; font-weight: bold;");

    const infoTable = infos.map((item) => ({
      Resource: item.shortUrl,
      Type: item.as,
      Status: item.warnings.map((w) => w.message).join("; "),
    }));

    console.table(infoTable);

    console.groupEnd();
  }

  // Show valid prefetch
  if (validPrefetch.length > 0) {
    console.log("");
    console.group(
      `%c✅ Valid Prefetch (${validPrefetch.length})`,
      "color: #22c55e; font-weight: bold;",
    );

    const validTable = validPrefetch.map((item) => ({
      Resource: item.shortUrl,
      Type: item.as,
      Size: item.size > 0 ? `${(item.size / 1024).toFixed(1)} KB` : "Unknown",
      Duration: item.duration > 0 ? `${item.duration.toFixed(0)} ms` : "N/A",
      Status: item.loaded ? "✅ Loaded" : "Pending",
      Cache: item.cacheStatus || "N/A",
    }));

    console.table(validTable);

    console.groupEnd();
  }

  // Best practices
  console.log("");
  console.group("%c📝 Best Practices", "color: #3b82f6; font-weight: bold;");
  console.log("");
  console.log("%c✅ Good uses of prefetch:", "font-weight: bold; color: #22c55e;");
  console.log("   • Next page chunks in predictable navigation (e.g., multi-step forms)");
  console.log("   • Fonts used on commonly visited next pages");
  console.log("   • Small scripts/styles for main navigation targets");
  console.log("   • Resources based on user behavior analytics");
  console.log("");
  console.log("%c❌ Bad uses of prefetch:", "font-weight: bold; color: #ef4444;");
  console.log("   • Resources needed on current page (use preload instead)");
  console.log("   • Large images/videos without user intent analysis");
  console.log("   • Excessive prefetch (>10 resources) hurting mobile users");
  console.log("   • Resources without proper cache headers");
  console.log("");
  console.log("%cRecommended thresholds:", "font-weight: bold;");
  console.log(`   • Resource count: <${THRESHOLDS.maxCount} resources`);
  console.log(`   • Individual file size: <${THRESHOLDS.largeFileSize / 1024} KB`);
  console.log(`   • Total prefetch size: <${THRESHOLDS.totalSizeWarning / (1024 * 1024)} MB`);
  console.log("");
  console.log("%cCode examples:", "font-weight: bold;");
  console.log("");
  console.log("%c  ✅ Good: Prefetch next page script", "color: #22c55e;");
  console.log(
    '%c  <link rel="prefetch" href="/checkout-page.js" as="script">',
    "font-family: monospace;",
  );
  console.log("");
  console.log("%c  ❌ Bad: Prefetch current page resource", "color: #ef4444;");
  console.log(
    '%c  <link rel="prefetch" href="/hero-image.jpg" as="image">',
    "font-family: monospace;",
  );
  console.log('%c  <!-- Should be: rel="preload" -->', "font-family: monospace; color: #22c55e;");

  console.groupEnd();

  // Summary
  if (totalMeaningfulIssues === 0) {
    console.log("");
    console.log(
      "%c✅ Great! No issues detected with prefetch usage.",
      "color: #22c55e; font-weight: bold; font-size: 14px;",
    );
    console.log(
      "%cAll prefetch hints appear appropriate for future navigation.",
      "color: #22c55e;",
    );
  } else {
    console.log("");
    console.log(
      `%c⚠️ Found ${totalMeaningfulIssues} issue(s). Review recommendations above.`,
      "color: #ef4444; font-weight: bold;",
    );
  }

  console.groupEnd();

  return {
    script: "Prefetch-Resource-Validation",
    status: "ok",
    count: prefetchLinks.length,
    details: {
      loadedCount,
      validCount: validPrefetch.length,
      issueCount: totalMeaningfulIssues,
      totalSizeBytes: totalSize,
      totalTransferBytes: totalTransferSize,
    },
    items: [...validPrefetch, ...issues].map(item => ({ href: item.shortUrl, as: item.as, sizeBytes: item.size, loaded: item.loaded, isCurrentPage: item.isCurrentPage || false })),
    issues: [
      ...countIssues.map(i => ({ severity: i.severity === "error" ? "error" : "warning", message: i.message })),
      ...issues.flatMap(item => item.warnings.filter(w => w.severity !== "info").map(w => ({ severity: w.severity, message: `${item.shortUrl}: ${w.message}` }))),
    ],
  };
})();
```

---

## Priority Hints Audit
URL: https://webperf-snippets.nucliweb.net/Loading/Priority-Hints-Audit

Audits all `fetchpriority` attribute usage across the page — covering non-image resources (scripts, preload links, iframes), `fetchpriority="low"` analysis, and conflicts between `preload` and low priority. Identifies the LCP candidate when it lacks `fetchpriority="high"`.

```js
// Priority Hints Audit
// https://webperf-snippets.nucliweb.net

(() => {
  function isInViewport(el) {
    const rect = el.getBoundingClientRect();
    return (
      rect.top < window.innerHeight &&
      rect.bottom > 0 &&
      rect.left < window.innerWidth &&
      rect.right > 0 &&
      rect.width > 0 &&
      rect.height > 0
    );
  }

  function findLcpCandidate() {
    const imgs = Array.from(document.querySelectorAll("img")).filter(isInViewport);
    let candidate = null;
    let maxArea = 0;
    imgs.forEach((img) => {
      const { width, height } = img.getBoundingClientRect();
      const area = width * height;
      if (area > maxArea) {
        maxArea = area;
        candidate = img;
      }
    });
    return candidate;
  }

  function shortUrl(el) {
    const src = el.src || el.href || el.getAttribute("href") || "";
    return src.split("/").pop()?.split("?")[0] || src.slice(-50) || "(unknown)";
  }

  // Build performance entry map for timing lookups
  const entryMap = new Map();
  performance.getEntriesByType("resource").forEach((e) => {
    try {
      entryMap.set(new URL(e.name, location.origin).href, e);
    } catch {}
  });

  function getEntry(el) {
    const src = el.src || el.href || el.getAttribute("href") || "";
    if (!src) return null;
    try {
      return entryMap.get(new URL(src, location.origin).href) || null;
    } catch {
      return null;
    }
  }

  // All elements with fetchpriority
  const allElements = Array.from(document.querySelectorAll("[fetchpriority]"));
  // Exclude images — covered by "Find Images With Lazy and Fetchpriority"
  const nonImageElements = allElements.filter((el) => el.tagName !== "IMG");
  const images = allElements.filter((el) => el.tagName === "IMG");
  const preloadsWithPriority = Array.from(
    document.querySelectorAll('link[rel="preload"][fetchpriority]')
  );
  const lcpCandidate = findLcpCandidate();

  const issues = [];

  // Issue 1: <link rel="preload"> with fetchpriority="low" (contradictory)
  preloadsWithPriority
    .filter((link) => link.getAttribute("fetchpriority") === "low")
    .forEach((link) => {
      issues.push({
        severity: "error",
        element: link,
        resource: shortUrl(link),
        message: 'preload + fetchpriority="low" is contradictory',
        detail:
          'preload signals this resource is critical for the current page; fetchpriority="low" contradicts that.',
        fix: 'Remove fetchpriority="low", or use fetchpriority="high" if the resource is truly critical',
      });
    });

  // Issue 2: fetchpriority="low" on resources loaded in the first 500ms
  allElements
    .filter((el) => el.getAttribute("fetchpriority") === "low")
    .forEach((el) => {
      const entry = getEntry(el);
      if (entry && entry.startTime < 500) {
        issues.push({
          severity: "warning",
          element: el,
          resource: shortUrl(el),
          message: `fetchpriority="low" but loaded at ${entry.startTime.toFixed(0)}ms`,
          detail:
            "This resource loaded very early. If it's genuinely non-critical, the browser is deprioritizing it correctly. Otherwise, reconsider the priority.",
          fix: 'Verify the resource is non-critical, or remove fetchpriority="low"',
        });
      }
    });

  // Issue 3: fetchpriority="high" on resources loaded after 3000ms
  allElements
    .filter((el) => el.getAttribute("fetchpriority") === "high")
    .forEach((el) => {
      const entry = getEntry(el);
      if (entry && entry.startTime > 3000) {
        issues.push({
          severity: "warning",
          element: el,
          resource: shortUrl(el),
          message: `fetchpriority="high" but loaded at ${entry.startTime.toFixed(0)}ms`,
          detail:
            "High-priority resources should load early. A late start may indicate render-blocking dependencies or incorrect placement in the document.",
          fix: "Move the element earlier in the HTML or investigate render-blocking dependencies",
        });
      }
    });

  // Issue 4: LCP candidate image without fetchpriority="high"
  if (lcpCandidate && lcpCandidate.getAttribute("fetchpriority") !== "high") {
    const fp = lcpCandidate.getAttribute("fetchpriority");
    issues.push({
      severity: "warning",
      element: lcpCandidate,
      resource:
        (lcpCandidate.currentSrc || lcpCandidate.src).split("/").pop()?.split("?")[0] ||
        "LCP image",
      message: `LCP candidate image ${fp ? `has fetchpriority="${fp}"` : "has no fetchpriority set"}`,
      detail:
        'The largest visible image is likely the LCP element and benefits most from fetchpriority="high".',
      fix: 'Add fetchpriority="high" to the LCP image to improve Largest Contentful Paint',
    });
  }

  // Display results
  console.group("%c🎯 Priority Hints Audit", "font-weight: bold; font-size: 14px;");

  const highCount = allElements.filter(
    (el) => el.getAttribute("fetchpriority") === "high"
  ).length;
  const lowCount = allElements.filter(
    (el) => el.getAttribute("fetchpriority") === "low"
  ).length;
  const autoCount = allElements.filter(
    (el) => el.getAttribute("fetchpriority") === "auto"
  ).length;

  console.log("");
  console.log("%cInventory:", "font-weight: bold;");
  console.log(`   Total elements with fetchpriority: ${allElements.length}`);
  console.log(
    `     • Images: ${images.length} (see "Find Images With Lazy and Fetchpriority" for image-specific checks)`
  );
  console.log(`     • Non-image resources: ${nonImageElements.length}`);
  console.log(`     • Preloads with fetchpriority: ${preloadsWithPriority.length}`);
  console.log(
    `   Priority breakdown: high=${highCount}, low=${lowCount}, auto=${autoCount}`
  );

  if (allElements.length === 0 && !lcpCandidate) {
    console.log("");
    console.log(
      "%cℹ️ No fetchpriority attributes found on this page.",
      "color: #3b82f6;"
    );
    console.groupEnd();
    return { script: "Priority-Hints-Audit", status: "ok", count: 0, items: [], issues: [] };
  }

  // LCP candidate status
  if (lcpCandidate) {
    const fp = lcpCandidate.getAttribute("fetchpriority");
    const status =
      fp === "high"
        ? '✅ fetchpriority="high"'
        : fp
        ? `⚠️ fetchpriority="${fp}"`
        : "⚠️ No fetchpriority set";
    console.log("");
    console.log("%cLCP Candidate:", "font-weight: bold;");
    console.log(`   ${status}`);
    console.log("   Element:", lcpCandidate);
  }

  // Non-image resources table
  if (nonImageElements.length > 0) {
    console.log("");
    console.group(
      `%c📋 Non-Image Resources with fetchpriority (${nonImageElements.length})`,
      "font-weight: bold;"
    );

    console.table(
      nonImageElements.map((el) => {
        const entry = getEntry(el);
        const rel = el.getAttribute("rel") || "";
        const as = el.getAttribute("as") || "";
        const tag =
          el.tagName.toLowerCase() +
          (rel ? `[rel="${rel}"]` : "") +
          (as ? `[as="${as}"]` : "");
        return {
          Tag: tag,
          Priority: el.getAttribute("fetchpriority"),
          "Start (ms)": entry ? entry.startTime.toFixed(0) : "N/A",
          "Size (KB)":
            entry?.decodedBodySize
              ? (entry.decodedBodySize / 1024).toFixed(1)
              : "N/A",
          Resource: shortUrl(el),
        };
      })
    );

    console.log("%c🔎 Elements:", "font-weight: bold;");
    nonImageElements.forEach((el, i) => console.log(`${i + 1}.`, el));
    console.groupEnd();
  }

  // Preload links with fetchpriority
  if (preloadsWithPriority.length > 0) {
    console.log("");
    console.group(
      `%c🔗 Preload Links with fetchpriority (${preloadsWithPriority.length})`,
      "font-weight: bold;"
    );

    console.table(
      preloadsWithPriority.map((link) => {
        const fp = link.getAttribute("fetchpriority");
        const entry = getEntry(link);
        return {
          fetchpriority: fp,
          as: link.getAttribute("as") || "(missing)",
          Status:
            fp === "low" ? "⚠️ Conflict" : fp === "high" ? "✅ Good" : "ℹ️ Auto",
          "Start (ms)": entry ? entry.startTime.toFixed(0) : "N/A",
          Resource: shortUrl(link),
        };
      })
    );

    console.groupEnd();
  }

  // Issues
  const errors = issues.filter((i) => i.severity === "error");
  const warnings = issues.filter((i) => i.severity === "warning");

  if (issues.length > 0) {
    console.log("");
    console.group(
      `%c⚠️ Issues Found (${errors.length} errors, ${warnings.length} warnings)`,
      "color: #ef4444; font-weight: bold;"
    );

    [...errors, ...warnings].forEach((issue) => {
      const color = issue.severity === "error" ? "#ef4444" : "#f59e0b";
      const icon = issue.severity === "error" ? "🔴" : "⚠️";
      console.log("");
      console.log(
        `%c${icon} ${issue.message}`,
        `font-weight: bold; color: ${color};`
      );
      console.log(`   ${issue.detail}`);
      console.log(`   Fix: ${issue.fix}`);
      console.log("   Element:", issue.element);
    });

    console.groupEnd();
  } else {
    console.log("");
    console.log(
      "%c✅ No priority hints issues detected.",
      "color: #22c55e; font-weight: bold;"
    );
  }

  // Quick reference
  console.log("");
  console.group(
    "%c📝 fetchpriority Quick Reference",
    "color: #3b82f6; font-weight: bold;"
  );
  console.log("");
  console.log("%c  ✅ LCP hero image:", "color: #22c55e;");
  console.log(
    '%c  <img src="hero.webp" fetchpriority="high" alt="...">',
    "font-family: monospace;"
  );
  console.log("");
  console.log("%c  ✅ Preloaded critical font:", "color: #22c55e;");
  console.log(
    '%c  <link rel="preload" href="font.woff2" as="font" fetchpriority="high" crossorigin>',
    "font-family: monospace;"
  );
  console.log("");
  console.log("%c  ✅ Below-fold image:", "color: #22c55e;");
  console.log(
    '%c  <img src="content.jpg" loading="lazy" fetchpriority="low" alt="...">',
    "font-family: monospace;"
  );
  console.log("");
  console.log("%c  ❌ Contradictory — preload + low priority:", "color: #ef4444;");
  console.log(
    '%c  <link rel="preload" href="font.woff2" as="font" fetchpriority="low">',
    "font-family: monospace;"
  );
  console.groupEnd();

  console.log("");
  console.log(
    '%c💡 Related: "Find Images With Lazy and Fetchpriority" detects the lazy+high conflict on images. https://webperf-snippets.nucliweb.net/Loading/Find-Images-With-Lazy-and-Fetchpriority',
    "color: #6b7280;"
  );

  console.groupEnd();

  return {
    script: "Priority-Hints-Audit",
    status: "ok",
    count: allElements.length,
    details: {
      highCount,
      lowCount,
      autoCount,
      preloadsWithPriorityCount: preloadsWithPriority.length,
      lcpCandidateHasFetchpriority: lcpCandidate ? lcpCandidate.getAttribute("fetchpriority") === "high" : null,
    },
    items: allElements.map(el => ({
      tag: el.tagName.toLowerCase(),
      fetchpriority: el.getAttribute("fetchpriority"),
      resource: (el.src || el.href || el.getAttribute("href") || "").split("/").pop()?.split("?")[0] || "",
    })),
    issues: issues.map(i => ({ severity: i.severity, message: i.message })),
  };
})();
```

---

## Resource Hints Validation
URL: https://webperf-snippets.nucliweb.net/Loading/Resource-Hints-Validation

Validates resource hints (preload, preconnect, dns-prefetch) by analyzing which hints are declared and whether the resources or connections are actually used. Detects unused hints that waste browser resources and opportunities to optimize loading. What are resource hints? Resource hints tell the browser to perform actions that can improve loading performance:

```js
// Resource Hints Validation
// https://webperf-snippets.nucliweb.net

(() => {
  console.group("%c🔍 Resource Hints Validation", "font-weight: bold; font-size: 14px;");

  // Check if page is fully loaded
  if (document.readyState !== 'complete') {
    console.log("");
    console.log("%c⚠️ Warning: Page is still loading (readyState: " + document.readyState + ")", "color: #f59e0b; font-weight: bold;");
    console.log("%cFor accurate results, wait until the page is fully loaded and run again.", "color: #6b7280;");
    console.log("");
  }

  // Get all resource hints from DOM
  const preloadLinks = Array.from(document.querySelectorAll('link[rel="preload"]'));
  const preconnectLinks = Array.from(document.querySelectorAll('link[rel="preconnect"]'));
  const dnsPrefetchLinks = Array.from(document.querySelectorAll('link[rel="dns-prefetch"]'));

  // Get all loaded resources from Performance API
  const resources = performance.getEntriesByType("resource");

  // Helper: Extract domain from URL
  const getDomain = (url) => {
    try {
      // Handle relative URLs by resolving against current location
      const absoluteUrl = url.startsWith('http') ? url : new URL(url, location.href).href;
      return new URL(absoluteUrl).origin;
    } catch {
      return null;
    }
  };

  // Helper: Normalize URL for comparison
  const normalizeUrl = (url) => {
    try {
      const parsed = new URL(url, location.origin);
      return parsed.origin + parsed.pathname + parsed.search;
    } catch {
      return url;
    }
  };

  // Helper: Format size
  const formatSize = (bytes) => {
    if (!bytes) return "N/A";
    const kb = bytes / 1024;
    return kb.toFixed(1) + " KB";
  };

  // Create maps of used resources and domains
  const usedResourceUrls = new Set(resources.map(r => normalizeUrl(r.name)));
  const usedDomains = new Set(resources.map(r => getDomain(r.name)).filter(Boolean));
  usedDomains.add(location.origin);

  // Get all image elements once for reuse across validations
  const allImgElements = document.querySelectorAll('img[src]');

  console.log("");
  console.log("%cSummary:", "font-weight: bold;");
  console.log("   Preload hints: " + preloadLinks.length);
  console.log("   Preconnect hints: " + preconnectLinks.length);
  console.log("   DNS-prefetch hints: " + dnsPrefetchLinks.length);
  console.log("   Total resources loaded: " + resources.length);
  console.log("   Unique domains accessed: " + usedDomains.size);

  // ===== PRELOAD VALIDATION =====
  console.log("");
  console.group("%c1. Preload Validation", "font-weight: bold; color: #3b82f6;");

  if (preloadLinks.length === 0) {
    console.log("%cℹ️ No preload hints found.", "color: #6b7280;");
  } else {
    const preloadResults = preloadLinks.map(link => {
      const href = link.href;
      const as = link.getAttribute("as") || "unknown";
      const media = link.getAttribute("media");
      const normalizedUrl = normalizeUrl(href);
      const shortUrl = href.split("/").pop()?.split("?").shift() || href;

      const wasUsed = usedResourceUrls.has(normalizedUrl);
      const perfEntry = resources.find(r => normalizeUrl(r.name) === normalizedUrl);

      let mediaMatches = true;
      if (media) {
        try {
          mediaMatches = window.matchMedia(media).matches;
        } catch {
          mediaMatches = false;
        }
      }

      return {
        shortUrl,
        href,
        as,
        media,
        mediaMatches,
        wasUsed,
        size: perfEntry ? formatSize(perfEntry.decodedBodySize || perfEntry.transferSize) : "N/A",
        link
      };
    });

    const usedPreloads = preloadResults.filter(r => r.wasUsed);
    const unusedPreloads = preloadResults.filter(r => !r.wasUsed && (!r.media || r.mediaMatches));
    const conditionalPreloads = preloadResults.filter(r => !r.wasUsed && r.media && !r.mediaMatches);

    if (unusedPreloads.length > 0) {
      console.log("");
      console.log("%c❌ Unused Preloads (" + unusedPreloads.length + ")", "color: #ef4444; font-weight: bold;");
      console.table(unusedPreloads.map(r => ({
        Resource: r.shortUrl,
        Type: r.as,
        Status: "Not Used ❌"
      })));
    }

    if (conditionalPreloads.length > 0) {
      console.log("");
      console.log("%cℹ️ Conditional Preloads (" + conditionalPreloads.length + ")", "color: #3b82f6; font-weight: bold;");
      console.log("%cThese preloads have media queries that don't match current viewport (this is OK):", "color: #6b7280;");
      console.table(conditionalPreloads.map(r => ({
        Resource: r.shortUrl,
        Type: r.as,
        Media: r.media,
        Status: "Conditional ✅"
      })));
    }

    if (usedPreloads.length > 0) {
      console.log("");
      console.log("%c✅ Used Preloads (" + usedPreloads.length + ")", "color: #22c55e; font-weight: bold;");
      console.table(usedPreloads.map(r => ({
        Resource: r.shortUrl,
        Type: r.as,
        Size: r.size,
        Status: "Used ✅"
      })));
    }

    const activePreloads = preloadLinks.length - conditionalPreloads.length;
    const usageRate = activePreloads > 0 ? Math.round((usedPreloads.length / activePreloads) * 100) : 0;
    console.log("");
    console.log("%cUsage Rate: " + usageRate + "%", "font-weight: bold;");

    if (unusedPreloads.length === 0) {
      console.log("%c✅ All applicable preload hints are being used.", "color: #22c55e;");
    } else {
      console.log("%c⚠️ " + unusedPreloads.length + " unused preload(s) waste bandwidth.", "color: #ef4444;");
    }
  }

  console.groupEnd();

  // ===== PRECONNECT VALIDATION =====
  console.log("");
  console.group("%c2. Preconnect Validation", "font-weight: bold; color: #3b82f6;");

  // Get lazy-loaded image domains for preconnect validation
  const lazyLoadedDomains = new Set();
  allImgElements.forEach(img => {
    try {
      const domain = getDomain(img.src);
      if (domain && domain !== location.origin && !usedDomains.has(domain)) {
        lazyLoadedDomains.add(domain);
      }
    } catch {}
  });

  if (preconnectLinks.length === 0) {
    console.log("%cℹ️ No preconnect hints found.", "color: #6b7280;");
  } else {
    const preconnectResults = preconnectLinks.map(link => {
      const href = link.href;
      const domain = getDomain(href);
      const wasUsed = domain ? usedDomains.has(domain) : false;
      const isLazyLoaded = domain ? lazyLoadedDomains.has(domain) : false;
      const requestCount = resources.filter(r => getDomain(r.name) === domain).length;

      return { domain, href, wasUsed, isLazyLoaded, requestCount, link };
    });

    const usedPreconnects = preconnectResults.filter(r => r.wasUsed);
    const lazyLoadedPreconnects = preconnectResults.filter(r => !r.wasUsed && r.isLazyLoaded);
    const unusedPreconnects = preconnectResults.filter(r => !r.wasUsed && !r.isLazyLoaded);

    if (unusedPreconnects.length > 0) {
      console.log("");
      console.log("%c❌ Unused Preconnects (" + unusedPreconnects.length + ")", "color: #ef4444; font-weight: bold;");
      console.table(unusedPreconnects.map(r => ({
        Domain: r.domain || r.href,
        Requests: 0,
        Status: "Not Used ❌"
      })));
    }

    if (lazyLoadedPreconnects.length > 0) {
      console.log("");
      console.log("%c✅ Lazy-Loaded Preconnects (" + lazyLoadedPreconnects.length + ")", "color: #22c55e; font-weight: bold;");
      console.log("%cThese preconnects are for lazy-loaded resources (correct usage!):", "color: #6b7280;");
      console.table(lazyLoadedPreconnects.map(r => ({
        Domain: r.domain || r.href,
        "Images in DOM": document.querySelectorAll('img[src*="' + (r.domain || r.href).replace(/https?:\/\//, '') + '"]').length,
        Status: "Lazy-Loaded ✅"
      })));
    }

    if (usedPreconnects.length > 0) {
      console.log("");
      console.log("%c✅ Used Preconnects (" + usedPreconnects.length + ")", "color: #22c55e; font-weight: bold;");
      console.table(usedPreconnects.map(r => ({
        Domain: r.domain || r.href,
        Requests: r.requestCount,
        Status: "Used ✅"
      })));
    }

    const effectivePreconnects = usedPreconnects.length + lazyLoadedPreconnects.length;
    const usageRate = Math.round((effectivePreconnects / preconnectLinks.length) * 100);
    console.log("");
    console.log("%cUsage Rate: " + usageRate + "%", "font-weight: bold;");

    if (unusedPreconnects.length === 0) {
      console.log("%c✅ All preconnect hints are being used.", "color: #22c55e;");
    } else {
      console.log("%c⚠️ " + unusedPreconnects.length + " unused preconnect(s) waste CPU/network.", "color: #ef4444;");
    }
  }

  console.groupEnd();

  // ===== DNS-PREFETCH VALIDATION =====
  console.log("");
  console.group("%c3. DNS-Prefetch Validation", "font-weight: bold; color: #3b82f6;");

  if (dnsPrefetchLinks.length === 0) {
    console.log("%cℹ️ No dns-prefetch hints found.", "color: #6b7280;");
  } else {
    const dnsPrefetchResults = dnsPrefetchLinks.map(link => {
      const href = link.href;
      const domain = getDomain(href);
      const wasUsed = domain ? usedDomains.has(domain) : false;
      const isLazyLoaded = domain ? lazyLoadedDomains.has(domain) : false;
      const requestCount = resources.filter(r => getDomain(r.name) === domain).length;

      return { domain, href, wasUsed, isLazyLoaded, requestCount, link };
    });

    const usedDnsPrefetch = dnsPrefetchResults.filter(r => r.wasUsed);
    const lazyLoadedDnsPrefetch = dnsPrefetchResults.filter(r => !r.wasUsed && r.isLazyLoaded);
    const unusedDnsPrefetch = dnsPrefetchResults.filter(r => !r.wasUsed && !r.isLazyLoaded);

    if (unusedDnsPrefetch.length > 0) {
      console.log("");
      console.log("%cℹ️ Unused DNS-Prefetch (" + unusedDnsPrefetch.length + ")", "color: #f59e0b; font-weight: bold;");
      console.table(unusedDnsPrefetch.map(r => ({
        Domain: r.domain || r.href,
        Requests: 0,
        Status: "Not Used"
      })));
      console.log("%cNote: Unused dns-prefetch has minimal impact.", "color: #6b7280;");
    }

    if (lazyLoadedDnsPrefetch.length > 0) {
      console.log("");
      console.log("%c✅ Lazy-Loaded DNS-Prefetch (" + lazyLoadedDnsPrefetch.length + ")", "color: #22c55e; font-weight: bold;");
      console.log("%cThese dns-prefetch hints are for lazy-loaded resources (correct usage!):", "color: #6b7280;");
      console.table(lazyLoadedDnsPrefetch.map(r => ({
        Domain: r.domain || r.href,
        "Images in DOM": document.querySelectorAll('img[src*="' + (r.domain || r.href).replace(/https?:\/\//, '') + '"]').length,
        Status: "Lazy-Loaded ✅"
      })));
    }

    if (usedDnsPrefetch.length > 0) {
      console.log("");
      console.log("%c✅ Used DNS-Prefetch (" + usedDnsPrefetch.length + ")", "color: #22c55e; font-weight: bold;");
      console.table(usedDnsPrefetch.map(r => ({
        Domain: r.domain || r.href,
        Requests: r.requestCount,
        Status: "Used ✅"
      })));
    }

    const effectiveDnsPrefetch = usedDnsPrefetch.length + lazyLoadedDnsPrefetch.length;
    const usageRate = Math.round((effectiveDnsPrefetch / dnsPrefetchLinks.length) * 100);
    console.log("");
    console.log("%cUsage Rate: " + usageRate + "%", "font-weight: bold;");
  }

  console.groupEnd();

  // ===== REDUNDANT HINTS CHECK =====
  console.log("");
  console.group("%c⚠️ Redundant Hints", "font-weight: bold; color: #f59e0b;");

  const preconnectDomains = new Set(preconnectLinks.map(l => getDomain(l.href)).filter(Boolean));
  const dnsPrefetchDomains = new Set(dnsPrefetchLinks.map(l => getDomain(l.href)).filter(Boolean));
  const redundantDomains = Array.from(preconnectDomains).filter(d => dnsPrefetchDomains.has(d));

  if (redundantDomains.length > 0) {
    console.log("");
    console.log("%c⚠️ Redundant Configuration Detected", "color: #f59e0b; font-weight: bold;");
    console.log("%cThese domains have BOTH preconnect AND dns-prefetch hints:", "color: #6b7280;");
    console.log("");
    redundantDomains.forEach(domain => {
      console.log("   • " + domain);
    });
    console.log("");
    console.log("%c💡 Recommendation: Remove dns-prefetch for these domains.", "color: #3b82f6; font-weight: bold;");
    console.log("%cpreconnect already includes DNS resolution + TCP + TLS handshake.", "color: #6b7280;");
    console.log("%cdns-prefetch only does DNS resolution, so it's redundant when preconnect exists.", "color: #6b7280;");
  } else {
    console.log("%c✅ No redundant hints found.", "color: #22c55e;");
  }

  console.groupEnd();

  // ===== PERFORMANCE API LIMITATIONS CHECK =====
  console.log("");
  console.group("%c⚠️ Performance API Limitations", "font-weight: bold; color: #f59e0b;");

  // Check for images in DOM that might not be in Performance API
  const imgDomains = new Set();

  allImgElements.forEach(img => {
    try {
      const domain = getDomain(img.src);
      if (domain && domain !== location.origin) {
        imgDomains.add(domain);
      }
    } catch {}
  });

  const missingFromPerf = Array.from(imgDomains).filter(domain => !usedDomains.has(domain));

  if (missingFromPerf.length > 0) {
    console.log("");
    console.log("%c⚠️ Lazy-Loaded Resources Detected", "color: #f59e0b; font-weight: bold;");
    console.log("%cThese domains have resources in the DOM but not in Performance API.", "color: #6b7280;");
    console.log("%cThis typically happens with lazy-loaded images or service worker cached resources.", "color: #6b7280;");
    console.log("");
    console.log("%cDomains with lazy-loaded resources:", "font-weight: bold;");

    const domainsWithCounts = missingFromPerf
      .map(domain => {
        const imgCount = Array.from(allImgElements).filter(img => {
          try {
            return getDomain(img.src) === domain;
          } catch {
            return false;
          }
        }).length;
        return { domain, imgCount };
      })
      .filter(item => item.domain && item.domain !== 'null')
      .sort((a, b) => b.imgCount - a.imgCount);

    domainsWithCounts.forEach(item => {
      console.log("   • " + item.domain + " (" + item.imgCount + " images in DOM)");
    });

    console.log("");
    console.log("%c✅ IMPORTANT: Keep preconnect/dns-prefetch hints for these domains!", "color: #22c55e; font-weight: bold;");
    console.log("%cLazy-loaded resources benefit MORE from connection hints because the connection", "color: #6b7280;");
    console.log("%cis established early, making images load instantly when the user scrolls to them.", "color: #6b7280;");
    console.log("");
    console.log("%cIf these domains have preconnect hints marked as 'unused' above, IGNORE that warning.", "color: #f59e0b; font-weight: bold;");
    console.log("%cThe hints are working correctly - the Performance API just can't see lazy-loaded resources.", "color: #6b7280;");
  } else {
    console.log("%c✅ All DOM image domains are captured in Performance API.", "color: #22c55e;");
  }

  console.groupEnd();

  // ===== OPPORTUNITIES =====
  console.log("");
  console.group("%c4. Optimization Opportunities", "font-weight: bold; color: #3b82f6;");

  const hintedDomains = new Set([
    ...preconnectLinks.map(l => getDomain(l.href)),
    ...dnsPrefetchLinks.map(l => getDomain(l.href))
  ]);

  const domainRequestCounts = {};
  resources.forEach(r => {
    const domain = getDomain(r.name);
    if (domain && domain !== location.origin) {
      domainRequestCounts[domain] = (domainRequestCounts[domain] || 0) + 1;
    }
  });

  const missingHints = Object.entries(domainRequestCounts)
    .filter(([domain, count]) => count >= 2 && !hintedDomains.has(domain))
    .sort((a, b) => b[1] - a[1]);

  const topPreconnects = missingHints.filter(([, count]) => count >= 5).slice(0, 3);
  const topDnsPrefetch = missingHints.filter(([, count]) => count >= 2 && count < 5).slice(0, 5);
  const shownHints = [...topPreconnects, ...topDnsPrefetch];

  if (missingHints.length > 0) {
    console.log("");
    console.log("%c⚡ Optimization Opportunities (" + missingHints.length + " found)", "color: #f59e0b; font-weight: bold;");
    console.log("%cThese domains make multiple requests but have no connection hints:", "color: #6b7280;");

    if (shownHints.length < missingHints.length) {
      console.log("%c⚠️ Showing top " + shownHints.length + " recommendations", "color: #f59e0b;");
      console.log("%c💡 Too many hints compete for bandwidth. Focus on the most critical domains.", "color: #6b7280;");
    }

    console.table(shownHints.map(([domain, count]) => ({
      Domain: domain,
      Requests: count,
      Recommendation: count >= 5 ? "preconnect" : "dns-prefetch",
      Priority: count >= 10 ? "High" : count >= 5 ? "Medium" : "Low"
    })));

    console.log("");
    console.log("%cSuggested code:", "font-weight: bold;");
    shownHints.forEach(([domain, count]) => {
      const hint = count >= 5 ? "preconnect" : "dns-prefetch";
      console.log('%c<link rel="' + hint + '" href="' + domain + '">', "font-family: monospace;");
    });
  } else {
    console.log("%c✅ All frequently-used domains have appropriate hints.", "color: #22c55e;");
  }

  console.groupEnd();

  // ===== BEST PRACTICES =====
  console.log("");
  console.group("%c📝 Best Practices", "color: #3b82f6; font-weight: bold;");
  console.log("");
  console.log("%cPreload:", "font-weight: bold;");
  console.log("   ✅ Use for critical resources on current page");
  console.log("   ❌ Don't preload resources not used on current page");
  console.log("   ⚡ Limit to few most critical resources");
  console.log("");
  console.log("%cPreconnect:", "font-weight: bold;");
  console.log("   ✅ Use for critical third-party domains");
  console.log("   ✅ Best for domains with many requests");
  console.log("   ❌ Don't use for domains not accessed");
  console.log("   ⚡ Limit to few most important domains");
  console.log("");
  console.log("%cDNS-Prefetch:", "font-weight: bold;");
  console.log("   ✅ Use for non-critical third-party domains");
  console.log("   ✅ Good for domains with few requests");
  console.log("   ℹ️ Less impact than preconnect");

  console.groupEnd();

  // Final summary - reuse lazy-loaded domains set from earlier
  const lazyLoadedDomainsForSummary = new Set();
  allImgElements.forEach(img => {
    try {
      const domain = getDomain(img.src);
      if (domain && domain !== location.origin && !usedDomains.has(domain)) {
        lazyLoadedDomainsForSummary.add(domain);
      }
    } 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;

  console.log("");
  if (totalIssues === 0 && missingHints.length === 0) {
    console.log("%c✅ Excellent! All resource hints are properly configured.", "color: #22c55e; font-weight: bold; font-size: 14px;");
  } else {
    console.log("%c⚠️ Found " + totalIssues + " unused hint(s) and " + missingHints.length + " optimization opportunity(ies).", "color: #ef4444; font-weight: bold;");
    console.log("%cReview recommendations above to improve performance.", "color: #6b7280;");
  }

  console.groupEnd();

  return {
    script: "Resource-Hints-Validation",
    status: "ok",
    count: preloadLinks.length + preconnectLinks.length + dnsPrefetchLinks.length,
    details: {
      preloadCount: preloadLinks.length,
      preconnectCount: preconnectLinks.length,
      dnsPrefetchCount: dnsPrefetchLinks.length,
      totalResourcesLoaded: resources.length,
      unusedHints: totalIssues,
      missingPreconnects: missingHints.length,
      redundantHints: redundantDomains.length,
    },
    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` }] : []),
      ...(redundantDomains.length > 0 ? [{ severity: "warning", message: `${redundantDomains.length} domain(s) have both preconnect and dns-prefetch (redundant)` }] : []),
    ],
  };
})();
```

---

## Resource Hints
URL: https://webperf-snippets.nucliweb.net/Loading/Resource-Hints

Analyzes resource hints on the page, checking for proper usage and identifying optimization opportunities. Resource hints help the browser prioritize resource loading for better performance. Resource hint types:

```js
// Resource Hints Analysis
// 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];
  };

  // Resource hint definitions
  const hintTypes = [
    {
      rel: "preload",
      icon: "⚡",
      description: "Critical resource for current page",
      requiresAs: true,
    },
    {
      rel: "modulepreload",
      icon: "📦",
      description: "ES module for current page",
      requiresAs: false,
    },
    {
      rel: "preconnect",
      icon: "🔌",
      description: "Early connection to origin",
      requiresAs: false,
    },
    {
      rel: "dns-prefetch",
      icon: "🔍",
      description: "DNS lookup for origin",
      requiresAs: false,
    },
    {
      rel: "prefetch",
      icon: "📥",
      description: "Resource for future navigation",
      requiresAs: false,
    },
    {
      rel: "prerender",
      icon: "🖼️",
      description: "Pre-render page",
      requiresAs: false,
    },
  ];

  // Get all link elements with resource hints
  const allHints = [];
  const issues = [];

  hintTypes.forEach((type) => {
    const links = document.querySelectorAll(`link[rel="${type.rel}"]`);
    links.forEach((link) => {
      const href = link.href || link.getAttribute("href") || "";
      let hostname = "";
      try {
        hostname = new URL(href, location.origin).hostname;
      } catch {}

      const hint = {
        rel: type.rel,
        icon: type.icon,
        href,
        shortHref: href.length > 50 ? "..." + href.slice(-47) : href,
        hostname,
        as: link.getAttribute("as") || "",
        crossorigin: link.crossOrigin || link.getAttribute("crossorigin") || "",
        fetchpriority: link.fetchPriority || link.getAttribute("fetchpriority") || "",
        type: link.type || "",
        media: link.media || "",
        element: link,
      };

      allHints.push(hint);

      // Check for issues
      if (type.requiresAs && !hint.as) {
        issues.push({
          hint,
          issue: "Missing 'as' attribute (required for preload)",
          severity: "error",
          fix: `Add as="script|style|font|image|fetch"`,
        });
      }

      if (hint.as === "font" && !hint.crossorigin) {
        issues.push({
          hint,
          issue: "Font preload without crossorigin (causes double fetch)",
          severity: "error",
          fix: 'Add crossorigin="anonymous"',
        });
      }

      if (type.rel === "preconnect" && !hint.crossorigin) {
        // Check if we load CORS resources from this origin
        const corsResources = performance
          .getEntriesByType("resource")
          .filter(
            (r) =>
              r.name.includes(hostname) &&
              (r.initiatorType === "script" ||
                r.initiatorType === "css" ||
                r.initiatorType === "font")
          );
        if (corsResources.length > 0) {
          issues.push({
            hint,
            issue: "Preconnect may need crossorigin for CORS resources",
            severity: "warning",
            fix: 'Consider adding crossorigin="anonymous"',
          });
        }
      }
    });
  });

  // Check for unused preloads
  const preloads = allHints.filter((h) => h.rel === "preload");
  const loadedResources = performance.getEntriesByType("resource");

  preloads.forEach((preload) => {
    const wasUsed = loadedResources.some((r) => r.name === preload.href);
    if (!wasUsed) {
      issues.push({
        hint: preload,
        issue: "Preloaded resource not used within page load",
        severity: "warning",
        fix: "Remove unused preload or verify it's needed",
      });
    }
  });

  // Check for preconnects without loaded resources
  const preconnects = allHints.filter(
    (h) => h.rel === "preconnect" || h.rel === "dns-prefetch"
  );
  preconnects.forEach((pc) => {
    const hasResources = loadedResources.some((r) => {
      try {
        return new URL(r.name).hostname === pc.hostname;
      } catch {
        return false;
      }
    });
    if (!hasResources && pc.hostname) {
      issues.push({
        hint: pc,
        issue: `No resources loaded from ${pc.hostname}`,
        severity: "warning",
        fix: "Remove unused preconnect or verify it's needed for future resources",
      });
    }
  });

  // Check for too many preloads
  if (preloads.length > 6) {
    issues.push({
      hint: { rel: "preload", href: `${preloads.length} preloads` },
      issue: `Too many preloads (${preloads.length}) - they compete for bandwidth`,
      severity: "warning",
      fix: "Limit to 5-6 most critical resources",
    });
  }

  // Get third-party origins that could benefit from preconnect
  const thirdPartyOrigins = new Map();
  loadedResources.forEach((r) => {
    try {
      const url = new URL(r.name);
      if (url.hostname !== location.hostname) {
        if (!thirdPartyOrigins.has(url.origin)) {
          thirdPartyOrigins.set(url.origin, { count: 0, size: 0, types: new Set() });
        }
        const data = thirdPartyOrigins.get(url.origin);
        data.count++;
        data.size += r.transferSize || 0;
        data.types.add(r.initiatorType);
      }
    } catch {}
  });

  // Find origins without preconnect
  const preconnectedOrigins = new Set(
    [...preconnects].map((p) => {
      try {
        return new URL(p.href).origin;
      } catch {
        return "";
      }
    })
  );

  const missingPreconnects = [];
  thirdPartyOrigins.forEach((data, origin) => {
    if (!preconnectedOrigins.has(origin) && data.count >= 2) {
      missingPreconnects.push({ origin, ...data });
    }
  });

  // Display results
  console.group("%c🔗 Resource Hints Analysis", "font-weight: bold; font-size: 14px;");

  // Summary
  console.log("");
  console.log("%cSummary:", "font-weight: bold;");

  const summary = hintTypes.map((type) => {
    const count = allHints.filter((h) => h.rel === type.rel).length;
    return { type: type.rel, count, icon: type.icon };
  });

  summary.forEach((s) => {
    const status = s.count > 0 ? "🟢" : "⚪";
    console.log(`   ${status} ${s.icon} ${s.type}: ${s.count}`);
  });

  console.log(`   Total hints: ${allHints.length}`);

  // Details by type
  hintTypes.forEach((type) => {
    const hints = allHints.filter((h) => h.rel === type.rel);
    if (hints.length === 0) return;

    console.log("");
    console.group(
      `%c${type.icon} ${type.rel} (${hints.length})`,
      "color: #3b82f6; font-weight: bold;"
    );

    const tableData = hints.map((h) => {
      const row = {
        Resource: h.shortHref,
      };

      if (type.rel === "preload" || type.rel === "modulepreload") {
        row.As = h.as || "⚠️ missing";
        row.Crossorigin = h.crossorigin || "-";
        if (h.fetchpriority) row.Priority = h.fetchpriority;

        // Check if used
        const used = loadedResources.some((r) => r.name === h.href);
        row.Used = used ? "✅" : "⚠️ No";
      }

      if (type.rel === "preconnect" || type.rel === "dns-prefetch") {
        row.Origin = h.hostname;
        row.Crossorigin = h.crossorigin || "-";

        // Check resources from this origin
        const originResources = loadedResources.filter((r) => {
          try {
            return new URL(r.name).hostname === h.hostname;
          } catch {
            return false;
          }
        });
        row["Resources Loaded"] = originResources.length;
      }

      return row;
    });

    console.table(tableData);

    // Elements for inspection
    console.log("%c🔎 Elements:", "font-weight: bold;");
    hints.forEach((h, i) => {
      console.log(`${i + 1}.`, h.element);
    });

    console.groupEnd();
  });

  // Issues
  const errors = issues.filter((i) => i.severity === "error");
  const warnings = issues.filter((i) => i.severity === "warning");

  if (issues.length > 0) {
    console.log("");
    console.group(
      `%c⚠️ Issues Found (${errors.length} errors, ${warnings.length} warnings)`,
      "color: #ef4444; font-weight: bold;"
    );

    if (errors.length > 0) {
      console.log("");
      console.log("%c🔴 Errors:", "font-weight: bold; color: #ef4444;");
      errors.forEach((issue) => {
        console.log(`   ${issue.hint.rel}: ${issue.issue}`);
        console.log(`      Resource: ${issue.hint.href}`);
        console.log(`      Fix: ${issue.fix}`);
      });
    }

    if (warnings.length > 0) {
      console.log("");
      console.log("%c🟡 Warnings:", "font-weight: bold; color: #f59e0b;");
      warnings.forEach((issue) => {
        console.log(`   ${issue.hint.rel}: ${issue.issue}`);
        if (issue.hint.href) {
          console.log(`      Resource: ${issue.hint.href}`);
        }
        console.log(`      Fix: ${issue.fix}`);
      });
    }

    console.groupEnd();
  } else {
    console.log("");
    console.log(
      "%c✅ No issues found with resource hints.",
      "color: #22c55e; font-weight: bold;"
    );
  }

  // Recommendations
  if (missingPreconnects.length > 0) {
    console.log("");
    console.group("%c💡 Optimization Opportunities", "color: #3b82f6; font-weight: bold;");

    console.log("");
    console.log("%cThird-party origins without preconnect:", "font-weight: bold;");
    console.log("These origins load multiple resources and could benefit from preconnect:");
    console.log("");

    const recTable = missingPreconnects
      .sort((a, b) => b.count - a.count)
      .slice(0, 5)
      .map((o) => ({
        Origin: o.origin,
        Resources: o.count,
        Size: formatBytes(o.size),
        Types: Array.from(o.types).join(", "),
      }));
    console.table(recTable);

    console.log("");
    console.log("%cAdd preconnect for critical origins:", "font-weight: bold;");
    missingPreconnects.slice(0, 3).forEach((o) => {
      console.log(
        `%c<link rel="preconnect" href="${o.origin}" crossorigin>`,
        "font-family: monospace; color: #22c55e;"
      );
    });

    console.groupEnd();
  }

  // Best practices
  console.log("");
  console.group("%c📝 Best Practices", "color: #3b82f6; font-weight: bold;");
  console.log("");
  console.log("%cPreload (current page critical resources):", "font-weight: bold;");
  console.log(
    '%c<link rel="preload" href="/font.woff2" as="font" type="font/woff2" crossorigin>',
    "font-family: monospace; color: #22c55e;"
  );
  console.log(
    '%c<link rel="preload" href="/hero.webp" as="image" fetchpriority="high">',
    "font-family: monospace; color: #22c55e;"
  );
  console.log("");
  console.log("%cPreconnect (third-party origins):", "font-weight: bold;");
  console.log(
    '%c<link rel="preconnect" href="https://fonts.googleapis.com">',
    "font-family: monospace; color: #22c55e;"
  );
  console.log(
    '%c<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>',
    "font-family: monospace; color: #22c55e;"
  );
  console.log("");
  console.log("%cPrefetch (next page resources):", "font-weight: bold;");
  console.log(
    '%c<link rel="prefetch" href="/next-page.js" as="script">',
    "font-family: monospace; color: #22c55e;"
  );
  console.groupEnd();

  console.groupEnd();

  return {
    script: "Resource-Hints",
    status: "ok",
    count: allHints.length,
    details: {
      byType: Object.fromEntries(hintTypes.map(t => [t.rel, allHints.filter(h => h.rel === t.rel).length])),
      missingPreconnectsCount: missingPreconnects.length,
    },
    items: allHints.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}` })),
  };
})();
```

---

## SSR Framework Hydration Data Analysis
URL: https://webperf-snippets.nucliweb.net/Loading/SSR-Hydration-Data-Analysis

Analyzes hydration data scripts used by SSR frameworks like Next.js, Nuxt, Remix, Gatsby, and others. These scripts contain serialized state that the client needs to "hydrate" the server-rendered HTML into an interactive application. Supported frameworks:

```js
// SSR Framework Hydration Data Analysis
// 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];
  };

  // Framework detection patterns
  const frameworks = [
    {
      name: "Next.js",
      selector: "#__NEXT_DATA__",
      type: "json",
      threshold: 128 * 1024, // 128 KB official warning threshold
      docs: "https://nextjs.org/docs/messages/large-page-data",
    },
    {
      name: "Nuxt 3",
      selector: "#__NUXT_DATA__",
      type: "json-array",
      threshold: 100 * 1024,
      docs: "https://nuxt.com/docs/api/composables/use-hydration",
    },
    {
      name: "Nuxt 2",
      pattern: /window\.__NUXT__\s*=/,
      type: "script",
      threshold: 100 * 1024,
      docs: "https://nuxtjs.org/",
    },
    {
      name: "Remix",
      selector: "#__remixContext",
      type: "script",
      threshold: 100 * 1024,
      docs: "https://remix.run/docs/en/main/guides/performance",
    },
    {
      name: "Gatsby",
      selector: "#___gatsby",
      pattern: /window\.___/,
      type: "script",
      threshold: 100 * 1024,
      docs: "https://www.gatsbyjs.com/docs/",
    },
    {
      name: "SvelteKit",
      selector: "[data-sveltekit-hydrate]",
      type: "json",
      threshold: 100 * 1024,
      docs: "https://kit.svelte.dev/docs/performance",
    },
    {
      name: "Astro",
      selector: "astro-island",
      type: "props",
      threshold: 50 * 1024,
      docs: "https://docs.astro.build/en/concepts/islands/",
    },
  ];

  // Find all hydration scripts
  const detected = [];
  const allInlineScripts = Array.from(
    document.querySelectorAll("script:not([src])")
  ).filter((s) => s.innerHTML.trim().length > 0);

  // Check each framework
  frameworks.forEach((fw) => {
    let elements = [];
    let content = "";
    let size = 0;

    if (fw.selector) {
      const el = document.querySelector(fw.selector);
      if (el) {
        elements = [el];
        content = el.innerHTML || el.textContent || "";
        size = new Blob([content]).size;
      }
    }

    if (fw.pattern && elements.length === 0) {
      allInlineScripts.forEach((script) => {
        if (fw.pattern.test(script.innerHTML)) {
          elements.push(script);
          content = script.innerHTML;
          size += new Blob([content]).size;
        }
      });
    }

    // Special handling for Astro islands
    if (fw.name === "Astro") {
      const islands = document.querySelectorAll("astro-island");
      if (islands.length > 0) {
        elements = Array.from(islands);
        let totalProps = 0;
        islands.forEach((island) => {
          const props = island.getAttribute("props");
          if (props) totalProps += new Blob([props]).size;
        });
        size = totalProps;
        content = `${islands.length} islands with props`;
      }
    }

    if (elements.length > 0) {
      detected.push({
        ...fw,
        elements,
        content,
        size,
        exceedsThreshold: size > fw.threshold,
      });
    }
  });

  // Calculate other inline scripts
  const frameworkScripts = new Set(detected.flatMap((d) => d.elements));
  const otherScripts = allInlineScripts.filter((s) => !frameworkScripts.has(s));
  const otherSize = otherScripts.reduce(
    (sum, s) => sum + new Blob([s.innerHTML]).size,
    0
  );

  // Display results
  console.group(
    "%c🚀 SSR Framework Hydration Analysis",
    "font-weight: bold; font-size: 14px;"
  );

  if (detected.length === 0) {
    console.log("");
    console.log(
      "%c📭 No SSR framework hydration data detected.",
      "color: #6b7280; font-weight: bold;"
    );
    console.log("This page may be:");
    console.log("   • A static HTML page");
    console.log("   • A client-side rendered SPA");
    console.log("   • Using a framework not yet supported by this snippet");
    console.log("");
    console.log(
      `Found ${otherScripts.length} other inline scripts (${formatBytes(otherSize)})`
    );
    console.groupEnd();
    return { script: "SSR-Hydration-Data-Analysis", status: "ok", count: 0, details: { frameworksFound: 0, totalHydrationBytes: 0, otherInlineBytes: otherSize }, items: [], issues: [] };
  }

  // Summary
  console.log("");
  console.log("%cDetected Framework(s):", "font-weight: bold;");
  detected.forEach((fw) => {
    const status = fw.exceedsThreshold ? "🔴" : "🟢";
    console.log(
      `   ${status} ${fw.name}: ${formatBytes(fw.size)} (threshold: ${formatBytes(fw.threshold)})`
    );
  });

  const totalHydrationSize = detected.reduce((sum, d) => sum + d.size, 0);
  console.log("");
  console.log(`   Total hydration data: ${formatBytes(totalHydrationSize)}`);
  console.log(`   Other inline scripts: ${formatBytes(otherSize)}`);

  // Detailed analysis for each framework
  detected.forEach((fw) => {
    console.log("");
    console.group(
      `%c${fw.exceedsThreshold ? "🔴" : "🟢"} ${fw.name} Analysis`,
      `color: ${fw.exceedsThreshold ? "#ef4444" : "#22c55e"}; font-weight: bold;`
    );

    console.log(`Size: ${formatBytes(fw.size)}`);
    console.log(`Threshold: ${formatBytes(fw.threshold)}`);
    console.log(
      `Status: ${fw.exceedsThreshold ? "⚠️ Exceeds recommended limit" : "✅ Within limits"}`
    );

    // Parse and analyze content
    if (fw.type === "json" && fw.content) {
      try {
        const data = JSON.parse(fw.content);
        console.log("");
        console.log("%cData Structure:", "font-weight: bold;");

        if (fw.name === "Next.js" && data.props) {
          const pageProps = data.props?.pageProps || {};
          const pagePropsSize = new Blob([JSON.stringify(pageProps)]).size;

          console.log(`   Build ID: ${data.buildId || "N/A"}`);
          console.log(`   Page: ${data.page || "N/A"}`);
          console.log(`   pageProps size: ${formatBytes(pagePropsSize)}`);

          // Analyze pageProps keys
          const propsKeys = Object.keys(pageProps);
          if (propsKeys.length > 0) {
            console.log("");
            console.log("%c   pageProps breakdown:", "font-weight: bold;");

            const propSizes = propsKeys.map((key) => ({
              key,
              size: new Blob([JSON.stringify(pageProps[key])]).size,
            }));
            propSizes.sort((a, b) => b.size - a.size);

            propSizes.slice(0, 10).forEach((prop) => {
              const pct = ((prop.size / pagePropsSize) * 100).toFixed(1);
              const bar = "█".repeat(Math.min(Math.round(parseFloat(pct) / 5), 20));
              console.log(
                `      ${prop.key}: ${formatBytes(prop.size)} (${pct}%) ${bar}`
              );
            });

            if (propsKeys.length > 10) {
              console.log(`      ... and ${propsKeys.length - 10} more props`);
            }
          }

          // Check for common issues
          console.log("");
          console.log("%cPotential Issues:", "font-weight: bold;");

          // Large arrays
          const largeArrays = propsKeys.filter((key) => {
            const val = pageProps[key];
            return Array.isArray(val) && val.length > 50;
          });
          if (largeArrays.length > 0) {
            console.log(
              `   ⚠️ Large arrays: ${largeArrays.join(", ")} (consider pagination)`
            );
          }

          // Deeply nested objects
          const checkDepth = (obj, depth = 0) => {
            if (depth > 5) return true;
            if (typeof obj !== "object" || obj === null) return false;
            return Object.values(obj).some((v) => checkDepth(v, depth + 1));
          };
          if (checkDepth(pageProps)) {
            console.log("   ⚠️ Deeply nested data (> 5 levels)");
          }

          // Potential sensitive data patterns
          const sensitivePatterns = /password|secret|token|apikey|api_key|private/i;
          const propsString = JSON.stringify(pageProps);
          if (sensitivePatterns.test(propsString)) {
            console.log(
              "   🚨 Possible sensitive data detected - review prop names"
            );
          }

          if (
            largeArrays.length === 0 &&
            !checkDepth(pageProps) &&
            !sensitivePatterns.test(propsString)
          ) {
            console.log("   ✅ No obvious issues detected");
          }
        }

        // Raw data reference
        console.log("");
        console.log("%c📦 Raw data object:", "font-weight: bold;");
        console.log(data);
      } catch {
        console.log("Could not parse JSON content");
      }
    }

    if (fw.name === "Astro") {
      console.log("");
      console.log(`Islands found: ${fw.elements.length}`);
      const islandTable = fw.elements.map((island, i) => {
        const props = island.getAttribute("props");
        const clientDirective =
          island.getAttribute("client") ||
          Array.from(island.attributes)
            .find((a) => a.name.startsWith("client:"))
            ?.name.replace("client:", "") ||
          "unknown";
        return {
          "#": i + 1,
          Component: island.getAttribute("component-url")?.split("/").pop() || "Unknown",
          Client: clientDirective,
          "Props Size": props ? formatBytes(new Blob([props]).size) : "0 B",
        };
      });
      console.table(islandTable);
    }

    // Element reference
    console.log("");
    console.log("%c🔎 Element(s):", "font-weight: bold;");
    fw.elements.forEach((el, i) => {
      console.log(`${i + 1}.`, el);
    });

    console.log("");
    console.log(`📚 Docs: ${fw.docs}`);

    console.groupEnd();
  });

  // Recommendations
  const hasIssues = detected.some((d) => d.exceedsThreshold);

  if (hasIssues) {
    console.log("");
    console.group("%c📝 Recommendations", "color: #3b82f6; font-weight: bold;");
    console.log("");
    console.log("%cTo reduce hydration data size:", "font-weight: bold;");
    console.log("");
    console.log("1. Only fetch data you actually render");
    console.log("   → Remove unused fields from API responses");
    console.log("   → Use GraphQL or tRPC for precise data fetching");
    console.log("");
    console.log("2. Paginate large lists");
    console.log("   → Don't send 100+ items in initial props");
    console.log("   → Implement infinite scroll or pagination");
    console.log("");
    console.log("3. Defer non-critical data");
    console.log("   → Fetch some data client-side after hydration");
    console.log("   → Use React Query, SWR, or similar");
    console.log("");
    console.log("4. Transform data before sending");
    console.log("   → Remove unnecessary nested data");
    console.log("   → Flatten structures where possible");
    console.log("");

    const nextJs = detected.find((d) => d.name === "Next.js");
    if (nextJs) {
      console.log("%cNext.js specific:", "font-weight: bold;");
      console.log(
        '%c// In getServerSideProps or getStaticProps:\nreturn {\n  props: {\n    // Only include what the page renders\n    items: items.slice(0, 10), // Paginate\n    // Omit unused fields\n    user: { name: user.name, avatar: user.avatar },\n  },\n};',
        "font-family: monospace; color: #22c55e;"
      );
    }

    console.groupEnd();
  }

  console.groupEnd();

  return {
    script: "SSR-Hydration-Data-Analysis",
    status: "ok",
    count: detected.length,
    details: {
      frameworksFound: detected.length,
      totalHydrationBytes: totalHydrationSize,
      otherInlineBytes: otherSize,
      hasExceedingThreshold: detected.some(d => d.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` })),
  };
})();
```

---

## Scripts Loading
URL: https://webperf-snippets.nucliweb.net/Loading/Script-Loading

Analyzes all scripts on the page, showing their loading strategy and identifying potential performance issues. Scripts are often the biggest cause of main thread blocking and delayed rendering. This snippet helps you audit which scripts are blocking the critical rendering path. Why this matters: Render-blocking scripts in `<head>` without `async` or `defer` pause HTML parsing while they download and execute. This delays First Contentful Paint (FCP) and Largest Contentful Paint (LCP). Even a single blocking script can add hundreds of milliseconds to your load time, especially on slower connections. How scripts affect HTML parsing:

```js
// Script Loading Analysis
// 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];
  };

  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;
  };

  const currentDomain = getRootDomain(location.hostname);
  const isFirstParty = (url) => {
    try {
      return getRootDomain(new URL(url).hostname) === currentDomain;
    } catch {
      return true;
    }
  };

  // Get resource timing data
  const resourceTiming = new Map();
  performance.getEntriesByType("resource").forEach((r) => {
    if (r.initiatorType === "script") {
      resourceTiming.set(r.name, {
        size: r.transferSize || 0,
        duration: r.duration,
        startTime: r.startTime,
      });
    }
  });

  // Analyze all external scripts
  const externalScripts = Array.from(document.querySelectorAll("script[src]"));

  // Analyze inline scripts
  const inlineScripts = Array.from(document.querySelectorAll("script:not([src])"))
    .filter((s) => s.innerHTML.trim().length > 0);

  const scripts = externalScripts.map((script) => {
    const src = script.src;
    const timing = resourceTiming.get(src) || {};
    const inHead = script.closest("head") !== null;
    const isModule = script.type === "module";
    const isAsync = script.async;
    const isDefer = script.defer;

    // Determine loading strategy
    let strategy = "blocking";
    if (isModule && isAsync) {
      strategy = "async module";
    } else if (isModule) {
      strategy = "module";
    } else if (isAsync) {
      strategy = "async";
    } else if (isDefer) {
      strategy = "defer";
    }

    const isBlocking = strategy === "blocking";
    const firstParty = isFirstParty(src);

    return {
      src,
      shortSrc: src.split("/").pop()?.split("?")[0] || src,
      strategy,
      isBlocking,
      inHead,
      firstParty,
      isModule,
      isAsync,
      isDefer,
      size: timing.size || 0,
      duration: timing.duration || 0,
      startTime: timing.startTime || 0,
      element: script,
    };
  });

  // Categorize scripts
  const blocking = scripts.filter((s) => s.isBlocking);
  const blockingInHead = blocking.filter((s) => s.inHead);
  const asyncScripts = scripts.filter((s) => s.strategy === "async" || s.strategy === "async module");
  const deferScripts = scripts.filter((s) => s.strategy === "defer");
  const moduleScripts = scripts.filter((s) => s.strategy === "module");
  const thirdPartyBlocking = blocking.filter((s) => !s.firstParty);

  // Calculate totals
  const totalSize = scripts.reduce((sum, s) => sum + s.size, 0);
  const blockingSize = blocking.reduce((sum, s) => sum + s.size, 0);

  // Rating
  let rating, ratingColor;
  if (blockingInHead.length === 0) {
    rating = "Good";
    ratingColor = "#22c55e";
  } else if (blockingInHead.length <= 2 && thirdPartyBlocking.length === 0) {
    rating = "Needs Review";
    ratingColor = "#f59e0b";
  } else {
    rating = "Needs Optimization";
    ratingColor = "#ef4444";
  }

  // Display results
  console.group("%c📜 Script Loading Analysis", "font-weight: bold; font-size: 14px;");

  // Summary
  console.log("");
  console.log("%cSummary:", "font-weight: bold;");
  console.log(`   Total external scripts: ${scripts.length}`);
  console.log(`   Total inline scripts: ${inlineScripts.length}`);
  console.log(`   Total size: ${formatBytes(totalSize)}`);
  console.log("");
  console.log("%cBy loading strategy:", "font-weight: bold;");
  console.log(`   🔴 Blocking: ${blocking.length} (${formatBytes(blockingSize)})`);
  console.log(`   ⚡ Async: ${asyncScripts.length}`);
  console.log(`   📋 Defer: ${deferScripts.length}`);
  console.log(`   📦 Module: ${moduleScripts.length}`);
  console.log("");
  console.log(`   Rating: %c${rating}`, `color: ${ratingColor}; font-weight: bold;`);

  // Detailed table
  if (scripts.length > 0) {
    console.log("");
    console.group("%c📊 External Scripts", "color: #3b82f6; font-weight: bold;");

    const tableData = scripts
      .sort((a, b) => {
        // Sort: blocking first, then by size
        if (a.isBlocking !== b.isBlocking) return a.isBlocking ? -1 : 1;
        return b.size - a.size;
      })
      .map((s) => ({
        Script: s.shortSrc,
        Strategy: s.isBlocking ? `🔴 ${s.strategy}` : s.strategy,
        Location: s.inHead ? "head" : "body",
        Party: s.firstParty ? "1st" : "3rd",
        Size: formatBytes(s.size),
        Duration: formatMs(s.duration),
      }));

    console.table(tableData);

    // Elements for inspection
    console.log("");
    console.log("%c🔎 Elements (sorted by load order):", "font-weight: bold;");
    scripts
      .sort((a, b) => a.startTime - b.startTime)
      .forEach((s, i) => {
        const marker = s.isBlocking ? "🔴" : "✅";
        console.log(`${i + 1}. ${marker} ${s.shortSrc}`, s.element);
      });

    console.groupEnd();
  }

  // Issues
  const issues = [];

  if (blockingInHead.length > 0) {
    issues.push({
      severity: "error",
      message: `${blockingInHead.length} blocking script(s) in <head>`,
      scripts: blockingInHead,
      fix: "Add 'defer' or 'async' attribute, or move to end of <body>",
    });
  }

  if (thirdPartyBlocking.length > 0) {
    issues.push({
      severity: "error",
      message: `${thirdPartyBlocking.length} third-party blocking script(s)`,
      scripts: thirdPartyBlocking,
      fix: "Add 'async' for independent scripts, or load dynamically",
    });
  }

  const largeBlocking = blocking.filter((s) => s.size > 50 * 1024);
  if (largeBlocking.length > 0) {
    issues.push({
      severity: "warning",
      message: `${largeBlocking.length} large blocking script(s) (> 50 KB)`,
      scripts: largeBlocking,
      fix: "Split code, use defer, or lazy load",
    });
  }

  // Scripts that could be deferred
  const couldDefer = blocking.filter((s) => {
    // Scripts at end of body could likely use defer
    const bodyScripts = Array.from(document.body.querySelectorAll("script[src]"));
    const isLastInBody = bodyScripts.indexOf(s.element) >= bodyScripts.length - 3;
    return isLastInBody;
  });

  if (couldDefer.length > 0 && blocking.length > couldDefer.length) {
    issues.push({
      severity: "info",
      message: `${blocking.length - couldDefer.length} blocking script(s) could potentially use defer`,
      fix: "Test with defer attribute to improve parsing performance",
    });
  }

  if (issues.length > 0) {
    console.log("");
    console.group("%c⚠️ Issues Found", "color: #ef4444; font-weight: bold;");

    issues.forEach((issue) => {
      const icon = issue.severity === "error" ? "🔴" : issue.severity === "warning" ? "🟡" : "💡";
      console.log("");
      console.log(`%c${icon} ${issue.message}`, "font-weight: bold;");
      if (issue.scripts) {
        issue.scripts.forEach((s) => {
          console.log(`   • ${s.shortSrc} (${formatBytes(s.size)})`);
        });
      }
      console.log(`   → ${issue.fix}`);
    });

    console.groupEnd();
  } else if (scripts.length > 0) {
    console.log("");
    console.log(
      "%c✅ All scripts use non-blocking loading strategies!",
      "color: #22c55e; font-weight: bold;"
    );
  }

  // First/Third party breakdown
  const firstPartyScripts = scripts.filter((s) => s.firstParty);
  const thirdPartyScripts = scripts.filter((s) => !s.firstParty);

  if (thirdPartyScripts.length > 0) {
    console.log("");
    console.group("%c🌐 Third-Party Scripts", "color: #8b5cf6; font-weight: bold;");

    const thirdPartyByHost = new Map();
    thirdPartyScripts.forEach((s) => {
      try {
        const host = new URL(s.src).hostname;
        if (!thirdPartyByHost.has(host)) {
          thirdPartyByHost.set(host, { count: 0, size: 0, blocking: 0 });
        }
        const data = thirdPartyByHost.get(host);
        data.count++;
        data.size += s.size;
        if (s.isBlocking) data.blocking++;
      } catch {}
    });

    const hostTable = Array.from(thirdPartyByHost.entries())
      .sort((a, b) => b[1].size - a[1].size)
      .map(([host, data]) => ({
        Host: host,
        Scripts: data.count,
        Size: formatBytes(data.size),
        Blocking: data.blocking > 0 ? `⚠️ ${data.blocking}` : "0",
      }));

    console.table(hostTable);
    console.groupEnd();
  }

  // Best practices (defined here so firstPartyScripts/thirdPartyScripts are in scope for return)
  console.log("");
  console.group("%c📝 Best Practices", "color: #3b82f6; font-weight: bold;");
  console.log("");
  console.log("%cFor most scripts (need DOM, run in order):", "font-weight: bold;");
  console.log('%c<script src="app.js" defer></script>', "font-family: monospace; color: #22c55e;");
  console.log("");
  console.log("%cFor independent scripts (analytics, ads):", "font-weight: bold;");
  console.log('%c<script src="analytics.js" async></script>', "font-family: monospace; color: #22c55e;");
  console.log("");
  console.log("%cFor ES modules:", "font-weight: bold;");
  console.log('%c<script type="module" src="app.mjs"></script>', "font-family: monospace; color: #22c55e;");
  console.log("");
  console.log("%cFor critical inline scripts:", "font-weight: bold;");
  console.log('%c<script>/* Only essential initialization */</script>', "font-family: monospace; color: #22c55e;");
  console.groupEnd();

  console.groupEnd();

  const agentRating = blockingInHead.length === 0 ? "good" :
    (blockingInHead.length <= 2 && thirdPartyBlocking.length === 0) ? "needs-improvement" : "poor";
  return {
    script: "Script-Loading",
    status: "ok",
    count: scripts.length,
    rating: agentRating,
    details: {
      totalSizeBytes: totalSize,
      byStrategy: {
        blocking: blocking.length,
        async: asyncScripts.length,
        defer: deferScripts.length,
        module: moduleScripts.length,
      },
      byParty: {
        firstParty: firstPartyScripts.length,
        thirdParty: thirdPartyScripts.length,
      },
      thirdPartyBlockingCount: thirdPartyBlocking.length,
    },
    items: scripts.map((s) => ({
      url: s.src,
      shortName: s.shortSrc,
      strategy: s.strategy,
      location: s.inHead ? "head" : "body",
      party: s.firstParty ? "first" : "third",
      sizeBytes: s.size,
      durationMs: Math.round(s.duration),
    })),
    issues: issues.map((i) => ({ severity: i.severity, message: i.message })),
  };
})();
```

---

## Service Worker Analysis
URL: https://webperf-snippets.nucliweb.net/Loading/Service-Worker-Analysis

Analyzes the Service Worker lifecycle, cache behavior, and its performance impact on resource loading. Service Workers can dramatically improve performance through caching strategies, but misconfigured workers can introduce startup delays and degrade TTFB. What this snippet measures: - Service Worker registration state and active/waiting/installing workers - Navigation Preload status (reduces SW startup cost on navigation) - SW startup overhead on page load (impact on TTFB) - Resources intercepted by the SW vs. bypassed - Cache hit rate for SW-intercepted resources - Cache Storage inventory (caches and entry counts) SW impact on navigation timing: ```mermaid sequenceDiagram     participant B as Browser     participant SW as Service Worker     participant C as Cache Storage     participant N as Network     B->>SW: Navigation request     Note over SW: workerStart → fetchStart<br/>(SW startup overhead)     alt Cache hit         SW->>C: respondWith(caches.match())         C-->>SW: Cached response         SW-->>B: Response (transferSize = 0)         Note over B: Fast ✓ No network     else Cache miss         SW->>N: fetch(request)         N-->>SW: Network response         SW-->>B: Response (transferSize > 0)         Note over B: Network fallback     end ``` Navigation Preload reduces SW startup cost: ```mermaid sequenceDiagram     participant B as Browser     participant SW as Service Worker     participant N as Network     rect rgb(255, 235, 235)         Note over B,N: Without Navigation Preload         B->>SW: Start SW         Note over SW: Startup delay...         SW->>N: fetch(event.request)         N-->>B: Response     end     rect rgb(235, 255, 235)         Note over B,N: With Navigation Preload         B->>SW: Start SW         B->>N: Preload request (parallel!)         Note over SW: Startup runs in parallel         N-->>SW: Preloaded response         SW-->>B: Response (no extra delay)     end ```

```js
// Service Worker Analysis
// https://webperf-snippets.nucliweb.net

(async () => {
  if (!('serviceWorker' in navigator)) {
    console.log(
      '%c⚠️ Service Workers not supported in this browser',
      'color: #f59e0b; font-weight: bold;'
    );
    return;
  }

  const registrations = await navigator.serviceWorker.getRegistrations();
  const controller = navigator.serviceWorker.controller;
  const navEntry = performance.getEntriesByType('navigation')[0];
  const resources = performance.getEntriesByType('resource');

  // Resources intercepted by SW (workerStart > 0)
  const swResources = resources.filter((r) => r.workerStart > 0);
  const fromCache = swResources.filter((r) => r.transferSize === 0);
  const fromNetwork = swResources.filter((r) => r.transferSize > 0);
  const notIntercepted = resources.filter((r) => r.workerStart === 0);

  console.group(
    '%c⚙️ Service Worker Analysis',
    'font-weight: bold; font-size: 14px;'
  );

  // Registrations
  console.log('');
  console.log('%c📋 Registrations:', 'font-weight: bold;');

  if (registrations.length === 0) {
    console.log('%c   ❌ No Service Workers registered', 'color: #ef4444;');
    console.groupEnd();
    return;
  }

  for (const reg of registrations) {
    console.log('');
    console.log(`%c   Scope: ${reg.scope}`, 'font-family: monospace;');

    if (reg.active) {
      console.log(
        `%c   ✅ Active: ${reg.active.state}`,
        'color: #22c55e;'
      );
      console.log(`      Script: ${reg.active.scriptURL}`);
    }
    if (reg.waiting) {
      console.log(
        '%c   ⏳ Waiting SW detected — update pending',
        'color: #f59e0b;'
      );
      console.log(`      Script: ${reg.waiting.scriptURL}`);
      console.log(
        '      💡 Call skipWaiting() to activate the new version'
      );
    }
    if (reg.installing) {
      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
      }
    }
  }

  // Controller
  console.log('');
  console.log('%c🎮 Controller:', 'font-weight: bold;');
  if (controller) {
    console.log('%c   ✅ Page is controlled by SW', 'color: #22c55e;');
    console.log(`   State: ${controller.state}`);
  } else {
    console.log('%c   ⚠️ Page is NOT controlled by SW', 'color: #f59e0b;');
    console.log('   Hard reload detected or first visit. Do a normal reload.');
  }

  // SW Startup overhead
  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`);

    if (swOverhead > 100) {
      console.log(
        '%c   🔴 High SW startup time — enable Navigation Preload',
        'color: #ef4444;'
      );
    } else if (swOverhead > 50) {
      console.log(
        '%c   🟡 Moderate SW startup time',
        'color: #f59e0b;'
      );
    } else {
      console.log(
        '%c   🟢 SW startup overhead is low',
        'color: #22c55e;'
      );
    }
  }

  // Cache hit/miss ratio
  console.log('');
  console.log('%c📊 Resource Cache Analysis:', 'font-weight: bold;');
  console.log(`   Total resources:     ${resources.length}`);
  console.log(`   SW intercepted:      ${swResources.length}`);
  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`);

    const rate = parseFloat(hitRate);
    if (rate >= 80) {
      console.log('%c   🟢 Excellent cache hit rate', 'color: #22c55e;');
    } else if (rate >= 50) {
      console.log('%c   🟡 Good cache hit rate', 'color: #f59e0b;');
    } else {
      console.log(
        '%c   🔴 Low cache hit rate — review caching strategy',
        'color: #ef4444;'
      );
    }

    console.log('');
    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',
        'Transfer (KB)': r.transferSize > 0 ? (r.transferSize / 1024).toFixed(1) : '0',
        'Duration (ms)': r.duration.toFixed(0),
        'Type': r.initiatorType,
        'URL': r.name.length > 60 ? '...' + r.name.slice(-57) : r.name,
      }))
    );
  }

  // 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
    }
  }

  console.groupEnd();
})();
```

---

## Time To First Byte
URL: https://webperf-snippets.nucliweb.net/Loading/TTFB

Time to First Byte (TTFB) measures the time from when the user starts navigating to a page until the first byte of the HTML response is received. It's a critical metric that reflects server responsiveness and network latency. TTFB includes: - Redirect time - Service worker startup time (if applicable) - DNS lookup - TCP connection and TLS negotiation - Request time until the first byte of the response arrives Thresholds (according to web.dev):

```js
// Measure TTFB with threshold indicator
// https://webperf-snippets.nucliweb.net

(() => {
  new PerformanceObserver((entryList) => {
    const [pageNav] = entryList.getEntriesByType("navigation");
    const ttfb = pageNav.responseStart;

    let rating, color;
    if (ttfb <= 800) {
      rating = "Good";
      color = "#22c55e";
    } else if (ttfb <= 1800) {
      rating = "Needs Improvement";
      color = "#f59e0b";
    } else {
      rating = "Poor";
      color = "#ef4444";
    }

    console.log(
      `%cTTFB: ${ttfb.toFixed(0)}ms (${rating})`,
      `color: ${color}; font-weight: bold; font-size: 14px;`
    );
  }).observe({
    type: "navigation",
    buffered: true,
  });

  // Synchronous return for agent
  const [nav] = performance.getEntriesByType("navigation");
  if (!nav) return { script: "TTFB", status: "error", error: "No navigation entry" };
  const value = Math.round(nav.responseStart);
  const rating = value <= 800 ? "good" : value <= 1800 ? "needs-improvement" : "poor";
  return { script: "TTFB", status: "ok", metric: "TTFB", value, unit: "ms", rating,
    thresholds: { good: 800, needsImprovement: 1800 } };
})();
```

```js
// Measure TTFB sub-parts breakdown
// https://webperf-snippets.nucliweb.net

(() => {
  new PerformanceObserver((entryList) => {
    const [pageNav] = entryList.getEntriesByType("navigation");

    const activationStart = pageNav.activationStart || 0;
    const waitEnd = Math.max((pageNav.workerStart || pageNav.fetchStart) - activationStart, 0);
    const dnsStart = Math.max(pageNav.domainLookupStart - activationStart, 0);
    const tcpStart = Math.max(pageNav.connectStart - activationStart, 0);
    const sslStart = Math.max(pageNav.secureConnectionStart - activationStart, 0);
    const tcpEnd = Math.max(pageNav.connectEnd - activationStart, 0);
    const responseStart = Math.max(pageNav.responseStart - activationStart, 0);

    const formatMs = (ms) => ms.toFixed(2) + " ms";
    const formatBar = (ms, total) => {
      const pct = total > 0 ? (ms / total) * 100 : 0;
      const width = Math.round(pct / 5);
      return "█".repeat(width) + "░".repeat(20 - width) + ` ${pct.toFixed(1)}%`;
    };

    // Rating
    let rating, color;
    if (responseStart <= 800) {
      rating = "Good";
      color = "#22c55e";
    } else if (responseStart <= 1800) {
      rating = "Needs Improvement";
      color = "#f59e0b";
    } else {
      rating = "Poor";
      color = "#ef4444";
    }

    console.group(`%c⏱️ TTFB: ${responseStart.toFixed(0)}ms (${rating})`, `color: ${color}; font-weight: bold; font-size: 14px;`);

    // Sub-parts breakdown
    const subParts = [
      { name: "Redirect/Wait", duration: waitEnd, icon: "🔄" },
      { name: "Service Worker/Cache", duration: dnsStart - waitEnd, icon: "⚙️" },
      { name: "DNS Lookup", duration: tcpStart - dnsStart, icon: "🔍" },
      { name: "TCP Connection", duration: sslStart - tcpStart, icon: "🔌" },
      { name: "SSL/TLS", duration: tcpEnd - sslStart, icon: "🔒" },
      { name: "Server Response", duration: responseStart - tcpEnd, icon: "📥" },
    ];

    console.log("");
    console.log("%cBreakdown:", "font-weight: bold;");
    subParts.forEach(({ name, duration, icon }) => {
      if (duration > 0) {
        console.log(`${icon} ${name.padEnd(20)} ${formatMs(duration).padStart(10)}  ${formatBar(duration, responseStart)}`);
      }
    });

    console.log("");
    console.log(`%c${"─".repeat(60)}`, "color: #666;");
    console.log(`%c📊 Total TTFB${" ".repeat(15)} ${formatMs(responseStart).padStart(10)}`, "font-weight: bold;");

    // Recommendations based on longest phase
    const longestPhase = subParts.reduce((a, b) => (a.duration > b.duration ? a : b));
    if (longestPhase.duration > responseStart * 0.4 && responseStart > 800) {
      console.log("");
      console.log("%c💡 Recommendation:", "color: #3b82f6; font-weight: bold;");
      const tips = {
        "Redirect/Wait": "Minimize redirects. Use direct URLs where possible.",
        "Service Worker/Cache": "Optimize service worker. Consider cache-first strategies.",
        "DNS Lookup": "Use DNS prefetching. Consider a faster DNS provider.",
        "TCP Connection": "Enable HTTP/2 or HTTP/3. Use connection keep-alive.",
        "SSL/TLS": "Enable TLS 1.3. Use session resumption. Check certificate chain.",
        "Server Response": "Optimize server processing. Add caching. Check database queries.",
      };
      console.log(`   ${longestPhase.name} is ${((longestPhase.duration / responseStart) * 100).toFixed(0)}% of TTFB.`);
      console.log(`   ${tips[longestPhase.name]}`);
    }

    console.groupEnd();
  }).observe({
    type: "navigation",
    buffered: true,
  });

  // Synchronous return for agent
  const [navSync] = performance.getEntriesByType("navigation");
  if (!navSync) return { script: "TTFB-Sub-Parts", status: "error", error: "No navigation entry" };
  const activStartSync = navSync.activationStart || 0;
  const ttfbValueSync = Math.max(0, navSync.responseStart - activStartSync);
  const value = Math.round(ttfbValueSync);
  const rating = value <= 800 ? "good" : value <= 1800 ? "needs-improvement" : "poor";
  const waitEndSync = Math.max((navSync.workerStart || navSync.fetchStart) - activStartSync, 0);
  const dnsStartSync = Math.max(navSync.domainLookupStart - activStartSync, 0);
  const tcpStartSync = Math.max(navSync.connectStart - activStartSync, 0);
  const sslStartSync = Math.max(navSync.secureConnectionStart - activStartSync, 0);
  const tcpEndSync = Math.max(navSync.connectEnd - activStartSync, 0);
  const subPartsSync = [
    { key: "redirectWait", duration: waitEndSync },
    { key: "serviceWorkerCache", duration: dnsStartSync - waitEndSync },
    { key: "dnsLookup", duration: tcpStartSync - dnsStartSync },
    { key: "tcpConnection", duration: sslStartSync - tcpStartSync },
    { key: "sslTls", duration: tcpEndSync - sslStartSync },
    { key: "serverResponse", duration: ttfbValueSync - tcpEndSync },
  ];
  const slowestSync = subPartsSync.reduce((a, b) => a.duration > b.duration ? a : b);
  return {
    script: "TTFB-Sub-Parts",
    status: "ok",
    metric: "TTFB",
    value,
    unit: "ms",
    rating,
    thresholds: { good: 800, needsImprovement: 1800 },
    details: {
      subParts: Object.fromEntries(subPartsSync.map((p) => [p.key, { value: Math.round(p.duration), unit: "ms" }])),
      slowestPhase: slowestSync.key,
    },
  };
})();
```

```js
// Measure TTFB for all resources with sorting and summary
// https://webperf-snippets.nucliweb.net

(() => {
  new PerformanceObserver((entryList) => {
  const entries = entryList.getEntries();

  const resourcesData = entries
    .filter((entry) => entry.responseStart > 0)
    .map((entry) => {
      const url = new URL(entry.name);
      const isThirdParty = url.hostname !== location.hostname;

      return {
        ttfb: entry.responseStart,
        duration: entry.duration,
        type: entry.initiatorType,
        thirdParty: isThirdParty,
        resource: entry.name.length > 70 ? "..." + entry.name.slice(-67) : entry.name,
        fullUrl: entry.name,
      };
    })
    .sort((a, b) => b.ttfb - a.ttfb);

  if (resourcesData.length === 0) {
    console.log("%c⚠️ No resources with TTFB data available", "color: #f59e0b;");
    console.log("Resources may be cached or missing Timing-Allow-Origin header.");
    return;
  }

  // Summary statistics
  const ttfbValues = resourcesData.map((r) => r.ttfb);
  const avgTtfb = ttfbValues.reduce((a, b) => a + b, 0) / ttfbValues.length;
  const maxTtfb = Math.max(...ttfbValues);
  const minTtfb = Math.min(...ttfbValues);
  const thirdPartyCount = resourcesData.filter((r) => r.thirdParty).length;
  const slowResources = resourcesData.filter((r) => r.ttfb > 500).length;

  console.group(`%c📊 Resource TTFB Analysis (${resourcesData.length} resources)`, "font-weight: bold; font-size: 14px;");

  // Summary
  console.log("");
  console.log("%cSummary:", "font-weight: bold;");
  console.log(`   Average TTFB: ${avgTtfb.toFixed(0)}ms`);
  console.log(`   Fastest: ${minTtfb.toFixed(0)}ms | Slowest: ${maxTtfb.toFixed(0)}ms`);
  console.log(`   Third-party resources: ${thirdPartyCount}`);
  if (slowResources > 0) {
    console.log(`%c   ⚠️ Slow resources (>500ms): ${slowResources}`, "color: #f59e0b;");
  }

  // Table (sorted by TTFB, slowest first)
  console.log("");
  console.log("%cResources (sorted by TTFB, slowest first):", "font-weight: bold;");
  const tableData = resourcesData.slice(0, 25).map((resource) => ({
    "TTFB (ms)": resource.ttfb.toFixed(0),
    "Duration (ms)": resource.duration.toFixed(0),
    Type: resource.type,
    "3rd Party": resource.thirdParty ? "Yes" : "",
    Resource: resource.resource,
  }));
  console.table(tableData);

  if (resourcesData.length > 25) {
    console.log(`... and ${resourcesData.length - 25} more resources`);
  }

  // Slowest resources highlight
  const slowest = resourcesData.slice(0, 5);
  if (slowest[0].ttfb > 500) {
    console.log("");
    console.log("%c🐌 Slowest resources:", "color: #ef4444; font-weight: bold;");
    slowest.forEach((r, i) => {
      const marker = r.thirdParty ? " [3rd party]" : "";
      console.log(`   ${i + 1}. ${r.ttfb.toFixed(0)}ms - ${r.type}${marker}: ${r.resource}`);
    });
  }

  console.groupEnd();
  }).observe({
    type: "resource",
    buffered: true,
  });

  // Synchronous return for agent
  const resourcesSync = performance.getEntriesByType("resource")
    .filter((entry) => entry.responseStart > 0)
    .map((entry) => {
      const url = new URL(entry.name);
      return {
        url: entry.name,
        ttfbMs: Math.round(entry.responseStart),
        durationMs: Math.round(entry.duration),
        type: entry.initiatorType,
        isThirdParty: url.hostname !== location.hostname,
      };
    })
    .sort((a, b) => b.ttfbMs - a.ttfbMs);
  if (resourcesSync.length === 0) {
    return { script: "TTFB-Resources", status: "error", error: "No resources with TTFB data available" };
  }
  const ttfbVals = resourcesSync.map((r) => r.ttfbMs);
  return {
    script: "TTFB-Resources",
    status: "ok",
    count: resourcesSync.length,
    details: {
      avgTtfbMs: Math.round(ttfbVals.reduce((a, b) => a + b, 0) / ttfbVals.length),
      maxTtfbMs: Math.max(...ttfbVals),
      minTtfbMs: Math.min(...ttfbVals),
      thirdPartyCount: resourcesSync.filter((r) => r.isThirdParty).length,
      slowCount: resourcesSync.filter((r) => r.ttfbMs > 500).length,
    },
    items: resourcesSync,
  };
})();
```

---

## Validate Preload on Async/Defer Scripts
URL: https://webperf-snippets.nucliweb.net/Loading/Validate-Preload-Async-Defer-Scripts

Detects preload resource hints for scripts that use `async` or `defer` attributes. This is an anti-pattern that wastes bandwidth and can hurt performance by artificially elevating the priority of resources that should load at lower priority. Why this matters:

```js
// Validate Preload on Async/Defer Scripts
// https://webperf-snippets.nucliweb.net

(() => {
  // Get all preloaded scripts
  const preloadedScripts = Array.from(
    document.querySelectorAll('link[rel="preload"][as="script"]'),
  );

  if (preloadedScripts.length === 0) {
    console.log(
      '%c✅ No script preloads found (rel="preload" as="script").',
      "color: #22c55e; font-weight: bold;",
    );
    console.log(
      "%cℹ️ This is fine - only preload scripts if they're critical and blocking.",
      "color: #3b82f6;",
    );
    return { script: "Validate-Preload-Async-Defer-Scripts", status: "ok", count: 0, items: [], issues: [] };
  }

  // Get performance entries for scripts
  const performanceScripts = performance
    .getEntriesByType("resource")
    .filter((r) => r.initiatorType === "script" || r.initiatorType === "link");

  // Find corresponding script elements for each preload
  const issues = [];
  const validPreloads = [];
  const allScripts = Array.from(document.querySelectorAll("script[src]"));

  preloadedScripts.forEach((preload) => {
    const preloadHref = preload.href;
    const preloadUrl = new URL(preloadHref, location.origin).href;

    // Find matching script element
    const matchingScript = allScripts.find((script) => {
      try {
        const scriptUrl = new URL(script.src, location.origin).href;
        return scriptUrl === preloadUrl;
      } catch {
        return false;
      }
    });

    const shortUrl = preloadHref.split("/").pop()?.split("?")[0] || preloadHref;

    if (!matchingScript) {
      // Check if script was loaded via Performance API (dynamic import, etc.)
      const wasLoaded = performanceScripts.some((entry) => {
        try {
          // First try exact URL match
          if (entry.name === preloadUrl) return true;

          // For relative/partial matches, compare pathnames to reduce false positives
          const entryUrl = new URL(entry.name, location.origin);
          const preloadUrlObj = new URL(preloadUrl, location.origin);

          // Match if pathnames end with the same file (more precise than includes)
          return entryUrl.pathname.endsWith(preloadUrlObj.pathname);
        } catch {
          return false;
        }
      });

      if (wasLoaded) {
        // Script was loaded dynamically (import(), injected, etc.) - this is actually OK
        validPreloads.push({
          type: "dynamic",
          preload,
          url: preloadHref,
          shortUrl,
          note: "Dynamic script (not in DOM, but loaded)",
        });
      } else {
        // Preload without matching script and not loaded - likely unused
        issues.push({
          type: "orphan",
          severity: "warning",
          preload,
          url: preloadHref,
          shortUrl,
          message: "Preloaded script not found or loaded",
          explanation: "This preload appears unused - script not in DOM and not in Performance API",
          fix: "Verify the script is needed, or remove the preload",
        });
      }
    } else {
      const isAsync = matchingScript.async;
      const isDefer = matchingScript.defer;
      const isModule = matchingScript.type === "module";
      const inHead = matchingScript.closest("head") !== null;
      const scriptLocation = inHead ? "head" : "body";
      const fetchPriority = matchingScript.getAttribute("fetchpriority");

      // Determine natural priority
      let naturalPriority = "Medium/High";

      if (isAsync) {
        naturalPriority = "Lowest/Low";
      } else if (isDefer) {
        naturalPriority = "Lowest/Low";
      } else if (inHead) {
        naturalPriority = "Medium/High";
      }

      // Check for anti-pattern: preload + async/defer
      if (isAsync || isDefer) {
        const attributes = [];
        if (isAsync) attributes.push("async");
        if (isDefer) attributes.push("defer");
        if (isModule) attributes.push("type='module'");

        // Check if fetchpriority="low" is used to mitigate the issue
        const hasMitigation = fetchPriority === "low";

        if (hasMitigation) {
          // Valid: preload with async/defer but fetchpriority="low" mitigates the issue
          validPreloads.push({
            type: "mitigated",
            preload,
            script: matchingScript,
            url: preloadHref,
            shortUrl,
            location: scriptLocation,
            attributes: attributes.join(" + ") + " + fetchpriority='low'",
            naturalPriority,
            note: "Early discovery with low priority - acceptable pattern",
          });
        } else {
          issues.push({
            type: "async-defer-preload",
            severity: "error",
            preload,
            script: matchingScript,
            url: preloadHref,
            shortUrl,
            attributes: attributes.join(" + "),
            location: scriptLocation,
            naturalPriority,
            preloadPriority: "Medium/High",
            fetchPriority: fetchPriority || "not set",
            message: `Script has ${attributes.join("/")} but is also preloaded`,
            explanation: `${attributes.join("/")} scripts load at ${naturalPriority} priority. Preloading escalates them to Medium/High, causing bandwidth competition with critical resources.`,
            fix: `Remove the preload, OR add fetchpriority="low" to the <script> tag to keep early discovery without priority escalation`,
          });
        }
      } else if (isModule) {
        // ES modules without async/defer behave like defer by default
        issues.push({
          type: "module-preload",
          severity: "warning",
          preload,
          script: matchingScript,
          url: preloadHref,
          shortUrl,
          attributes: "type='module'",
          location: scriptLocation,
          naturalPriority: "Lowest/Low (module default)",
          preloadPriority: "Medium/High",
          message: "ES module is using rel='preload' instead of rel='modulepreload'",
          explanation:
            "ES modules behave like defer scripts by default (low priority). Using rel='preload' as='script' escalates priority unnecessarily. For modules, use rel='modulepreload' instead.",
          fix: "Change <link rel='preload' as='script'> to <link rel='modulepreload'> for proper module preloading",
        });
      } else {
        // Valid preload (blocking script) - but check if it's really needed
        const needsReview = !inHead; // Blocking scripts at end of body rarely need preload

        validPreloads.push({
          preload,
          script: matchingScript,
          url: preloadHref,
          shortUrl,
          location: scriptLocation,
          naturalPriority,
          needsReview,
          reviewNote: needsReview ? "Consider using 'defer' instead" : "Valid for critical scripts",
        });
      }
    }
  });

  // Display results
  console.group(
    "%c🔍 Preload + Async/Defer Script Validation",
    "font-weight: bold; font-size: 14px;",
  );

  console.log("");
  console.log("%cSummary:", "font-weight: bold;");
  console.log(`   Total preloaded scripts: ${preloadedScripts.length}`);
  console.log(`   Valid preloads (blocking scripts): ${validPreloads.length}`);
  console.log(`   Issues found: ${issues.length}`);

  // Show issues
  const errors = issues.filter((i) => i.severity === "error");
  const warnings = issues.filter((i) => i.severity === "warning");

  if (errors.length > 0) {
    console.log("");
    console.group(
      `%c⚠️ Anti-patterns Found (${errors.length})`,
      "color: #ef4444; font-weight: bold;",
    );

    const errorTable = errors
      .filter((e) => e.type === "async-defer-preload")
      .map((issue) => ({
        Script: issue.shortUrl,
        Location: issue.location,
        Attributes: issue.attributes,
        "Natural Priority": issue.naturalPriority,
        "Preload Priority": "⚠️ Medium/High",
        Issue: "❌ Priority escalation",
      }));

    if (errorTable.length > 0) {
      console.table(errorTable);
    }

    console.log("");
    console.log("%c🔴 Detailed Issues:", "font-weight: bold; color: #ef4444;");
    errors
      .filter((e) => e.type === "async-defer-preload")
      .forEach((issue, i) => {
        console.log("");
        console.log(`%c${i + 1}. ${issue.message}`, "font-weight: bold;");
        console.log(`   URL: ${issue.url}`);
        console.log(`   Problem: ${issue.explanation}`);
        console.log(`   Fix: ${issue.fix}`);
        console.log("");
        console.log("   Elements:");
        console.log("   Preload:", issue.preload);
        console.log("   Script:", issue.script);
      });

    console.groupEnd();
  }

  if (warnings.length > 0) {
    console.log("");
    console.group(`%c💡 Warnings (${warnings.length})`, "color: #f59e0b; font-weight: bold;");

    warnings.forEach((issue) => {
      console.log("");
      console.log(`%c${issue.message}`, "font-weight: bold;");
      console.log(`   URL: ${issue.url}`);
      console.log(`   ${issue.fix}`);
    });

    console.groupEnd();
  }

  // Show valid preloads
  if (validPreloads.length > 0) {
    console.log("");
    console.group(
      `%c✅ Valid Preloads (${validPreloads.length})`,
      "color: #22c55e; font-weight: bold;",
    );

    const blockingScripts = validPreloads.filter((v) => v.type !== "dynamic");
    const dynamicScripts = validPreloads.filter((v) => v.type === "dynamic");

    if (blockingScripts.length > 0) {
      console.log("Blocking scripts that may benefit from preload:");
      console.log("");

      const validTable = blockingScripts.map((v) => ({
        Script: v.shortUrl,
        Location: v.location,
        Priority: v.naturalPriority,
        Status: v.needsReview ? "⚠️ Review needed" : "✅ Valid",
        Note: v.reviewNote,
      }));

      console.table(validTable);

      if (blockingScripts.some((v) => v.needsReview)) {
        console.log("");
        console.log(
          "%c💡 Tip: Blocking scripts at end of <body> rarely need preload.",
          "color: #f59e0b;",
        );
        console.log("   Consider using 'defer' instead for better performance.");
      }
    }

    if (dynamicScripts.length > 0) {
      console.log("");
      console.log(
        `%c📦 Dynamic Scripts (${dynamicScripts.length})`,
        "font-weight: bold; color: #3b82f6;",
      );
      console.log("These scripts are loaded dynamically (import(), code splitting, etc.):");
      console.log("");

      const dynamicTable = dynamicScripts.map((v) => ({
        Script: v.shortUrl,
        Type: "Dynamic/Code-split",
        Status: "✅ OK",
        Note: v.note,
      }));

      console.table(dynamicTable);

      console.log("");
      console.log(
        "%c💡 Info: Dynamic scripts don't appear in the DOM but are loaded by other scripts.",
        "color: #3b82f6;",
      );
      console.log("   This is normal for code-splitting, dynamic imports, or lazy-loaded modules.");
    }

    console.groupEnd();
  }

  // Recommendations
  console.log("");
  console.group("%c📝 Best Practices", "color: #3b82f6; font-weight: bold;");
  console.log("");
  console.log("%c❌ DON'T preload async/defer scripts:", "font-weight: bold;");
  console.log("   Bad pattern:");
  console.log(
    '%c   <link rel="preload" href="analytics.js" as="script">',
    "font-family: monospace; color: #ef4444;",
  );
  console.log(
    '%c   <script src="analytics.js" async></script>',
    "font-family: monospace; color: #ef4444;",
  );
  console.log("");
  console.log("%c✅ DO let async scripts load naturally:", "font-weight: bold;");
  console.log("   Good pattern:");
  console.log(
    '%c   <script src="analytics.js" async></script>',
    "font-family: monospace; color: #22c55e;",
  );
  console.log("");
  console.log("%c✅ DO preload ONLY critical blocking scripts:", "font-weight: bold;");
  console.log("   When script is needed early and blocks parsing:");
  console.log(
    '%c   <link rel="preload" href="critical.js" as="script">',
    "font-family: monospace; color: #22c55e;",
  );
  console.log(
    '%c   <script src="critical.js"></script>',
    "font-family: monospace; color: #22c55e;",
  );
  console.log("");
  console.log("%cResource priority order:", "font-weight: bold;");
  console.log("   1. Critical CSS (for LCP)");
  console.log("   2. Critical fonts (with crossorigin)");
  console.log("   3. LCP images (fetchpriority='high')");
  console.log("   4. Critical blocking scripts (rare)");
  console.log("   5. Everything else (no preload needed)");
  console.groupEnd();

  // Summary
  if (errors.length === 0 && warnings.length === 0) {
    console.log("");
    console.log(
      "%c✅ Great! No anti-patterns detected.",
      "color: #22c55e; font-weight: bold; font-size: 14px;",
    );
    console.log(
      '%cAll script preloads are either on blocking scripts or properly mitigated with fetchpriority="low".',
      "color: #22c55e;",
    );
  } else {
    console.log("");
    console.log(
      `%c⚠️ Found ${errors.length} error(s) and ${warnings.length} warning(s). Review recommendations above.`,
      "color: #ef4444; font-weight: bold;",
    );
  }

  console.groupEnd();

  return {
    script: "Validate-Preload-Async-Defer-Scripts",
    status: "ok",
    count: preloadedScripts.length,
    details: {
      validCount: validPreloads.length,
      issueCount: issues.length,
    },
    items: preloadedScripts.map(p => ({
      url: p.href.split("/").pop()?.split("?")[0] || p.href,
    })),
    issues: issues.map(i => ({ severity: i.severity, message: i.message })),
  };
})();
```

---

# Interaction

## Forced Synchronous Layout Detector
URL: https://webperf-snippets.nucliweb.net/Interaction/Forced-Synchronous-Layout

Detects the Forced Synchronous Layout (FSL) pattern at runtime — when JavaScript reads geometric properties from the DOM immediately after mutating styles, forcing the browser to perform layout synchronously on the main thread. Why this matters: Normally the browser batches style recalculations and layout at the end of each frame. FSL breaks this contract: reading a geometric property after a style mutation forces the browser to flush pending style changes and recalculate layout _right now_, before the current task finishes. This blocks the main thread and contributes directly to long tasks, poor INP, and jank. A typical FSL pattern: ```js container.classList.toggle('state-a'); // invalidates styles container.scrollTop = 0;              // forces layout synchronously → FSL ``` The fix — double rAF: ```js container.classList.toggle('state-a'); requestAnimationFrame(() => {         // 1st rAF: browser processes styles   requestAnimationFrame(() => {       // 2nd rAF: layout tree is clean     container.scrollTop = 0;          // no FSL   }); }); ``` Step through the render pipeline to see _why_ the double `requestAnimationFrame` avoids the forced layout:

```js
// Forced Synchronous Layout Detector
// https://webperf-snippets.nucliweb.net

(() => {
  let isDirty = false;
  let lastMutationTime = 0;
  let rafPending = false;
  const fslEvents = [];
  const restorations = [];

  const getElementDesc = (el) => {
    let desc = el.tagName.toLowerCase();
    if (el.id) desc += `#${el.id}`;
    if (el.className && typeof el.className === "string" && el.className.trim()) {
      desc += `.${el.className.trim().split(/\s+/).join(".")}`;
    }
    return desc;
  };

  const markDirty = () => {
    isDirty = true;
    lastMutationTime = performance.now();
    if (rafPending) return;
    rafPending = true;
    requestAnimationFrame(() => {
      isDirty = false;
      rafPending = false;
    });
  };

  // ─── SYNCHRONOUS MUTATION INTERCEPTION ──────────────────────────────────────
  // MutationObserver fires asynchronously (microtask after the stack clears),
  // so it cannot set isDirty before a geometric read in the same synchronous
  // block. We intercept the DOM mutation APIs directly instead.

  // classList: add / remove / toggle / replace
  const domTokenListProto = DOMTokenList.prototype;
  ["add", "remove", "toggle", "replace"].forEach((method) => {
    const orig = domTokenListProto[method];
    domTokenListProto[method] = function (...args) {
      markDirty();
      return orig.apply(this, args);
    };
    restorations.push(() => (domTokenListProto[method] = orig));
  });

  // element.setAttribute('class', ...) / element.setAttribute('style', ...)
  const origSetAttribute = Element.prototype.setAttribute;
  Element.prototype.setAttribute = function (name, value) {
    if (name === "class" || name === "style") markDirty();
    return origSetAttribute.call(this, name, value);
  };
  restorations.push(
    () => (Element.prototype.setAttribute = origSetAttribute)
  );

  // element.style.setProperty(...) and element.style.cssText = ...
  const cssStyleDeclarationProto = CSSStyleDeclaration.prototype;
  const origSetProperty = cssStyleDeclarationProto.setProperty;
  cssStyleDeclarationProto.setProperty = function (...args) {
    markDirty();
    return origSetProperty.apply(this, args);
  };
  restorations.push(
    () => (cssStyleDeclarationProto.setProperty = origSetProperty)
  );

  const cssTextDescriptor = Object.getOwnPropertyDescriptor(
    cssStyleDeclarationProto,
    "cssText"
  );
  if (cssTextDescriptor?.set) {
    Object.defineProperty(cssStyleDeclarationProto, "cssText", {
      ...cssTextDescriptor,
      set(value) {
        markDirty();
        cssTextDescriptor.set.call(this, value);
      },
    });
    restorations.push(() =>
      Object.defineProperty(cssStyleDeclarationProto, "cssText", cssTextDescriptor)
    );
  }

  // ─── GEOMETRIC PROPERTY INTERCEPTION ────────────────────────────────────────

  const warnFSL = (propName, accessType, el) => {
    if (!isDirty) return;
    const elapsed = (performance.now() - lastMutationTime).toFixed(2);
    const elDesc = el instanceof Element ? getElementDesc(el) : "unknown";
    const stack = new Error().stack;

    fslEvents.push({
      property: propName,
      accessType,
      element: elDesc,
      sinceLastMutationMs: parseFloat(elapsed),
      stack,
    });

    console.warn(
      `⚠️ [FSL Detector] Forced Synchronous Layout detected!\n` +
        `   Property  : ${propName} (${accessType})\n` +
        `   Element   : ${elDesc}\n` +
        `   Since last mutation: ${elapsed} ms\n` +
        `   Stack trace:\n${stack}`
    );
  };

  const interceptProp = (proto, propName, accessType) => {
    const descriptor = Object.getOwnPropertyDescriptor(proto, propName);
    if (!descriptor) return;

    const { get: origGet, set: origSet } = descriptor;
    const newDescriptor = { configurable: true, enumerable: descriptor.enumerable };

    if (origGet) {
      newDescriptor.get = function () {
        if (accessType === "read" || accessType === "readwrite") {
          warnFSL(propName, "read", this);
        }
        return origGet.call(this);
      };
    }

    if (origSet) {
      newDescriptor.set = function (value) {
        if (accessType === "write" || accessType === "readwrite") {
          warnFSL(propName, "write", this);
        }
        origSet.call(this, value);
      };
    }

    Object.defineProperty(proto, propName, newDescriptor);
    restorations.push(() => Object.defineProperty(proto, propName, descriptor));
  };

  // Element.prototype: client* and scroll*
  const elementReadProps = [
    "clientTop", "clientLeft", "clientWidth", "clientHeight",
    "scrollWidth", "scrollHeight",
  ];
  const elementReadWriteProps = ["scrollTop", "scrollLeft"];

  elementReadProps.forEach((p) => interceptProp(Element.prototype, p, "read"));
  elementReadWriteProps.forEach((p) => interceptProp(Element.prototype, p, "readwrite"));

  // HTMLElement.prototype: offset*
  const htmlElementReadProps = [
    "offsetTop", "offsetLeft", "offsetWidth", "offsetHeight",
  ];
  htmlElementReadProps.forEach((p) => interceptProp(HTMLElement.prototype, p, "read"));

  // getBoundingClientRect
  const origGetBCR = Element.prototype.getBoundingClientRect;
  const getBCRDescriptor = Object.getOwnPropertyDescriptor(
    Element.prototype,
    "getBoundingClientRect"
  );
  Element.prototype.getBoundingClientRect = function () {
    warnFSL("getBoundingClientRect()", "read", this);
    return origGetBCR.call(this);
  };
  restorations.push(() =>
    Object.defineProperty(Element.prototype, "getBoundingClientRect", getBCRDescriptor)
  );

  // ─── SUMMARY ─────────────────────────────────────────────────────────────────

  window.getFSLSummary = () => {
    console.group("%c📊 FSL Detector Summary", "font-weight: bold; font-size: 14px;");

    if (fslEvents.length === 0) {
      console.log("   No forced synchronous layouts detected.");
      console.log("   ✅ The page is not triggering FSL patterns.");
      console.groupEnd();
      return {
        script: "Forced-Synchronous-Layout",
        status: "ok",
        count: 0,
        details: { fslEvents: [] },
      };
    }

    const byProperty = fslEvents.reduce((acc, e) => {
      acc[e.property] = (acc[e.property] || 0) + 1;
      return acc;
    }, {});

    const byElement = fslEvents.reduce((acc, e) => {
      acc[e.element] = (acc[e.element] || 0) + 1;
      return acc;
    }, {});

    console.log("");
    console.log("%cStatistics:", "font-weight: bold;");
    console.log(`   Total FSL events: ${fslEvents.length}`);
    console.log(
      `   Fastest since mutation: ${Math.min(...fslEvents.map((e) => e.sinceLastMutationMs)).toFixed(2)} ms`
    );

    console.log("");
    console.log("%cBy Property:", "font-weight: bold;");
    console.table(
      Object.entries(byProperty)
        .sort((a, b) => b[1] - a[1])
        .map(([property, count]) => ({ Property: property, Count: count }))
    );

    console.log("");
    console.log("%cBy Element:", "font-weight: bold;");
    console.table(
      Object.entries(byElement)
        .sort((a, b) => b[1] - a[1])
        .map(([element, count]) => ({ Element: element, Count: count }))
    );

    console.log("");
    console.log("%c💡 Fix:", "font-weight: bold; color: #3b82f6;");
    console.log("   Wrap geometric reads/writes in a double requestAnimationFrame:");
    console.log("   requestAnimationFrame(() => requestAnimationFrame(() => {");
    console.log("     element.scrollTop = 0; // or any layout-triggering access");
    console.log("   }));");

    console.groupEnd();

    return {
      script: "Forced-Synchronous-Layout",
      status: "ok",
      count: fslEvents.length,
      details: {
        byProperty,
        byElement,
        fastestSinceLastMutationMs: Math.min(
          ...fslEvents.map((e) => e.sinceLastMutationMs)
        ),
        fslEvents: fslEvents.map(({ property, accessType, element, sinceLastMutationMs }) => ({
          property,
          accessType,
          element,
          sinceLastMutationMs,
        })),
      },
    };
  };

  window.stopFSLDetector = () => {
    restorations.forEach((restore) => restore());
    restorations.length = 0;
    console.log(
      `%c🛑 FSL Detector stopped. Total FSL events detected: ${fslEvents.length}`,
      "font-weight: bold;"
    );
    delete window.getFSLSummary;
    delete window.stopFSLDetector;
  };

  console.log("%c⚡ FSL Detector Active", "font-weight: bold; font-size: 14px;");
  console.log("   Monitoring class/style mutations and geometric property access.");
  console.log(
    "   Call %cgetFSLSummary()%c for the report or %cstopFSLDetector()%c to stop.",
    "font-family: monospace; background: #f3f4f6; padding: 2px 4px;",
    "",
    "font-family: monospace; background: #f3f4f6; padding: 2px 4px;",
    ""
  );

  return {
    script: "Forced-Synchronous-Layout",
    status: "tracking",
    count: 0,
    details: {
      interceptedProperties: [
        ...elementReadProps,
        ...elementReadWriteProps,
        ...htmlElementReadProps,
        "getBoundingClientRect()",
      ],
    },
    message:
      "FSL Detector active. Reproduce the interaction then call getFSLSummary() to inspect results.",
    getDataFn: "getFSLSummary",
    stopFn: "stopFSLDetector",
  };
})();
```

---

## Input Latency Breakdown
URL: https://webperf-snippets.nucliweb.net/Interaction/Input-Latency-Breakdown

Aggregates interaction latency by event type to reveal which phase causes slowness across all interactions with the page. While Interactions shows a per-interaction breakdown in real time, this snippet collects data over time and answers a different question: is click systematically slower than keypress? Is the bottleneck always input delay, or does it vary by event? Why this matters: INP measures the worst interaction, but understanding the pattern across many interactions is more actionable. A click with high input delay has a different fix than a keypress with slow processing time. Grouping by event type surfaces systematic problems instead of outliers. The three phases of every interaction:

```js
// Input Latency Breakdown
// https://webperf-snippets.nucliweb.net

(() => {
  const formatMs = (ms) => `${Math.round(ms)}ms`;

  const valueToRating = (score) =>
    score <= 200 ? "good" : score <= 500 ? "needs-improvement" : "poor";

  const RATING_COLORS = {
    good: "#0CCE6A",
    "needs-improvement": "#FFA400",
    poor: "#FF4E42",
  };

  const RATING_ICONS = {
    good: "🟢",
    "needs-improvement": "🟡",
    poor: "🔴",
  };

  // Interactions grouped by event type
  const byEventType = {};

  const observer = new PerformanceObserver((list) => {
    // Group entries by interactionId; keep the longest entry per interaction
    const interactions = {};

    for (const entry of list.getEntries().filter((e) => e.interactionId)) {
      interactions[entry.interactionId] =
        interactions[entry.interactionId] || [];
      interactions[entry.interactionId].push(entry);
    }

    for (const group of Object.values(interactions)) {
      const entry = group.reduce((prev, curr) =>
        prev.duration >= curr.duration ? prev : curr
      );

      const eventType = entry.name; // "click", "keydown", "pointerdown", etc.
      const inputDelay = entry.processingStart - entry.startTime;
      const processingTime = entry.processingEnd - entry.processingStart;
      const presentationDelay = Math.max(
        4,
        entry.startTime + entry.duration - entry.processingEnd
      );

      if (!byEventType[eventType]) {
        byEventType[eventType] = {
          count: 0,
          durations: [],
          inputDelays: [],
          processingTimes: [],
          presentationDelays: [],
        };
      }

      const bucket = byEventType[eventType];
      bucket.count++;
      bucket.durations.push(entry.duration);
      bucket.inputDelays.push(inputDelay);
      bucket.processingTimes.push(processingTime);
      bucket.presentationDelays.push(presentationDelay);
    }
  });

  observer.observe({ type: "event", durationThreshold: 0, buffered: true });

  const p75 = (arr) => {
    const sorted = [...arr].sort((a, b) => a - b);
    return (
      sorted[Math.floor(sorted.length * 0.75)] ?? sorted[sorted.length - 1]
    );
  };

  window.getInputLatencyBreakdown = () => {
    const types = Object.keys(byEventType);

    if (types.length === 0) {
      console.log("%c⌨️ No interactions recorded yet.", "font-weight: bold;");
      console.log(
        "   Interact with the page (click, type, etc.) and call this again."
      );
      return;
    }

    console.group(
      "%c⌨️ Input Latency Breakdown by Event Type",
      "font-weight: bold; font-size: 14px;"
    );

    for (const eventType of types.sort()) {
      const b = byEventType[eventType];

      const p75Total = p75(b.durations);
      const p75InputDelay = p75(b.inputDelays);
      const p75Processing = p75(b.processingTimes);
      const p75Presentation = p75(b.presentationDelays);
      const p75Sum = p75InputDelay + p75Processing + p75Presentation;

      const phases = [
        { name: "Input Delay", value: p75InputDelay },
        { name: "Processing", value: p75Processing },
        { name: "Presentation", value: p75Presentation },
      ];
      const bottleneck = phases.reduce((a, b) => (a.value > b.value ? a : b));

      const rating = valueToRating(p75Total);
      const icon = RATING_ICONS[rating];
      const color = RATING_COLORS[rating];

      console.log(
        `%c${icon} ${eventType}%c (${b.count} interaction${b.count > 1 ? "s" : ""})  P75: ${formatMs(p75Total)}   Input Delay: ${formatMs(p75InputDelay)}  Processing: ${formatMs(p75Processing)}  Presentation: ${formatMs(p75Presentation)}`,
        `font-weight: bold; color: ${color};`,
        "color: inherit;"
      );

      // Visual distribution bar based on P75 phase values
      const barWidth = 36;
      const inputBar = "█".repeat(
        Math.max(1, Math.round((p75InputDelay / p75Sum) * barWidth))
      );
      const procBar = "▓".repeat(
        Math.max(1, Math.round((p75Processing / p75Sum) * barWidth))
      );
      const presBar = "░".repeat(
        Math.max(1, Math.round((p75Presentation / p75Sum) * barWidth))
      );
      console.log(`   ${inputBar}${procBar}${presBar}`);
      console.log(
        `   █ Input Delay (${((p75InputDelay / p75Sum) * 100).toFixed(0)}%)  ` +
          `▓ Processing (${((p75Processing / p75Sum) * 100).toFixed(0)}%)  ` +
          `░ Presentation (${((p75Presentation / p75Sum) * 100).toFixed(0)}%)`
      );

      if (rating !== "good") {
        console.log(
          `   ⚠️ Bottleneck: ${bottleneck.name} — `,
          bottleneck.name === "Input Delay"
            ? "break up long tasks blocking the main thread (scheduler.yield(), setTimeout)"
            : bottleneck.name === "Processing"
            ? "optimize event handlers or consider debouncing"
            : "reduce DOM changes or avoid layout thrashing after the handler"
        );
      }

      console.log("");
    }

    // Highlight the event type with the highest P75
    const worstType = types.reduce((a, b) =>
      p75(byEventType[a].durations) >= p75(byEventType[b].durations) ? a : b
    );
    const worstP75 = p75(byEventType[worstType].durations);

    if (valueToRating(worstP75) !== "good") {
      console.log(
        `%c🎯 Highest latency: ${worstType} (P75: ${formatMs(worstP75)})`,
        "font-weight: bold; color: #ef4444;"
      );
    }

    const typeSummary = {};
    for (const [type, b] of Object.entries(byEventType)) {
      typeSummary[type] = {
        count: b.count,
        p75Ms: Math.round(p75(b.durations)),
        inputDelayMs: Math.round(p75(b.inputDelays)),
        processingMs: Math.round(p75(b.processingTimes)),
        presentationMs: Math.round(p75(b.presentationDelays)),
      };
    }
    console.groupEnd();
    return {
      script: "Input-Latency-Breakdown",
      status: "ok",
      count: types.length,
      details: { eventTypes: typeSummary },
    };
  };

  console.log(
    "%c⌨️ Input Latency Breakdown Active",
    "font-weight: bold; font-size: 14px;"
  );
  console.log("   Interact with the page (click, type, etc.).");
  console.log(
    "   Call %cgetInputLatencyBreakdown()%c for the aggregated report.",
    "font-family: monospace; background: #f3f4f6; padding: 2px 4px;",
    ""
  );

  return {
    script: "Input-Latency-Breakdown",
    status: "tracking",
    message: "Tracking input latency by event type. Interact with the page then call getInputLatencyBreakdown().",
    getDataFn: "getInputLatencyBreakdown",
  };
})();
```

---

## Interactions
URL: https://webperf-snippets.nucliweb.net/Interaction/Interactions

Tracks all user interactions in real-time to help debug and improve Interaction to Next Paint (INP). INP measures responsiveness by tracking the latency of all interactions during a page visit. This snippet breaks down each interaction into three phases to identify bottlenecks. Based on the Web Vitals Chrome Extension. Why this matters: INP is a Core Web Vital that directly affects user experience. Slow interactions make your site feel sluggish and frustrating. By identifying which phase causes delays (input delay, processing, or presentation), you can apply targeted optimizations to make your site feel more responsive. INP Rating Thresholds:

```js
// Interaction Tracking
// https://webperf-snippets.nucliweb.net

(() => {
  const formatMs = (ms) => `${Math.round(ms)}ms`;

  // INP thresholds
  const valueToRating = (score) =>
    score <= 200 ? "good" : score <= 500 ? "needs-improvement" : "poor";

  const RATING_COLORS = {
    good: "#0CCE6A",
    "needs-improvement": "#FFA400",
    poor: "#FF4E42",
  };

  const RATING_ICONS = {
    good: "🟢",
    "needs-improvement": "🟡",
    poor: "🔴",
  };

  // Track all interactions for summary
  const allInteractions = [];

  const observer = new PerformanceObserver((list) => {
    const interactions = {};

    for (const entry of list
      .getEntries()
      .filter((entry) => entry.interactionId)) {
      interactions[entry.interactionId] = interactions[entry.interactionId] || [];
      interactions[entry.interactionId].push(entry);
    }

    for (const interaction of Object.values(interactions)) {
      const entry = interaction.reduce((prev, curr) =>
        prev.duration >= curr.duration ? prev : curr
      );

      const value = entry.duration;
      const rating = valueToRating(value);
      const icon = RATING_ICONS[rating];
      const color = RATING_COLORS[rating];

      // Store for summary
      allInteractions.push({
        duration: value,
        rating,
        target: entry.target,
        type: entry.name,
      });

      // Calculate sub-parts
      const inputDelay = entry.processingStart - entry.startTime;
      const processingTime = entry.processingEnd - entry.processingStart;
      const presentationDelay = Math.max(
        4,
        entry.startTime + entry.duration - entry.processingEnd
      );
      const total = inputDelay + processingTime + presentationDelay;

      // Find longest sub-part
      const subParts = [
        { name: "Input Delay", value: inputDelay },
        { name: "Processing Time", value: processingTime },
        { name: "Presentation Delay", value: presentationDelay },
      ];
      const longest = subParts.reduce((a, b) => (a.value > b.value ? a : b));

      console.groupCollapsed(
        `%c${icon} Interaction: ${formatMs(value)} (${rating})`,
        `font-weight: bold; color: ${color};`
      );

      // Target info
      console.log("%cTarget:", "font-weight: bold;", entry.target);
      console.log(`   Event type: ${entry.name}`);

      // Sub-parts breakdown
      console.log("");
      console.log("%cSub-parts breakdown:", "font-weight: bold;");

      const tableData = subParts.map((part) => {
        const percent = ((part.value / total) * 100).toFixed(0);
        const isLongest = part.name === longest.name;
        return {
          "Sub-part": isLongest ? `⚠️ ${part.name}` : part.name,
          Duration: formatMs(part.value),
          "%": `${percent}%`,
        };
      });

      console.table(tableData);

      // Visual bar
      const barWidth = 40;
      const inputBar = "█".repeat(Math.round((inputDelay / total) * barWidth));
      const procBar = "▓".repeat(Math.round((processingTime / total) * barWidth));
      const presBar = "░".repeat(Math.round((presentationDelay / total) * barWidth));
      console.log(`   ${inputBar}${procBar}${presBar}`);
      console.log("   █ Input  ▓ Processing  ░ Presentation");

      // Recommendation if slow
      if (rating !== "good") {
        console.log("");
        console.log("%c💡 Optimization hint:", "font-weight: bold; color: #3b82f6;");
        if (longest.name === "Input Delay") {
          console.log("   Break up long tasks blocking the main thread");
          console.log("   Use requestIdleCallback or setTimeout for non-critical work");
        } else if (longest.name === "Processing Time") {
          console.log("   Optimize event handlers, reduce JavaScript complexity");
          console.log("   Consider debouncing or using web workers");
        } else {
          console.log("   Reduce DOM size or complexity of updates");
          console.log("   Avoid forced synchronous layouts");
        }
      }

      console.groupEnd();
    }
  });

  observer.observe({
    type: "event",
    durationThreshold: 0,
    buffered: true,
  });

  // Summary function
  window.getInteractionSummary = () => {
    if (allInteractions.length === 0) {
      console.log("%c📊 No interactions recorded yet.", "font-weight: bold;");
      console.log("   Interact with the page (click, type, etc.) and call this again.");
      return { script: "Interactions", status: "error", error: "No interactions recorded yet", count: 0 };
    }

    console.group("%c📊 Interaction Summary", "font-weight: bold; font-size: 14px;");

    const durations = allInteractions.map((i) => i.duration);
    const worst = Math.max(...durations);
    const avg = durations.reduce((a, b) => a + b, 0) / durations.length;
    const p75 = durations.sort((a, b) => a - b)[Math.floor(durations.length * 0.75)];

    const worstRating = valueToRating(worst);
    const p75Rating = valueToRating(p75);

    console.log("");
    console.log("%cStatistics:", "font-weight: bold;");
    console.log(`   Total interactions: ${allInteractions.length}`);
    console.log(
      `   Worst: %c${formatMs(worst)} (${worstRating})`,
      `color: ${RATING_COLORS[worstRating]};`
    );
    console.log(
      `   P75 (INP): %c${formatMs(p75)} (${p75Rating})`,
      `color: ${RATING_COLORS[p75Rating]};`
    );
    console.log(`   Average: ${formatMs(avg)}`);

    // Rating breakdown
    const good = allInteractions.filter((i) => i.rating === "good").length;
    const needsImprovement = allInteractions.filter(
      (i) => i.rating === "needs-improvement"
    ).length;
    const poor = allInteractions.filter((i) => i.rating === "poor").length;

    console.log("");
    console.log("%cBy rating:", "font-weight: bold;");
    console.log(`   🟢 Good (≤200ms): ${good}`);
    console.log(`   🟡 Needs Improvement (≤500ms): ${needsImprovement}`);
    console.log(`   🔴 Poor (>500ms): ${poor}`);

    // Slow interactions
    const slowInteractions = allInteractions.filter((i) => i.rating !== "good");
    if (slowInteractions.length > 0) {
      console.log("");
      console.log("%c⚠️ Slow interactions:", "font-weight: bold; color: #ef4444;");
      slowInteractions.forEach((i, idx) => {
        const icon = RATING_ICONS[i.rating];
        console.log(`   ${idx + 1}. ${icon} ${i.type} - ${formatMs(i.duration)}`, i.target);
      });
    }

    const byRating = {
      good: allInteractions.filter((i) => i.rating === "good").length,
      "needs-improvement": allInteractions.filter((i) => i.rating === "needs-improvement").length,
      poor: allInteractions.filter((i) => i.rating === "poor").length,
    };
    console.groupEnd();
    return {
      script: "Interactions",
      status: "ok",
      count: allInteractions.length,
      details: {
        totalInteractions: allInteractions.length,
        worstMs: Math.round(worst),
        avgMs: Math.round(avg),
        p75Ms: Math.round(p75),
        byRating,
      },
      items: allInteractions.map((i) => ({
        type: i.type,
        durationMs: Math.round(i.duration),
        rating: i.rating,
      })),
    };
  };

  console.log("%c👆 Interaction Tracking Active", "font-weight: bold; font-size: 14px;");
  console.log("   Interact with the page to see interaction details.");
  console.log("   Call %cgetInteractionSummary()%c for a summary.", "font-family: monospace; background: #f3f4f6; padding: 2px 4px;", "");

  return {
    script: "Interactions",
    status: "tracking",
    message: "Tracking interactions. Interact with the page then call getInteractionSummary() for results.",
    getDataFn: "getInteractionSummary",
  };
})();
```

---

## Layout Shift Tracking
URL: https://webperf-snippets.nucliweb.net/Interaction/Layout-Shift-Loading-and-Interaction

Tracks all layout shifts during page load and user interaction, identifying the elements causing Cumulative Layout Shift (CLS). This debugging-focused snippet logs every shift with detailed information about which elements moved and when. Why this matters: While the CLS quick check gives you a score, this snippet helps you debug which specific elements are causing layout shifts. It shows you the exact selectors, movement distances, and whether shifts were excluded due to user input. This is essential for fixing CLS issues. CLS Rating Thresholds:

```js
// Layout Shift Tracking
// https://webperf-snippets.nucliweb.net

(() => {
  // CLS thresholds
  const valueToRating = (score) =>
    score <= 0.1 ? "good" : score <= 0.25 ? "needs-improvement" : "poor";

  const RATING_COLORS = {
    good: "#0CCE6A",
    "needs-improvement": "#FFA400",
    poor: "#FF4E42",
  };

  const RATING_ICONS = {
    good: "🟢",
    "needs-improvement": "🟡",
    poor: "🔴",
  };

  // Track all shifts
  let totalCLS = 0;
  const allShifts = [];
  const elementShifts = new Map(); // Track shifts per element

  const getElementSelector = (element) => {
    if (!element) return "(unknown)";
    if (element.id) return `#${element.id}`;
    if (element.className && typeof element.className === "string") {
      const classes = element.className.trim().split(/\s+/).slice(0, 2).join(".");
      if (classes) return `${element.tagName.toLowerCase()}.${classes}`;
    }
    return element.tagName?.toLowerCase() || "(unknown)";
  };

  const observer = new PerformanceObserver((list) => {
    for (const entry of list.getEntries()) {
      // Only count shifts without recent input for CLS
      const countedForCLS = !entry.hadRecentInput;

      if (countedForCLS) {
        totalCLS += entry.value;
      }

      // Get affected elements
      const sources = entry.sources || [];
      const elements = sources.map((source) => ({
        element: source.node,
        selector: getElementSelector(source.node),
        previousRect: source.previousRect,
        currentRect: source.currentRect,
      }));

      // Track per-element shifts
      elements.forEach((el) => {
        if (!elementShifts.has(el.selector)) {
          elementShifts.set(el.selector, { count: 0, totalShift: 0, element: el.element });
        }
        const data = elementShifts.get(el.selector);
        data.count++;
        data.totalShift += entry.value;
      });

      const shift = {
        value: entry.value,
        countedForCLS,
        elements,
        time: entry.startTime,
        entry,
      };
      allShifts.push(shift);

      // Log significant shifts (> 0.001)
      if (entry.value > 0.001) {
        const rating = valueToRating(totalCLS);
        const icon = countedForCLS ? RATING_ICONS[rating] : "⚪";
        const clsColor = RATING_COLORS[rating];

        console.groupCollapsed(
          `%c${icon} Layout Shift: ${entry.value.toFixed(4)}${countedForCLS ? "" : " (not counted - user input)"}`,
          `font-weight: bold; color: ${countedForCLS ? clsColor : "#888"};`
        );

        console.log(`%cCumulative CLS: ${totalCLS.toFixed(4)}`, `color: ${clsColor}; font-weight: bold;`);
        console.log(`   Time: ${Math.round(entry.startTime)}ms`);
        console.log(`   Had recent input: ${entry.hadRecentInput ? "Yes (excluded from CLS)" : "No"}`);

        if (elements.length > 0) {
          console.log("");
          console.log("%cElements that shifted:", "font-weight: bold;");

          elements.forEach((el, i) => {
            console.log(`   ${i + 1}. ${el.selector}`, el.element);
            if (el.previousRect && el.currentRect) {
              const dx = el.currentRect.x - el.previousRect.x;
              const dy = el.currentRect.y - el.previousRect.y;
              const dw = el.currentRect.width - el.previousRect.width;
              const dh = el.currentRect.height - el.previousRect.height;

              const changes = [];
              if (Math.abs(dx) > 0) changes.push(`x: ${dx > 0 ? "+" : ""}${Math.round(dx)}px`);
              if (Math.abs(dy) > 0) changes.push(`y: ${dy > 0 ? "+" : ""}${Math.round(dy)}px`);
              if (Math.abs(dw) > 0) changes.push(`width: ${dw > 0 ? "+" : ""}${Math.round(dw)}px`);
              if (Math.abs(dh) > 0) changes.push(`height: ${dh > 0 ? "+" : ""}${Math.round(dh)}px`);

              if (changes.length > 0) {
                console.log(`      Movement: ${changes.join(", ")}`);
              }
            }
          });
        } else {
          console.log("   (No source elements captured)");
        }

        console.groupEnd();
      }
    }
  });

  observer.observe({ type: "layout-shift", buffered: true });

  // Summary function
  window.getLayoutShiftSummary = () => {
    console.group("%c📊 Layout Shift Summary", "font-weight: bold; font-size: 14px;");

    const rating = valueToRating(totalCLS);
    const icon = RATING_ICONS[rating];
    const color = RATING_COLORS[rating];

    // CLS Score
    console.log("");
    console.log("%cCLS Score:", "font-weight: bold;");
    console.log(
      `   ${icon} %c${totalCLS.toFixed(4)} (${rating})`,
      `color: ${color}; font-weight: bold; font-size: 16px;`
    );

    // Statistics
    const countedShifts = allShifts.filter((s) => s.countedForCLS);
    const excludedShifts = allShifts.filter((s) => !s.countedForCLS);

    console.log("");
    console.log("%cStatistics:", "font-weight: bold;");
    console.log(`   Total shift events: ${allShifts.length}`);
    console.log(`   Counted for CLS: ${countedShifts.length}`);
    console.log(`   Excluded (user input): ${excludedShifts.length}`);

    if (countedShifts.length > 0) {
      const largest = Math.max(...countedShifts.map((s) => s.value));
      console.log(`   Largest single shift: ${largest.toFixed(4)}`);
    }

    // Top shifting elements
    if (elementShifts.size > 0) {
      console.log("");
      console.log("%c🎯 Top Shifting Elements:", "font-weight: bold; color: #ef4444;");

      const sortedElements = Array.from(elementShifts.entries())
        .sort((a, b) => b[1].totalShift - a[1].totalShift)
        .slice(0, 5);

      const tableData = sortedElements.map(([selector, data]) => ({
        Element: selector,
        "Shift Count": data.count,
        "Total Impact": data.totalShift.toFixed(4),
      }));

      console.table(tableData);

      console.log("");
      console.log("%c🔎 Inspect elements:", "font-weight: bold;");
      sortedElements.forEach(([selector, data], i) => {
        console.log(`   ${i + 1}. ${selector}`, data.element);
      });
    }

    // Timeline
    if (countedShifts.length > 0) {
      console.log("");
      console.log("%c⏱️ Shift Timeline:", "font-weight: bold;");

      const significant = countedShifts.filter((s) => s.value > 0.001);
      if (significant.length > 0) {
        const timelineData = significant.map((s) => ({
          "Time (ms)": Math.round(s.time),
          Value: s.value.toFixed(4),
          Elements: s.elements.map((e) => e.selector).join(", ") || "(unknown)",
        }));
        console.table(timelineData);
      } else {
        console.log("   No significant shifts (all < 0.001)");
      }
    }

    // Recommendations
    if (rating !== "good") {
      console.log("");
      console.log("%c💡 Recommendations:", "font-weight: bold; color: #3b82f6;");
      console.log("   • Add width/height attributes to images and videos");
      console.log("   • Reserve space for ads, embeds, and dynamic content");
      console.log("   • Use CSS aspect-ratio for responsive elements");
      console.log("   • Avoid inserting content above existing content");
      console.log("   • Use transform animations instead of layout-triggering properties");
    }

    console.groupEnd();

    const topElementsData = Array.from(elementShifts.entries())
      .sort((a, b) => b[1].totalShift - a[1].totalShift)
      .slice(0, 5)
      .map(([selector, data]) => ({ selector, shiftCount: data.count, totalImpact: Math.round(data.totalShift * 10000) / 10000 }));
    return {
      script: "Layout-Shift-Loading-and-Interaction",
      status: "ok",
      metric: "CLS",
      value: Math.round(totalCLS * 10000) / 10000,
      unit: "score",
      rating,
      thresholds: { good: 0.1, needsImprovement: 0.25 },
      details: {
        currentCLS: Math.round(totalCLS * 10000) / 10000,
        shiftCount: allShifts.length,
        countedShifts: countedShifts.length,
        excludedShifts: excludedShifts.length,
        topElements: topElementsData,
      },
    };
  };

  // Initial message
  const rating = valueToRating(totalCLS);
  const icon = RATING_ICONS[rating];

  console.log("%c📐 Layout Shift Tracking Active", "font-weight: bold; font-size: 14px;");
  console.log(`   Current CLS: ${icon} ${totalCLS.toFixed(4)}`);
  console.log("   Interact with the page to see new shifts.");
  console.log(
    "   Call %cgetLayoutShiftSummary()%c for full analysis.",
    "font-family: monospace; background: #f3f4f6; padding: 2px 4px;",
    ""
  );

  // Synchronous return for agent (buffered layout-shift entries)
  const clsBufferedSync = performance.getEntriesByType("layout-shift")
    .reduce((sum, e) => !e.hadRecentInput ? sum + e.value : sum, 0);
  const countedSync = performance.getEntriesByType("layout-shift").filter((e) => !e.hadRecentInput).length;
  const excludedSync = performance.getEntriesByType("layout-shift").filter((e) => e.hadRecentInput).length;
  const clsRatingSync = valueToRating(clsBufferedSync);
  return {
    script: "Layout-Shift-Loading-and-Interaction",
    status: "tracking",
    metric: "CLS",
    value: Math.round(clsBufferedSync * 10000) / 10000,
    unit: "score",
    rating: clsRatingSync,
    thresholds: { good: 0.1, needsImprovement: 0.25 },
    details: {
      currentCLS: Math.round(clsBufferedSync * 10000) / 10000,
      shiftCount: countedSync + excludedSync,
      countedShifts: countedSync,
      excludedShifts: excludedSync,
    },
    message: "Layout shift tracking active. Call getLayoutShiftSummary() for full element attribution.",
    getDataFn: "getLayoutShiftSummary",
  };
})();
```

---

## LoAF Helpers
URL: https://webperf-snippets.nucliweb.net/Interaction/Long-Animation-Frames-Helpers

Advanced debugging utilities for Long Animation Frames. While the basic LoAF snippet shows real-time frame data, this helper library provides powerful analysis, filtering, and export capabilities. When to use each:

```js
// LoAF Helpers - Advanced Debugging
// https://webperf-snippets.nucliweb.net

(() => {
  "use strict";

  // Check browser support
  if (
    !("PerformanceObserver" in window) ||
    !PerformanceObserver.supportedEntryTypes.includes("long-animation-frame")
  ) {
    console.warn("%c⚠️ Long Animation Frames API not supported", "font-weight: bold;");
    console.warn("   Requires Chrome 123+");
    return { script: "Long-Animation-Frames-Helpers", status: "unsupported", error: "Long Animation Frames API not supported. Requires Chrome 123+" };
  }

  // Storage for captured frames
  const capturedFrames = [];

  // Severity helpers
  const getSeverity = (duration) => {
    if (duration > 200) return { level: "critical", icon: "🔴" };
    if (duration > 150) return { level: "high", icon: "🟠" };
    if (duration > 100) return { level: "medium", icon: "🟡" };
    return { level: "low", icon: "🟢" };
  };

  // Start observing
  const observer = new PerformanceObserver((list) => {
    for (const entry of list.getEntries()) {
      const frameData = {
        startTime: entry.startTime,
        duration: entry.duration,
        renderStart: entry.renderStart,
        styleAndLayoutStart: entry.styleAndLayoutStart,
        firstUIEventTimestamp: entry.firstUIEventTimestamp,
        blockingDuration: entry.blockingDuration,
        scripts: entry.scripts.map((s) => ({
          sourceURL: s.sourceURL || "",
          sourceFunctionName: s.sourceFunctionName || "(anonymous)",
          invoker: s.invoker || "",
          invokerType: s.invokerType || "",
          duration: s.duration,
          executionStart: s.executionStart,
          forcedStyleAndLayoutDuration: s.forcedStyleAndLayoutDuration || 0,
        })),
      };
      capturedFrames.push(frameData);
    }
  });

  try {
    observer.observe({ type: "long-animation-frame", buffered: true });
  } catch (e) {
    console.error("Failed to start LoAF observer:", e);
    return { script: "Long-Animation-Frames-Helpers", status: "error", error: e.message };
  }

  // Helper functions
  window.loafHelpers = {
    /**
     * Show summary of all captured frames
     */
    summary() {
      if (capturedFrames.length === 0) {
        console.log("%c📊 No frames captured yet", "font-weight: bold;");
        console.log("   Interact with the page to generate long frames.");
        return;
      }

      const totalTime = capturedFrames.reduce((sum, f) => sum + f.duration, 0);
      const totalBlocking = capturedFrames.reduce((sum, f) => sum + f.blockingDuration, 0);
      const avgDuration = totalTime / capturedFrames.length;
      const maxDuration = Math.max(...capturedFrames.map((f) => f.duration));

      const severity = {
        critical: capturedFrames.filter((f) => f.duration > 200).length,
        high: capturedFrames.filter((f) => f.duration > 150 && f.duration <= 200).length,
        medium: capturedFrames.filter((f) => f.duration > 100 && f.duration <= 150).length,
        low: capturedFrames.filter((f) => f.duration <= 100).length,
      };

      console.group("%c📊 LoAF Summary", "font-weight: bold; font-size: 14px;");

      console.log("");
      console.log("%cStatistics:", "font-weight: bold;");
      console.log(`   Total frames: ${capturedFrames.length}`);
      console.log(`   Total duration: ${totalTime.toFixed(0)}ms`);
      console.log(`   Total blocking: ${totalBlocking.toFixed(0)}ms`);
      console.log(`   Average duration: ${avgDuration.toFixed(0)}ms`);
      console.log(`   Max duration: ${maxDuration.toFixed(0)}ms`);

      console.log("");
      console.log("%cBy severity:", "font-weight: bold;");
      console.log(`   🔴 Critical (>200ms): ${severity.critical}`);
      console.log(`   🟠 High (150-200ms): ${severity.high}`);
      console.log(`   🟡 Medium (100-150ms): ${severity.medium}`);
      console.log(`   🟢 Low (<100ms): ${severity.low}`);

      console.groupEnd();
    },

    /**
     * Show top N slowest scripts
     */
    topScripts(n = 10) {
      if (capturedFrames.length === 0) {
        console.log("%c📋 No frames captured yet", "font-weight: bold;");
        return;
      }

      const allScripts = capturedFrames.flatMap((f) => f.scripts);
      if (allScripts.length === 0) {
        console.log("%c📋 No scripts found in captured frames", "font-weight: bold;");
        return;
      }

      // Aggregate by source
      const scriptStats = new Map();
      allScripts.forEach((s) => {
        const key = `${s.sourceURL}|${s.sourceFunctionName}`;
        if (!scriptStats.has(key)) {
          scriptStats.set(key, {
            sourceURL: s.sourceURL,
            functionName: s.sourceFunctionName,
            totalDuration: 0,
            count: 0,
            maxDuration: 0,
            totalForcedLayout: 0,
          });
        }
        const stats = scriptStats.get(key);
        stats.totalDuration += s.duration;
        stats.count++;
        stats.maxDuration = Math.max(stats.maxDuration, s.duration);
        stats.totalForcedLayout += s.forcedStyleAndLayoutDuration;
      });

      const sorted = Array.from(scriptStats.values())
        .sort((a, b) => b.totalDuration - a.totalDuration)
        .slice(0, n);

      console.group(`%c📋 Top ${Math.min(n, sorted.length)} Scripts by Total Duration`, "font-weight: bold; font-size: 14px;");

      const tableData = sorted.map((s) => {
        let path = s.sourceURL;
        try {
          path = new URL(s.sourceURL || location.href).pathname;
          if (path.length > 40) path = "..." + path.slice(-37);
        } catch {}

        return {
          Script: path || "(inline)",
          Function: s.functionName.length > 25 ? s.functionName.slice(0, 22) + "..." : s.functionName,
          Count: s.count,
          "Total": `${s.totalDuration.toFixed(0)}ms`,
          "Max": `${s.maxDuration.toFixed(0)}ms`,
          "Forced S&L": s.totalForcedLayout > 0 ? `${s.totalForcedLayout.toFixed(0)}ms` : "-",
        };
      });

      console.table(tableData);
      console.groupEnd();

      return sorted;
    },

    /**
     * Filter frames by criteria
     */
    filter(options = {}) {
      if (capturedFrames.length === 0) {
        console.log("%c🔍 No frames captured yet", "font-weight: bold;");
        return [];
      }

      let filtered = capturedFrames;

      if (options.minDuration) {
        filtered = filtered.filter((f) => f.duration >= options.minDuration);
      }
      if (options.maxDuration) {
        filtered = filtered.filter((f) => f.duration <= options.maxDuration);
      }

      console.group(`%c🔍 Filtered: ${filtered.length} of ${capturedFrames.length} frames`, "font-weight: bold;");

      if (filtered.length > 0) {
        const tableData = filtered.map((f) => {
          const sev = getSeverity(f.duration);
          return {
            "": sev.icon,
            Start: `${f.startTime.toFixed(0)}ms`,
            Duration: `${f.duration.toFixed(0)}ms`,
            Blocking: `${f.blockingDuration.toFixed(0)}ms`,
            Scripts: f.scripts.length,
          };
        });
        console.table(tableData);
      }

      console.groupEnd();
      return filtered;
    },

    /**
     * Find frames containing scripts that match a URL pattern
     */
    findByURL(search) {
      if (capturedFrames.length === 0) {
        console.log("%c🔎 No frames captured yet", "font-weight: bold;");
        return [];
      }

      const matches = capturedFrames.filter((f) =>
        f.scripts.some((s) => s.sourceURL.toLowerCase().includes(search.toLowerCase()))
      );

      console.group(`%c🔎 Found ${matches.length} frames matching "${search}"`, "font-weight: bold;");

      if (matches.length > 0) {
        const tableData = matches.map((f) => {
          const matchingScript = f.scripts.find((s) =>
            s.sourceURL.toLowerCase().includes(search.toLowerCase())
          );
          let scriptPath = matchingScript.sourceURL;
          try {
            scriptPath = new URL(scriptPath).pathname;
            if (scriptPath.length > 35) scriptPath = "..." + scriptPath.slice(-32);
          } catch {}

          return {
            "Frame Start": `${f.startTime.toFixed(0)}ms`,
            "Frame Duration": `${f.duration.toFixed(0)}ms`,
            "Script": scriptPath,
            "Script Duration": `${matchingScript.duration.toFixed(0)}ms`,
          };
        });
        console.table(tableData);
      }

      console.groupEnd();
      return matches;
    },

    /**
     * Calculate percentiles for RUM reporting
     */
    percentiles(pcts = [50, 75, 95, 99]) {
      if (capturedFrames.length === 0) {
        console.log("%c📊 No frames captured yet", "font-weight: bold;");
        return {};
      }

      const durations = capturedFrames.map((f) => f.duration).sort((a, b) => a - b);
      const result = {};

      pcts.forEach((p) => {
        const index = Math.ceil((p / 100) * durations.length) - 1;
        const safeIndex = Math.max(0, Math.min(index, durations.length - 1));
        result[`p${p}`] = durations[safeIndex];
      });

      console.group("%c📊 Frame Duration Percentiles", "font-weight: bold; font-size: 14px;");
      console.log(`   Frames analyzed: ${capturedFrames.length}`);
      console.log("");

      Object.entries(result).forEach(([key, value]) => {
        const sev = getSeverity(value);
        console.log(`   ${sev.icon} ${key.toUpperCase()}: ${value.toFixed(0)}ms`);
      });

      console.log("");
      console.log("%c💡 Tip:", "font-weight: bold;");
      console.log("   Use P75 for general performance, P95/P99 for tail latency");
      console.groupEnd();

      return result;
    },

    /**
     * Export as JSON
     */
    exportJSON() {
      if (capturedFrames.length === 0) {
        console.log("%c📁 No frames to export", "font-weight: bold;");
        return;
      }

      const data = JSON.stringify(capturedFrames, null, 2);
      const blob = new Blob([data], { type: "application/json" });
      const url = URL.createObjectURL(blob);
      const a = document.createElement("a");
      a.href = url;
      a.download = `loaf-data-${new Date().toISOString().slice(0, 10)}.json`;
      a.click();
      URL.revokeObjectURL(url);

      console.log(`%c✅ Exported ${capturedFrames.length} frames to JSON`, "color: #22c55e; font-weight: bold;");
    },

    /**
     * Export as CSV
     */
    exportCSV() {
      if (capturedFrames.length === 0) {
        console.log("%c📁 No frames to export", "font-weight: bold;");
        return;
      }

      const rows = [
        ["Frame Start", "Duration", "Blocking", "Script URL", "Function", "Script Duration", "Forced S&L"],
      ];

      capturedFrames.forEach((f) => {
        if (f.scripts.length === 0) {
          rows.push([
            f.startTime.toFixed(2),
            f.duration.toFixed(2),
            f.blockingDuration.toFixed(2),
            "", "", "", "",
          ]);
        } else {
          f.scripts.forEach((s) => {
            rows.push([
              f.startTime.toFixed(2),
              f.duration.toFixed(2),
              f.blockingDuration.toFixed(2),
              s.sourceURL,
              s.sourceFunctionName,
              s.duration.toFixed(2),
              s.forcedStyleAndLayoutDuration.toFixed(2),
            ]);
          });
        }
      });

      const csv = rows.map((row) => row.map((cell) => `"${cell}"`).join(",")).join("\n");
      const blob = new Blob([csv], { type: "text/csv" });
      const url = URL.createObjectURL(blob);
      const a = document.createElement("a");
      a.href = url;
      a.download = `loaf-data-${new Date().toISOString().slice(0, 10)}.csv`;
      a.click();
      URL.revokeObjectURL(url);

      console.log(`%c✅ Exported ${capturedFrames.length} frames to CSV`, "color: #22c55e; font-weight: bold;");
    },

    /**
     * Get raw data for custom analysis
     */
    getRawData() {
      return capturedFrames;
    },

    /**
     * Clear all captured data
     */
    clear() {
      capturedFrames.length = 0;
      console.log("%c✅ Captured data cleared", "color: #22c55e; font-weight: bold;");
    },

    /**
     * Show help
     */
    help() {
      console.group("%c📚 LoAF Helpers - Commands", "font-weight: bold; font-size: 14px;");
      console.log("");
      console.log("%csummary()%c - Overview of all captured frames", "font-weight: bold; color: #3b82f6;", "");
      console.log("%ctopScripts(n)%c - Top N slowest scripts (default: 10)", "font-weight: bold; color: #3b82f6;", "");
      console.log("%cfilter({ minDuration, maxDuration })%c - Filter frames by duration", "font-weight: bold; color: #3b82f6;", "");
      console.log("%cfindByURL(search)%c - Find frames by script URL", "font-weight: bold; color: #3b82f6;", "");
      console.log("%cpercentiles([50,75,95,99])%c - Calculate percentiles for RUM", "font-weight: bold; color: #3b82f6;", "");
      console.log("%cexportJSON()%c - Download data as JSON", "font-weight: bold; color: #3b82f6;", "");
      console.log("%cexportCSV()%c - Download data as CSV", "font-weight: bold; color: #3b82f6;", "");
      console.log("%cgetRawData()%c - Get raw frame array", "font-weight: bold; color: #3b82f6;", "");
      console.log("%cclear()%c - Clear captured data", "font-weight: bold; color: #3b82f6;", "");
      console.groupEnd();
    },
  };

  // Initial message
  console.log("%c🔧 LoAF Helpers Loaded", "font-weight: bold; font-size: 14px;");
  console.log("   Observing long animation frames (>50ms)...");
  console.log("");
  console.log("   Quick start: %cloafHelpers.summary()%c", "font-family: monospace; background: #f3f4f6; padding: 2px 4px;", "");
  console.log("   All commands: %cloafHelpers.help()%c", "font-family: monospace; background: #f3f4f6; padding: 2px 4px;", "");

  return {
    script: "Long-Animation-Frames-Helpers",
    status: "tracking",
    message: "LoAF Helpers loaded. Use loafHelpers.summary(), loafHelpers.topScripts(), etc. Call loafHelpers.getRawData() to get raw frame data.",
    getDataFn: "loafHelpers.getRawData",
  };
})();
```

---

## Long Animation Frames Script Attribution
URL: https://webperf-snippets.nucliweb.net/Interaction/Long-Animation-Frames-Script-Attribution

Analyzes and visualizes which scripts are responsible for blocking the main thread. This snippet categorizes blocking time by script origin (your code, framework, third-party, extensions) and provides actionable insights for optimization. Why Script Attribution Matters: - Identify if blocking comes from your code vs third-parties - Prioritize optimization efforts on the biggest offenders - Separate framework overhead from application code - Track third-party impact on performance - Segment RUM data by script category What you'll see: - Blocking time breakdown by script category (first-party, framework, third-party, unknown) - Top blocking scripts ranked by total duration - Visual ASCII chart showing contribution percentages - Specific file names and function names responsible - Actionable recommendations based on data ```mermaid graph LR     A[Capture LoAF] --> B[Extract Scripts]     B --> C{Categorize}     C --> D[Your Code]     C --> E[Framework]     C --> F[Third-Party]     C --> G[Unknown]     D --> H[Calculate %]     E --> H     F --> H     G --> H     H --> I[Visual Report]     I --> J[Optimization Priority]     style D fill:#3b82f6,color:#fff     style E fill:#8b5cf6,color:#fff     style F fill:#f59e0b,color:#fff     style G fill:#6b7280,color:#fff ``` Purpose: Provide detailed attribution of main thread blocking to specific scripts, categorized by origin and ranked by impact. Key Features: 1. Automatic Categorization: Classifies scripts as first-party, framework, third-party, or unknown 2. Visual Breakdown: ASCII charts showing percentage contribution 3. Top Offenders: Ranked list of scripts by total blocking time 4. Actionable Insights: Specific recommendations based on findings 5. RUM Integration: Export data in format ready for analytics Use Cases: - Performance audits: "Where should we optimize first?" - Third-party analysis: "Is our analytics/ads slowing us down?" - Framework cost: "How much overhead does React/Vue add?" - Before/after comparisons: "Did our optimization work?"

```js
// Long Animation Frames - Script Attribution Analysis
// https://webperf-snippets.nucliweb.net

(() => {
  // Check browser support
  if (!PerformanceObserver.supportedEntryTypes?.includes("long-animation-frame")) {
    console.log("%c⚠️ Long Animation Frames not supported", "color: #f59e0b; font-weight: bold;");
    console.log("Chrome 116+ required.");
    return { script: "Long-Animation-Frames-Script-Attribution", status: "unsupported", error: "long-animation-frame not supported. Chrome 116+ required." };
  }

  // Read buffered LoAF entries immediately
  const frames = performance.getEntriesByType("long-animation-frame").map((entry) => ({
    duration: entry.duration,
    blockingDuration: entry.blockingDuration || 0,
    scripts: (entry.scripts || []).map((s) => ({
      sourceURL: s.sourceURL || "unknown",
      sourceFunctionName: s.sourceFunctionName || "anonymous",
      invoker: s.invoker || "unknown",
      duration: s.duration || 0,
    })),
  }));

  if (frames.length === 0) {
    console.log("%c✅ No long frames detected", "color: #22c55e; font-weight: bold;");
    return { script: "Long-Animation-Frames-Script-Attribution", status: "ok",
      details: { frameCount: 0, totalBlockingMs: 0, byCategory: {} }, items: [] };
  }

  const allScripts = frames.flatMap((f) => f.scripts);
  const totalBlocking = frames.reduce((sum, f) => sum + f.blockingDuration, 0);
  const totalDuration = frames.reduce((sum, f) => sum + f.duration, 0);

  const categorize = (url) => {
    const u = url.toLowerCase();
    const origin = location.origin.toLowerCase();
    if (u === "" || u === "unknown") return "unknown";
    if (["react", "vue", "angular", "svelte", "framework", "chunk", "webpack", "vite"].some((fw) => u.includes(fw))) return "framework";
    if (["google-analytics", "gtag", "gtm", "analytics", "facebook", "twitter", "ads", "cdn", "unpkg", "jsdelivr", "segment", "amplitude"].some((tp) => u.includes(tp))) return "third-party";
    if (u.startsWith("chrome-extension://") || u.startsWith("moz-extension://")) return "extension";
    if (u.startsWith("http") && !u.includes(origin.replace(/^https?:\/\//, ""))) return "third-party";
    return "first-party";
  };

  const byCategory = {};
  allScripts.forEach((script) => {
    const cat = categorize(script.sourceURL);
    if (!byCategory[cat]) byCategory[cat] = { durationMs: 0, count: 0 };
    byCategory[cat].durationMs += script.duration;
    byCategory[cat].count++;
  });

  const byFile = {};
  allScripts.forEach((script) => {
    const file = script.sourceURL.split("/").pop() || "unknown";
    if (!byFile[file]) byFile[file] = { duration: 0, count: 0, category: categorize(script.sourceURL), functions: [] };
    byFile[file].duration += script.duration;
    byFile[file].count++;
    byFile[file].functions.push({ name: script.sourceFunctionName, invoker: script.invoker, duration: script.duration });
  });

  const topFiles = Object.entries(byFile).sort((a, b) => b[1].duration - a[1].duration).slice(0, 10);
  const totalScript = Object.values(byCategory).reduce((sum, cat) => sum + cat.durationMs, 0);

  const categories = [
    { name: "Your Code", key: "first-party", icon: "🔵", color: "#3b82f6" },
    { name: "Framework", key: "framework", icon: "🟣", color: "#8b5cf6" },
    { name: "Third-Party", key: "third-party", icon: "🟠", color: "#f59e0b" },
    { name: "Extensions", key: "extension", icon: "🟤", color: "#92400e" },
    { name: "Unknown", key: "unknown", icon: "⚫", color: "#6b7280" },
  ];

  console.log("%c━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━", "color: #6b7280;");
  console.log("%c📊 Blocking Time by Category", "font-weight: bold; font-size: 13px;");
  console.log("");

  categories.forEach(({ name, key, icon, color }) => {
    const data = byCategory[key];
    if (data?.durationMs > 0) {
      const pct = totalScript > 0 ? (data.durationMs / totalScript) * 100 : 0;
      const barLen = Math.round(pct / 2);
      const bar = "█".repeat(barLen) + "░".repeat(Math.max(0, 50 - barLen));
      console.log(
        `%c${icon} ${name.padEnd(12)} %c${bar} %c${pct.toFixed(1)}% %c(${data.durationMs.toFixed(0)}ms, ${data.count} scripts)`,
        `color: ${color}; font-weight: bold;`, `color: ${color};`, `color: ${color}; font-weight: bold;`, "color: #6b7280;",
      );
    }
  });

  console.log("");
  console.log(`%cTotal Script: ${totalScript.toFixed(0)}ms | Blocking: ${totalBlocking.toFixed(0)}ms | Duration: ${totalDuration.toFixed(0)}ms`, "color: #6b7280;");
  console.log(`%cFrames captured: ${frames.length}`, "color: #6b7280;");

  console.log("");
  console.log("%c━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━", "color: #6b7280;");
  console.log("%c🔥 Top 10 Blocking Scripts", "font-weight: bold; font-size: 13px;");
  console.log("");

  topFiles.forEach(([file, data], idx) => {
    const pct = totalScript > 0 ? (data.duration / totalScript) * 100 : 0;
    const icon = categories.find((c) => c.key === data.category)?.icon || "⚫";
    console.group(
      `%c${idx + 1}. ${icon} ${file} %c(${data.duration.toFixed(0)}ms, ${pct.toFixed(1)}%)`,
      "font-weight: bold;", "color: #6b7280;",
    );
    console.log(`Category: ${data.category}`);
    console.log(`Executions: ${data.count}`);
    console.log(`Avg duration: ${(data.duration / data.count).toFixed(0)}ms`);
    const topFns = data.functions.sort((a, b) => b.duration - a.duration).slice(0, 3);
    if (topFns.length > 0) {
      console.log("Top functions:");
      topFns.forEach((fn, i) => console.log(`  ${i + 1}. ${fn.name} (${fn.duration.toFixed(0)}ms) - ${fn.invoker}`));
    }
    console.groupEnd();
  });

  console.log("");
  console.log("%c✅ Analysis complete!", "color: #22c55e; font-weight: bold;");

  return {
    script: "Long-Animation-Frames-Script-Attribution",
    status: "ok",
    details: {
      frameCount: frames.length,
      totalBlockingMs: Math.round(totalBlocking),
      byCategory: Object.fromEntries(
        Object.entries(byCategory).map(([k, v]) => [k, { durationMs: Math.round(v.durationMs), count: v.count }])
      ),
    },
    items: topFiles.map(([file, data]) => ({
      file,
      category: data.category,
      durationMs: Math.round(data.duration),
      count: data.count,
    })),
  };
})();
```

---

## Long Animation Frames (LoAF)
URL: https://webperf-snippets.nucliweb.net/Interaction/Long-Animation-Frames

Tracks Long Animation Frames to identify JavaScript and rendering work that blocks the main thread. LoAF is the underlying API that powers INP debugging and provides detailed attribution for slow interactions. Why this matters: LoAF is the successor to the Long Tasks API and provides much more detailed information about what's blocking your page. It tells you exactly which scripts ran, how long they took, and whether they caused forced layouts. This is essential for debugging slow interactions and improving INP scores. What is a Long Animation Frame? A frame is considered "long" when it takes more than 50ms. The API provides detailed breakdown of where time is spent:

```js
// Long Animation Frames Analysis
// https://webperf-snippets.nucliweb.net

(() => {
  const formatMs = (ms) => `${Math.round(ms)}ms`;

  // Rating based on blocking duration
  const valueToRating = (blockingDuration) =>
    blockingDuration === 0 ? "good" : blockingDuration <= 100 ? "needs-improvement" : "poor";

  const RATING_COLORS = {
    good: "#0CCE6A",
    "needs-improvement": "#FFA400",
    poor: "#FF4E42",
  };

  const RATING_ICONS = {
    good: "🟢",
    "needs-improvement": "🟡",
    poor: "🔴",
  };

  // Track all LoAFs and events
  const allLoAFs = [];
  const allEvents = [];

  const getScriptSummary = (script) => {
    const invoker = script.invoker || script.name || "(anonymous)";
    const source = script.sourceURL
      ? script.sourceURL.split("/").pop()?.split("?")[0] || script.sourceURL
      : "";
    return { invoker, source, type: script.invokerType || "unknown" };
  };

  const processLoAF = (entry) => {
    const endTime = entry.startTime + entry.duration;

    // Calculate derived metrics
    const workDuration = entry.renderStart
      ? entry.renderStart - entry.startTime
      : entry.duration;

    const renderDuration = entry.renderStart
      ? endTime - entry.renderStart
      : 0;

    const styleAndLayoutDuration = entry.styleAndLayoutStart
      ? endTime - entry.styleAndLayoutStart
      : 0;

    const totalForcedStyleAndLayout = entry.scripts.reduce(
      (sum, script) => sum + (script.forcedStyleAndLayoutDuration || 0),
      0
    );

    // Process scripts
    const scripts = entry.scripts.map((script) => ({
      ...getScriptSummary(script),
      duration: Math.round(script.duration),
      execDuration: Math.round(script.executionStart
        ? script.startTime + script.duration - script.executionStart
        : script.duration),
      forcedStyleAndLayout: Math.round(script.forcedStyleAndLayoutDuration || 0),
      startTime: Math.round(script.startTime),
    }));

    return {
      startTime: Math.round(entry.startTime),
      duration: Math.round(entry.duration),
      blockingDuration: Math.round(entry.blockingDuration),
      workDuration: Math.round(workDuration),
      renderDuration: Math.round(renderDuration),
      styleAndLayoutDuration: Math.round(styleAndLayoutDuration),
      totalForcedStyleAndLayout: Math.round(totalForcedStyleAndLayout),
      scripts,
      entry,
    };
  };

  const overlap = (e1, e2) =>
    e1.startTime < e2.startTime + e2.duration &&
    e2.startTime < e1.startTime + e1.duration;

  // LoAF Observer
  const loafObserver = new PerformanceObserver((list) => {
    for (const entry of list.getEntries()) {
      const processed = processLoAF(entry);
      allLoAFs.push(processed);

      // Only log frames with blocking duration
      if (entry.blockingDuration > 0) {
        const rating = valueToRating(entry.blockingDuration);
        const icon = RATING_ICONS[rating];
        const color = RATING_COLORS[rating];

        console.groupCollapsed(
          `%c${icon} Long Animation Frame: ${formatMs(entry.duration)} (blocking: ${formatMs(entry.blockingDuration)})`,
          `font-weight: bold; color: ${color};`
        );

        // Time breakdown
        console.log("%cTime Breakdown:", "font-weight: bold;");
        const breakdown = [
          { Phase: "Work (JS)", Duration: formatMs(processed.workDuration) },
          { Phase: "Render", Duration: formatMs(processed.renderDuration) },
          { Phase: "Style & Layout", Duration: formatMs(processed.styleAndLayoutDuration) },
        ];
        console.table(breakdown);

        // Visual bar
        const total = processed.duration;
        const barWidth = 40;
        const workBar = "█".repeat(Math.round((processed.workDuration / total) * barWidth));
        const renderBar = "░".repeat(Math.round((processed.renderDuration / total) * barWidth));
        console.log(`   ${workBar}${renderBar}`);
        console.log("   █ Work  ░ Render");

        // Forced style/layout warning
        if (processed.totalForcedStyleAndLayout > 0) {
          console.log("");
          console.log(
            `%c⚠️ Forced style/layout: ${formatMs(processed.totalForcedStyleAndLayout)}`,
            "color: #ef4444; font-weight: bold;"
          );
        }

        // Scripts
        if (processed.scripts.length > 0) {
          console.log("");
          console.log("%cScripts:", "font-weight: bold;");

          const scriptTable = processed.scripts.map((s) => ({
            Invoker: s.invoker.length > 40 ? s.invoker.slice(0, 37) + "..." : s.invoker,
            Type: s.type,
            Duration: formatMs(s.duration),
            "Forced S&L": s.forcedStyleAndLayout > 0 ? formatMs(s.forcedStyleAndLayout) : "-",
            Source: s.source.length > 25 ? "..." + s.source.slice(-22) : s.source,
          }));
          console.table(scriptTable);
        }

        // Find overlapping events (interactions during this frame)
        const overlappingEvents = allEvents.filter((e) => overlap(e, entry));
        if (overlappingEvents.length > 0) {
          console.log("");
          console.log("%c👆 Interactions during this frame:", "font-weight: bold;");
          overlappingEvents.forEach((e) => {
            console.log(`   ${e.name}: ${formatMs(e.duration)}`);
          });
        }

        console.groupEnd();
      }
    }
  });

  // Event Observer (for correlation)
  const eventObserver = new PerformanceObserver((list) => {
    for (const entry of list.getEntries()) {
      if (entry.interactionId) {
        allEvents.push(entry);
      }
    }
  });

  loafObserver.observe({ type: "long-animation-frame", buffered: true });
  eventObserver.observe({ type: "event", buffered: true });

  // Summary function
  window.getLoAFSummary = () => {
    console.group("%c📊 Long Animation Frames Summary", "font-weight: bold; font-size: 14px;");

    if (allLoAFs.length === 0) {
      console.log("   No long animation frames recorded.");
      console.groupEnd();
      return;
    }

    const blocking = allLoAFs.filter((l) => l.blockingDuration > 0);
    const totalBlocking = blocking.reduce((sum, l) => sum + l.blockingDuration, 0);
    const worstBlocking = Math.max(...allLoAFs.map((l) => l.blockingDuration));
    const avgDuration = allLoAFs.reduce((sum, l) => sum + l.duration, 0) / allLoAFs.length;

    // Statistics
    console.log("");
    console.log("%cStatistics:", "font-weight: bold;");
    console.log(`   Total LoAFs: ${allLoAFs.length}`);
    console.log(`   With blocking time: ${blocking.length}`);
    console.log(`   Total blocking time: ${formatMs(totalBlocking)}`);
    console.log(`   Worst blocking: ${formatMs(worstBlocking)}`);
    console.log(`   Average duration: ${formatMs(avgDuration)}`);

    // Script analysis
    const scriptStats = new Map();
    allLoAFs.forEach((loaf) => {
      loaf.scripts.forEach((script) => {
        const key = `${script.invoker}|${script.source}`;
        if (!scriptStats.has(key)) {
          scriptStats.set(key, {
            invoker: script.invoker,
            source: script.source,
            count: 0,
            totalDuration: 0,
            totalForcedSL: 0,
          });
        }
        const stats = scriptStats.get(key);
        stats.count++;
        stats.totalDuration += script.duration;
        stats.totalForcedSL += script.forcedStyleAndLayout;
      });
    });

    if (scriptStats.size > 0) {
      console.log("");
      console.log("%c🎯 Top Scripts by Total Duration:", "font-weight: bold; color: #ef4444;");

      const topScripts = Array.from(scriptStats.values())
        .sort((a, b) => b.totalDuration - a.totalDuration)
        .slice(0, 10);

      const scriptTable = topScripts.map((s) => ({
        Invoker: s.invoker.length > 35 ? s.invoker.slice(0, 32) + "..." : s.invoker,
        Count: s.count,
        "Total Duration": formatMs(s.totalDuration),
        "Forced S&L": s.totalForcedSL > 0 ? formatMs(s.totalForcedSL) : "-",
        Source: s.source.length > 20 ? "..." + s.source.slice(-17) : s.source,
      }));
      console.table(scriptTable);
    }

    // Forced style/layout analysis
    const forcedSLTotal = allLoAFs.reduce((sum, l) => sum + l.totalForcedStyleAndLayout, 0);
    if (forcedSLTotal > 0) {
      console.log("");
      console.log(
        `%c⚠️ Total forced style/layout: ${formatMs(forcedSLTotal)}`,
        "color: #ef4444; font-weight: bold;"
      );
      console.log("   This indicates layout thrashing - reading layout after writing to DOM.");
    }

    // Recommendations
    if (worstBlocking > 50) {
      console.log("");
      console.log("%c💡 Recommendations:", "font-weight: bold; color: #3b82f6;");
      console.log("   • Break up long tasks using scheduler.yield() or setTimeout");
      console.log("   • Move heavy computation to Web Workers");
      console.log("   • Avoid forced synchronous layouts (read before write)");
      console.log("   • Defer non-critical work with requestIdleCallback");
    }

    console.groupEnd();

    return {
      script: "Long-Animation-Frames",
      status: "ok",
      count: allLoAFs.length,
      details: {
        totalLoAFs: allLoAFs.length,
        withBlockingTime: blocking.length,
        totalBlockingTimeMs: Math.round(totalBlocking),
        worstBlockingMs: Math.round(worstBlocking),
        topScripts: Array.from(scriptStats.values())
          .sort((a, b) => b.totalDuration - a.totalDuration)
          .slice(0, 5)
          .map((s) => ({ invoker: s.invoker, source: s.source, totalDurationMs: Math.round(s.totalDuration), count: s.count })),
      },
    };
  };

  console.log("%c🎬 Long Animation Frames Tracking Active", "font-weight: bold; font-size: 14px;");
  console.log("   Frames with blocking duration will be logged.");
  console.log(
    "   Call %cgetLoAFSummary()%c for full analysis.",
    "font-family: monospace; background: #f3f4f6; padding: 2px 4px;",
    ""
  );

  // Synchronous return for agent (buffered entries)
  const loafBuffered = performance.getEntriesByType("long-animation-frame");
  const blockingLoafs = loafBuffered.filter((e) => e.blockingDuration > 0);
  const totalBlockingSync = blockingLoafs.reduce((sum, e) => sum + e.blockingDuration, 0);
  const worstBlockingSync = loafBuffered.length > 0 ? Math.max(...loafBuffered.map((e) => e.blockingDuration)) : 0;
  return {
    script: "Long-Animation-Frames",
    status: "tracking",
    count: loafBuffered.length,
    details: {
      totalLoAFs: loafBuffered.length,
      withBlockingTime: blockingLoafs.length,
      totalBlockingTimeMs: Math.round(totalBlockingSync),
      worstBlockingMs: Math.round(worstBlockingSync),
    },
    message: "Tracking long animation frames. Call getLoAFSummary() for full script attribution.",
    getDataFn: "getLoAFSummary",
  };
})();
```

---

## Long Tasks
URL: https://webperf-snippets.nucliweb.net/Interaction/LongTask

Tracks tasks that block the main thread for more than 50ms. Long tasks prevent the browser from responding to user input, causing poor Interaction to Next Paint (INP) and sluggish user experience. Why this matters: When the main thread is blocked by a long task, the browser cannot respond to clicks, taps, or keyboard input. This creates a frustrating experience where the page feels "frozen". Long tasks are the primary cause of poor INP scores and should be broken up into smaller chunks.

```js
// Long Tasks Tracking
// https://webperf-snippets.nucliweb.net

(() => {
  const formatMs = (ms) => `${Math.round(ms)}ms`;

  // Severity helpers
  const getSeverity = (duration) => {
    if (duration > 250) return { level: "critical", icon: "🔴", color: "#ef4444" };
    if (duration > 150) return { level: "high", icon: "🟠", color: "#f97316" };
    if (duration > 100) return { level: "medium", icon: "🟡", color: "#eab308" };
    return { level: "low", icon: "🟢", color: "#22c55e" };
  };

  // Track all long tasks
  const allTasks = [];
  let totalBlockingTime = 0;

  try {
    const observer = new PerformanceObserver((list) => {
      for (const entry of list.getEntries()) {
        const duration = entry.duration;
        const blockingTime = Math.max(0, duration - 50); // Time over 50ms threshold
        totalBlockingTime += blockingTime;

        const sev = getSeverity(duration);

        const task = {
          startTime: entry.startTime,
          duration,
          blockingTime,
          severity: sev.level,
          attribution: entry.attribution?.[0]?.containerType || "unknown",
          containerId: entry.attribution?.[0]?.containerId || "",
          containerName: entry.attribution?.[0]?.containerName || "",
        };
        allTasks.push(task);

        // Log each long task
        console.groupCollapsed(
          `%c${sev.icon} Long Task: ${formatMs(duration)} (blocking: ${formatMs(blockingTime)})`,
          `font-weight: bold; color: ${sev.color};`
        );

        console.log(`%cTiming:`, "font-weight: bold;");
        console.log(`   Start: ${formatMs(entry.startTime)}`);
        console.log(`   Duration: ${formatMs(duration)}`);
        console.log(`   Blocking time: ${formatMs(blockingTime)}`);

        // Attribution (limited in Long Tasks API)
        if (entry.attribution && entry.attribution.length > 0) {
          console.log("");
          console.log(`%cAttribution:`, "font-weight: bold;");
          entry.attribution.forEach((attr) => {
            console.log(`   Container: ${attr.containerType || "window"}`);
            if (attr.containerName) console.log(`   Name: ${attr.containerName}`);
            if (attr.containerId) console.log(`   ID: ${attr.containerId}`);
            if (attr.containerSrc) console.log(`   Source: ${attr.containerSrc}`);
          });
        }

        // Running totals
        console.log("");
        console.log(`%cSession totals:`, "font-weight: bold;");
        console.log(`   Long tasks: ${allTasks.length}`);
        console.log(`   Total blocking time: ${formatMs(totalBlockingTime)}`);

        console.groupEnd();
      }
    });

    observer.observe({ type: "longtask", buffered: true });

    // Summary function
    window.getLongTaskSummary = () => {
      console.group("%c📊 Long Tasks Summary", "font-weight: bold; font-size: 14px;");

      if (allTasks.length === 0) {
        console.log("   No long tasks recorded.");
        console.log("   This is good! The main thread has been responsive.");
        console.groupEnd();
        return;
      }

      const durations = allTasks.map((t) => t.duration);
      const worst = Math.max(...durations);
      const avg = durations.reduce((a, b) => a + b, 0) / durations.length;

      const worstSev = getSeverity(worst);

      // Statistics
      console.log("");
      console.log("%cStatistics:", "font-weight: bold;");
      console.log(`   Total long tasks: ${allTasks.length}`);
      console.log(`   Total blocking time: ${formatMs(totalBlockingTime)}`);
      console.log(
        `   Worst task: %c${formatMs(worst)}`,
        `color: ${worstSev.color}; font-weight: bold;`
      );
      console.log(`   Average duration: ${formatMs(avg)}`);

      // By severity
      const bySeverity = {
        critical: allTasks.filter((t) => t.severity === "critical").length,
        high: allTasks.filter((t) => t.severity === "high").length,
        medium: allTasks.filter((t) => t.severity === "medium").length,
        low: allTasks.filter((t) => t.severity === "low").length,
      };

      console.log("");
      console.log("%cBy severity:", "font-weight: bold;");
      console.log(`   🔴 Critical (>250ms): ${bySeverity.critical}`);
      console.log(`   🟠 High (150-250ms): ${bySeverity.high}`);
      console.log(`   🟡 Medium (100-150ms): ${bySeverity.medium}`);
      console.log(`   🟢 Low (50-100ms): ${bySeverity.low}`);

      // Timeline
      if (allTasks.length > 0) {
        console.log("");
        console.log("%c⏱️ Timeline:", "font-weight: bold;");

        const tableData = allTasks
          .sort((a, b) => b.duration - a.duration)
          .slice(0, 10)
          .map((t) => {
            const sev = getSeverity(t.duration);
            return {
              "": sev.icon,
              Start: formatMs(t.startTime),
              Duration: formatMs(t.duration),
              Blocking: formatMs(t.blockingTime),
              Container: t.attribution,
            };
          });
        console.table(tableData);
      }

      // Recommendations
      if (totalBlockingTime > 300) {
        console.log("");
        console.log("%c💡 Recommendations:", "font-weight: bold; color: #3b82f6;");
        console.log("   • Break up long tasks using setTimeout or scheduler.yield()");
        console.log("   • Move heavy computation to Web Workers");
        console.log("   • Defer non-critical JavaScript");
        console.log("   • Use requestIdleCallback for low-priority work");
        console.log("");
        console.log("%c🔍 For better debugging:", "font-weight: bold;");
        console.log("   Use the Long Animation Frames snippet for full script attribution");
      }

      console.groupEnd();

      return {
        script: "LongTask",
        status: "ok",
        count: allTasks.length,
        details: {
          totalBlockingTimeMs: Math.round(totalBlockingTime),
          worstTaskMs: Math.round(worst),
          avgDurationMs: Math.round(avg),
          bySeverity,
        },
      };
    };

    // Initial message
    console.log("%c⏱️ Long Tasks Tracking Active", "font-weight: bold; font-size: 14px;");
    console.log("   Tasks blocking the main thread for >50ms will be logged.");
    console.log(
      "   Call %cgetLongTaskSummary()%c for statistics.",
      "font-family: monospace; background: #f3f4f6; padding: 2px 4px;",
      ""
    );

    // Synchronous return for agent (buffered entries)
    const longtaskBuffered = performance.getEntriesByType("longtask");
    const totalBlockingSync = longtaskBuffered.reduce((sum, t) => sum + Math.max(0, t.duration - 50), 0);
    const worstTaskSync = longtaskBuffered.length > 0 ? Math.max(...longtaskBuffered.map((t) => t.duration)) : 0;
    const bySeveritySync = {
      critical: longtaskBuffered.filter((t) => t.duration > 250).length,
      high: longtaskBuffered.filter((t) => t.duration > 150 && t.duration <= 250).length,
      medium: longtaskBuffered.filter((t) => t.duration > 100 && t.duration <= 150).length,
      low: longtaskBuffered.filter((t) => t.duration >= 50 && t.duration <= 100).length,
    };
    return {
      script: "LongTask",
      status: "tracking",
      count: longtaskBuffered.length,
      details: {
        totalBlockingTimeMs: Math.round(totalBlockingSync),
        worstTaskMs: Math.round(worstTaskSync),
        bySeverity: bySeveritySync,
      },
      message: "Tracking long tasks. Call getLongTaskSummary() for statistics.",
      getDataFn: "getLongTaskSummary",
    };

  } catch (e) {
    console.error("%c⚠️ Long Tasks API not supported", "font-weight: bold;");
    console.error("   Error:", e.message);
    return { script: "LongTask", status: "unsupported", error: e.message };
  }
})();
```

---

## Scroll Performance Analysis
URL: https://webperf-snippets.nucliweb.net/Interaction/Scroll-Performance

Measures scroll jank, frame drops, and event listener configuration to identify what makes scrolling feel laggy or unresponsive. Scroll jank — visible stuttering during scroll — is one of the most common UX problems on the web, especially on mobile. Why this matters: Scroll jank is caused by work blocking the compositor thread: non-passive event listeners, heavy JavaScript during scroll, or large layout-triggering DOM reads. Even a few dropped frames per second are noticeable to users and contribute to poor experience scores. What this snippet detects:

```js
// Scroll Performance Analysis
// https://webperf-snippets.nucliweb.net

(() => {
  const formatMs = (ms) => `${ms.toFixed(1)}ms`;
  const formatFps = (fps) => `${fps.toFixed(0)} fps`;

  const TARGET_FRAME_MS = 1000 / 60; // ~16.67ms at 60fps
  const DROP_THRESHOLD_MS = TARGET_FRAME_MS * 1.5; // ~25ms = below 40fps

  const RATING = {
    good: { icon: "🟢", color: "#0CCE6A", label: "Good" },
    "needs-improvement": { icon: "🟡", color: "#FFA400", label: "Needs Improvement" },
    poor: { icon: "🔴", color: "#FF4E42", label: "Poor" },
  };

  const fpsRating = (fps) =>
    fps >= 55 ? "good" : fps >= 40 ? "needs-improvement" : "poor";

  // ─── 1. PASSIVE EVENT LISTENER DETECTION ────────────────────────────────────
  // Detects scroll/touch listeners registered without { passive: true }.
  // Non-passive listeners delay scroll by forcing the browser to wait for JS.

  const nonPassiveListeners = [];
  const SCROLL_EVENT_TYPES = new Set([
    "scroll", "wheel", "touchstart", "touchmove", "touchend",
  ]);

  const _origAddEventListener = EventTarget.prototype.addEventListener;
  EventTarget.prototype.addEventListener = function (type, listener, options) {
    if (SCROLL_EVENT_TYPES.has(type)) {
      const isPassive =
        options === true
          ? false // old-style capture boolean, not passive
          : typeof options === "object" && options !== null
          ? options.passive === true
          : false;

      if (!isPassive) {
        const entry = {
          type,
          element: this.tagName || this.constructor?.name || "unknown",
          id: this.id || "",
          passive: false,
        };
        nonPassiveListeners.push(entry);
        console.warn(
          `%c⚠️ Non-passive "${type}" listener on <${entry.element}${
            entry.id ? `#${entry.id}` : ""
          }>`,
          "color: #FFA400; font-weight: bold;",
          this
        );
        console.warn(
          "   Fix: add { passive: true } to improve scroll performance."
        );
      }
    }
    return _origAddEventListener.call(this, type, listener, options);
  };

  // ─── 2. SCROLL FPS MEASUREMENT ──────────────────────────────────────────────
  // Tracks requestAnimationFrame timing during active scroll sessions.

  const sessions = [];
  let currentSession = null;
  let rafId = null;
  let lastFrameTime = null;
  let endTimer = null;

  const trackFrame = (now) => {
    if (!currentSession) return;
    if (lastFrameTime !== null) {
      const frameTime = now - lastFrameTime;
      currentSession.frames.push(frameTime);
      if (frameTime > DROP_THRESHOLD_MS) currentSession.drops++;
    }
    lastFrameTime = now;
    rafId = requestAnimationFrame(trackFrame);
  };

  const endSession = () => {
    if (!currentSession) return;
    cancelAnimationFrame(rafId);

    const { frames, drops } = currentSession;
    if (frames.length < 2) {
      currentSession = null;
      return;
    }

    const avgFrameTime = frames.reduce((a, b) => a + b, 0) / frames.length;
    const avgFps = 1000 / avgFrameTime;
    const minFps = 1000 / Math.max(...frames);
    const dropRate = (drops / frames.length) * 100;
    const rating = fpsRating(avgFps);
    const r = RATING[rating];

    const session = {
      avgFps,
      minFps,
      frames: frames.length,
      drops,
      dropRate,
      rating,
    };
    sessions.push(session);

    console.groupCollapsed(
      `%c${r.icon} Scroll: avg ${formatFps(avgFps)} — ${frames.length} frames, ${drops} drop(s)`,
      `font-weight: bold; color: ${r.color};`
    );
    console.table([
      {
        "Avg FPS": formatFps(avgFps),
        "Min FPS": formatFps(minFps),
        "Frames": frames.length,
        "Drops": drops,
        "Drop Rate": `${dropRate.toFixed(1)}%`,
        "Rating": r.label,
      },
    ]);
    if (drops > 0) {
      const worstMs = Math.max(...frames);
      console.log(
        `   Worst frame: ${formatMs(worstMs)} (target: ${formatMs(TARGET_FRAME_MS)})`
      );
    }
    console.groupEnd();

    currentSession = null;
    lastFrameTime = null;
  };

  window.addEventListener(
    "scroll",
    () => {
      if (!currentSession) {
        currentSession = { frames: [], drops: 0 };
        lastFrameTime = null;
        rafId = requestAnimationFrame(trackFrame);
      }
      clearTimeout(endTimer);
      endTimer = setTimeout(endSession, 200);
    },
    { passive: true }
  );

  // ─── 3. CSS SCROLL AUDIT ────────────────────────────────────────────────────
  // Checks CSS properties that affect scroll compositing and performance.

  const auditScrollCSS = () => {
    const results = {
      smoothScrollElements: [],
      willChangeElements: [],
      contentVisibilityElements: [],
      overscrollElements: [],
    };

    document.querySelectorAll("*").forEach((el) => {
      const cs = getComputedStyle(el);
      const label =
        el.tagName.toLowerCase() +
        (el.id ? `#${el.id}` : el.className
          ? `.${String(el.className).trim().split(/\s+/)[0]}`
          : "");

      if (cs.scrollBehavior === "smooth") {
        results.smoothScrollElements.push(label);
      }
      if (cs.willChange && cs.willChange !== "auto") {
        results.willChangeElements.push({ element: label, value: cs.willChange });
      }
      if (cs.contentVisibility && cs.contentVisibility !== "visible") {
        results.contentVisibilityElements.push({
          element: label,
          value: cs.contentVisibility,
        });
      }
      if (cs.overscrollBehavior && cs.overscrollBehavior !== "auto") {
        results.overscrollElements.push({
          element: label,
          value: cs.overscrollBehavior,
        });
      }
    });

    return results;
  };

  // ─── 4. SUMMARY ─────────────────────────────────────────────────────────────

  window.getScrollSummary = () => {
    console.group(
      "%c📜 Scroll Performance Summary",
      "font-weight: bold; font-size: 14px;"
    );

    // — Session stats
    if (sessions.length === 0) {
      console.log("   No scroll sessions recorded yet. Scroll the page first.");
    } else {
      const allFps = sessions.map((s) => s.avgFps);
      const overallAvg = allFps.reduce((a, b) => a + b, 0) / allFps.length;
      const worstAvg = Math.min(...allFps);
      const totalDrops = sessions.reduce((a, s) => a + s.drops, 0);

      console.log("%cScroll Sessions:", "font-weight: bold;");
      console.table(
        sessions.map((s, i) => ({
          "#": i + 1,
          "Avg FPS": formatFps(s.avgFps),
          "Min FPS": formatFps(s.minFps),
          "Drops": s.drops,
          "Drop Rate": `${s.dropRate.toFixed(1)}%`,
          "Rating": RATING[s.rating].icon + " " + RATING[s.rating].label,
        }))
      );
      console.log(`   Overall avg FPS: ${formatFps(overallAvg)}`);
      console.log(`   Worst session avg: ${formatFps(worstAvg)}`);
      console.log(`   Total frame drops: ${totalDrops}`);
    }

    // — Passive listeners
    console.log("");
    console.log("%cPassive Event Listeners:", "font-weight: bold;");
    if (nonPassiveListeners.length === 0) {
      console.log(
        "   ✅ No non-passive scroll listeners detected since snippet loaded."
      );
    } else {
      console.log(
        `   ❌ ${nonPassiveListeners.length} non-passive listener(s) found:`
      );
      console.table(nonPassiveListeners);
      console.log(
        "   Fix: addEventListener('scroll', fn, { passive: true })"
      );
    }

    // — CSS audit
    console.log("");
    console.log("%cCSS Scroll Audit:", "font-weight: bold;");
    const css = auditScrollCSS();

    if (css.contentVisibilityElements.length > 0) {
      console.log(
        `   ✅ content-visibility on ${css.contentVisibilityElements.length} element(s) — reduces off-screen layout cost.`
      );
    } else {
      console.log(
        "   ℹ️ content-visibility not used — consider it for long pages."
      );
    }

    if (css.smoothScrollElements.length > 0) {
      console.log(
        `   ℹ️ scroll-behavior: smooth on ${css.smoothScrollElements.length} element(s).`
      );
      console.log(
        "      Smooth scroll can cause jank if driven by JS instead of CSS."
      );
    }

    if (css.willChangeElements.length > 0) {
      console.log(
        `   ⚠️ will-change set on ${css.willChangeElements.length} element(s):`
      );
      console.table(css.willChangeElements);
      console.log(
        "      will-change creates compositor layers — use sparingly to avoid memory overhead."
      );
    }

    if (css.overscrollElements.length > 0) {
      console.log(
        `   ℹ️ overscroll-behavior set on ${css.overscrollElements.length} element(s):`
      );
      console.table(css.overscrollElements);
    }

    // — Recommendations
    const hasJank = sessions.some((s) => s.rating !== "good");
    const hasNonPassive = nonPassiveListeners.length > 0;

    if (hasJank || hasNonPassive) {
      console.log("");
      console.log(
        "%c💡 Recommendations:",
        "font-weight: bold; color: #3b82f6;"
      );
      if (hasNonPassive) {
        console.log(
          "   • Add { passive: true } to all scroll/touch event listeners"
        );
      }
      if (hasJank) {
        console.log("   • Avoid reading layout properties during scroll (getBoundingClientRect, offsetTop)");
        console.log("   • Debounce or throttle scroll event handlers");
        console.log("   • Move scroll-driven animations to CSS or use Animation Worklet");
        console.log("   • Use content-visibility: auto for long lists or off-screen sections");
        console.log("   • Prefer transform over top/left for animated elements during scroll");
      }
    }

    console.groupEnd();

    const cssAuditResult = auditScrollCSS();
    return {
      script: "Scroll-Performance",
      status: "ok",
      details: {
        nonPassiveListeners: nonPassiveListeners.length,
        cssAudit: {
          smoothScrollElements: cssAuditResult.smoothScrollElements.length,
          willChangeElements: cssAuditResult.willChangeElements.length,
          contentVisibilityElements: cssAuditResult.contentVisibilityElements.length,
        },
        sessionCount: sessions.length,
        ...(sessions.length > 0 ? {
          avgFps: Math.round(sessions.reduce((a, s) => a + s.avgFps, 0) / sessions.length),
          worstSessionFps: Math.round(Math.min(...sessions.map((s) => s.avgFps))),
          totalDrops: sessions.reduce((a, s) => a + s.drops, 0),
        } : {}),
      },
    };
  };

  // ─── INIT ────────────────────────────────────────────────────────────────────

  console.log(
    "%c📜 Scroll Performance Analysis Active",
    "font-weight: bold; font-size: 14px;"
  );
  console.log(
    "   Scroll to measure FPS. Non-passive listener registrations will be warned."
  );
  console.log(
    "   Call %cgetScrollSummary()%c for the full report.",
    "font-family: monospace; background: #f3f4f6; padding: 2px 4px;",
    ""
  );

  const cssSnapshot = auditScrollCSS();
  return {
    script: "Scroll-Performance",
    status: "tracking",
    details: {
      nonPassiveListeners: nonPassiveListeners.length,
      cssAudit: {
        smoothScrollElements: cssSnapshot.smoothScrollElements.length,
        willChangeElements: cssSnapshot.willChangeElements.length,
        contentVisibilityElements: cssSnapshot.contentVisibilityElements.length,
      },
    },
    message: "Scroll performance tracking active. Scroll the page then call getScrollSummary() for FPS data.",
    getDataFn: "getScrollSummary",
  };
})();
```

---

# Media

## Image Element Audit
URL: https://webperf-snippets.nucliweb.net/Media/Image-Element-Audit

Audits all `<img>` elements on the page against image performance best practices — covering loading strategy, fetch priority, format modernisation, responsive markup, and CLS prevention. What this snippet checks:

```js
// Image Element Audit
// https://webperf-snippets.nucliweb.net

(async () => {
  function isInViewport(el) {
    const rect = el.getBoundingClientRect();
    return (
      rect.top < window.innerHeight &&
      rect.bottom > 0 &&
      rect.left < window.innerWidth &&
      rect.right > 0 &&
      rect.width > 0 &&
      rect.height > 0
    );
  }

  function findLcpCandidate(imgs) {
    let candidate = null;
    let maxArea = 0;
    imgs.filter(isInViewport).forEach((img) => {
      const { width, height } = img.getBoundingClientRect();
      const area = width * height;
      if (area > maxArea) {
        maxArea = area;
        candidate = img;
      }
    });
    return candidate;
  }

  function detectFormat(url) {
    if (!url) return "unknown";
    const lower = url.toLowerCase();
    const path = lower.split("?")[0];
    const query = lower.includes("?") ? lower.split("?")[1] : "";

    // Cloudinary path transforms: /f_auto/, /f_avif,q_auto/, etc.
    const cloudinaryMatch = path.match(/\/f_(auto|avif|webp|jxl|png|jpg|jpeg|gif|svg)[,/]/);
    if (cloudinaryMatch) {
      const fmt = cloudinaryMatch[1];
      return fmt === "auto" ? "auto (cdn)" : fmt === "jpeg" ? "jpg" : fmt;
    }

    // Query string params: ?fm=webp (imgix), ?format=avif (generic)
    const qMatch = query.match(/(?:^|&)(?:fm|format)=(avif|webp|jxl|png|jpg|jpeg|gif|svg)(?:&|$)/);
    if (qMatch) return qMatch[1] === "jpeg" ? "jpg" : qMatch[1];

    // File extension in path
    const extMatch = path.match(/\.(avif|webp|jxl|png|gif|svg|jpg|jpeg)(?:[?#]|$)/);
    if (extMatch) return extMatch[1] === "jpeg" ? "jpg" : extMatch[1];

    // No extension at all — likely a DAM or CDN serving format via Accept header
    const lastSegment = path.split("/").pop() || "";
    if (!lastSegment.includes(".")) return "auto (cdn?)";

    return "unknown";
  }

  function isModernFormat(format) {
    return ["avif", "webp", "jxl", "auto (cdn)", "auto (cdn?)"].includes(format);
  }

  async function fetchFormat(url) {
    if (!url) return detectFormat(url);
    try {
      const res = await fetch(url, { cache: "force-cache" });
      const ct = res.headers.get("content-type")?.split(";")[0]?.trim() || "";
      if (ct.includes("avif")) return "avif";
      if (ct.includes("webp")) return "webp";
      if (ct.includes("jxl")) return "jxl";
      if (ct.includes("png")) return "png";
      if (ct.includes("gif")) return "gif";
      if (ct.includes("svg")) return "svg";
      if (ct.includes("jpeg")) return "jpg";
    } catch {}
    return detectFormat(url);
  }

  function shortSrc(url) {
    if (!url) return "";
    return url.split("/").pop()?.split("?")[0]?.slice(0, 40) || url.slice(-40);
  }

  function normalizeUrl(url) {
    try {
      return new URL(url, location.origin).href;
    } catch {
      return url;
    }
  }

  function findPreloadForLcp(img, preloads) {
    const src = normalizeUrl(img.currentSrc || img.src || "");
    return (
      preloads.find((link) => {
        const href = link.getAttribute("href");
        const imagesrcset = link.getAttribute("imagesrcset") || "";
        if (href && normalizeUrl(href) === src) return true;
        if (imagesrcset) {
          return imagesrcset
            .split(",")
            .map((s) => normalizeUrl(s.trim().split(/\s+/)[0]))
            .includes(src);
        }
        return false;
      }) ?? null
    );
  }

  const images = Array.from(document.querySelectorAll("img"));

  if (images.length === 0) {
    console.log("No <img> elements found on this page.");
    return { script: "Image-Element-Audit", status: "ok", count: 0, items: [], issues: [] };
  }

  const lcpCandidate = findLcpCandidate(images);
  const imagePreloads = Array.from(document.querySelectorAll('link[rel="preload"][as="image"]'));

  // Fetch actual formats from Content-Type headers in parallel.
  // Uses the browser cache (force-cache) so already-loaded images
  // don't trigger new network requests. Falls back to URL detection
  // if the server does not expose CORS headers.
  const formats = await Promise.all(images.map((img) => fetchFormat(img.currentSrc || img.src)));

  const audited = images.map((img, i) => {
    const inViewport = isInViewport(img);
    const isLcp = img === lcpCandidate;
    const rect = img.getBoundingClientRect();
    const src = img.currentSrc || img.src || "";
    const format = formats[i];
    const inPicture = img.parentElement?.tagName === "PICTURE";

    const loading = img.getAttribute("loading");
    const decoding = img.getAttribute("decoding");
    const fetchpriority = img.getAttribute("fetchpriority");
    const hasDimensions = img.hasAttribute("width") && img.hasAttribute("height");

    const issues = [];
    let lcpPreload = null;

    if (isLcp) {
      if (fetchpriority !== "high")
        issues.push({ s: "error", msg: 'Add fetchpriority="high" to the LCP image' });
      if (loading === "lazy")
        issues.push({ s: "error", msg: 'Remove loading="lazy" from the LCP image' });
      if (decoding !== "sync")
        issues.push({ s: "warning", msg: 'Consider decoding="sync" for the LCP image' });
      lcpPreload = findPreloadForLcp(img, imagePreloads);
      if (!lcpPreload)
        issues.push({ s: "warning", msg: 'LCP image has no <link rel="preload" as="image">' });
      else if (lcpPreload.getAttribute("fetchpriority") !== "high")
        issues.push({ s: "info", msg: 'LCP image preload is missing fetchpriority="high"' });
    } else if (inViewport) {
      if (loading === "lazy")
        issues.push({ s: "warning", msg: 'Remove loading="lazy" (image is above the fold)' });
    } else {
      if (loading !== "lazy")
        issues.push({ s: "warning", msg: 'Add loading="lazy" (image is off-viewport)' });
      if (fetchpriority === "high")
        issues.push({ s: "error", msg: 'Remove fetchpriority="high" (image is off-viewport)' });
    }

    if (loading === "lazy" && fetchpriority === "high")
      issues.push({ s: "error", msg: 'Conflict: loading="lazy" + fetchpriority="high"' });

    if (!hasDimensions)
      issues.push({ s: "warning", msg: "Missing width/height attributes (CLS risk)" });

    if (!isModernFormat(format) && !inPicture && format !== "svg")
      issues.push({ s: "info", msg: "No modern format detected (WebP / AVIF / JXL)" });

    return {
      img,
      inViewport,
      isLcp,
      src,
      format,
      loading: loading ?? "(not set)",
      decoding: decoding ?? "(not set)",
      fetchpriority: fetchpriority ?? "(not set)",
      hasDimensions,
      hasSrcset: img.hasAttribute("srcset"),
      hasSizes: img.hasAttribute("sizes"),
      inPicture,
      dimensions: `${Math.round(rect.width)}×${Math.round(rect.height)}`,
      lcpPreload,
      issues,
    };
  });

  const withIssues = audited.filter((r) => r.issues.length > 0);
  const totalErrors = audited.flatMap((r) => r.issues.filter((i) => i.s === "error")).length;
  const totalWarnings = audited.flatMap((r) => r.issues.filter((i) => i.s === "warning")).length;
  const totalInfos = audited.flatMap((r) => r.issues.filter((i) => i.s === "info")).length;

  console.group("%c🖼️ Image Element Audit", "font-weight: bold; font-size: 14px;");

  // Summary
  console.log("");
  console.log("%cSummary", "font-weight: bold;");
  console.log(`   Total images  : ${images.length}`);
  console.log(`   In viewport   : ${audited.filter((r) => r.inViewport).length}`);
  console.log(`   Off viewport  : ${audited.filter((r) => !r.inViewport).length}`);
  console.log(
    `   Issues        : ${totalErrors} errors · ${totalWarnings} warnings · ${totalInfos} info`,
  );

  // LCP candidate
  if (lcpCandidate) {
    const lcp = audited.find((r) => r.isLcp);
    const fpOk = lcp.fetchpriority === "high";
    const preloadStatus = lcp.lcpPreload
      ? lcp.lcpPreload.getAttribute("fetchpriority") === "high"
        ? "✅ found (fetchpriority=high)"
        : "⚠️ found (no fetchpriority=high)"
      : "⚠️ not found";
    console.log("");
    console.log("%cLCP Candidate", "font-weight: bold;");
    console.log(`   fetchpriority : ${fpOk ? "✅" : "⚠️"} ${lcp.fetchpriority}`);
    console.log(`   decoding      : ${lcp.decoding}`);
    console.log(`   loading       : ${lcp.loading}`);
    console.log(`   format        : ${lcp.format}`);
    console.log(`   preload       : ${preloadStatus}`);
    console.log(`   dimensions    : ${lcp.dimensions}`);
    console.log("   Element:", lcpCandidate);
    if (lcp.lcpPreload) console.log("   Preload:", lcp.lcpPreload);
  }

  // Full table
  console.log("");
  console.group(`%c📋 All Images (${images.length})`, "font-weight: bold;");
  console.table(
    audited.map((r) => ({
      src: shortSrc(r.src),
      format: r.format,
      viewport: r.inViewport ? "✓" : "",
      LCP: r.isLcp ? "⭐" : "",
      loading: r.loading,
      decoding: r.decoding,
      fetchpriority: r.fetchpriority,
      srcset: r.hasSrcset ? "✓" : "",
      sizes: r.hasSizes ? "✓" : "",
      "in <picture>": r.inPicture ? "✓" : "",
      "w/h": r.hasDimensions ? "✓" : "⚠️",
      issues:
        r.issues.length === 0
          ? "✅"
          : r.issues
              .map((i) => (i.s === "error" ? "🔴" : i.s === "warning" ? "⚠️" : "ℹ️"))
              .join(" "),
    })),
  );
  console.groupEnd();

  // Issues detail
  if (withIssues.length > 0) {
    console.log("");
    console.group(
      `%c⚠️ Issues Detail (${totalErrors} errors · ${totalWarnings} warnings · ${totalInfos} info)`,
      "color: #ef4444; font-weight: bold;",
    );

    withIssues.forEach((r) => {
      const hasError = r.issues.some((i) => i.s === "error");
      const icon = hasError ? "🔴" : "⚠️";
      console.log("");
      console.log(`%c${icon} ${shortSrc(r.src) || "(no src)"}`, "font-weight: bold;");
      r.issues.forEach((issue) => {
        const prefix = issue.s === "error" ? "   🔴" : issue.s === "warning" ? "   ⚠️" : "   ℹ️";
        console.log(`${prefix} ${issue.msg}`);
      });
      console.log("   Element:", r.img);
    });

    console.groupEnd();
  } else {
    console.log("");
    console.log("%c✅ No issues found.", "color: #22c55e; font-weight: bold;");
  }

  // Quick reference
  console.log("");
  console.group("%c📝 Quick Reference", "color: #3b82f6; font-weight: bold;");
  console.log("");
  console.log("%c  ⭐ LCP image + preload:", "color: #22c55e;");
  console.log(
    '%c  <link rel="preload" as="image" href="hero.avif" fetchpriority="high">\n  <img src="hero.avif" fetchpriority="high" decoding="sync" width="1200" height="630" alt="...">',
    "font-family: monospace;",
  );
  console.log("");
  console.log("%c  ✅ Below-fold image:", "color: #22c55e;");
  console.log(
    '%c  <img src="content.avif" loading="lazy" decoding="async" width="800" height="600" alt="...">',
    "font-family: monospace;",
  );
  console.log("");
  console.log("%c  ✅ Picture with modern format fallback chain:", "color: #22c55e;");
  console.log(
    '%c  <picture>\n    <source type="image/jxl" srcset="img.jxl">\n    <source type="image/avif" srcset="img.avif">\n    <source type="image/webp" srcset="img.webp">\n    <img src="img.jpg" loading="lazy" width="800" height="600" alt="...">\n  </picture>',
    "font-family: monospace;",
  );
  console.groupEnd();

  console.groupEnd();

  const lcpData = lcpCandidate ? audited.find((r) => r.isLcp) : null;
  return {
    script: "Image-Element-Audit",
    status: "ok",
    count: images.length,
    details: {
      totalImages: images.length,
      inViewport: audited.filter((r) => r.inViewport).length,
      offViewport: audited.filter((r) => !r.inViewport).length,
      totalErrors,
      totalWarnings,
      totalInfos,
      lcpCandidate: lcpData
        ? {
            selector: shortSrc(lcpData.src),
            format: lcpData.format,
            fetchpriority: lcpData.fetchpriority,
            loading: lcpData.loading,
            preloaded: !!lcpData.lcpPreload,
          }
        : null,
    },
    items: audited.map((r) => ({
      url: r.src,
      format: r.format,
      inViewport: r.inViewport,
      isLCP: r.isLcp,
      loading: r.loading,
      decoding: r.decoding,
      fetchpriority: r.fetchpriority,
      hasDimensions: r.hasDimensions,
      hasSrcset: r.hasSrcset,
      hasSizes: r.hasSizes,
      inPicture: r.inPicture,
      issues: r.issues.map((i) => ({ severity: i.s, message: i.msg })),
    })),
    issues: audited.flatMap((r) =>
      r.issues.map((i) => ({
        severity: i.s,
        message: `${shortSrc(r.src) || "(no src)"}: ${i.msg}`,
      }))
    ),
  };
})();
```

---

## SVG Embedded Bitmap Analysis
URL: https://webperf-snippets.nucliweb.net/Media/SVG-Embedded-Bitmap-Analysis

Scans all SVG resources on the page — both external files and inline `<svg>` elements — and flags any that contain embedded bitmap images, reporting name, transfer size, compression encoding, and embedded bitmap details. What this snippet detects:

```js
// SVG Embedded Bitmap Analysis
// https://webperf-snippets.nucliweb.net

void (async () => {
  function formatSize(bytes) {
    if (!bytes || bytes === 0) return "—";
    if (bytes < 1024) return `${bytes} B`;
    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
    return `${(bytes / (1024 * 1024)).toFixed(2)} MB`;
  }

  function shortName(url) {
    try {
      const path = new URL(url).pathname;
      const name = path.split("/").pop() || path;
      return name.length > 45 ? "…" + name.slice(-42) : name;
    } catch {
      return url.slice(-45);
    }
  }

  function compressionFromEntry(entry) {
    if (entry.transferSize === 0 && entry.encodedBodySize === 0) return "cached";
    if (entry.encodedBodySize === 0) return "unknown";
    if (entry.encodedBodySize < entry.decodedBodySize) return "compressed";
    return "none";
  }

  function findEmbeddedBitmaps(svgText) {
    const found = [];

    // Inline base64-encoded bitmaps via data URIs
    const dataRe = /data:image\/(png|jpe?g|gif|webp|avif|bmp|tiff?|ico);base64,([A-Za-z0-9+/=]*)/gi;
    let m;
    while ((m = dataRe.exec(svgText)) !== null) {
      found.push({
        kind: "inline",
        format: m[1].replace("jpeg", "jpg"),
        estimatedBytes: Math.floor((m[2].length * 3) / 4),
      });
    }

    // External bitmap URLs referenced via <image href> or xlink:href
    const hrefRe = /(?:xlink:)?href=["']([^"']*\.(?:png|jpe?g|gif|webp|avif|bmp|tiff?|ico))["']/gi;
    while ((m = hrefRe.exec(svgText)) !== null) {
      found.push({
        kind: "external",
        format: m[1].split(".").pop().toLowerCase().replace("jpeg", "jpg"),
        url: m[1],
      });
    }

    return found;
  }

  // ── External SVG files (Performance API) ──────────────────────────────
  const svgEntries = performance
    .getEntriesByType("resource")
    .filter((e) => e.name.split("?")[0].toLowerCase().endsWith(".svg"));

  const externalResults = await Promise.all(
    svgEntries.map(async (entry) => {
      let compression = compressionFromEntry(entry);
      let bitmaps = [];

      try {
        const res = await fetch(entry.name, { cache: "force-cache" });
        const ce = res.headers.get("content-encoding");
        if (ce) compression = ce; // gzip | br | zstd | deflate
        bitmaps = findEmbeddedBitmaps(await res.text());
      } catch {
        // CORS or network error — Performance API data used as fallback
      }

      const transferSize = entry.transferSize > 0 ? entry.transferSize : entry.encodedBodySize;

      return {
        name: shortName(entry.name),
        url: entry.name,
        transferSize,
        compression,
        bitmaps,
      };
    }),
  );

  // ── Inline <svg> elements (DOM scan) ────────────────────────────────
  const inlineSvgs = Array.from(document.querySelectorAll("svg"));
  const inlineSvgTotal = inlineSvgs.length;
  const svgsWithUse = inlineSvgs.filter((svg) => svg.querySelector("use")).length;
  const standaloneInlineSvgs = inlineSvgTotal - svgsWithUse;

  const inlineResults = Array.from(document.querySelectorAll("svg"))
    .map((svg, i) => {
      const html = svg.outerHTML;
      const bitmaps = findEmbeddedBitmaps(html);
      if (!bitmaps.length) return null;
      return {
        name: svg.id ? `#${svg.id}` : `inline-svg[${i + 1}]`,
        transferSize: new Blob([html]).size,
        compression: "N/A",
        bitmaps,
      };
    })
    .filter(Boolean);

  // ── Output ───────────────────────────────────────────────────────────
  const withBitmaps = [...externalResults.filter((r) => r.bitmaps.length > 0), ...inlineResults];

  if (svgEntries.length === 0 && inlineSvgTotal === 0) {
    console.log("No SVG resources found on this page.");
    return { script: "SVG-Embedded-Bitmap-Analysis", status: "ok", count: 0, items: [], issues: [] };
  }

  console.group("%c🖼️ SVG Embedded Bitmap Analysis", "font-weight: bold; font-size: 14px;");

  console.log("");
  console.log("%cSummary", "font-weight: bold;");
  console.log(`   External SVG files    : ${svgEntries.length}`);
  const inlineLabel =
    svgsWithUse > 0
      ? `${inlineSvgTotal}  (${svgsWithUse} using <use>, ${standaloneInlineSvgs} standalone)`
      : `${inlineSvgTotal}`;
  console.log(`   Inline <svg> elements : ${inlineLabel}`);
  console.log(
    `   SVGs with bitmaps     : ${withBitmaps.length}${withBitmaps.length > 0 ? "  ⚠️" : "  ✅"}`,
  );

  if (externalResults.length > 0) {
    console.log("");
    console.group(`%c📋 External SVG Resources (${externalResults.length})`, "font-weight: bold;");
    console.table(
      externalResults.map((r) => ({
        name: r.name,
        size: formatSize(r.transferSize),
        compression: r.compression,
        "embedded bitmap": r.bitmaps.length ? `⚠️ ${r.bitmaps.length} found` : "✅ none",
      })),
    );
    console.groupEnd();
  }

  if (withBitmaps.length > 0) {
    console.log("");
    console.group(
      `%c⚠️ SVGs with Embedded Bitmaps (${withBitmaps.length})`,
      "color: #f59e0b; font-weight: bold;",
    );

    withBitmaps.forEach((r) => {
      console.log("");
      console.log(`%c📄 ${r.name}`, "font-weight: bold;");
      console.log(`   SVG size    : ${formatSize(r.transferSize)}`);
      console.log(`   Compression : ${r.compression}`);
      r.bitmaps.forEach((b) => {
        if (b.kind === "inline") {
          console.log(`   🖼️  inline ${b.format.toUpperCase()} — ~${formatSize(b.estimatedBytes)}`);
        } else {
          console.log(`   🔗  external ${b.format.toUpperCase()} — ${b.url}`);
        }
      });
    });

    console.groupEnd();

    console.log("");
    console.group("%c💡 Recommendations", "color: #3b82f6; font-weight: bold;");
    console.log("");
    console.log("   Embedded bitmaps inflate SVG size (~33% overhead for base64),");
    console.log("   block format negotiation, and prevent independent caching.");
    console.log("");
    console.log("   ✅ Extract the bitmap and serve it as a separate resource");
    console.log("   ✅ Convert the bitmap to a modern format (AVIF or WebP)");
    console.log('   ✅ Reference it from the SVG: <image href="image.avif" width="…" height="…"/>');
    console.log("   ✅ Both files are then cached and optimised independently");
    console.groupEnd();
  } else {
    console.log("");
    console.log(
      "%c✅ No embedded bitmaps found in SVG resources.",
      "color: #22c55e; font-weight: bold;",
    );
  }

  if (standaloneInlineSvgs >= 5) {
    console.log("");
    console.group("%c💡 SVG Sprite Opportunity", "color: #3b82f6; font-weight: bold;");
    console.log("");
    console.log(`   ${standaloneInlineSvgs} standalone inline <svg> elements detected.`);
    console.log("   Each one duplicates markup in the HTML and cannot be cached independently.");
    console.log("   Consider an SVG sprite: define each icon once as a <symbol> and");
    console.log('   reference it anywhere with <use href="#icon-id">.');
    console.log("");
    console.log('%c  <!-- Sprite (once, hidden) -->', "font-family: monospace; color: #6b7280;");
    console.log(
      '%c  <svg hidden>\n    <symbol id="icon-arrow" viewBox="0 0 24 24">…</symbol>\n  </svg>',
      "font-family: monospace;",
    );
    console.log('%c  <!-- Usage (anywhere, N times) -->', "font-family: monospace; color: #6b7280;");
    console.log(
      '%c  <svg aria-hidden="true"><use href="#icon-arrow"/></svg>',
      "font-family: monospace;",
    );
    console.groupEnd();
  }

  console.groupEnd();

  return {
    script: "SVG-Embedded-Bitmap-Analysis",
    status: "ok",
    count: withBitmaps.length,
    items: withBitmaps.map((r) => ({
      url: r.url || r.name,
      name: r.name,
      hasBitmap: true,
      bitmapCount: r.bitmaps.length,
      bitmapTypes: r.bitmaps.map((b) => b.format).join(", "),
      sizeBytes: r.transferSize,
    })),
    issues: withBitmaps.length > 0
      ? [{ severity: "warning", message: `${withBitmaps.length} SVG file(s) contain embedded bitmaps` }]
      : [],
  };
})();
```

---

## Video Element Audit
URL: https://webperf-snippets.nucliweb.net/Media/Video-Element-Audit

Audits all `<video>` elements on the page against video performance best practices — covering preload strategy, autoplay configuration, format modernisation, CLS prevention, and playback accessibility. What this snippet checks:

```js
// Video Element Audit
// https://webperf-snippets.nucliweb.net

(() => {
  function isInViewport(el) {
    const rect = el.getBoundingClientRect();
    return (
      rect.top < window.innerHeight &&
      rect.bottom > 0 &&
      rect.left < window.innerWidth &&
      rect.right > 0 &&
      rect.width > 0 &&
      rect.height > 0
    );
  }

  function detectBestCodec(video) {
    const sources = Array.from(video.querySelectorAll("source"));
    const types = sources
      .map((s) => s.getAttribute("type") || "")
      .filter(Boolean)
      .map((t) => t.toLowerCase());

    const allSrcs = [
      (video.currentSrc || "").toLowerCase(),
      (video.getAttribute("src") || "").toLowerCase(),
      ...sources.map((s) => (s.getAttribute("src") || "").toLowerCase()),
    ];

    if (types.some((t) => t.includes("av01") || t.includes("av1"))) return "AV1";
    if (types.some((t) => t.includes("vp9"))) return "VP9";
    if (types.some((t) => t.includes("webm")) || allSrcs.some((s) => s.endsWith(".webm")))
      return "WebM";
    if (
      types.some((t) => t.includes("mp4")) ||
      allSrcs.some((s) => s.endsWith(".mp4") || s.endsWith(".mov"))
    )
      return "MP4";
    if (types.some((t) => t.includes("ogg")) || allSrcs.some((s) => s.endsWith(".ogv")))
      return "OGG";

    return sources.length > 0 || video.getAttribute("src") ? "unknown" : "no source";
  }

  function isModernCodec(codec) {
    return ["AV1", "VP9", "WebM"].includes(codec);
  }

  function shortSrc(url) {
    if (!url) return "";
    return url.split("/").pop()?.split("?")[0]?.slice(0, 40) || url.slice(-40);
  }

  const videos = Array.from(document.querySelectorAll("video"));

  if (videos.length === 0) {
    console.log("No <video> elements found on this page.");
    return { script: "Video-Element-Audit", status: "ok", count: 0, items: [], issues: [] };
  }

  const audited = videos.map((video) => {
    const inViewport = isInViewport(video);
    const rect = video.getBoundingClientRect();
    const src = video.currentSrc || video.getAttribute("src") || "";

    const preload = video.getAttribute("preload");
    const autoplay = video.hasAttribute("autoplay");
    const muted = video.hasAttribute("muted") || video.muted;
    const playsinline = video.hasAttribute("playsinline");
    const loop = video.hasAttribute("loop");
    const controls = video.hasAttribute("controls");
    const poster = video.getAttribute("poster");
    const hasDimensions = video.hasAttribute("width") && video.hasAttribute("height");
    const sources = Array.from(video.querySelectorAll("source"));
    const codec = detectBestCodec(video);

    const issues = [];

    if (preload === "auto" && !autoplay) {
      issues.push({
        s: "error",
        msg: 'preload="auto" loads the full video eagerly — use preload="none" or preload="metadata"',
      });
    }

    if (!autoplay && !inViewport && preload !== "none") {
      issues.push({
        s: "warning",
        msg: 'Off-viewport video without preload="none" — set preload="none" to avoid unnecessary loading',
      });
    }

    if (autoplay && !muted) {
      issues.push({
        s: "error",
        msg: "autoplay without muted — browsers block unmuted autoplay",
      });
    }

    if (autoplay && !playsinline) {
      issues.push({
        s: "warning",
        msg: "autoplay without playsinline — iOS Safari forces fullscreen mode",
      });
    }

    if (!poster) {
      issues.push({
        s: "warning",
        msg: "Missing poster — no preview frame shown before playback starts",
      });
    }

    if (!hasDimensions) {
      issues.push({
        s: "warning",
        msg: "Missing width/height attributes (CLS risk)",
      });
    }

    if (!isModernCodec(codec) && codec !== "no source") {
      issues.push({
        s: "info",
        msg: "No modern codec source detected — consider adding a WebM source (VP9 or AV1) for better compression",
      });
    }

    if (!controls && !autoplay) {
      issues.push({
        s: "info",
        msg: "No controls attribute and no autoplay — users may not be able to play the video",
      });
    }

    return {
      video,
      inViewport,
      src,
      codec,
      preload: preload ?? "(not set)",
      autoplay,
      muted,
      playsinline,
      loop,
      controls,
      poster: poster ? "✓" : "(not set)",
      hasDimensions,
      sourceCount: sources.length,
      dimensions: `${Math.round(rect.width)}×${Math.round(rect.height)}`,
      issues,
    };
  });

  const withIssues = audited.filter((r) => r.issues.length > 0);
  const totalErrors = audited.flatMap((r) => r.issues.filter((i) => i.s === "error")).length;
  const totalWarnings = audited.flatMap((r) => r.issues.filter((i) => i.s === "warning")).length;
  const totalInfos = audited.flatMap((r) => r.issues.filter((i) => i.s === "info")).length;

  console.group("%c🎬 Video Element Audit", "font-weight: bold; font-size: 14px;");

  // Summary
  console.log("");
  console.log("%cSummary", "font-weight: bold;");
  console.log(`   Total videos : ${videos.length}`);
  console.log(`   In viewport  : ${audited.filter((r) => r.inViewport).length}`);
  console.log(`   Off viewport : ${audited.filter((r) => !r.inViewport).length}`);
  console.log(
    `   Issues       : ${totalErrors} errors · ${totalWarnings} warnings · ${totalInfos} info`,
  );

  // Full table
  console.log("");
  console.group(`%c📋 All Videos (${videos.length})`, "font-weight: bold;");
  console.table(
    audited.map((r) => ({
      src: shortSrc(r.src),
      codec: r.codec,
      viewport: r.inViewport ? "✓" : "",
      preload: r.preload,
      autoplay: r.autoplay ? "✓" : "",
      muted: r.muted ? "✓" : "",
      playsinline: r.playsinline ? "✓" : "",
      controls: r.controls ? "✓" : "",
      poster: r.poster,
      "w/h": r.hasDimensions ? "✓" : "⚠️",
      sources: r.sourceCount,
      issues:
        r.issues.length === 0
          ? "✅"
          : r.issues
              .map((i) => (i.s === "error" ? "🔴" : i.s === "warning" ? "⚠️" : "ℹ️"))
              .join(" "),
    })),
  );
  console.groupEnd();

  // Issues detail
  if (withIssues.length > 0) {
    console.log("");
    console.group(
      `%c⚠️ Issues Detail (${totalErrors} errors · ${totalWarnings} warnings · ${totalInfos} info)`,
      "color: #ef4444; font-weight: bold;",
    );

    withIssues.forEach((r) => {
      const hasError = r.issues.some((i) => i.s === "error");
      const icon = hasError ? "🔴" : "⚠️";
      console.log("");
      console.log(`%c${icon} ${shortSrc(r.src) || "(no src)"}`, "font-weight: bold;");
      r.issues.forEach((issue) => {
        const prefix = issue.s === "error" ? "   🔴" : issue.s === "warning" ? "   ⚠️" : "   ℹ️";
        console.log(`${prefix} ${issue.msg}`);
      });
      console.log("   Element:", r.video);
    });

    console.groupEnd();
  } else {
    console.log("");
    console.log("%c✅ No issues found.", "color: #22c55e; font-weight: bold;");
  }

  // Quick reference
  console.log("");
  console.group("%c📝 Quick Reference", "color: #3b82f6; font-weight: bold;");
  console.log("");
  console.log("%c  🎬 Autoplay hero/background video:", "color: #22c55e;");
  console.log(
    '%c  <video autoplay muted playsinline loop poster="preview.avif" width="1280" height="720">\n    <source src="hero.av1.webm" type="video/webm; codecs=av01.0.04M.08">\n    <source src="hero.vp9.webm" type="video/webm; codecs=vp9">\n    <source src="hero.mp4" type="video/mp4">\n  </video>',
    "font-family: monospace;",
  );
  console.log("");
  console.log("%c  ✅ User-controlled video:", "color: #22c55e;");
  console.log(
    '%c  <video controls preload="metadata" poster="thumbnail.avif" width="800" height="450">\n    <source src="video.vp9.webm" type="video/webm; codecs=vp9">\n    <source src="video.mp4" type="video/mp4">\n  </video>',
    "font-family: monospace;",
  );
  console.log("");
  console.log("%c  ✅ Below-fold video:", "color: #22c55e;");
  console.log(
    '%c  <video controls preload="none" poster="thumbnail.avif" width="800" height="450">\n    <source src="video.vp9.webm" type="video/webm; codecs=vp9">\n    <source src="video.mp4" type="video/mp4">\n  </video>',
    "font-family: monospace;",
  );
  console.groupEnd();

  console.groupEnd();

  return {
    script: "Video-Element-Audit",
    status: "ok",
    count: videos.length,
    details: {
      totalVideos: videos.length,
      inViewport: audited.filter((r) => r.inViewport).length,
      offViewport: audited.filter((r) => !r.inViewport).length,
      totalErrors,
      totalWarnings,
      totalInfos,
    },
    items: audited.map((r) => ({
      src: r.src,
      codec: r.codec,
      inViewport: r.inViewport,
      preload: r.preload,
      autoplay: r.autoplay,
      muted: r.muted,
      playsinline: r.playsinline,
      loop: r.loop,
      controls: r.controls,
      hasPoster: r.poster !== "(not set)",
      hasDimensions: r.hasDimensions,
      sourceCount: r.sourceCount,
      issues: r.issues.map((i) => ({ severity: i.s, message: i.msg })),
    })),
    issues: audited.flatMap((r) =>
      r.issues.map((i) => ({
        severity: i.s,
        message: `${shortSrc(r.src) || "(no src)"}: ${i.msg}`,
      }))
    ),
  };
})();
```

---

# Resources

## Network Bandwidth & Connection Quality
URL: https://webperf-snippets.nucliweb.net/Resources/Network-Bandwidth-Connection-Quality

Network quality directly affects web performance. Segmenting metrics by connection type helps identify whether performance issues are infrastructure-related or affect only users on slower connections. Measured properties: - Connection type (WiFi, cellular, etc.) - Effective connection type (slow-2g, 2g, 3g, 4g) - Estimated downlink speed (Mbps) - Round Trip Time (RTT) estimate - Save-Data preference status Use cases: - Segment RUM data by connection quality - Serve adaptive experiences based on network conditions - Debug performance regressions for specific network profiles

```js
// Network Bandwidth & Connection Quality Analysis
// https://webperf-snippets.nucliweb.net

(() => {
  const connection =
    navigator.connection ||
    navigator.mozConnection ||
    navigator.webkitConnection;

  if (!connection) {
    console.warn(
      "%c⚠️ Network Information API not supported in this browser",
      "color: #f59e0b; font-weight: bold;"
    );
    console.log("Available in Chrome and Android browsers.");
    return { script: "Network-Bandwidth-Connection-Quality", status: "unsupported", error: "Network Information API not supported" };
  }

  const effectiveTypeRating = {
    "slow-2g": { label: "Slow 2G", color: "#ef4444" },
    "2g": { label: "2G", color: "#f97316" },
    "3g": { label: "3G", color: "#f59e0b" },
    "4g": { label: "4G", color: "#22c55e" },
  };

  const effectiveType = connection.effectiveType || "unknown";
  const rating = effectiveTypeRating[effectiveType] || {
    label: effectiveType,
    color: "#6b7280",
  };

  console.group(
    `%c📡 Network Quality: ${rating.label}`,
    `color: ${rating.color}; font-weight: bold; font-size: 14px;`
  );

  console.log("");
  console.log("%cConnection details:", "font-weight: bold;");
  console.table({
    "Connection Type": connection.type || "unknown",
    "Effective Type": effectiveType,
    "Downlink (Mbps)":
      connection.downlink !== undefined ? connection.downlink : "N/A",
    "RTT (ms)": connection.rtt !== undefined ? connection.rtt : "N/A",
    "Save-Data": connection.saveData ? "Enabled" : "Disabled",
  });

  // Recommendations
  console.log("");
  if (connection.saveData) {
    console.log(
      "%c💡 Save-Data is enabled — consider serving reduced assets:",
      "color: #3b82f6; font-weight: bold;"
    );
    console.log("   - Omit non-essential images and videos");
    console.log("   - Disable autoplay and animations");
    console.log("   - Defer non-critical resources");
  }

  if (effectiveType === "slow-2g" || effectiveType === "2g") {
    console.log(
      "%c💡 Slow connection detected — performance tips:",
      "color: #3b82f6; font-weight: bold;"
    );
    console.log("   - Prioritize critical resources with fetchpriority=high");
    console.log("   - Minimize render-blocking scripts and stylesheets");
    console.log("   - Consider skeleton screens over layout shifts");
  }

  // Monitor connection changes
  const onChange = () => {
    const updated = connection.effectiveType || "unknown";
    const updatedRating = effectiveTypeRating[updated] || {
      label: updated,
      color: "#6b7280",
    };
    console.log(
      `%c🔄 Connection changed → ${updatedRating.label} (${updated})`,
      `color: ${updatedRating.color}; font-weight: bold;`
    );
  };

  connection.addEventListener("change", onChange);
  console.log("");
  console.log(
    "%c👂 Listening for connection changes... (navigate to trigger)",
    "color: #6b7280;"
  );

  console.groupEnd();

  return {
    script: "Network-Bandwidth-Connection-Quality",
    status: "ok",
    details: {
      effectiveType,
      downlink: connection.downlink,
      rtt: connection.rtt,
      saveData: connection.saveData,
      type: connection.type || "unknown",
    },
  };
})();
```

---

# DevTools Overrides

## Fetch & XHR Timeline
URL: https://webperf-snippets.nucliweb.net/DevTools-Overrides/Fetch-XHR-Timeline

Intercepts every `fetch()` and `XMLHttpRequest` call made during the page lifecycle and correlates them with the Largest Contentful Paint (LCP) timing. Console snippets can only see requests that have already completed and are visible in the Resource Timing API. That excludes cross-origin requests without `Timing-Allow-Origin`, requests made by service workers, and calls that fail before a response is received. This snippet patches `window.fetch` and `XMLHttpRequest.prototype` at page initialization, so every call is captured regardless of origin or outcome. What it helps diagnose: - API calls that complete *before* LCP and may be blocking the critical rendering path - Failed or errored requests during framework bootstrap (Angular, React, Vue resolvers and guards) - Unnecessary authentication checks on pages where the user is known to be unauthenticated - The full request inventory of a page, including calls invisible to the Network panel timing data

```js
// Fetch & XHR Timeline — Inject via DevTools Overrides
// https://webperf-snippets.nucliweb.net
(() => {
  const calls = [];

  // Intercept fetch
  const origFetch = window.fetch;
  window.fetch = function (...args) {
    const url = typeof args[0] === "string" ? args[0] : args[0]?.url;
    const start = performance.now();
    return origFetch.apply(this, args).then((r) => {
      const end = performance.now();
      calls.push({
        type: "fetch",
        url,
        start: Math.round(start),
        end: Math.round(end),
        duration: Math.round(end - start),
        status: r.status,
      });
      return r;
    }).catch((err) => {
      const end = performance.now();
      calls.push({
        type: "fetch",
        url,
        start: Math.round(start),
        end: Math.round(end),
        duration: Math.round(end - start),
        status: "ERROR",
        error: err.message,
      });
      throw err;
    });
  };

  // Intercept XHR
  const origOpen = XMLHttpRequest.prototype.open;
  const origSend = XMLHttpRequest.prototype.send;

  XMLHttpRequest.prototype.open = function (method, url) {
    this.__url = url;
    this.__method = method;
    return origOpen.apply(this, arguments);
  };

  XMLHttpRequest.prototype.send = function () {
    const start = performance.now();
    this.addEventListener("loadend", () => {
      const end = performance.now();
      calls.push({
        type: "xhr",
        url: this.__url,
        start: Math.round(start),
        end: Math.round(end),
        duration: Math.round(end - start),
        status: this.status || "ERROR",
      });
    });
    return origSend.apply(this, arguments);
  };

  window.__perfCalls = calls;

  // Capture LCP for correlation in the read snippet
  try {
    new PerformanceObserver((list) => {
      const entries = list.getEntries();
      const last = entries[entries.length - 1];
      window.__lcpTime = Math.round(last.startTime);
    }).observe({ type: "largest-contentful-paint", buffered: true });
  } catch {}
})();
```

```js
// Fetch & XHR Timeline — Run in console after page load
// https://webperf-snippets.nucliweb.net

(() => {
  const calls = window.__perfCalls;

  if (!calls) {
    console.warn(
      "No data found. Make sure the inject snippet is active via DevTools Overrides and reload the page."
    );
    return;
  }

  const lcpEntries = performance.getEntriesByType("largest-contentful-paint");
  const lcpTime = lcpEntries.length
    ? Math.round(lcpEntries[lcpEntries.length - 1].startTime)
    : window.__lcpTime ?? null;

  const isAuthCall = (url = "") => {
    try {
      const { pathname, searchParams } = new URL(url, location.href);
      const path = pathname.toLowerCase();
      if (/\/(auth|login|logout|token|session|whoami|identity|oauth)/.test(path)) return true;
      if (/(^|\/)me(\/|$)/.test(path)) return true;
      if (searchParams.has("authIndexType") || searchParams.has("authIndexValue")) return true;
      return false;
    } catch {
      return false;
    }
  };

  const isError = (c) =>
    c.status === "ERROR" || (typeof c.status === "number" && c.status >= 400);

  const beforeLCP = lcpTime ? calls.filter((c) => c.end <= lcpTime) : [];
  const afterLCP = lcpTime ? calls.filter((c) => c.end > lcpTime) : calls;
  const errors = calls.filter(isError);
  const bootstrapErrors = errors.filter((c) => !lcpTime || c.end <= lcpTime);
  const postLCPErrors = errors.filter((c) => lcpTime && c.end > lcpTime);
  const authCalls = calls.filter((c) => isAuthCall(c.url));
  const authBeforeLCP = lcpTime ? authCalls.filter((c) => c.end <= lcpTime) : [];

  const row = (c) => ({
    Type: c.type,
    Status: c.status,
    "Start (ms)": c.start,
    "End (ms)": c.end,
    "Duration (ms)": c.duration,
    ...(lcpTime ? { "Before LCP": c.end <= lcpTime ? "⚠️ yes" : "no" } : {}),
    URL: c.url?.length > 80 ? "..." + c.url.slice(-77) : c.url,
  });

  console.group(
    "%c📡 Fetch & XHR Timeline",
    "font-weight: bold; font-size: 14px;"
  );
  console.log("");

  if (lcpTime) {
    console.log(`%cLCP: ${lcpTime}ms`, "font-weight: bold;");
    console.log("");
  } else {
    console.warn("LCP timing not available — before/after LCP analysis skipped. Make sure the inject snippet is active and reload the page.");
    console.log("");
  }

  if (calls.length === 0) {
    console.log(
      "%c✅ No fetch or XHR calls detected during page load",
      "color: #22c55e; font-weight: bold;"
    );
    console.groupEnd();
    return;
  }

  // Summary
  console.log("%cSummary:", "font-weight: bold;");
  console.log(`   Total calls: ${calls.length}`);
  if (lcpTime) {
    console.log(
      `   ${beforeLCP.length > 0 ? "⚠️" : "✅"} Before LCP (critical path candidates): ${beforeLCP.length}`
    );
    console.log(
      `   ✅ After LCP (confirmed non-blocking): ${afterLCP.length}`
    );
  }
  if (bootstrapErrors.length > 0) {
    console.log(`   🔴 Bootstrap errors (before LCP): ${bootstrapErrors.length}`);
  }
  if (postLCPErrors.length > 0) {
    console.log(`   🔴 Errors after LCP: ${postLCPErrors.length}`);
  }
  if (authCalls.length > 0) {
    console.log(
      `   🔑 Auth-related calls: ${authCalls.length}` +
        (authBeforeLCP.length > 0 ? ` — ${authBeforeLCP.length} before LCP ⚠️` : "")
    );
  }

  // Case 1 — API calls blocking LCP
  if (beforeLCP.length > 0) {
    console.log("");
    console.group(
      "%c⚠️ Calls completing before LCP — investigate as critical path blockers",
      "color: #ef4444; font-weight: bold;"
    );
    console.log(
      "%cCalls completing before LCP are candidates for deferral, aggressive caching, or parallelization. If a framework waits for their response before rendering, each one adds directly to LCP.",
      "color: #6b7280;"
    );
    console.table(beforeLCP.map(row));
    console.groupEnd();
  }

  // Case 2 — Bootstrap errors (before LCP)
  if (bootstrapErrors.length > 0) {
    console.log("");
    console.group(
      "%c🔴 Bootstrap errors — failed calls before LCP",
      "color: #ef4444; font-weight: bold;"
    );
    console.log(
      "%cA failed auth check or config endpoint during bootstrap can add hundreds of ms before first paint — even when the error is caught silently.",
      "color: #6b7280;"
    );
    console.table(
      bootstrapErrors.map((c) => ({
        Type: c.type,
        Status: c.status,
        Error: c.error || "-",
        "Start (ms)": c.start,
        "Duration (ms)": c.duration,
        URL: c.url?.length > 80 ? "..." + c.url.slice(-77) : c.url,
      }))
    );
    console.groupEnd();
  }

  if (postLCPErrors.length > 0) {
    console.log("");
    console.group(
      "%c🔴 Failed calls after LCP",
      "color: #ef4444; font-weight: bold;"
    );
    console.table(
      postLCPErrors.map((c) => ({
        Type: c.type,
        Status: c.status,
        Error: c.error || "-",
        "Start (ms)": c.start,
        "Duration (ms)": c.duration,
        URL: c.url?.length > 80 ? "..." + c.url.slice(-77) : c.url,
      }))
    );
    console.groupEnd();
  }

  // Case 4 — Unnecessary auth checks
  if (authCalls.length > 0) {
    console.log("");
    console.group(
      "%c🔑 Auth-related calls — verify these are necessary",
      "color: #f59e0b; font-weight: bold;"
    );
    console.log(
      "%cAuth calls on pages where the user is known to be unauthenticated add latency without value. Cross-reference with your routing guards.",
      "color: #6b7280;"
    );
    console.table(authCalls.map(row));
    console.groupEnd();
  }

  // Case 3 — Complete network inventory
  console.log("");
  console.group("%c📋 Complete network inventory", "font-weight: bold;");
  console.log(
    "%cIncludes cross-origin calls invisible to the Network panel timing data (no Timing-Allow-Origin header).",
    "color: #6b7280;"
  );
  console.table(
    calls
      .sort((a, b) => a.start - b.start)
      .map((c) => ({
        ...row(c),
        Auth: isAuthCall(c.url) ? "🔑" : "-",
      }))
  );
  console.groupEnd();

  console.groupEnd();
})();
```

---