webperf-snippets 0.4.0 → 0.5.0

package/README.md

@@ -1,6 +1,6 @@
 # webperf-snippets CLI
 
-Run curated [WebPerf Snippets](https://webperf-snippets.nucliweb.net) headlessly via Playwright. Diagnose Core Web Vitals beyond what Lighthouse exposes and gate CI on real performance budgets.
+Run curated [WebPerf Snippets](https://webperf-snippets.net) headlessly via Playwright. Diagnose Core Web Vitals beyond what Lighthouse exposes and gate CI on real performance budgets.
 
 <img width="1820" height="1442" alt="webperf-snippets-CLI" src="https://github.com/user-attachments/assets/af7e6b02-8877-407e-87a4-db063468b5fb" />
 
@@ -38,13 +38,13 @@ Run the default Core Web Vitals workflow (LCP + CLS, plus LCP-Subparts if LCP >
 npx webperf-snippets https://web.dev
 ```
 
-Loading audit (11 steps: TTFB, FCP, render-blocking, scripts, resource timings, third-party impact, fonts, cache; the list is in the [CLI page](https://webperf-snippets.nucliweb.net/CLI)):
+Loading audit (11 steps: TTFB, FCP, render-blocking, scripts, resource timings, third-party impact, fonts, cache; the list is in the [CLI page](https://webperf-snippets.net/CLI)):
 
 ```bash
 npx webperf-snippets https://web.dev --workflow loading
 ```
 
-Structural checks for CI (22 checks: render-blocking, compression, fonts, images, hints, DOM size and more; the list is in the [CLI page](https://webperf-snippets.nucliweb.net/CLI)):
+Structural checks for CI (22 checks: render-blocking, compression, fonts, images, hints, DOM size and more; the list is in the [CLI page](https://webperf-snippets.net/CLI)):
 
 ```bash
 npx webperf-snippets https://web.dev --workflow audit
@@ -77,6 +77,8 @@ npx webperf-snippets https://web.dev --snippet Interaction/Interactions --intera
 
 The Interaction snippets (`Interactions`, `Input-Latency-Breakdown`, `LongTask`, `Forced-Synchronous-Layout`...) are installed before the first step and read after the last one, so their result holds what the steps caused.
 
+The CLI waits for the browser to report the timing of the last interaction before it reads the snippets. A script that ends right after a click still reads the page before anything the click sets in motion later has happened, such as a request or an animation, so end it with a `wait` step when you want to measure that.
+
 Interaction audit (long tasks, long animation frames, scroll, layout shifts, forced layouts, interaction latency). It scrolls the page, or runs your `--interact-script`; the steps that need a click are skipped when the script has none:
 
 ```bash
@@ -132,7 +134,7 @@ Without `--report-to` the CLI makes no external calls. With it, the results are
   "timestamp": "2026-05-06T10:00:00.000Z",
   "navMs": 1240,
   "results": [],
-  "meta": { "viewport": "mobile", "waitMs": 3000, "cli_version": "0.4.0" }
+  "meta": { "viewport": "mobile", "waitMs": 3000, "cli_version": "0.5.0" }
 }
 ```
 
@@ -192,7 +194,7 @@ npx webperf-snippets https://web.dev --budget-lcp 2500 --budget-cls 0.1
 
 ### Follow-up steps
 
-The results of a run can add steps on the same page load: LCP over 2.5 s adds `LCP-Subparts`, over 4 s `LCP-Trail`; an image or video LCP adds its entropy, image or video audit; CLS over 0.1 adds `Layout-Shift-Loading-and-Interaction`, over 0.25 also the lazy images, fonts, critical CSS and images without dimensions; TTFB over 600 ms adds `TTFB-Sub-Parts`; FCP over 1.8 s adds the render-blocking check. The full table is in the [CLI page](https://webperf-snippets.nucliweb.net/CLI). Each snippet runs once, and a follow-up informs: its `error` issues do not change the exit code.
+The results of a run can add steps on the same page load: LCP over 2.5 s adds `LCP-Subparts`, over 4 s `LCP-Trail`; an image or video LCP adds its entropy, image or video audit; CLS over 0.1 adds `Layout-Shift-Loading-and-Interaction`, over 0.25 also the lazy images, fonts, critical CSS and images without dimensions; TTFB over 600 ms adds `TTFB-Sub-Parts`; FCP over 1.8 s adds the render-blocking check. The full table is in the [CLI page](https://webperf-snippets.net/CLI). Each snippet runs once, and a follow-up informs: its `error` issues do not change the exit code.
 
 ### Exit codes
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webperf-snippets",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Run curated WebPerf Snippets headlessly via Playwright. Diagnose Core Web Vitals beyond what Lighthouse exposes.",
   "type": "module",
   "bin": "./src/bin.js",
@@ -16,7 +16,7 @@
     "test:e2e": "vitest run tests/e2e"
   },
   "devDependencies": {
-    "vitest": "^2.0.0"
+    "vitest": "^4.1.11"
   },
   "engines": {
     "node": ">=20.12.0"
@@ -42,7 +42,7 @@
     "url": "git+https://github.com/nucliweb/webperf-snippets.git",
     "directory": "cli"
   },
-  "homepage": "https://webperf-snippets.nucliweb.net",
+  "homepage": "https://webperf-snippets.net",
   "peerDependencies": {
     "playwright": ">=1.40.0"
   },

package/snippets/CoreWebVitals/CLS.js

@@ -1,5 +1,5 @@
 // CLS Quick Check
-// https://webperf-snippets.nucliweb.net
+// https://webperf-snippets.net
 
 (async () => {
   if (!PerformanceObserver.supportedEntryTypes?.includes("layout-shift")) {

package/snippets/CoreWebVitals/INP.js

@@ -1,5 +1,5 @@
 // INP (Interaction to Next Paint) Tracking
-// https://webperf-snippets.nucliweb.net
+// https://webperf-snippets.net
 
 (() => {
   if (!PerformanceObserver.supportedEntryTypes?.includes("event")) {

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

@@ -1,5 +1,5 @@
 // LCP Image Entropy Check
-// https://webperf-snippets.nucliweb.net
+// https://webperf-snippets.net
 
 (async () => {
   if (!PerformanceObserver.supportedEntryTypes?.includes("largest-contentful-paint")) {
@@ -195,6 +195,19 @@
   if (lcpImageSync?.isLowEntropy) {
     issuesSync.push({ severity: "error", message: "Current LCP image has low entropy and may be skipped by Chrome" });
   }
+  // Entropy applies to the LCP only when it is an <img> whose file size can be read; for text, or an
+  // image this snippet cannot read, it says so. The images of the page are still listed.
+  const lcpTag = lcpElementSync ? lcpElementSync.tagName.toLowerCase() : null;
+  if (lcpTag && !lcpImageSync) {
+    issuesSync.push({
+      severity: "info",
+      message: lcpTag === "img"
+        ? "The LCP <img> has no file size to read, as with a data: URL or a cross-origin image without Timing-Allow-Origin, so its entropy cannot be computed."
+        : lcpUrlSync
+        ? `The LCP is the image of a <${lcpTag}>, such as a CSS background or a video poster, and this snippet reads <img> elements only. Run the LCP snippet to measure it.`
+        : `The LCP element is <${lcpTag}>, text and not an image, so its entropy does not apply. Run the LCP snippet to measure it.`,
+    });
+  }
   // The list keeps the 50 most relevant images (the LCP image, then low entropy, then lowest bits per pixel); count and details cover all of them
   const MAX_ITEMS = 50;
   const rankedImages = [...imagesSync].sort(
@@ -207,6 +220,7 @@
     details: {
       totalImages: imagesSync.length,
       lowEntropyCount,
+      lcpElement: lcpTag,
       lcpImageEligible: lcpImageSync ? !lcpImageSync.isLowEntropy : null,
       lcpImage: lcpImageSync ? { url: lcpImageSync.url, bpp: lcpImageSync.bpp, isLowEntropy: lcpImageSync.isLowEntropy } : null,
     },

package/snippets/CoreWebVitals/LCP-Subparts.js

@@ -1,7 +1,15 @@
 // LCP Subparts Analysis
-// https://webperf-snippets.nucliweb.net
+// https://webperf-snippets.net
 
 (async () => {
+  // @shared isOwnRequest
+  // True for the Resource Timing entry of a request a snippet made with ownRequestUrl: the page
+  // did not make it, so no snippet counts it.
+  function isOwnRequest(entry) {
+    return entry.name.endsWith("#webperf-snippets");
+  }
+  // @end-shared isOwnRequest
+
   if (!PerformanceObserver.supportedEntryTypes?.includes("largest-contentful-paint")) {
     console.warn("⚠️ largest-contentful-paint entries are not supported in this browser.");
     return { script: "LCP-Subparts", status: "unsupported", error: "largest-contentful-paint entries not supported in this browser" };
@@ -25,6 +33,40 @@
     { name: "Element Render Delay", key: "elementRenderDelay", targetPercent: 10 },
   ];
 
+  // @shared uniqueSelector
+  // A CSS selector that matches only el in its document (or shadow root): its id when it is unique,
+  // otherwise a path of tag, classes and :nth-of-type() that goes up to the nearest ancestor with a
+  // unique id, or to the root, and stops as soon as it matches one element.
+  function uniqueSelector(el) {
+    const root = el.getRootNode();
+    const matchesOne = (selector) => {
+      try {
+        return root.querySelectorAll(selector).length === 1;
+      } catch {
+        return false;
+      }
+    };
+    const parts = [];
+    let node = el;
+    while (node && node.nodeType === 1) {
+      if (node.id && matchesOne(`#${window.CSS.escape(node.id)}`)) {
+        parts.unshift(`#${window.CSS.escape(node.id)}`);
+        break;
+      }
+      const tag = node.localName;
+      let part = tag + Array.from(node.classList).slice(0, 2).map((c) => `.${window.CSS.escape(c)}`).join("");
+      const siblings = node.parentNode ? Array.from(node.parentNode.children) : [node];
+      if (siblings.filter((s) => s.matches(part)).length > 1) {
+        part += `:nth-of-type(${siblings.filter((s) => s.localName === tag).indexOf(node) + 1})`;
+      }
+      parts.unshift(part);
+      if (matchesOne(parts.join(" > "))) break;
+      node = node.parentElement;
+    }
+    return parts.join(" > ");
+  }
+  // @end-shared uniqueSelector
+
   const getNavigationEntry = () => {
     const navEntry = performance.getEntriesByType("navigation")[0];
     if (navEntry?.responseStart > 0 && navEntry.responseStart < performance.now()) {
@@ -41,7 +83,7 @@
     if (!navEntry) return;
 
     const lcpResEntry = performance
-      .getEntriesByType("resource")
+      .getEntriesByType("resource").filter((e) => !isOwnRequest(e))
       .find((e) => e.name === lcpEntry.url);
 
     const activationStart = navEntry.activationStart || 0;
@@ -85,16 +127,9 @@
     // 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);
+      console.log(`   ${uniqueSelector(el)}`, el);
       if (lcpEntry.url) {
         const shortUrl = (() => {
           try {
@@ -223,7 +258,7 @@
   if (!navEntrySync) {
     return { script: "LCP-Subparts", status: "error", error: "No navigation entry" };
   }
-  const lcpResEntrySync = performance.getEntriesByType("resource")
+  const lcpResEntrySync = performance.getEntriesByType("resource").filter((e) => !isOwnRequest(e))
     .find((e) => e.name === lcpEntry.url);
   const activationStartSync = navEntrySync.activationStart || 0;
   const ttfbSync = Math.max(0, navEntrySync.responseStart - activationStartSync);
@@ -249,13 +284,7 @@
   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}`;
-    }
+    lcpSelectorSync = uniqueSelector(lcpEntry.element);
   }
   const shortUrlSync = lcpEntry.url
     ? (() => {

package/snippets/CoreWebVitals/LCP-Trail.js

@@ -1,6 +1,6 @@
 // LCP Trail
 // Tracks all LCP candidate elements during page load
-// https://webperf-snippets.nucliweb.net
+// https://webperf-snippets.net
 
 (async () => {
   if (!PerformanceObserver.supportedEntryTypes?.includes("largest-contentful-paint")) {
@@ -30,14 +30,39 @@
     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}`;
+  // @shared uniqueSelector
+  // A CSS selector that matches only el in its document (or shadow root): its id when it is unique,
+  // otherwise a path of tag, classes and :nth-of-type() that goes up to the nearest ancestor with a
+  // unique id, or to the root, and stops as soon as it matches one element.
+  function uniqueSelector(el) {
+    const root = el.getRootNode();
+    const matchesOne = (selector) => {
+      try {
+        return root.querySelectorAll(selector).length === 1;
+      } catch {
+        return false;
+      }
+    };
+    const parts = [];
+    let node = el;
+    while (node && node.nodeType === 1) {
+      if (node.id && matchesOne(`#${window.CSS.escape(node.id)}`)) {
+        parts.unshift(`#${window.CSS.escape(node.id)}`);
+        break;
+      }
+      const tag = node.localName;
+      let part = tag + Array.from(node.classList).slice(0, 2).map((c) => `.${window.CSS.escape(c)}`).join("");
+      const siblings = node.parentNode ? Array.from(node.parentNode.children) : [node];
+      if (siblings.filter((s) => s.matches(part)).length > 1) {
+        part += `:nth-of-type(${siblings.filter((s) => s.localName === tag).indexOf(node) + 1})`;
+      }
+      parts.unshift(part);
+      if (matchesOne(parts.join(" > "))) break;
+      node = node.parentElement;
     }
-    return element.tagName.toLowerCase();
-  };
+    return parts.join(" > ");
+  }
+  // @end-shared uniqueSelector
 
   const getElementInfo = (element, entry) => {
     const tag = element.tagName.toLowerCase();
@@ -115,7 +140,7 @@
       candidates.push({
         index: candidates.length + 1,
         element,
-        selector: getSelector(element),
+        selector: uniqueSelector(element),
         color,
         name,
         time: Math.max(0, entry.startTime - activationStart),
@@ -152,7 +177,7 @@
     const el = entry.element;
     if (!el || seenEls.has(el)) continue;
     seenEls.add(el);
-    const selector = getSelector(el);
+    const selector = uniqueSelector(el);
     const time = Math.round(Math.max(0, entry.startTime - trailActivationStart));
     const { type, url } = getElementInfo(el, entry);
     syncCandidates.push({

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

@@ -1,5 +1,5 @@
 // LCP Video Candidate
-// https://webperf-snippets.nucliweb.net
+// https://webperf-snippets.net
 
 (async () => {
   if (!PerformanceObserver.supportedEntryTypes?.includes("largest-contentful-paint")) {
@@ -68,40 +68,55 @@
   const lcpTime = Math.round(Math.max(0, lcp.startTime - activationStart));
 
   // --- LCP is NOT a video ---
+  // The value of a non-video LCP belongs to the LCP snippet; this one only says what the element is
   if (!element || element.tagName !== "VIDEO") {
-    const tag = element ? `<${element.tagName.toLowerCase()}>` : "(element no longer in DOM)";
-    const rating = valueToRating(lcpTime);
+    const tag = element ? element.tagName.toLowerCase() : null;
+    const message = tag
+      ? `The LCP element is <${tag}>, not a <video>. Run the LCP snippet to measure it, and LCP Subparts to see its phases.`
+      : "The LCP element is no longer in the DOM, so it cannot be checked for a <video>. Run the LCP snippet to measure it.";
     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}`);
+    console.log(`   Tag      : ${tag ? `<${tag}>` : "(element no longer in DOM)"}`);
     if (lcp.url) console.log(`   URL      : ${lcp.url}`);
     if (element) console.log("   Element  :", element);
+    console.log("");
+    console.log(`   ${message}`);
     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: [],
+      details: { isVideo: false, lcpElement: tag, lcpUrl: lcp.url || null },
+      issues: [{ severity: "info", message }],
     };
   }
 
   // --- LCP IS a video ---
   const posterAttr = element.getAttribute("poster") || "";
   const posterUrl = posterAttr ? normalizeUrl(posterAttr) : "";
-  const lcpUrl = lcp.url || "";
+  const lcpUrl = lcp.url ? normalizeUrl(lcp.url) : "";
+  const videoUrls = [element.currentSrc, element.getAttribute("src"), ...Array.from(element.querySelectorAll("source"), (s) => s.getAttribute("src"))]
+    .filter(Boolean)
+    .map(normalizeUrl);
+
+  // Chrome considers both the poster image and the first video frame as LCP candidates, and gives
+  // the entry the URL of the poster or of the video file. The URL tells them apart. A video without
+  // a poster can only be its first frame, and a URL that matches neither (a redirected poster) is
+  // taken as the poster.
+  const lcpSource =
+    lcpUrl && videoUrls.includes(lcpUrl) ? "first-frame"
+    : lcpUrl && lcpUrl === posterUrl ? "poster"
+    : !posterAttr ? "first-frame"
+    : lcpUrl ? "poster"
+    : "unknown";
+  const videoUrl = lcpSource === "first-frame" ? lcpUrl || videoUrls[0] || null : null;
 
-  // 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";
+  // Chrome keeps reporting LCP candidates until the user interacts with the page, so a page left
+  // open can report one long after its load, which is not the LCP of the load
+  const loadEventEnd = performance.getEntriesByType("navigation")[0]?.loadEventEnd || 0;
+  const secondsAfterLoad = loadEventEnd > 0 ? Math.round((lcp.startTime - loadEventEnd) / 1000) : 0;
 
   const rating = valueToRating(lcpTime);
-  const posterFormat = detectFormat(lcpUrl || posterUrl);
+  const posterFormat = detectFormat(posterUrl);
   const isModernFormat = ["avif", "webp", "jxl"].includes(posterFormat);
   const isCrossOrigin = lcp.renderTime === 0 && lcp.loadTime > 0;
 
@@ -123,25 +138,32 @@
 
   const issues = [];
 
+  if (secondsAfterLoad > 10) {
+    issues.push({
+      s: "warning",
+      msg: `The LCP candidate rendered ${secondsAfterLoad} s after the page loaded, because the page stayed open without interaction. Reload and run the snippet again to measure the LCP of the load`,
+    });
+  }
+
   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" });
+    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' });
+    issues.push({ s: "warning", msg: 'No <link rel="preload" as="image"> for the poster: the 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' });
+    issues.push({ s: "info", msg: 'Preload found but missing fetchpriority="high", so it 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` });
+    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" });
+    issues.push({ s: "info", msg: "renderTime is 0: the resource is cross-origin and the server does not send Timing-Allow-Origin" });
   }
 
   if (!autoplay && preload === "none") {
@@ -159,7 +181,8 @@
   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(`   Poster URL  : ${posterUrl || "⚠️ (none)"}`);
+  if (videoUrl) console.log(`   Video URL   : ${videoUrl}`);
   console.log(`   Format      : ${posterFormat}`);
 
   // Video element
@@ -234,7 +257,8 @@
     details: {
       isVideo: true,
       lcpSource,
-      posterUrl: lcpUrl || posterUrl || null,
+      posterUrl: posterUrl || null,
+      videoUrl,
       posterFormat,
       posterPreloaded: !!posterPreload,
       fetchpriorityOnPreload: posterPreload?.getAttribute("fetchpriority") ?? null,

package/snippets/CoreWebVitals/LCP.js

@@ -1,5 +1,5 @@
 // LCP Quick Check
-// https://webperf-snippets.nucliweb.net
+// https://webperf-snippets.net
 
 (async () => {
   if (!PerformanceObserver.supportedEntryTypes?.includes("largest-contentful-paint")) {
@@ -15,6 +15,40 @@
     poor: { icon: "🔴", color: "#FF4E42" },
   };
 
+  // @shared uniqueSelector
+  // A CSS selector that matches only el in its document (or shadow root): its id when it is unique,
+  // otherwise a path of tag, classes and :nth-of-type() that goes up to the nearest ancestor with a
+  // unique id, or to the root, and stops as soon as it matches one element.
+  function uniqueSelector(el) {
+    const root = el.getRootNode();
+    const matchesOne = (selector) => {
+      try {
+        return root.querySelectorAll(selector).length === 1;
+      } catch {
+        return false;
+      }
+    };
+    const parts = [];
+    let node = el;
+    while (node && node.nodeType === 1) {
+      if (node.id && matchesOne(`#${window.CSS.escape(node.id)}`)) {
+        parts.unshift(`#${window.CSS.escape(node.id)}`);
+        break;
+      }
+      const tag = node.localName;
+      let part = tag + Array.from(node.classList).slice(0, 2).map((c) => `.${window.CSS.escape(c)}`).join("");
+      const siblings = node.parentNode ? Array.from(node.parentNode.children) : [node];
+      if (siblings.filter((s) => s.matches(part)).length > 1) {
+        part += `:nth-of-type(${siblings.filter((s) => s.localName === tag).indexOf(node) + 1})`;
+      }
+      parts.unshift(part);
+      if (matchesOne(parts.join(" > "))) break;
+      node = node.parentElement;
+    }
+    return parts.join(" > ");
+  }
+  // @end-shared uniqueSelector
+
   const getActivationStart = () => {
     const navEntry = performance.getEntriesByType("navigation")[0];
     return navEntry?.activationStart || 0;
@@ -38,14 +72,7 @@
       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);
+      console.log(`   Element: ${uniqueSelector(element)}`, element);
 
       const tagName = element.tagName.toLowerCase();
       if (tagName === "img") {
@@ -108,12 +135,7 @@
   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}`;
-    }
+    lcpSelector = uniqueSelector(lcpEl);
     const tag = lcpEl.tagName.toLowerCase();
     lcpType = tag === "img" ? "Image" : tag === "video" ? "Video poster" :
       window.getComputedStyle(lcpEl).backgroundImage !== "none" ? "Background image" :

package/snippets/DevTools-Overrides/Fetch-XHR-Timeline-inject.js

@@ -1,5 +1,5 @@
 // Fetch & XHR Timeline — Inject via DevTools Overrides
-// https://webperf-snippets.nucliweb.net
+// https://webperf-snippets.net
 (() => {
   const calls = [];
 

package/snippets/DevTools-Overrides/Fetch-XHR-Timeline-read.js

@@ -1,5 +1,5 @@
 // Fetch & XHR Timeline — Run in console after page load
-// https://webperf-snippets.nucliweb.net
+// https://webperf-snippets.net
 
 (async () => {
   const calls = window.__perfCalls;

package/snippets/Interaction/DOM-Size-and-Depth.js

@@ -1,5 +1,5 @@
 // DOM Size and Depth
-// https://webperf-snippets.nucliweb.net
+// https://webperf-snippets.net
 
 (() => {
   // Lighthouse "Avoid an excessive DOM size" thresholds

package/snippets/Interaction/Forced-Synchronous-Layout.js

@@ -1,5 +1,5 @@
 // Forced Synchronous Layout Detector
-// https://webperf-snippets.nucliweb.net
+// https://webperf-snippets.net
 
 (() => {
   let isDirty = false;

package/snippets/Interaction/Input-Latency-Breakdown.js

@@ -1,5 +1,5 @@
 // Input Latency Breakdown
-// https://webperf-snippets.nucliweb.net
+// https://webperf-snippets.net
 
 (() => {
   const formatMs = (ms) => `${Math.round(ms)}ms`;

package/snippets/Interaction/Interactions.js

@@ -1,5 +1,5 @@
 // Interaction Tracking
-// https://webperf-snippets.nucliweb.net
+// https://webperf-snippets.net
 
 (() => {
   const formatMs = (ms) => `${Math.round(ms)}ms`;

package/snippets/Interaction/Layout-Shift-Loading-and-Interaction.js

@@ -1,5 +1,5 @@
 // Layout Shift Tracking
-// https://webperf-snippets.nucliweb.net
+// https://webperf-snippets.net
 
 (async () => {
   if (!PerformanceObserver.supportedEntryTypes?.includes("layout-shift")) {

package/snippets/Interaction/Long-Animation-Frames-Helpers.js

@@ -1,5 +1,5 @@
 // LoAF Helpers - Advanced Debugging
-// https://webperf-snippets.nucliweb.net
+// https://webperf-snippets.net
 
 (() => {
   "use strict";

package/snippets/Interaction/Long-Animation-Frames-Script-Attribution.js

@@ -1,5 +1,5 @@
 // Long Animation Frames - Script Attribution Analysis
-// https://webperf-snippets.nucliweb.net
+// https://webperf-snippets.net
 
 (() => {
   // Check browser support

package/snippets/Interaction/Long-Animation-Frames.js

@@ -1,5 +1,5 @@
 // Long Animation Frames Analysis
-// https://webperf-snippets.nucliweb.net
+// https://webperf-snippets.net
 
 (() => {
   const formatMs = (ms) => `${Math.round(ms)}ms`;

package/snippets/Interaction/LongTask.js

@@ -1,5 +1,5 @@
 // Long Tasks Tracking
-// https://webperf-snippets.nucliweb.net
+// https://webperf-snippets.net
 
 (async () => {
   if (!PerformanceObserver.supportedEntryTypes?.includes("longtask")) {

package/snippets/Interaction/Scroll-Performance.js

@@ -1,5 +1,5 @@
 // Scroll Performance Analysis
-// https://webperf-snippets.nucliweb.net
+// https://webperf-snippets.net
 
 (() => {
   const formatMs = (ms) => `${ms.toFixed(1)}ms`;