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>
Enter fullscreen mode
Exit fullscreen mode
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:
<span class="flex gap-1">
<!-- content -->
</span>
Enter fullscreen mode
Exit fullscreen mode
Force other elements to be LCP:
<!-- Ensure logo or hero image is larger and loads faster -->
<img
src="logo.png"
alt="Logo"
fetchpriority="high"
/>
Enter fullscreen mode
Exit fullscreen mode
<main>
<h1 class="main-title"><!-- larger text content --></h1>
<!-- login/register prompt -->
</main>
Enter fullscreen mode
Exit fullscreen mode
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
Top comments (0)