Scott Jehl:

One of the most impactful things we can do to improve page performance and resilience is to load CSS in a way that does not delay page rendering. That’s because by default, browsers will load external CSS synchronously—halting all page rendering while the CSS is downloaded and parsed—both of which incur potential delays.

Don’t just up and do this to all your stylesheets though, otherwise, you’ll get a pretty nasty “Flash of Unstyled Content” (FOUC) as the page loads. You need to pair the technique with a way to ship critical CSS. Do that though, and like Scott’s opening sentence said, it’s quite impactful.

Interesting side story… on our Pen Editor page over at CodePen, we had a FOUC problem:

What makes it weird is that we load our CSS in tags in the completely normally, which should block-rendering and prevent FOUC. But there is some hard-to-reproduce bug at work. Fortunately we found a weird solution, so now we have an empty

Top Post

Crafting Strong DX With Astro Components and TypeScript

I’m a big fan of Astro’s focus on developer experience (DX) and the onboarding of new developers. While the basic …

Grunge Effects in Design: Raw, Gritty, and Always in Style!

It’s raw. It’s messy. And it refuses to play by the rules. Grunge isn’t just a style—it’s an attitude. From …

Worlds Collide: Keyframe Collision Detection Using Style Queries

A friend DMs Lee Meyer a CodePen by Manuel Schaller containing a pure CSS simulation of one of the world’s …

April 2025
MTWTFSS
 123456
78910111213
14151617181920
21222324252627
282930