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).
28 行
1.3 KiB
Markdown
28 行
1.3 KiB
Markdown
# Elements and Size for LCP
|
|
|
|
## What Elements are Considered?
|
|
|
|
The types of elements considered for Largest Contentful Paint (LCP) are:
|
|
|
|
- **`<img>` elements**: The first frame presentation time is used for animated content like GIFs.
|
|
- **`<image>` elements** inside an `<svg>` element.
|
|
- **`<video>` elements**: The poster image load time or first frame presentation time, whichever is earlier.
|
|
- **Background images**: Elements with a background image loaded using `url()`.
|
|
- **Block-level elements**: Containing text nodes or other inline-level text element children.
|
|
|
|
## Heuristics to Exclude Non-Contentful Elements
|
|
|
|
Chromium-based browsers use heuristics to exclude:
|
|
|
|
- Elements with **opacity of 0**.
|
|
- Elements that **cover the full viewport** (likely background).
|
|
- **Placeholder images** or low-entropy images.
|
|
|
|
## How is an Element's Size Determined?
|
|
|
|
- **Visible Area**: Typically the size visible within the viewport. Extending outside, clipped, or overflow portions don't count.
|
|
- **Image Elements**: Either the visible size or the intrinsic size, whichever is smaller.
|
|
- **Text Elements**: The smallest rectangle containing all text nodes.
|
|
- **Exclusions**: Margin, padding, and borders are not considered toward the size.
|
|
- **Containment**: Every text node belongs to its closest block-level ancestor element.
|