fix: use buffered observer in agent return path for LCP and CLS snippets

[nucliweb]

Finding

performance.getEntriesByType("largest-contentful-paint") and "layout-shift" always return an empty array in Chrome unless a PerformanceObserver has been actively subscribed. This is a Chrome implementation detail: these entry types are observer-only and are not written to the shared performance timeline buffer.

Impact

The "Synchronous return for agent" section at the bottom of these snippets was silently returning { status: "error", error: "No LCP entries yet" } in every automated context:

• Chrome DevTools MCP (mcp__chrome-devtools__evaluate_script)
• WebPerf Skills via CDP
• The new CLI (discovered during CLI development — the CLI works around it via an addInitScript shim, but the root cause is in the snippets)

Manual DevTools console usage was not affected because the preceding observer registration happens to populate a context-local buffer that the synchronous read can sometimes see on long-lived pages, but this was never reliable.

Verification

// Chrome returns [] for these, even after observer.observe({ buffered: true }):
performance.getEntriesByType("largest-contentful-paint") // []
performance.getEntriesByType("layout-shift")             // []

// Only a PerformanceObserver callback delivers the entries:
new PerformanceObserver((list) => list.getEntries()) // ✓ entries here
  .observe({ type: "largest-contentful-paint", buffered: true });

Fix

• Changed (() => { → (async () => { in the 3 affected snippets.
• Replaced getEntriesByType with a short-lived PerformanceObserver that resolves after setTimeout(0) (guarantees all buffered microtasks have flushed).
• Chrome DevTools console is unaffected: modern Chrome auto-awaits async IIFEs and displays the resolved value inline.
• page.evaluate() (Playwright/CDP) is unaffected: it already awaits Promises.

Affected snippets

Snippet	Entry type fixed
LCP.js	largest-contentful-paint
CLS.js	layout-shift
LCP-Sub-Parts.js	largest-contentful-paint

"resource" and "navigation" entries used in LCP-Sub-Parts.js work correctly via getEntriesByType and are unchanged.

Test plan

• Run LCP.js via Chrome DevTools MCP evaluate_script on a live page — result should be { status: "ok", value: <ms>, ... } not { status: "error" }.
• Same for CLS.js and LCP-Sub-Parts.js.
• Run each snippet interactively in Chrome DevTools console — should display the resolved object (Chrome auto-awaits).
• Confirm LCP-Video-Candidate.js is unaffected (it already used a proper observer pattern).

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
webperf-snippets	Ready	Preview, Comment	Apr 29, 2026 6:13pm
webperf-snippets-u6am	Ready	Preview, Comment	Apr 29, 2026 6:13pm