'Definition of LCP

LCP is defined as the time that it takes to paint the largest content item above the fold.

How do responsive content wrappers fit into that mix? Like say that I have the following structure:

 <body>
    <div id="wrapper">
         <div class="some_above_the_fold_content">
              <p>Whatever</p>
         </div>
         <div class="some_visually_below_the_fold_content">
              <p>large content</p>
         </div>
    </div>
 </body>

Visually, the second div is "below the fold", but it is a child element of the main wrapper div, which is "above the fold" since it's the primary page element.

What does LCP compute it's time from? What's visually below the fold (div #2) or the parent div?

google-analytics core-web-vitals

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Definition of LCP

Sources

Related Questions