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).
1.3 KiB
1.3 KiB
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.