debug-optimize-lcp
Guides debugging and optimizing Largest Contentful Paint
by chromedevtoolsFree
Description
debug-optimize-lcp is an agent skill for finding and fixing slow Largest Contentful Paint, the Core Web Vital that measures how quickly a page's main content becomes visible. It uses the Chrome DevTools MCP tools to measure a page. LCP is the time from navigation start until the largest image or text block renders in the viewport. The skill uses the published thresholds: 2.5 seconds or less is good, 2.5 to 4.0 seconds needs improvement, and more than 4.0 seconds is poor. It explains that LCP is a Core Web Vital that affects user experience and search ranking, and notes that on 73 percent of mobile pages the LCP element is an image. Every LCP breaks down into four sequential parts with no gaps or overlaps. The skill's approach is to find which part is the bottleneck, because that is where optimization pays off. The skill is triggered when a user asks about LCP performance, and it applies to any web page you can open in Chrome through the MCP server. It is published in the chromedevtools/chrome-devtools-mcp repository, which has about 53,600 stars on GitHub.…
Highlights
- Measures Largest Contentful Paint with Chrome DevTools MCP
- Uses published good and poor thresholds
- Breaks LCP into four sequential parts
- Finds the bottleneck part first
- Covers pages where the LCP is an image or text
Ratings & Reviews
No ratings yet
Be the first to rate debug-optimize-lcp.
People also visit
debug-optimize-lcp FAQ
What is LCP?
Largest Contentful Paint, the time from navigation start until the largest image or text block renders in the viewport.
What counts as a good LCP?
2.5 seconds or less is good. 2.5 to 4.0 seconds needs improvement, and more than 4.0 seconds is poor.
Why does LCP matter?
The skill says it is a Core Web Vital that directly affects user experience and search ranking.
How does the skill approach a slow page?
It breaks the LCP into four sequential parts and finds which one is the bottleneck, since that is where the optimization effort goes.
How do I install it?
Run npx skills add https://github.com/chromedevtools/chrome-devtools-mcp --skill debug-optimize-lcp.
Is it free and checked for security?
The listing shows it as free. Its security audits show passes from Gen Agent Trust Hub and Socket, and a warning from Snyk.
What are the best debug-optimize-lcp alternatives?
Popular alternatives to debug-optimize-lcp include web-performance-optimization, core-web-vitals and browser-testing-with-devtools. See all debug-optimize-lcp alternatives