Cómo agregar «async» o «defer» a los scripts en WordPress

Los atributos async o defer nos ayudan a optimizar el tiempo de carga y ejecución de los distintos recursos Javascript de nuestra Web.

Pero lamentablemente la función wp_register_script(), con la que se encolan los distintos recursos Javascripts, no tiene un parámetro para agregar o indicar de alguna forma estos valores.

Es por este motivo que en la versión 4.1 de WordPress se agregó el filtro script_loader_tag que nos permite modificar el string final de la etiqueta <script>.

Aprovechando este filtro he creado la siguiente función para agregar en forma automática cualquiera de estos dos valores.

/**
 * Esta función agrega los parámetros "async" y "defer" a recursos de Javascript.
 * Solo se debe agregar "async" o "defer" en cualquier parte del nombre del 
 * recurso (atributo "handle" de la función wp_register_script).
 *
 * @param $tag
 * @param $handle
 *
 * @return mixed
 */
function mg_add_async_defer_attributes( $tag, $handle ) {
	// Busco el valor "async"
	if( strpos( $handle, "async" ) ):
		$tag = str_replace(' src', ' async="async" src', $tag);
	endif;
	// Busco el valor "defer"
	if( strpos( $handle, "defer" ) ):
		$tag = str_replace(' src', ' defer="defer" src', $tag);
	endif;
	return $tag;
}
add_filter('script_loader_tag', 'mg_add_async_defer_attributes', 10, 2);

¿Cómo utilizar la función?

Tal como se describe en el comentario de la función, solo debes agregar la palabra async o defer en cualquier posición del parámetro handle de la función wp_register_script y luego encolarlo con la función wp_enqueue_script.

// Ejemplo con "async".
wp_register_script( 'fichero-js-async', get_stylesheet_directory_uri() . '/js/fichero.js', [], false, true );
wp_enqueue_script( 'fichero-js-async' );
// Ejemplo con "defer".
wp_register_script( 'fichero-js-defer', get_stylesheet_directory_uri() . '/js/fichero.js', [], false, true );
wp_enqueue_script( 'fichero-js-defer' );

La próxima vez que GTMetrix o Google Lighthouse te regañen por ficheros javascripts que bloquean el renderizado de tu HTML ya tienes aquí una simple solución para implementar en tu código.

🗒 Si quieres saber un poco más sobre al diferencia entre async y defer, te recomiendo este artículo de Juan Padial que lo explica a la perfección.