chromedevtools--chrome-devtools-mcp
Matthias Rohmer
2cd9b95346
This is a draft for new skill to debug and optimize LCP scores, going hand in hand with https://github.com/ChromeDevTools/chrome-devtools-mcp/pull/831. Base for this skill is key authoritative learning material from web.dev, about debugging and optimizing LCP, mainly: - http://web.dev/articles/lcp - http://web.dev/articles/optimize-lcp - https://web.dev/articles/top-cwv I gave the content of those articles together with the [tool reference](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md), the README and the chrome-devtools core skill to both Claude Opus 4.6 and Gemini 3 Pro and their respective skill creator skills. The final skill in this PR is a merge of multiple runs with both models. The snippets to run with `evaluate_script` is something only Opus came up with, but I think it's quite nice, though our own `performance_*` tools might give the same insight but likely with more overhead (meaning tokens).
2.5 KiB
2.5 KiB
Largest Contentful Paint (LCP) Breakdown
LCP measures the time from when the user initiates loading the page until the largest image or text block is rendered within the viewport. To provide a good user experience, sites should strive to have an LCP of 2.5 seconds or less for at least 75% of page visits.
The Four Subparts of LCP
Every page's LCP consists of these four subcategories. There's no gap or overlap between them, and they add up to the full LCP time.
| LCP subpart | % of LCP (Optimal) | Description |
|---|---|---|
| Time to First Byte (TTFB) | ~40% | The time from when the user initiates loading the page until the browser receives the first byte of the HTML document response. |
| Resource load delay | <10% | The time between TTFB and when the browser starts loading the LCP resource. If the LCP element doesn't require a resource load (e.g., system font text), this time is 0. |
| Resource load duration | ~40% | The duration of time it takes to load the LCP resource itself. If the LCP element doesn't require a resource load, this time is 0. |
| Element render delay | <10% | The time between when the LCP resource finishes loading and the LCP element rendering fully. |
Why the Breakdown Matters
Optimizing for LCP requires identifying which of these subparts is the bottleneck:
- Large delta between TTFB and FCP: Indicates the browser needs to download a lot of render-blocking assets or complete a lot of work (e.g., client-side rendering).
- Large delta between FCP and LCP: Indicates the LCP resource is not immediately available for the browser to prioritize or the browser is completing other work before it can display the LCP content.
- Large resource load delay: Indicates the resource is not discoverable early or is deprioritized.
- Large element render delay: Indicates rendering is blocked by stylesheets, scripts, or long tasks.