Why does my flex box become LCP Element only with Text

Why did this div become an LCP (Largest Contentful Paint) element?

<div class="flex gap-1 body-m">
  <span class="cursor-pointer">Login</span>
  or
  <span class="cursor-pointer">Register Now</span>
</div>

Text Block Calculation

• LCP considers text blocks as a single unit when they're within a block-level container
• This div contains all the text: "Login or Register Now" as one block
• Even though individual span elements are smaller, they're calculated together

Solutions if you don't want this element as LCP:

• Use inline element:

<span class="flex gap-1">
  <!-- content -->
</span>

• Force other elements to be LCP:

<!-- Ensure logo or hero image is larger and loads faster -->
<img 
  src="logo.png" 
  alt="Logo" 
  fetchpriority="high"
/>

• Adjust display mode:

<main>
  <h1 class="main-title"><!-- larger text content --></h1>
  <!-- login/register prompt -->
</main>

Best practices:

• Specify your intended LCP element (usually a logo, hero image, or main title)
• Ensure priority loading for that element
• Use inline elements or limit size for secondary text content