# Add controls for WP 6.3’s new asynch & defer attributes

**URL:** https://forum.pinegrow.com/t/add-controls-for-wp-6-3-s-new-asynch-defer-attributes/8271
**Category:** Feature Request
**Tags:** wordpress
**Created:** [July 31, 2023, 4:08pm UTC](https://forum.pinegrow.com/t/add-controls-for-wp-6-3-s-new-asynch-defer-attributes/8271 "2023-07-31T16:08:18Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![adamslowe](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/adamslowe/32/4590_2.png) [@adamslowe](https://forum.pinegrow.com/u/adamslowe)
#### Post date: [July 31, 2023, 4:08pm UTC](https://forum.pinegrow.com/t/add-controls-for-wp-6-3-s-new-asynch-defer-attributes/8271/1 "2023-07-31T16:08:18Z")

</div>

Any chance you can implement these in a future release?

> **[Registering scripts with \`async\` and \`defer\` attributes in WordPress 6.3](https://make.wordpress.org/core/2023/07/14/registering-scripts-with-async-and-defer-attributes-in-wordpress-6-3/)**
>
> WordPress 6.3 introduces support for registering scripts with async and defer attributes as part of an enhancement to core’s existing Scripts API. This addresses a long-standing Trac ticket, …

“  
WordPress 6.3 introduces support for registering scripts with `async` and `defer`attributes as part of an enhancement to core’s existing Scripts API. This addresses a [long-standing Trac ticket](https://core.trac.wordpress.org/ticket/12009), and adds the ability to define a loading strategy for scripts. Supported strategies are as follows:

- Blocking (default, this strategy is not supplied)
- Deferred (by supplying a defer loading strategy)
- Asynchronous (by supplying an async loading strategy)

This enhancement was originally proposed in [December 2022](https://make.wordpress.org/core/2022/12/09/enhancing-the-scripts-api-with-a-loading-strategy/).  
“

---

<div class="post-metadata">

### Author: ![WellMade](https://avatars.discourse-cdn.com/v4/letter/w/c89c15/32.png) [@WellMade](https://forum.pinegrow.com/u/WellMade)
#### Post date: [January 28, 2024, 12:22pm UTC](https://forum.pinegrow.com/t/add-controls-for-wp-6-3-s-new-asynch-defer-attributes/8271/2 "2024-01-28T12:22:29Z")

</div>

+1 on this one. This would greatly improve performance for me.

---

<div class="post-metadata">

### Author: ![TechAkayy](https://avatars.discourse-cdn.com/v4/letter/t/ce73a5/32.png) [@TechAkayy](https://forum.pinegrow.com/u/TechAkayy)
#### Post date: [January 30, 2024, 12:07pm UTC](https://forum.pinegrow.com/t/add-controls-for-wp-6-3-s-new-asynch-defer-attributes/8271/3 "2024-01-30T12:07:39Z")

</div>

On this topic, also support for inline & external module scripts. Just sharing the below, to see if anyone tried something similar, and have any suggestions.

Probably there are better solutions… meanwhile, pg-wp-addon, if it sets the information that the script is of type=“module” (can be extended to async, defer, once, nonce etc) in the script’s `id` (which currently is of format `inline-script-x`), then the `id` can be used by `wp_inline_script_attributes` && `wp_script_attributes` hooks to set the script tag as `type="module"`.

For eg, (assuming `assets` are available within the `public` folder of the theme),

**Flavour-1** - Module script imported using `src`

```auto
<script type="module" src="/assets/my-module.js"></script>

```

If this is generated…

```auto
wp_register_script('inline-module-script-1', "/assets/my-module.js", [], '1.0.0', true);
wp_enqueue_script('inline-module-script-1');
wp_scripts()->add_data('inline-module-script-1', 'type', 'module');

```

**Flavour-2** - Module script where the import is within the script body (alternative to flavour-1)

```auto
<script type="module">
    import {something} from "/assets/my-module.js";
    something();
</script>

```

If this is generated…

```auto
wp_register_script('inline-module-script-1', '', [], '1.0.0', true);
wp_enqueue_script('inline-module-script-1');
wp_add_inline_script('inline-module-script-1', 'import {something} from "/assets/my-module.js";something();');

```

Then, we could use these two hooks to set the `type="module"` attribute like this (added to `inc/custom.php`):

```auto
<?php
/* 
Use this file to add custom PHP code to your theme or plugin 
*/
add_filter('wp_inline_script_attributes', 'add_type_module_attribute');
add_filter('wp_script_attributes', 'add_type_module_attribute');
function add_type_module_attribute($attributes)
{
  if (isset($attributes['id']) && str_contains($attributes['id'], '-module')) {
    $attributes = array_merge($attributes, array('type' => 'module'));
  }
  return $attributes;
}
?>

```

Some related info, for any solution involving `wp_scripts()->add_data('inline-script-1', 'type', 'module');` which probably won’t work for inline scripts

- The script\_loader\_tag filter only applies to tags that load JavaScript files, not inline JavaScript blocks. Source - [Why are some script tags skipped when adding nonces for content security policy in WordPress? - Stack Overflow](https://stackoverflow.com/a/76377900)
- wp\_script\_attributes && wp\_inline\_script\_attributes doesn’t receive $handle. Source - [wp\_script\_attributes – Hook | Developer.WordPress.org](https://developer.wordpress.org/reference/hooks/wp_script_attributes/)