NO_LCP for mobile, but same element scores correctly on Desktop

[pwcreative]

FAQ

• Yes, my issue is not about variability or throttling.
• Yes, my issue is not about a specific accessibility audit (file with axe-core instead).
• Yes, my issue is not answered by other FAQs.

URL

https://pwcreative.com/

What happened?

No performance score for Mobile:

Largest Contentful Paint
Error!
NO_LCP

What did you expect?

Mobile should have a performance score in line with Desktop, because it is the same element, styled in the same way for both contexts.

What have you tried?

There are lots of bug posts online connected to this. The main suggestion was opacity, so I tried setting the starting opacity to greater than zero, which didn't help. I removed the opacity transition altogether, and this still didn't help, so it must be connected to the translate.

The H1 element takes up almost 50% of the screen height and is always on screen but it has nested spans which transform the text content from the top left (offscreen) into position:

.text-3d span {
display: inline-block;
position: relative;
will-change: transform;
transform: translate(-450px, -450px);
transition: transform 500ms ease-in-out 100ms;
}

How were you running Lighthouse?

PageSpeed Insights

Lighthouse Version

LATEST

Chrome Version

Version 129.0.6668.59 (Official Build) (x86_64)

Node Version

No response

OS

Mac

Relevant log output

No response

[adamraine]

This looks very similar to #10869. The short summary is that if the LCP element is animated then Chrome can sometimes not detect it properly.

In your case the LCP element is different on desktop & mobile:

• On desktop it's the "FLUFF" text which is has its position animated
• On mobile it would be the "We'll assume since..." paragraph which is animated using opacity

Opacity animations appear to be a more common cause of #10869 than position animations, so that might explain why you are still getting an LCP on desktop. The current workaround is to set the initial opacity to something like 0.001 instead of 0.

[pwcreative]

Strange that the P is considered the LCP, when it's smaller than the H1, but hey, I don't make the rules! I adjusted the opacity and that is now giving us a reading. Thanks!