Defer Render-Blocking Head Scripts
ID |
html.defer_script_tag |
Severity |
low |
Remediation Complexity |
low |
Remediation Risk |
low |
Remediation Effort |
low |
Resource |
Efficiency |
Language |
Html |
Tags |
efficiency |
Description
Flags a <script src="…"> placed inside <head> that loads synchronously, i.e. carries none of
defer, async or type="module".
Rationale
A classic script in the document head blocks HTML parsing while it downloads and executes, delaying
first paint. Adding defer (or async, or making it an ES module, which defers by default) lets
the parser continue and the script load without holding up rendering.
<head>
<script src="app.js"></script> <!-- FLAW — render-blocking head script -->
</head>
<head>
<script src="app.js" defer></script> <!-- OK — deferred -->
</head>Remediation
Add defer (preserves execution order, runs after parsing) or async (runs as soon as ready) to
the script, or load it as type="module". Alternatively move the <script> to the end of
<body>.