What are render-blocking resources?

Render-blocking resources are files, usually CSS stylesheets and synchronous JavaScript in the head of a page, that the browser must download and process before it can paint anything. While they load, the visitor sees a blank screen. Deferring scripts and trimming or inlining critical styles lets content appear sooner.

Why it matters

Browsers build a page from HTML, then combine it with styles to decide how it looks. A stylesheet linked in the head blocks rendering because showing unstyled content briefly would look broken. A classic script tag without defer or async blocks even the HTML parser, because the script might change the page.

Each blocking file adds a delay before First Contentful Paint and often before Largest Contentful Paint. On a slow mobile network, several blocking files in a row can add noticeable seconds.

How to check

Run the page in PageSpeed Insights and look for the "Eliminate render-blocking resources" audit in the Lighthouse results. It lists files and the estimated saving.
In Chrome DevTools, open the Network panel and look at the waterfall. Files requested early that delay the first paint are suspects.
View the page source and scan the head for <link rel="stylesheet"> and <script src> tags without defer or async.

How to fix it

For scripts that do not need to run before the page appears, add defer:

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

Use async for independent scripts, such as analytics, that do not depend on the order of other scripts.
For CSS, remove rules you do not use, and split large files so that pages only load the styles they need.
Inline the small amount of CSS needed for the top of the page, then load the rest without blocking, as the critical CSS guide explains.
Scripts of type="module" are deferred by default.
Load third-party widgets such as chat tools after the main content or on interaction.
Retest and confirm that the page still looks right, since moving styles can cause a flash of unstyled content.

Common mistakes

Adding async to scripts that depend on each other, which breaks the order they run in.
Removing CSS that is used on other pages.
Inlining an entire large stylesheet, which bloats every page.
Putting heavy third-party scripts in the head with no deferral.
Fixing the warning but never checking the page on a real phone.

Frequently asked questions

Is all CSS render-blocking?

Stylesheets that apply to the current screen are. A stylesheet whose media attribute does not match, such as a print stylesheet, does not block the first paint.

What is the difference between defer and async?

Both download without blocking the parser. defer runs scripts in order after the HTML has been parsed, while async runs each script as soon as it is ready, in no fixed order.

Do web fonts block rendering?

They can delay text, depending on font-display. That is handled separately from CSS and script blocking.

Crawvix's scan checks for render-blocking resources. To see your own result, Try the free website sample.