chrome-devtools-debug-optimize-lcp
Installation
SKILL.md
Chrome DevTools LCP Debugging
Use Chrome DevTools MCP to find the actual LCP element, identify which LCP subpart is slow, and verify that fixes reduce the bottleneck.
Dispatch
| $ARGUMENTS | Action |
|---|---|
| Empty | Ask for the target URL/page and whether reload is safe |
| Slow page load or Core Web Vitals | Record a trace, analyze LCP insights, then inspect element and network evidence |
| Hero image or main content slow | Identify LCP element, confirm resource discovery, priority, and load timing |
| TTFB concern | Analyze DocumentLatency and request timing before frontend changes |
| Render-blocking concern | Analyze RenderBlocking, scripts, CSS, and main-thread evidence |
| Fix verification | Re-run the trace under the same conditions and compare subpart timings |