Lighthouse: LCP and CLS diagnostics scoring color should match metric scoring

[rpong]

Provide the steps to reproduce

1. Run LH on https://onepropertee.com/

LH Run Parameters:
--chrome-flags='--headless --no-sandbox'
--emulated-form-factor=mobile

What is the current behavior?

The Reported Last Contentful Paint is slow, even if the identified LCP is loaded immediately. The diagnostics even reports our LCP in Gray, which means it isn't an issue with our application. The filmstrip also indicate that the area identified as our LCP is already fully loaded initially.

What is the expected behavior?

The Reported Last Contentful Paint should be fast.

Environment Information

• Affected Channels: CLI
• Lighthouse 6.0.0
• Chrome version: 83
• Node.js version: v12.16.1
• Operating System: MacOS, Linux, EC2 etc.

[patrickhulce]

Thanks for filing @rpong!

That page does not have a fast LCP, Lighthouse is reporting the correct time according to the metric definition. It appears the hero image is removed and replaced in the DOM so it has to reload at around ~17s.

The diagnostics even reports our LCP in Gray, which means it isn't an issue with our application.

It's reporting what the LCP Element is in gray because there's nothing wrong with that being the LCP element, but the metric value is reported in red because it took too long.

Rest of the team, I wonder how common this interpretation is and if we should always have the LCP element diagnostic match the color of the metric itself?

[rpong]

@patrickhulce , got it! all clear now. thank you for nudging us to the right direction.

[mihalikv]

@patrickhulce Hello, I have similar problem with LCP and slider on website. Together with DOM is also loaded first image of slider(which is considered as LCP). When slider is initialized, probably slider library manipulate with this image and lighthouse moved LCP after slider initialization. How can I improve LCP and keep slider functionality ? I also try to put slider initialization to setTimeout but it won't help.

Profile-20200608T134124.txt - JSON chrome profile

[patrickhulce]

It sounds like you already understand the problem @mihalikv I'm sorry but we're not able to provide 1:1 advice on how to improve specific situations :/

If your slider is based on a library, try asking around that community to see if others have found performance improvements or workarounds :)

[paulirish]

Rest of the team, I wonder how common this interpretation is and if we should always have the LCP element diagnostic match the color of the metric itself?

Yup I like this.