How do we define main content for LCP

90 views
Skip to first unread message

Smriti Mittal

unread,
Jun 27, 2024, 8:23:41 AMJun 27
to web-vitals-feedback
Let's say -

I have a <div> inside <body> and then, this div has a div + img + p inside
<body>
     <div id="first">
         <div></div>
         <img />
         <p></p>
      </div>
</body>

^ Here, "first" div will have the largest size. So, will LCP treat this div as main content?

vs

I have div + img + p as body's direct children like -
<body>
     <div></div>
     <img />
     <p></p>
</body>

^ Here, body has 3 direct tags, so, LCP basically just go one level down inside your body tag and see which of the tags is the biggest (by area I think, so, height x width)?
Hence, in above case, either of the div / img / p will act as main content?

Barry Pollard

unread,
Aug 2, 2024, 7:09:42 AMAug 2
to Smriti Mittal, web-vitals-feedback
LCP only considers certain elements as LCP elements:

What elements are considered?
As currently specified in the Largest Contentful Paint API, the types of elements considered for Largest Contentful Paint are:
  • <image> elements inside an <svg> element
  • An element with a background image loaded using the url() function, (as opposed to a CSS gradient)
  • Block-level elements containing text nodes or other inline-level text element children.
In general this means div's are not considered "contentful" for LCP purposes (unless they have a background image) and so, in both those examples, it would look at the lower elements in the tree, and consider the <img> or <p> elements instead. You can easily test this out by creating demo pages and measuring the LCP for this.

Thanks,
Barry

--
You received this message because you are subscribed to the Google Groups "web-vitals-feedback" group.
To unsubscribe from this group and stop receiving emails from it, send an email to web-vitals-feed...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/web-vitals-feedback/a67a8c81-4f8d-4c14-9620-e1bbbb720822n%40googlegroups.com.

Smriti Mittal

unread,
Aug 9, 2024, 8:40:38 AMAug 9
to Barry Pollard, web-vitals-feedback
Thank you for the reply, Barry. Was not expecting one - "Oh, she needs to really google more or do some more research". 
I was trying to reason out the logic behind choosing an element as LCP but then later, finally, figured they had provided a clear definition of what an LCP is

One follow-up question though -
Why did we decide to go with img / videos / say, "block-level elements containing text nodes" ?
--
Smriti

Jase Williams

unread,
Aug 12, 2024, 8:30:49 AMAug 12
to Smriti Mittal, Barry Pollard, web-vitals-feedback
You may be interested in container timing, see here:
https://github.com/WICG/element-timing/issues/79

Barry Pollard

unread,
Aug 12, 2024, 8:44:45 AMAug 12
to Smriti Mittal, web-vitals-feedback
One follow-up question though -
Why did we decide to go with img / videos / say, "block-level elements containing text nodes"

Not sure if I fully understand the question. Are you asking why we limited it to these elements and/or rather than looking at groups of elements? If so, that is answered here:

Note that restricting the elements to this limited set was intentional in order to keep things simple in the beginning. Additional elements (like the full <svg> support) may be added in the future as more research is conducted.

Reply all
Reply to author
Forward
0 new messages