Debug Optimize Lcp

This walks you through the full LCP debugging workflow using Chrome DevTools MCP tools, from recording performance traces to identifying which of the four subparts (TTFB, resource load delay, resource load duration, element render delay) is actually killing your page speed. It teaches you to use performance_analyze_insight for the LCPBreakdown data, includes console snippets to identify the exact LCP element, and maps bottlenecks to specific fixes like adding fetchpriority or eliminating lazy loading on hero images. The subpart breakdown table is the real value here because it stops you from optimizing the wrong thing, like compressing an image when render delay is actually the problem. Use this when users mention Core Web Vitals, slow page loads, or wonder why their main content takes forever to appear.

Install to Claude Code

npx -y skills add chromedevtools/chrome-devtools-mcp --skill debug-optimize-lcp --agent claude-code