GoogleChrome / GoogleChrome/lighthouse

Do not flag render-blocking CSS as an issue if certain criteria are met

Open
#14,013 0 comments 4 reactions 1 assignee Claimed by @connorjclark View on GitHub
Dominant language
JavaScript
Stars
30.8k
Forks
9.8k
Avg merge
1d 14h
Merged PRs (30d)
20

Description

This site for example has a single CSS resource of 7.4kb (transfer size). https://www.hopstreet.be/

- just a `link rel="stylesheet"` tag in the html head without any conditions in a `media` attribute
- same fat CSS bundle for all breakpoints
- same fat CSS bundle for all pages, templates, ...
- depending on the breakpoint and template only 10% - 20% of this resource will be used

Screenshot 2022-05-17 at 10 09 28

In practice this site would not become meaningfully faster by splitting the CSS in any way.
And it would become slower if we deferred it with javascript.

- it is a very small file
- it is the last external resource in the html head (after async script resources)
- second page performance is also important

Would it make sense to have some thresholds/rules were this warning/issue isn't triggered?

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.