What problem does it solve? Lighthouse audits produce noisy numbers and misleading leads: stale servers poison scores, simulated LCP hides the real cause, and many apparent fixes break animations or accessibility. This Skill provides a disciplined playbook for running production-build audits, interpreting observed vs simulated metrics, and applying fix families that were verified on real production sites without changing visual output. ## Core Features & Use Cases - Measurement discipline: production-build-only auditing, stale-server detection by port, 3-run medians, simulate vs devtools throttling guidance, and LHR JSON reading (lcp-breakdown, long-tasks, source-map byte attribution). - Fix families for LCP and payload: reveal-animation gating (opacity 0.001 + inert), intro-overlay paint-under, suspending-hook prerender blanking, hidden SSR DOM, RSC-serialized props, per-media-type runtime splitting, near-viewport mounting, and intent-based warming. - Pitfalls and verification: documents fixes that break things (viewport-gated splits causing CLS, CORS-mismatched preloads), red herrings (core-js noModule chunk, chunk-marker greps), hard ceilings (framework floor, lantern floor), and browser-based verification that animations stayed visually identical. - Use Case: A page shows observed LCP of 7.6s because headings render with visibility:hidden until hydration. The playbook identifies the reveal-animation family, applies the opacity 0.001 + inert fix, and re-measures LCP at ~100-300ms with unchanged choreography. ## Quick Start Run a Lighthouse audit on my production build and use the performance-audit playbook to diagnose the LCP and TBT regressions and propose fixes.
