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.


¿Qué te pareció el artículo?
No molaPobreMolaMuy bueno¡Excelente! (Ninguna valoración todavía)
Cargando...
Mauricio Gelves
Mauricio Gelves es Lic. en Informática y trabaja como Consultor Web Freelance con su marca personal MauGelves. Se especializó en WordPress para ofrecer soluciones personalizadas y rentables a medianas y largas empresas. Es Nómade Digital desde el año 2015, actividad que combina sus dos principales pasiones: la informática y los viajes, y refleja sus experiencias a través de sus hobbies audiovisuales en Instagram y YouTube.
10 Pasos para ser Freelance - eBook Gratuito

10 pasos para convertirte en Freelance

Descarga en forma totalmente gratuita mi eBook en donde explico los 10 pasos que he dado para convertirme en Freelance.

Ingresa tu email y recibe en tu bandeja de correo el enlace para descargarte el eBook.

(Te doy mi palabra que solo enviaré un email al mes con todas mis novedades)


Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *