Print stylesheet picked for Render-blocking resource

[manzonif]

FAQ

• [X] Yes, my issue is not about variability or throttling.
• [X] Yes, my issue is not about a specific accessibility audit (file with axe-core instead).

URL

https://pagespeed.web.dev/analysis/https-angular-dev/3inly8hhpn?hl=en&form_factor=mobile

What happened?

I'd like to bring to your attention that Angular provides a feature called inlineCritical that allows server-side injection of critical CSS directly into the HTML code, thus avoiding render-blocking stylesheets. To ensure that the stylesheet is not considered render-blocking when this option is activated, developers include the stylesheet link as follows:

<link rel="stylesheet" href="styles-IQDCL4WI.css" media="print" onload="this.media='all'">

However, in the recent version of Lighthouse, there seems to be no longer a check for media="print", which previously bypassed the audit and prevented it from being flagged as render-blocking. As a result, it is now being reported as render-blocking https://github.com/GoogleChrome/lighthouse/pull/13288 .

Here a screenshot from PageSpeed Insight of the angular.dev website.

Thank you.

What did you expect?

Style with media=print should be ignored for render-blocking resource's audit.

What have you tried?

No response

How were you running Lighthouse?

PageSpeed Insights

Lighthouse Version

11.5.0

Chrome Version

No response

Node Version

No response

OS

No response

Relevant log output

No response

[adamraine]

This will not be the case in the next major release of Lighthouse. The changes from #15839 should correctly handle print media stylesheets in the render blocking resources audit.