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).
24 行
2.5 KiB
Markdown
24 行
2.5 KiB
Markdown
# 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.
|