Render Blocking Resources

Definition

Static files (like CSS and synchronous JavaScript) that prevent the browser from rendering any DOM content to the screen until they have been fully downloaded and parsed.

Explain Like I'm New

The browser is a strict rule-follower. If it is reading your HTML top-to-bottom and hits a `<script src="huge-file.js">`, it literally stops painting the screen, downloads the file, runs the entire file, and ONLY THEN continues reading the rest of your HTML. The user stares at a blank white screen the entire time.

Real World Example

This is why JavaScript tags used to be placed at the very bottom of the `<body>` tag. Modern developers put them in the `<head>`, but use the `defer` attribute to tell the browser: 'Keep painting the screen, just download this JS in the background'.

Common Use Cases

•Improving First Contentful Paint (FCP)

Interactive Example

Interview Questions

basic

Are CSS files render-blocking by default?

intermediate

What is the difference between `<script defer>` and `<script async>`?

Flash Cards

Question

Is CSS render-blocking?

Click to reveal answer

Answer

Yes! The browser will not paint anything on the screen until all `<link rel="stylesheet">` files in the `<head>` are downloaded. This prevents the 'Flash of Unstyled Content' (FOUC).

Question

defer vs async?

Click to reveal answer

Answer

`async` downloads the script in the background and runs it THE MOMENT it finishes downloading (good for Google Analytics, but bad if scripts depend on each other). `defer` downloads in the background, but WAITS to run until the entire HTML document is fully parsed (best for your React/App bundles).