Lighthouse: CSSUsage not finding all stylesheet content

[patrickhulce]

Split out from https://github.com/GoogleChrome/lighthouse/issues/6628#issuecomment-485275120

Provide the steps to reproduce

1. Run LH on https://5cbc80f7b4528a0008a0dbad--lebikini.netlify.com/

What is the current behavior?

LH reports that the fonts don't have font-display properties. The CSSUsage artifact does not contain the content of any of the stylesheets.

What is the expected behavior?

LH does not report the fonts are missing font-display, and the CSSUsage artifact contains the content of the stylesheets.

Environment Information

• Affected Channels: CLI
• Lighthouse version: v4.3.0, v5.0.0

[patrickhulce]

Based on the comments from https://github.com/GoogleChrome/lighthouse/issues/8534#issuecomment-485617493, it seems like this might be because DevTools just doesn't provide information on inline styles that don't have a /*# sourceURL=source-url.css */ comment.

[westonruter]

If sourceURL isn't provided in the style element, what should DevTools display in the list of sources?

[patrickhulce]

what should DevTools display in the list of sources?

In the past I know some of those urls would just list the main page as the source. Similar to how everything that's dynamically added from an unattributable script is just listed as initiated by "parser".

I'm not sure of the exact interplay here, but since it came up in your case, thought it might be the root cause here too.

[c0b41]

any update this issue ? styled-components ssr suffer this problem

[brimtown]

We are also seeing this using styled-components SSR on https://www.shopflamingo.com

[jessepinho]

Also seeing this with Gatsby + styled-components: https://helloclue.com/articles/cycle-a-z/period-blood-color-brown-black-dark-does-it-matter

(See the PageSpeed Insights report, which says Ensure text remains visible during webfont load, despite the fact that my page uses font-display: swap in all @font-face declarations.)

[patrickhulce]

I don't think we'll be getting this fixed in the protocol anytime in the immediate future so our best bet for now might be to ignore the fonts which we don't find a declaration for at all.

[jessepinho]

@patrickhulce that could work, but does that match the behavior of Google's own page speed analysis for SEO purposes? If not, that would make this tool less accurate/useful.

[patrickhulce]

Well the opportunities themselves have no impact, it's just the performance metrics that are scored. We wouldn't be proactively suggesting ways for folks to improve their scores by ignoring fonts we aren't 100% sure about, but having folks spend time trying to figure out the bug here instead of working on other opportunities isn't a positive outcome.

[jessepinho]

ah ! Gotcha — that makes sense. I had been under the impression that Lighthouse is itself used for Google's SEO performance metrics.

[jessepinho]

Hey @patrickhulce, just wanted to check in — is this something that's on the roadmap to fix?

[patrickhulce]

I'll assign myself to the interim fix that will quiet the false positive, but the true fix requires Chromium-support and there is no timeline for a fix there.

[jessepinho]

OK, gotcha. Thank you!