webperf-snippets 0.1.0

package/snippets/CoreWebVitals/LCP-Subparts.js

@@ -0,0 +1,286 @@
+// 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,
+    },
+  };
+})();

package/snippets/CoreWebVitals/LCP-Trail.js

@@ -0,0 +1,184 @@
+// 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,
+    },
+  };
+})();

package/snippets/CoreWebVitals/LCP-Video-Candidate.js

@@ -0,0 +1,228 @@
+// 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 })),
+  };
+})();