Blog personal de IT, viajes y otros hobbies

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

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.

Anterior

Cómo desactivar el Sitemap de WordPress 5.5

Siguiente

Cómo añadir publicidad AdSense automáticamente en tus artículos de WordPress

  1. Hola Buenos dias.

    Me llamo Jesus, he hecho una web, es la primera y no se nada de todos estos leguajes HTML y demas,,,, pero co los progrmas y muchas horas de intentos he conseguido crear una web, que no sabria definirla, me gustaria añadirle las scripts y demas codigos para que funcionara rapida como un rayo, pero no se como hacer esto.

    Seria de mucha ayuda para mi una breve explicacion detallada de como hacerlo sin romper y volver a empezar porque necesito que funciones es mi unica fuente de ingresos que puedo tener a dia de hoy…

    Gracias por tu tiempo de leer y que tengas un bue dia..

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

Funciona con WordPress & Tema de Anders Norén