What makes styles 'critical'?

[davidhund]

I'm not sure how usus (CSS Coverage, really) classifies styles as 'critical'. Most other tools, I believe, look at the styles needed to render the first screen (above the fold) of content.

usus seems to take more styles as critical?

[gajus]

If you are seeing a big size difference between "critical" CSS generated by usus and CSS generated by other existing tools, chances are that the other tools are simply broken. See this issue for example:

https://github.com/giakki/uncss/issues/313

The "critical CSS" that is generated by uncss is nowhere near the CSS required to load the page.

On the other hand, ūsus uses Chrome's CSS coverage tool to determine which CSS was used when loading the page. If elements below the fold have been rendered, CSS for those elements will be included too. It is up to the JavaScript application to avoid rendering those elements if they are not critical (see for example https://github.com/stratiformltd/react-loadable-visibility).

Does this sound reasonable?

I am always open to be corrected.

[davidhund]

I have not tested this much t.b.h. but it sounds very reasonable.

I guess there's a balance in dealing with the critical path between size and 'functionality': while other tools might reduce critical CSS size (and therefore might render quicker, but somewhat incorrectly), CSS Coverage might use more CSS (and therefore add to the download weight but render great).

There is a threshold, I believe, where it makes less sense to inline the CSS if it's heavy: because we are essentially duplicating it. Heavy (duplicated) inline CSS + the added complete CSS might (in some cases) reduce rendering performance of the page, compared to not extracting/inlineing critical CSS at all.

In these things it's the developers' responsibility to find the proper balance.