Performance
perf/render-blocking-script
A script in the head loads with defer, async or type="module", never as a plain blocking script.
moderatestaticfe-html
Why
A classic <script src> in the head stops HTML parsing until the file is downloaded and run, which delays the first paint and the Largest Contentful Paint.
Fix
Add defer (runs in order after parsing; the usual choice) or async (runs as soon as it arrives; for independent scripts such as analytics), or load it as type="module", which defers by default.
Examples
<!-- bad -->
<script src="/app.js"></script>
<!-- good -->
<script src="/app.js" defer></script>Sources
Facts
- Id
perf/render-blocking-script- Severity
- moderate
- Check
- static checked in the source by
audit - Applies to
html- Same problem in
- Lighthouse
render-blocking-insight - Taught by the skill
fe-htmlHTML documents and semantics- Since version
- 0.1.0
Read it in the terminal
npx github:dawidolko/frontend-skills explain perf/render-blocking-script