# debug-optimize-lcp

> Claude/Codex skill by [@chromedevtools](https://omgskills.com/library/chromedevtools/index.md) · 54k stars · Updated 2026-10-18

Guides debugging and optimizing Largest Contentful Paint (LCP) using Chrome DevTools MCP tools. Use this skill whenever the user asks about LCP performance, slow page loads, Core Web Vitals optimization, or wants to understand why their page's main content takes too long to appear. Also use when the user mentions "largest contentful paint", "page load speed", "CWV", or wants to improve how fast their hero image or main content renders.

Tags: browser, chrome, chrome-devtools, debugging, devtools, mcp, mcp-server, puppeteer

## Install

```sh
git clone https://github.com/ChromeDevTools/chrome-devtools-mcp /tmp/chrome-devtools-mcp && ln -s /tmp/chrome-devtools-mcp/skills/debug-optimize-lcp ~/.claude/skills/debug-optimize-lcp
```

## From README

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. | Subpart | Ideal % of LCP | What it measures | | ----------------------------- | -------------- | ---------------------------------------------- | | Time to First Byte (TTFB) | 40% | Navigation start → first byte of HTML received | | Resource load delay | with src. Never lazy-load the LCP image. Fix: Add if the image isn't discoverable in HTML.

## Links

- HTML page: https://omgskills.com/skills/chromedevtools/chrome-devtools-mcp/debug-optimize-lcp/
- GitHub: https://github.com/ChromeDevTools/chrome-devtools-mcp
- Author: [@chromedevtools](https://omgskills.com/library/chromedevtools/index.md)

## More from this repo

- [chrome-devtools](https://omgskills.com/skills/chromedevtools/chrome-devtools-mcp/chrome-devtools/index.md) — Uses Chrome DevTools via MCP for efficient debugging, troubleshooting and browser automation.
   - [@chromedevtools](https://omgskills.com/library/chromedevtools/index.md) · 54k stars
- [a11y-debugging](https://omgskills.com/skills/chromedevtools/chrome-devtools-mcp/a11y-debugging/index.md) — Uses Chrome DevTools MCP for accessibility (a11y) debugging and auditing based on web.dev guidelines.
   - [@chromedevtools](https://omgskills.com/library/chromedevtools/index.md) · 54k stars
- [chrome-devtools-cli](https://omgskills.com/skills/chromedevtools/chrome-devtools-mcp/chrome-devtools-cli/index.md) — Used to write shell scripts or run shell commands to automate tasks in the browser or otherwise use Chrome DevTools via...
   - [@chromedevtools](https://omgskills.com/library/chromedevtools/index.md) · 54k stars