Debug Optimize Lcp

chromedevtools/chrome-devtools-mcpOfficial

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.

skills.sh installs: 3.9K
GitHub stars: 55K
last updated: Aug 21, 2026

View on GitHub

Install

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

Installs into .claude/skills of the current project.

Files

What is LCP and why it matters

Largest Contentful Paint (LCP) measures how quickly a page's main content becomes visible. It's the time from navigation start until the largest image or text block renders in the viewport.

Good: 2.5 seconds or less
Needs improvement: 2.5–4.0 seconds
Poor: greater than 4.0 seconds

LCP is a Core Web Vital that directly affects user experience and search ranking. On 73% of mobile pages, the LCP element is an image.

LCP Subparts Breakdown

Every page's LCP breaks down into four sequential subparts with no gaps or overlaps. Understanding which subpart is the bottleneck is the key to effective optimization.

SKILL.md on GitHub