3

A lot of sources mention that LCP is measured only above the fold, and stops measurements after a user action like scroll or key press. Though, I am able to get LCP for an image which is lazy-loaded below the fold.

I am using sitespeed.io to run performance tests on my website using a script that scrolls the page until the end in order to look for CLS issues.

After running the test ~15 times, I can see 50% of the times it picks the topmost hero image as LCP, and the other 50% of the times it picks a slightly larger banner image which is below the fold. I found this PR on GoogleChrome's web-vitals repo - https://github.com/GoogleChrome/web-vitals/pull/85, which talks about keeping click and keydown listeners to stop LCP measurements. I might be understanding this wrong, but does this mean that LCP can now be measured below the fold too?

Improve this question

1 Answer 1

Reset to default
3

This problem is often caused by layout shifting

Consider the steps a browser takes when loading a page:

  • Step 1: Create the Document Object Model (DOM) and CSS Object Model (CSSOM)
  • Step 2: Render tree is created - this contains only the nodes required to render the page. Layout computes the exact position and size of each object
  • Step 3: From the render tree, the browser then computes the geometry of the layout and elements.
  • Step 4: Browser paints the content (pixel by pixel) to create the visual representation seen by the user on the screen.

Diagram of the webpage rendering process made by Gabriel Neutzling

Learn more about how browsers render webpages.

When the browser is re-painting that's when layout shift happens. It looks like the content is being pushed down the page.

So what's most likely happening is that the browser is catching the (slightly) larger banner image above the fold during re-painting at the same time the last LCP is reported.

It's seen above the fold, but gets pushed down by the layout shift. Connection variability would explain the randomness.

I wrote an answer on How Chrome Measures LCP that will explain what I mean. I believe the OP was experiencing the same thing you are, except in your case, it is possible that you're seeing this because of the tool you're using.

You mention that you have a script that scrolls the page until the end to look for CLS issues. In my answer on how Chrome measures LCP, notice the last bullet in my explanation:

  • Once the user starts interacting with the page, the last reported largest content is the Largest Contentful Paint time.

So the first thing you should do is try testing your site using a different tool that isn't doing anything like that. Personally, I use WebPageTest. In the Web Vitals report it will show you the LCP image and provide some useful data about it that I don't see in other tools.

If it's not the tool, you still know what you have to do: get rid of CLS.

Additional Resources

See my answer to a similar question where I throttle my network to show the CLS happening and another one about identifying the cause of Cumulative Layout Shift.

Improve this answer
2
  • 2
    To expand on this: LCP can report below-the-fold images but only if the user load the page already scrolled to that point, or if the page programmatically scrolled to that point. LCP stops listening for larger paints after a user-initiated scroll. So if your tests are using JavaScript to scroll (rather than something like Webdriver) then it's possible the browser is not considering them user-initiated scrolls and that explains your issue.
    – Philip Walton
    Feb 21 at 20:33
  • Nice one @PhilipWalton
    – Mike Ciffone
    Feb 23 at 13:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.