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.
Jesus
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..