Agregar atributos async y defer en WordPress

Las etiquetas script son unos de los recursos más comunes que bloquean renderizado de un proyecto en WordPress, los atributos async y defer fueron introducidos en Html5 para optimizar la carga de estos recursos, de modo que podemos cargar el script de de forma asíncrona con async o utilizar defer si el script es dependiente de otros scripts o no interacciona con el dom antes de terminar la carga de jQuery.

Si has encolado correctamente tus scripts a WordPress, la forma de añadir atributos a las etiquetas script se realiza haciendo un add_filter() sobre la función script_loader_tag() de WordPress y pasándole en un array los handles de los scripts que quieres modificar.

function my_async_scripts( $tag, $handle, $src ) {
    $async_scripts = array( 'scripts', 'mas-scripts' );
    if ( in_array( $handle, $async_scripts ) ) {
        return '<script async defer src="' . $src . '"' . "\n";
    }
    return $tag;
}
add_filter( 'script_loader_tag', 'my_async_scripts', 10, 3 );