#Sync script without being inline

7 messages · Page 1 of 1 (latest)

queen scarab
#

Have the script tag be sync and execute immediately without being inline

fathom saddleBOT
#

Hi @queen scarab. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Astro processes and optimizes script tags by default. However, if you add any attribute other than src to a <script> tag, Astro treats the tag as if it had an is:inline directive, which means the script will not be processed or optimized by Astro and will be rendered into the HTML exactly as written source (https://docs.astro.build/en/guides/client-side-scripts#opting-out-of-processing).

If you want your script to execute immediately, you can use the async attribute. However, keep in mind that adding async will cause Astro to treat the script as inline, and it will not be processed or optimized by Astro source (https://github.com/withastro/astro/issues/4648).

If you want your script to be processed and optimized by Astro and also execute immediately, you can import it from a local .js or .ts file within your src/ directory. Astro will build, optimize, and add these scripts to the page for you source (https://docs.astro.build/en/guides/client-side-scripts#include-javascript-files-on-your-page).

Here's an example of how to do this:

<!-- relative path to script at `src/scripts/local.js` -->
<script src="../scripts/local.js"></script>

Please note that Astro automatically adds the defer attribute to your scripts, which means they will not block the rendering of the page and will execute once the page has finished parsing source (https://github.com/withastro/astro/issues/4648). If you need your script to execute as soon as possible, you might need to reconsider the structure of your code or the way you're loading your scripts.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@queen scarab kapa.ai is still learning and improving, please let us know how it did by reacting below

queen scarab
#

@fathom saddle I also want to avoid the defer attribute

fathom saddleBOT
#

Let me check the knowledge base for you. One moment! :books:

#

Astro automatically adds the defer attribute to your scripts to improve page load performance. This means that scripts will not block the rendering of the page and will execute once the page has finished parsing source (https://github.com/withastro/astro/issues/4648).

If you want to avoid the defer attribute and have your script execute immediately, you can add any attribute to your script tag (other than src). This will cause Astro to treat the script as inline, and it will not be processed or optimized by Astro. However, please note that inline scripts will not be bundled into an external file, and any attributes like async or defer that control the loading of an external file will have no effect source (https://docs.astro.build/en/reference/directives-reference#isinline).

Here's an example of how to do this:

<script type="text/javascript">
  // Your script here
</script>

In this example, the type attribute causes Astro to treat the script as inline, so it will not add the defer attribute. However, keep in mind that this script will not be processed or optimized by Astro, and it will be rendered into the HTML exactly as written.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: