The general problem is that CSS usage tracking has a large performance overhead. Prior to https://github.com/GoogleChrome/lighthouse/pull/15865 we were side-stepping the issue by only looking at CSS usage at the end of the navigation. One of the goals if this PR is to revert back to this behavior.
However, it does not make sense to examine CSS usage at a single point in time in timespan mode. So to avoid the performance overhead problem in timespan mode, this PR disables CSS usage tracking in timespan mode. This is achieved by splitting up CSSUsage into two gatherers.
CSSUsage only contains CSS usage information (no stylesheet events or contents) and is not available in timespan mode
Stylesheets only contains stylesheet events and contents (but no usage information) and is available in all modes
This enables certain audits (e.g. unminified-css) to examine the available stylesheets in timespan mode without needing to run through the expensive rule tracking instrumentation.
User visible changes:
unused-css-rules is no longer available in timespan mode. IMO this is a good change because unused CSS shouldn't be a huge issue outside of initial page load anyway.
CSS coverage will only include rules that were in use at the end of the navigation, and could exclude rules that were temporarily in use during the navigation. IMO this is suboptimal but necessary because accurate performance metrics are more important than accurate information in unused-css-rules.
Closes https://github.com/GoogleChrome/lighthouse/issues/15890
The general problem is that CSS usage tracking has a large performance overhead. Prior to https://github.com/GoogleChrome/lighthouse/pull/15865 we were side-stepping the issue by only looking at CSS usage at the end of the navigation. One of the goals if this PR is to revert back to this behavior.
However, it does not make sense to examine CSS usage at a single point in time in timespan mode. So to avoid the performance overhead problem in timespan mode, this PR disables CSS usage tracking in timespan mode. This is achieved by splitting up
CSSUsageinto two gatherers.CSSUsageonly contains CSS usage information (no stylesheet events or contents) and is not available in timespan modeStylesheetsonly contains stylesheet events and contents (but no usage information) and is available in all modesThis enables certain audits (e.g.
unminified-css) to examine the available stylesheets in timespan mode without needing to run through the expensive rule tracking instrumentation.User visible changes:
unused-css-rulesis no longer available in timespan mode. IMO this is a good change because unused CSS shouldn't be a huge issue outside of initial page load anyway.unused-css-rules.