search

GoogleChrome / lighthouse

Automated auditing, performance metrics, and best practices for the web.
https://developer.chrome.com/docs/lighthouse/overview/
Apache License 2.0
28.27k stars 9.35k forks source link

Excessive style recalcs caused by CSS usage tracking #15890

Closed Achchheweb closed 5 months ago

Achchheweb commented 6 months ago

FAQ

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 image image

lighthouse 11.5 image image

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 image

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 commented 6 months ago

Bisected to #15865. Will need to investigate further.

adamraine commented 6 months ago

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 https://github.com/GoogleChrome/lighthouse/pull/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 commented 6 months ago

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

adamraine commented 5 months ago

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 https://github.com/GoogleChrome/lighthouse/pull/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 https://github.com/GoogleChrome/lighthouse/pull/15865, temporarily used CSS rules are counted but this introduces the performance overhead visible in the reported site.