Render-blocking resources

Render-blocking resources are CSS and JavaScript files that the browser must download, parse, and execute before it can display anything to the user.

What makes a resource render-blocking

By default, when the browser encounters a link to an external stylesheet or a script tag in the head of your HTML, it stops rendering the page until that resource is fully loaded. This delays the first visible content.

CSS blocks rendering because the browser cannot safely display unstyled content (Flash of Unstyled Content � FOUC). JavaScript blocks rendering because it can modify the page content and styles.

How to fix render-blocking CSS

Inline critical CSS � Extract the styles needed for above-the-fold content and place them directly in a style tag in the head. Load the full stylesheet asynchronously.

Defer non-critical stylesheets � Use media attributes or the rel=preload pattern to load stylesheets without blocking.

Eliminate unused CSS � Many sites load framework stylesheets (Bootstrap, Tailwind) in full when only a fraction is used. Tools like PurgeCSS identify and remove unused styles.

How to fix render-blocking JavaScript

Add the defer attribute to script tags that do not need to run before the page renders. Deferred scripts download in parallel and execute after the HTML is parsed.

Use the async attribute for scripts that can run independently, like analytics trackers. Async scripts download in parallel and execute as soon as they are ready, without waiting for parsing to finish.

Move non-essential scripts to the bottom of the page, just before the closing body tag.