5

First I enqueue a script using:

wp_enqueue_script( "script", plugins_url( "/test/js/script.js", PATH ), array("jquery"), VERSION, true );

Then I'm inserting an inline script after "script".

wp_add_inline_script( "script", "console.log('hello world');" );

Now I need to add defer or async attribute to my inline script, is there a way to do this to a script embedded by wp_add_inline_script() ?

3 Answers 3

5

wp_enqueue_script( "script", plugins_url( "/test/js/script.js", PATH ), array("jquery"), VERSION, true );

wp_script_add_data( 'script', 'async/defer' , true );

see more

Sign up to request clarification or add additional context in comments.

5 Comments

Hi, Look at this. WordPress twentytwenty theme is using the same function to enable async github.com/WordPress/WordPress/blob/…\
Is not working for me for wp_enqueue_script(...$src); wp_script_add_data('rollbar' , 'async/defer', 'true');
Please take a look at TwentyTwenty theme here: github.com/WordPress/WordPress/blob/…
@StevenAguilar it is either defer OR async, not both.
In order for this to work the custom script loader class from the twentytwenty theme is required. wp_script_add_data does not have this option by default.
1

I know this isn't what you're looking for, but defer doesn't work unless there's a src attribute. I.e. it doesn't work on inline scripts.

From the MDN docs:

defer This Boolean attribute is set to indicate to a browser that the script is meant to be executed after the document has been parsed, but before firing DOMContentLoaded. Scripts with the defer attribute will prevent the DOMContentLoaded event from firing until the script has loaded and finished evaluating. Warning: This attribute must not be used if the src attribute is absent (i.e. for inline scripts), in this case it would have no effect. The defer attribute has no effect on module scripts — they defer by default. Scripts with the defer attribute will execute in the order in which they appear in the document. This attribute allows the elimination of parser-blocking JavaScript where the browser would have to load and evaluate scripts before continuing to parse. async has a similar effect in this case.

Comments

1

As of WordPress 6.3+, you can now use the strategy attribute when registering scripts to apply async or defer loading strategies. However, this only applies to enqueued scripts, not directly to inline scripts added with wp_add_inline_script().

// Register your script
wp_register_script(
    'my-custom-script',
    'https://example.com/script.js',
    [],
    null,
    [
        'strategy' => 'defer' // or 'async'
    ]
);

// Add your inline script associated with the registered handle
wp_add_inline_script( 'my-custom-script', 'console.log("Inline script loaded");' );

// Enqueue the script
wp_enqueue_script( 'my-custom-script' );

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.