feat(webperf-core-web-vitals): address review feedback

- Remove LCP-Image-Entropy.js: low-entropy filter has been in Chrome stable since Chrome 112, making the script no longer actionable
- Update LCP-Video-Candidate.js: Chrome now considers the first frame of <video> elements as an LCP candidate. Add lcpSource ("poster" | "first-frame" | "unknown") to details, replace the missing-poster error with contextual info/warning based on lcpSource
- Remove cross-skill references to skills not yet available (webperf-loading, webperf-interaction, webperf-media). Decision trees now reference only scripts in this skill with general guidance where follow-up is needed

Author: nucliweb

skills/webperf-core-web-vitals/SKILL.md

@@ -12,7 +12,6 @@ JavaScript snippets for measuring web performance in Chrome DevTools. Execute wi
 
 - `scripts/CLS.js` — Cumulative Layout Shift (CLS)
 - `scripts/INP.js` — Interaction to Next Paint (INP)
-- `scripts/LCP-Image-Entropy.js` — LCP Image Entropy
 - `scripts/LCP-Sub-Parts.js` — LCP Sub-Parts
 - `scripts/LCP-Trail.js` — LCP Trail
 - `scripts/LCP-Video-Candidate.js` — LCP Video Candidate
@@ -24,7 +23,7 @@ Descriptions, thresholds, and return schemas: `references/snippets.md`, `referen
 
 Scripts fall into two execution patterns:
 
-### Synchronous (LCP, CLS, LCP-Sub-Parts, LCP-Trail, LCP-Image-Entropy, LCP-Video-Candidate)
+### Synchronous (LCP, CLS, LCP-Sub-Parts, LCP-Trail, LCP-Video-Candidate)
 
 Run via `evaluate_script` and return structured JSON immediately from buffered performance data. The page must have already loaded.
 
@@ -60,18 +59,14 @@ When LCP is slow or the user asks "debug LCP" or "why is LCP slow":
 1. **LCP.js** - Establish baseline LCP value
 2. **LCP-Subparts.js** - Break down into TTFB, resource load, render delay
 3. **LCP-Trail.js** - Identify all LCP candidates and changes
-4. **LCP-Image-Entropy.js** - Check if LCP image has visual complexity issues
-5. **LCP-Video-Candidate.js** - Detect if LCP is a video (poster or video element)
+4. **LCP-Video-Candidate.js** - Detect if LCP is a video (poster or first frame)
 
 ### CLS Investigation
 
 When layout shifts are detected or the user asks "debug CLS" or "layout shift issues":
 
 1. **CLS.js** - Measure overall CLS score
-2. **Layout-Shift-Loading-and-Interaction.js** (from `webperf-interaction` skill) - Separate loading vs interaction shifts
-3. Cross-reference with **webperf-loading** skill:
-   - Find-Above-The-Fold-Lazy-Loaded-Images.js (lazy images causing shifts)
-   - Fonts-Preloaded-Loaded-and-used-above-the-fold.js (font swap causing shifts)
+2. Call `getCLS()` after page interactions to capture post-load shifts
 
 ### INP Debugging
 
@@ -80,35 +75,21 @@ When interactions feel slow or the user asks "debug INP" or "slow interactions":
 1. **INP.js** - Start measuring. Tell the user to interact with the page and confirm when done.
 2. Call `getINP()` to collect results once the user confirms.
 3. Call `getINPDetails()` to see all interactions ranked by duration.
-4. **Interactions.js** (from `webperf-interaction` skill) - List all interactions with timing
-5. **Input-Latency-Breakdown.js** (from `webperf-interaction` skill) - Break down input delay, processing, presentation
-6. **Long-Animation-Frames.js** (from `webperf-interaction` skill) - Identify blocking animation frames
-7. **Long-Animation-Frames-Script-Attribution.js** (from `webperf-interaction` skill) - Find scripts causing delays
 
 ### Video as LCP Investigation
 
 When LCP is a video element (detected by LCP-Video-Candidate.js):
 
-1. **LCP-Video-Candidate.js** - Identify video as LCP candidate
-2. **Video-Element-Audit.js** (from Media skill) - Audit video loading strategy
-3. **LCP-Subparts.js** - Analyze video loading phases
-4. Cross-reference with **webperf-loading** skill:
-   - Resource-Hints-Validation.js (check for video preload)
-   - Priority-Hints-Audit.js (check for fetchpriority on video)
+1. **LCP-Video-Candidate.js** - Identify video as LCP candidate, detect `lcpSource` (poster or first frame)
+2. **LCP-Subparts.js** - Analyze video loading phases
 
 ### Image as LCP Investigation
 
 When LCP is an image (most common case):
 
 1. **LCP.js** - Measure LCP timing
 2. **LCP-Subparts.js** - Break down timing phases
-3. **LCP-Image-Entropy.js** - Analyze image complexity
-4. Cross-reference with **webperf-media** skill:
-   - Image-Element-Audit.js (check format, dimensions, lazy loading)
-5. Cross-reference with **webperf-loading** skill:
-   - Find-Above-The-Fold-Lazy-Loaded-Images.js (check if incorrectly lazy)
-   - Priority-Hints-Audit.js (check for fetchpriority="high")
-   - Resource-Hints-Validation.js (check for preload)
+3. **LCP-Trail.js** - Track all LCP candidates to confirm final element
 
 ## Decision Tree
 
@@ -117,114 +98,46 @@ Use this decision tree to automatically run follow-up snippets based on results:
 ### After LCP.js
 
 - **If LCP > 2.5s** → Run **LCP-Sub-Parts.js** to diagnose which phase is slow
-- **If LCP > 4.0s (poor)** → Run full LCP deep dive workflow (5 snippets)
-- **If LCP candidate is an image** → Run **LCP-Image-Entropy.js** and **webperf-media:Image-Element-Audit.js**
-- **If LCP candidate is a video** → Run **LCP-Video-Candidate.js** and **webperf-media:Video-Element-Audit.js**
+- **If LCP > 4.0s (poor)** → Run full LCP deep dive workflow
+- **If LCP candidate is a video** → Run **LCP-Video-Candidate.js**
 - **Always run** → **LCP-Trail.js** to understand candidate evolution
 
 ### After LCP-Subparts.js
 
-- **If TTFB phase > 600ms** → Switch to **webperf-loading** skill and run TTFB-Sub-Parts.js
-- **If Resource Load Time > 1500ms** → Run:
-  1. **webperf-loading:Resource-Hints-Validation.js** (check for preload/preconnect)
-  2. **webperf-loading:Priority-Hints-Audit.js** (check fetchpriority)
-  3. **webperf-loading:Find-render-blocking-resources.js** (competing resources)
-- **If Render Delay > 200ms** → Run:
-  1. **webperf-loading:Find-render-blocking-resources.js** (blocking CSS/JS)
-  2. **webperf-loading:Script-Loading.js** (parser-blocking scripts)
-  3. **webperf-interaction:Long-Animation-Frames.js** (main thread blocking)
+- **If TTFB phase > 600ms** → Investigate server response time and redirects
+- **If Resource Load Time > 1500ms** → Check preload hints and fetch priority for the LCP resource
+- **If Render Delay > 200ms** → Investigate render-blocking resources and main thread work
 
 ### After LCP-Trail.js
 
-- **If many LCP candidate changes (>3)** → This causes visual instability, investigate:
-  1. **webperf-loading:Find-Above-The-Fold-Lazy-Loaded-Images.js** (late-loading images)
-  2. **webperf-loading:Fonts-Preloaded-Loaded-and-used-above-the-fold.js** (font swaps)
-  3. **CLS.js** (layout shifts contributing to LCP changes)
-- **If final LCP candidate appears late** → Run **webperf-loading:Resource-Hints-Validation.js**
-- **If early candidate was replaced** → Understand why initial content was pushed down (likely CLS issue)
-
-### After LCP-Image-Entropy.js
-
-- **If entropy is very high** → Image is visually complex, recommend:
-  - Modern formats (WebP, AVIF)
-  - Appropriate compression
-  - Potentially a placeholder strategy
-- **If entropy is low** → Image may be over-optimized or placeholder-like
-- **If large file size detected** → Run **webperf-media:Image-Element-Audit.js** for format/sizing analysis
+- **If many LCP candidate changes (>3)** → Visual instability; run **CLS.js** to check layout shifts
+- **If final LCP candidate appears late** → Investigate resource preloading for the LCP element
+- **If early candidate was replaced** → Likely a CLS issue; run **CLS.js**
 
 ### After LCP-Video-Candidate.js
 
-- **If video is LCP** → Run:
-  1. **webperf-media:Video-Element-Audit.js** (check poster, preload, formats)
-  2. **webperf-loading:Priority-Hints-Audit.js** (check fetchpriority on poster)
-  3. **LCP-Sub-Parts.js** (analyze video loading phases)
-- **If poster image is LCP** → Treat as image LCP (run image workflows)
+- **If `lcpSource === "poster"`** → Check poster preload and `fetchpriority="high"`; run **LCP-Subparts.js**
+- **If `lcpSource === "first-frame"`** → Ensure `autoplay` + `muted` + `playsinline` are set; adding a poster gives explicit control
+- **If `lcpSource === "unknown"`** → No poster URL or video URL detectable; run **LCP-Subparts.js** for timing breakdown
 
 ### After CLS.js
 
-- **If CLS > 0.1** → Run **webperf-interaction:Layout-Shift-Loading-and-Interaction.js** to separate causes
-- **If CLS > 0.25 (poor)** → Run comprehensive shift investigation:
-  1. **webperf-loading:Find-Above-The-Fold-Lazy-Loaded-Images.js** (images without dimensions)
-  2. **webperf-loading:Fonts-Preloaded-Loaded-and-used-above-the-fold.js** (font loading strategy)
-  3. **webperf-loading:Critical-CSS-Detection.js** (late-loading styles)
-  4. **webperf-media:Image-Element-Audit.js** (missing width/height)
+- **If CLS > 0.1** → Check `sources` in the result for the shifting elements; inspect for missing `width`/`height` attributes, late-loading fonts, or dynamic content insertion
+- **If CLS > 0.25 (poor)** → Call `getCLS()` after interactions to confirm the score accumulates over time
 - **If CLS = 0** → Confirm with multiple page loads (might be timing-dependent)
 
 ### After INP.js
 
-- **If INP > 200ms** → Run **webperf-interaction:Interactions.js** to identify slow interactions
-- **If INP > 500ms (poor)** → Run full INP debugging workflow:
-  1. **webperf-interaction:Interactions.js** (list all interactions)
-  2. **webperf-interaction:Input-Latency-Breakdown.js** (phase breakdown)
-  3. **webperf-interaction:Long-Animation-Frames.js** (blocking frames)
-  4. **webperf-interaction:Long-Animation-Frames-Script-Attribution.js** (culprit scripts)
-- **If specific interaction type is slow (e.g., keyboard)** → Focus analysis on that interaction type
-
-### Cross-Skill Triggers
-
-These triggers recommend using snippets from other skills:
-
-#### From LCP to Loading Skill
-
-- **If LCP > 2.5s and TTFB phase is dominant** → Use **webperf-loading** skill:
-  - TTFB.js, TTFB-Sub-Parts.js, Service-Worker-Analysis.js
-
-- **If LCP image is lazy-loaded** → Use **webperf-loading** skill:
-  - Find-Above-The-Fold-Lazy-Loaded-Images.js
-
-- **If LCP has no fetchpriority** → Use **webperf-loading** skill:
-  - Priority-Hints-Audit.js
-
-#### From CLS to Loading Skill
-
-- **If CLS caused by fonts** → Use **webperf-loading** skill:
-  - Fonts-Preloaded-Loaded-and-used-above-the-fold.js
-  - Resource-Hints-Validation.js (for font preload)
-
-- **If CLS caused by images** → Use **webperf-media** skill:
-  - Image-Element-Audit.js (check for width/height attributes)
-
-#### From INP to Interaction Skill
-
-- **If INP > 200ms** → Use **webperf-interaction** skill for full debugging:
-  - Interactions.js, Input-Latency-Breakdown.js
-  - Long-Animation-Frames.js, Long-Animation-Frames-Script-Attribution.js
-  - LongTask.js (if pre-interaction blocking suspected)
-
-#### From LCP/INP to Interaction Skill
-
-- **If render delay or interaction delay is high** → Use **webperf-interaction** skill:
-  - Long-Animation-Frames.js (main thread blocking)
-
-> **Note on cross-skill references:** This skill runs in an isolated subagent (`context: fork`). When a decision tree recommends scripts from another skill (e.g., `webperf-loading`, `webperf-interaction`, `webperf-media`), report the recommendation to the user as a next step — do not attempt to execute those scripts directly. The user or the main agent can activate the appropriate skill to continue the investigation.
+- **If INP > 200ms** → Call `getINPDetails()` to list all interactions ranked by duration and identify the slowest one
+- **If INP > 500ms (poor)** → Check `phases` in the worst interaction: high `inputDelay` suggests main thread blocking; high `processingDuration` suggests heavy event handler work
+- **If specific interaction type is slow (e.g., keyboard)** → Focus `getINPDetails()` on that interaction type
 
 ## Error Recovery
 
 When a script returns `status: "error"`:
 
 - **LCP/CLS/LCP-Sub-Parts/LCP-Trail** → The page may not have finished loading. Ask the user to wait for full load or reload, then re-run the script.
 - **INP** (`getINP()` returns error) → No interactions have been recorded yet. Remind the user to interact with the page, then call `getINP()` again.
-- **LCP-Image-Entropy** → No images with measurable BPP found. This is normal for text-only pages or pages where all images are data URIs.
 - **LCP-Video-Candidate** → No LCP entries found; see LCP error recovery above.
 
 ## Visual Highlighting

skills/webperf-core-web-vitals/references/schema.md

@@ -37,7 +37,7 @@ All scripts return a structured JSON object as the return value. This allows age
 ## Agent Workflow
 
 ```
-// Synchronous scripts (LCP, CLS, LCP-Subparts, LCP-Trail, LCP-Image-Entropy, LCP-Video-Candidate)
+// Synchronous scripts (LCP, CLS, LCP-Subparts, LCP-Trail, LCP-Video-Candidate)
 result = evaluate_script(scriptCode)
 // → { status: "ok", value: 1240, rating: "good", ... }
 
@@ -136,26 +136,15 @@ data = evaluate_script("getCLS()")
 }
 ```
 
-### LCP-Image-Entropy
-```json
-{
-  "script": "LCP-Image-Entropy", "status": "ok", "count": 5,
-  "details": { "totalImages": 5, "lowEntropyCount": 1, "lcpImageEligible": true, "lcpImage": { "url": "hero.jpg", "bpp": 1.65, "isLowEntropy": false } },
-  "items": [
-    { "url": "hero.jpg", "width": 1200, "height": 630, "fileSizeBytes": 156000, "bpp": 1.65, "isLowEntropy": false, "lcpEligible": true, "isLCP": true }
-  ],
-  "issues": []
-}
-```
-
 ### LCP-Video-Candidate
 ```json
 {
   "script": "LCP-Video-Candidate", "status": "ok", "metric": "LCP",
   "value": 1800, "unit": "ms", "rating": "good",
   "thresholds": { "good": 2500, "needsImprovement": 4000 },
   "details": {
-    "isVideo": true, "posterUrl": "https://example.com/hero.avif", "posterFormat": "avif",
+    "isVideo": true, "lcpSource": "poster",
+    "posterUrl": "https://example.com/hero.avif", "posterFormat": "avif",
     "posterPreloaded": true, "fetchpriorityOnPreload": "high", "isCrossOrigin": false,
     "videoAttributes": { "autoplay": true, "muted": true, "playsinline": true, "preload": "auto" }
   },

skills/webperf-core-web-vitals/references/snippets.md

@@ -68,27 +68,15 @@ Tracks every LCP candidate element during page load and highlights each one with
 
 **Returns:** Array of all LCP candidates in order, with selector, time, element type, and URL (if applicable). The last entry is the final LCP element.
 ---
-## 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.
-
-**Script:** `scripts/LCP-Image-Entropy.js`
-
-**Thresholds:**
-
-| BPP | Entropy | LCP Eligible | Example |
-|-----|---------|--------------|---------|
-| < 0.05 | 🔴 Low | ❌ No | Solid colors, simple gradients, placeholders |
-| ≥ 0.05 | 🟢 Normal | ✅ Yes | Photos, complex graphics |
----
 ## 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.
+Detects whether the LCP element is a `<video>` and audits the configuration. Chrome considers both the poster image and the first frame of the video as LCP candidates.
 
 **Script:** `scripts/LCP-Video-Candidate.js`
 
 **Checks:**
-- Whether a `poster` attribute exists
+- Whether the LCP source is the poster image or the first video frame (`lcpSource`)
+- Whether a `poster` attribute exists (recommended for explicit control)
 - Whether the poster is preloaded with `<link rel="preload" as="image">`
 - Whether `fetchpriority="high"` is set on the preload
 - Whether the poster uses a modern format (AVIF, WebP)

skills/webperf-core-web-vitals/scripts/LCP-Image-Entropy.js

@@ -46,6 +46,15 @@
   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 posterFormat = detectFormat(lcpUrl || posterUrl);
   const isModernFormat = ["avif", "webp", "jxl"].includes(posterFormat);
   const isCrossOrigin = lcp.renderTime === 0 && lcp.loadTime > 0;
@@ -65,8 +74,11 @@
   const playsinline = element.hasAttribute("playsinline");
 
   const issues = [];
-  if (!posterAttr) {
-    issues.push({ severity: "error", message: "No poster attribute — the browser has no image to use as LCP candidate" });
+  if (lcpSource === "first-frame") {
+    issues.push({ severity: "info", message: "LCP is the first video frame — adding a poster gives explicit control over the LCP image" });
+  }
+  if (lcpSource === "first-frame" && (!autoplay || !muted)) {
+    issues.push({ severity: "warning", message: "First-frame LCP requires autoplay + muted for the browser to render it immediately" });
   }
   if (posterAttr && !posterPreload) {
     issues.push({ severity: "warning", message: 'No <link rel="preload" as="image"> for the poster — browser discovers it late' });
@@ -77,7 +89,7 @@
     issues.push({ severity: "info", message: `Poster uses ${posterFormat} — AVIF or WebP would reduce file size and LCP load time` });
   }
   if (isCrossOrigin) {
-    issues.push({ severity: "info", message: "renderTime is 0 — poster is cross-origin and the server does not send Timing-Allow-Origin" });
+    issues.push({ severity: "info", message: "renderTime is 0 — resource is cross-origin and the server does not send Timing-Allow-Origin" });
   }
   if (!autoplay && preload === "none") {
     issues.push({ severity: "warning", message: 'preload="none" on a non-autoplay video may delay poster image loading in some browsers' });
@@ -94,6 +106,7 @@
     thresholds: { good: 2500, needsImprovement: 4000 },
     details: {
       isVideo: true,
+      lcpSource,
       posterUrl: lcpUrl || posterUrl || null,
       posterFormat,
       posterPreloaded: !!posterPreload,