Render Blocking

Render Blocking describes resources, usually CSS and synchronous JavaScript, that the browser must download and process before it can display the page.

When the browser parses HTML and meets a stylesheet or a blocking script in the head, it pauses building the page until that file is fetched and handled. CSS blocks because the browser will not paint content it cannot yet style; synchronous scripts block because they might change the document. A handful of small blocking files is fine, but heavy or numerous ones delay the first paint, which users feel as a slow, blank screen and which can hurt the Largest Contentful Paint metric.

The work is to shrink what blocks the initial render. For scripts, the standard tools are the defer attribute, which runs a script after HTML parsing, and async, which loads it without blocking parsing, both moving non-critical JavaScript out of the critical path. For CSS, you inline the small amount of styling needed for above-the-fold content and load the rest in a non-blocking way, so the page can paint before every stylesheet arrives.

<script src="/app.js" defer></script>
<script src="/analytics.js" async></script>

Performance tools such as Lighthouse flag render-blocking resources directly and estimate the time they cost. Reducing them is one of the more reliable ways to speed up first paint, and it pairs with resource hints like preload that prioritize the files the page genuinely needs early.

Related: Preload, Resource Hints, LCP complete guide