Cargar JavaScript de forma Asíncrona en WordPress

WordPress hoy por hoy es uno de los CMS más completos que hay en el mercado, cuenta con miles y miles de plantillas gratuitas y de pago que implementan demasiadas funciones para que tú únicamente le des el diseño y características que quieres a tu web con unos simples clicks.

¿Pero alguna vez te has puesto a revisar cuantos ficheros JavaScript cargan están plantillas? Si vieras como afectan a la carga de tu web, te lo pensarías dos veces antes de implementarlos.

De hecho Google cuenta con una herramienta que te permite evaluar si tu sitio web cumple con algunos estándares, está herramienta es Google PageSpeed Insights, y uno de los errores que más frecuentemente vemos al analizar un sitio web es el siguiente:

Eliminar el JavaScript que bloquea la visualización del contenido de la mitad superior de la página

La solución más coherente y recomendada para solucionar este error es mover los ficheros JavaScript al Footer o pie de página, con esto se cargara primero todo el contenido de nuestra página y al final el JavaScript. ¿Pero cuál es el problema? Que ésto no soluciona nuestros tiempos de carga.

Hace unos días en mi articulo de 10 elementos que todo Diseño Web de tener te hablaba de la importancia que tiene la velocidad con la que se carga un sitio web, viendo que una persona esta dispuesta únicamente a esperar 2 segundos a que cargue la página, de lo contrario la abandonará y se irá a otra ¡Cosa que no queremos!

Entonces si queremos mejorar nuestros tiempos de carga no basta con mover el JavaScript al Footer, hay que buscar otras soluciones. Una de ellas es cargar los archivos de forma Asíncrona.

¿Pero que es la carga Asíncrona?

Al realizar una carga asíncrona, conseguimos que el navegador comience a descargar el contenido de la web (HTML, CSS, imágenes, etc) sin tener que esperar a que se descargue por completo el Script, algo que sin duda mejora los tiempos de carga.

¿Como usar la carga Asíncrona?

En un html plano podríamos encontrarnos con los scripts de la siguiente manera:

<script type='text/javascript' src='/jquery/jquery.min.js'>

Para implementar la carga asíncrona únicamente tenemos que implementar la propiedad defer o async (en otro articulo explicare las diferencias) entre la etiqueta , ejemplo:

Script con propiedad async:

<script type='text/javascript' async src='/jquery/jquery.min.js'>

Script con propiedad defer:

<script type='text/javascript' defer src='/jquery/jquery.min.js'>

¿Cómo implementar las propiedades async o defer en WordPress?

Como bien sabemos, en WordPress todo es dinámico, por lo que resulta complicado encontrar los scripts dentro del código de nuestra página, normalmente estos scripts se insertan dinamicamente desde el archivo functions.php de nuestra plantilla.

Normalmente los scripts se insertan de la siguiente manera:

function load_scripts() {
    wp_register_script('script-name', includes_url( '/js/jquery/script.js' ), false, NULL, true );
    wp_enqueue_script('script-name');  
}
add_action( 'wp_enqueue_scripts', 'load_scripts' );

Si analizamos con cuidado el anterior código, nos daremos cuenta que para insertar cada script WordPress utiliza un Handle o Identificador, en este caso el identificador de este script es 'script-name', pero puede ser cualquier otro nombre  (ejem: ‘script-2’), menciono esto porque este handle lo utilizaremos más adelante…

Agregando los atributos Async y Defer

Desde la versión de WordPress 4.1, se ha implementado un nuevo filtro que nos permite insertar los atributos async y defer a nuestros scripts, el filtro es: script_loader_tag y podemos leer su documentación aquí: Code Reference.

Para implementar este filtro nos dirigimos al archivo functions.php de nuestra plantilla y agregamos el siguiente código:

function add_async_to_script($tag, $handle) {
   // agregar los handles o identificadores de los scripts al array
   $scripts_to_async = array('script-name', 'script-2');
    
  // recorremos el array y agregamos el atributo async defer
   foreach($scripts_to_async as $async_script) {
      if ($async_script === $handle) {
         return str_replace(' src', ' async defer src', $tag);
      }
   }
   return $tag;
}
add_filter('script_loader_tag', 'add_async_to_script', 10, 2);

Aquí debemos de prestar atención en el nombre de los handlers o identificadores que usa cada script para ser agregado, ya que si no colocamos el handle correcto no se insertará el atributo async.

Con esto ya habremos vuelto asíncronos nuestros ficheros JavaScript mejorando los tiempos de carga de nuestro sitio web, ¿No me crees? Haz la prueba 😉