perf/render-blocking-script

Dlaczego

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.

Poprawka

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.

Przykłady

<!-- bad -->
<script src="/app.js"></script>
<!-- good -->
<script src="/app.js" defer></script>

Źródła

• MDN, the script element (defer and async)
• Chrome for Developers, Eliminate render-blocking resources

Przeczytaj w terminalu

npx github:dawidolko/frontend-skills explain perf/render-blocking-script