JavaScript bundling and optimizationWhat it checks and how to fix it

What it checks

Reviews the page's script tags: external scripts that block rendering because they lack async, defer or type=module (more than 2 is an issue), more than 10 external scripts, and inline scripts over 5 KB count against it; all scripts non-blocking, 3 or fewer scripts, ES modules, minified or hashed filenames and signs of a bundler or code splitting count in its favor. Passes when the good practices outweigh the issues and warns when they do not.

Why it matters

A classic script tag in the head stops the HTML parser until the script has downloaded and run, so every one of them delays the first paint. Many separate scripts add requests, and large inline scripts cannot be cached between pages, so visitors download and execute the same code again on every navigation.

How to fix it

Load scripts without blocking the parser, and bundle them into a few minified, fingerprinted files.

<!-- runs after parsing, in order -->
<script src="/assets/app-3f9a1c.js" defer></script>
<!-- independent third-party script -->
<script src="https://example-analytics.com/script.js" async></script>
<!-- modules are deferred by default -->
<script type="module" src="/assets/application.js"></script>

Move large inline scripts into external files so they can be cached, and use dynamic import() to load code only on the pages that need it. Bundlers such as esbuild, Vite or webpack handle bundling, minification and fingerprinting; in Rails, javascript_include_tag "application", defer: true or importmap's javascript_importmap_tags produce non-blocking tags.