How add defer of async to scripts in WordPress. Code example

Connecting scripts via defer or async attributes has several advantages:

• Improved page loading performance. When scripts load synchronously, they can block the rest of the page’s content from loading, which slows down load times. Using defer or async allows the browser to load other resources, such as images or styles, in parallel, thereby speeding up page loading.
• Improved page responsiveness. Loading scripts asynchronously or deferred allows the browser to render page content earlier, even if the scripts have not yet finished loading or executing. This is especially useful for improving the user’s perception of page loading speed.
• Correct script execution order. When using the defer attribute, scripts will be executed in the order in which they are specified in the HTML document. This may be important for scripts that depend on other scripts or libraries.

Deferred scripts – are only executed once the DOM tree has fully loaded (but before the DOMContentLoaded and window load events). Deferred scripts are executed in the same order they were printed/added in the DOM, unlike asynchronous scripts.

Async scripts — are executed as soon as they are loaded by the browser. Asynchronous scripts do not have a guaranteed execution order, as script B (although added to the DOM after script A) may execute first given that it may complete loading prior to script A. Such scripts may execute either before the DOM has been fully constructed or after the DOMContentLoaded event.

Wordress 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

WordPress now adds support for specifying a script loading strategy via the wp_register_script() and wp_enqueue_script() functions.

wp_register_script( 
    'scriptid', 
	'/js/myscriptpath.js', 
    array(), 
    '1.0.0', 
    array(
        'strategy' => 'defer',//defer or async
		'in_footer' => true,
    ) 
);

wp_enqueue_script( 
    'scriptid', 
	'/js/myscriptpath.js', 
    array(), 
    '1.0.0', 
    array(
        'strategy' => 'defer',//defer or async
		'in_footer' => true,
    ) 
);

WordPress until 6.3

For async. Add this filter in to yours function.php:

function lube_add_async_attribute( $tag, $handle ) {
    if ( 'feedback-sendform-js' !== $handle ) {//feedback-sendform-js - script id
        return $tag;
    }
 
    return str_replace( ' src', ' async="async" src', $tag );
}
add_filter( 'script_loader_tag', 'lube_add_async_attribute', 10, 2 );

For defer. Add this filter in to yours function.php:

function lube_add_async_attribute( $tag, $handle ) {
    if ( 'feedback-sendform-js' !== $handle ) {//feedback-sendform-js - script id
        return $tag;
    }
 
    return str_replace( ' src', ' defer="defer" src', $tag );
}
add_filter( 'script_loader_tag', 'lube_add_async_attribute', 10, 2 );