HTML Guides for inline

The async attribute is invalid on an inline classic <script>, because there is no external file for the browser to fetch in the background.

async tells the browser to download a script while it keeps parsing the page, and to run it as soon as it arrives. The code of an inline script is already in the page, so the browser runs it right away and async changes nothing. A classic script is any <script> whose type is missing, empty or a JavaScript MIME type such as text/javascript.

Inline module scripts are the exception. On <script type="module">, async makes the module run as soon as it and its imports are ready, instead of waiting until the document has been parsed, so the validator accepts it there.

Templates and performance plugins that add async to every <script> cause most of these. Remove the attribute from the inline script, or move the code to an external file if it should load without blocking the parser.

Invalid example

<script async>

console.log("Hello");

</script>

Valid example

<script>

console.log("Hello");

</script>

To load the code without blocking the parser, put it in an external file and keep async on that <script>:

<script src="app.js" async></script>

The defer attribute is invalid on an inline <script>, because it only affects scripts that are loaded from an external file through the src attribute.

defer tells the browser to download an external script in parallel with parsing and run it after the document has finished parsing. An inline script has no external file to download, so there is nothing to defer and the browser runs it as soon as it is parsed. Because the attribute has no defined effect here, the validator flags it.

This usually happens when a template or a performance plugin adds defer to every <script> on the page, including the inline ones. async gets a similar error on inline scripts, except on inline module scripts (type="module"), where it is allowed.

Invalid example

<script defer>

console.log("Hello");

</script>

Valid example

Remove the defer attribute from the inline script:

<script>

console.log("Hello");

</script>

If you need the code to run after the document is parsed, move it into an external file and defer that instead:

<script src="app.js" defer></script>