Render-blocking resources are files that stop the browser from rendering a page until they have been downloaded and processed. By default, stylesheets in the head and synchronous scripts without async or defer block rendering. Each one adds delay before users see anything, so reducing, inlining or deferring them is a standard step in improving First Contentful Paint and Largest Contentful Paint.
Why browsers block
CSS blocks rendering because painting without styles would show a flash of unstyled content. Classic scripts block HTML parsing because they might change the document. These rules protect correctness, but they mean every blocking file sits on the critical path to the first paint.
How to fix it
Lighthouse lists render-blocking resources with an estimate of the time they cost. Work through them one by one.
- Add defer to scripts that do not need to run before first paint
- Use async for independent scripts like some analytics tags
- Inline the critical CSS needed for above-the-fold content
- Load non-critical CSS without blocking, or split it by page
- Remove unused CSS and JavaScript entirely
<!-- Blocks parsing -->
<script src="/js/widgets.js"></script>
<!-- Downloads in parallel, runs after parsing, in order -->
<script src="/js/widgets.js" defer></script>
<!-- Media-specific CSS does not block for other media -->
<link rel="stylesheet" href="/css/print.css" media="print">Fonts and third parties
Font stylesheets from third-party hosts add a connection and a blocking request. Self-hosting fonts and preloading the most important one often helps. Tag managers and A/B testing scripts placed synchronously in the head are frequent offenders; some testing tools block rendering on purpose to avoid flicker, which is a trade-off to weigh.
Example
Six stylesheets in the head
Graphwick's marketing site loads six CSS files in the head: a reset, a framework, the theme, two plugin stylesheets and a font stylesheet from a third-party host. Bundling the site CSS, inlining the critical portion, self-hosting fonts and dropping one unused plugin removes most of the blocking requests Lighthouse reported.
Common mistakes
Deferring scripts that render content
If a script builds visible content, deferring it can make the page look empty longer. Render that content on the server instead.
Async on scripts with dependencies
async scripts run in any order. Use defer for scripts that depend on each other.
Questions
No. Scripts with type="module" are deferred by default.
