Back to Chrome Devtools Mcp

Elements and Size for LCP

skills/debug-optimize-lcp/references/elements-and-size.md

latest1.3 KB
Original Source

Elements and Size for LCP

What Elements are Considered?

The types of elements considered for Largest Contentful Paint (LCP) are:

  • `` 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.