Post

CSS is render- but not parser-blocking. This means that while a browser is fetching CSS, it is permitted to continue parsing the rest of your HTML but not render it. HOWEVER! If you’re not careful, you can inadvertently end up in parser-blocking territory.

7/2/25, 11:21 am22 reposts59 likes

Harry Roberts

@csswizardry.com

7 Feb 2025

Take this demo HTML file. A stylesheet and 10,000 paragraphs. Here we can see that the browser is permitted to parse the HTML while the CSS is in flight. This is A Good Thing™.

Harry Roberts

@csswizardry.com

7 Feb 2025

Now let’s introduce one little change. A script with a single space character immediately after the stylesheet. What happens now?

Harry Roberts

@csswizardry.com

7 Feb 2025

The Parse HTML tasks are bolted onto the end of the CSS’ fetch. The main thread wasn’t allowed to do anything else while the CSS was in flight.

Harry Roberts

@csswizardry.com

7 Feb 2025

They are interleaved with rendering tasks, which shows is the browser’s ability to progressively render HTML, but one space character held up the main thread completely!