Excessive style recalcs caused by CSS usage tracking

[Achchheweb]

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).

URL

https://www.anoblepurpose.com/

What happened?

Hi i'have update lighthouse version from 11.5 to 11.7 in this version i'm facing issue regarding low speed and full-screenshot.
Speed decrease from 35-25 and also full page screenshot of website not showing properly
My Site url:
https://www.anoblepurpose.com/

it properly working on 11.5 after i upgrade 11.7 them facing issue.
lighthouse v11.7 screenshot and speed

lighthouse 11.5

how can i resolve this issue suggest me.

What did you expect?

If i upgrade v11.5 to v11.7 then data should more details and taking full-page screenshot

What have you tried?

i just change with v11.7 to v11.5 then it work properly

How were you running Lighthouse?

node

Lighthouse Version

11.7

Chrome Version

114.0

Node Version

18.17

OS

Ubuntu 20.0

Relevant log output

Full page-screenshot and data should be optimized.
But score and screenshot not working properly.

[adamraine]

Bisected to #15865. Will need to investigate further.

[adamraine]

After investigation, there is a significant performance impact on the page if the CSS.enable is called before the navigation starts. This is the behavior that changed in #15865.

This trace calls CSS.enable before navigating, there are a significant number of style recalcs that affect page performance:
https://trace.cafe/t/5YOOKGSdbX

This trace calls CSS.enable after navigating:
https://trace.cafe/t/AKRGmaVZDD

I will file a bug in Chrome and confirm if this is expected behavior.

[adamraine]

https://issues.chromium.org/u/1/issues/331570801

[adamraine]

From the upstream issue:

This seems to be working as intended, since the instrumentation to track rule usage is quite involved.

Seems like CSS usage tracking has a significant performance overhead. Before #15865 we were deferring the CSS usage tracking until the end of the run. This prevented the performance overhead from affecting the actual page load, however it would only check what CSS was used at the end of the page load. So any styles that were temporarily used during the load would not get counted.

After #15865, temporarily used CSS rules are counted but this introduces the performance overhead visible in the reported site.