Render-blocking resources: the ones squirrel counts in head

What render blocking is

A stylesheet in <head> normally blocks rendering: the browser will not paint until it has downloaded and parsed every one whose media matches and that is not disabled, because painting with the wrong styles and repainting is worse than waiting. A classic <script src> in <head> with neither async nor defer blocks parsing as well. The preload scanner still finds resources further down the document, but nothing after that script executes until it does.

The fix is not to remove them but to change when they matter. Styles the first screen needs can be inlined. Styles it does not need can load with a media attribute that does not apply, then be switched on once loaded. Scripts almost always take defer.

What squirrel checks

The rule runs on every crawled page and emits one check:

• render-blocking: warns with the message N render-blocking resources above three, reports at info status with N render-blocking resource(s) from one to three, and passes with No significant render-blocking resources at zero. Each URL is listed as an item.

Only <head> is scanned. A stylesheet counts when it is a link[rel="stylesheet"] with a non-empty href and no media attribute at all: any media value, including media="all", excludes it. A script counts when it is a classic <script src> with a non-empty src and neither async nor defer. A type="module" script is deferred by default and does not count, and neither does a classic script with nomodule or a script whose type is not JavaScript, since a modern browser never runs it. Inline <style> blocks and inline scripts are not counted, and neither is anything in <body>.

The signals come from a shared analysis of the page that six performance rules read, computed once per page.

Elements inside <noscript> are skipped: a browser with scripting enabled reads <noscript> content as plain text, so nothing in it loads or renders. See content inside noscript.

How to fix it

<style>/* styles the first screen needs */</style>
<link rel="stylesheet" href="/rest.css" media="print" onload="this.media='all'" />
<script src="/app.js" defer></script>

Inline what the first screen needs, load the rest with a media value that does not apply and switch it on once it has arrived, and give every script defer.

The limit worth knowing follows from how a stylesheet is counted. Adding media="all", which changes nothing about the browser’s behaviour, removes the link from this rule’s count even though it still blocks paint. Check the reported URLs rather than the number alone.

Enable / disable

Disable this rule

[rules]
disable = ["perf/render-blocking"]

Disable all Performance rules

[rules]
disable = ["perf/*"]

Enable only this rule

[rules]
enable = ["perf/render-blocking"]

enable replaces the default ["*"], so this is the only rule selected. Leave disable out: a rule that matches any disable pattern is skipped even when enable names it. Only an enabled setting under a rule’s own [rule_options] table overrides both lists.

Related rules

• perf/css-file-size: how large those blocking stylesheets are.
• perf/critical-request-chains: resources that pull in further resources before paint.
• perf/font-delivery: third-party font stylesheets, a blocking resource with its own rule.
• perf/inp-hints: the same blocking scripts measured for their effect on interaction.

Performance findings ship in every audit next to the SEO, security and agent experience rules. See Core Web Vitals for how an agent works through a report.

References

• Largest Contentful Paint, web.dev
• The link element, HTML Standard
• The script element, HTML Standard

Check your site

Run squirrel audit https://example.com and open the Performance section of the report. Every blocking stylesheet and script is listed by page. Signed-out local audits need no account and cost nothing. Signed-in audits spend credits.