webperf-snippets 0.1.0

package/snippets/CoreWebVitals/INP.js

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

package/snippets/CoreWebVitals/LCP-Image-Entropy.js

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