←back to thread

Critical CSS

(critical-css-extractor.kigo.studio)
234 points stevenpotts | 2 comments | 06 May 25 03:13 UTC | HN request time: 0.622s | source
Show context
lxe ◴[06 May 25 15:04 UTC] No.43905965[source]▶
This is a footgun. You'll get a very consistent flash of unstyled content. It's not just an aesthetics issue -- when layout shifts in the middle of a page load, as your "non-critical" styles are applied, and user is interacting with something, it will kill your usability.
replies(2): >>43906306 #>>43928635 #
zaphodias ◴[06 May 25 15:34 UTC] No.43906306[source]▶
isn't the whole point avoiding FOUC, while also avoiding to block the rendering for CSS network requests?
replies(2): >>43907024 #>>43907705 #
lxe ◴[06 May 25 17:40 UTC] No.43907705[source]▶
Unless you're sure that your the "non-critical" css doesn't cause layout shifts (aka, it doesn't overload any "critical" styles), you're gonna see layout shifts even on fast connections if you load some styles at the top of the document and then do a link rel at the bottom.
replies(1): >>43907829 #
rtsil ◴[06 May 25 17:52 UTC] No.43907829[source]▶
The critical css should cover everything above the fold to avoid that visible reflow.
replies(2): >>43908103 #>>43908681 #
1. lxe ◴[06 May 25 18:21 UTC] No.43908103[source]▶
Then what does the "non-critical" css do?
replies(1): >>43908204 #
2. bawolff ◴[06 May 25 18:32 UTC] No.43908204[source]▶
The non-critical things?

I mean, i agree with you that this is insanely easy to screw up. However in most websites there is obviously css which doesn't cause reflows and is not needed for first paint. Actually separating that out correctly seems easy to mess up, but it obviously exists.