Optimiza tus Javascripts en WordPress

¿Por qué transportar una caja de herramientas de 100 kilos si solo necesitamos ajustar el tornillo de un mueble? Es el mismo tipo de pregunta que me hago cuando veo una página con decenas de ficheros Javascripts pesados e innecesarios. El desarrollador que no invierta tiempo en optimizar sus ficheros javascript está condenado a una web lenta, imposible de visualizar en dispositivos móviles y a un auténtico infierno para futuros mantenimientos.

La lista de la web analizada se extendía a 47 ficheros javascripts.

Este problema suele encontrarse cuando el desarrollador de la web sufre de pluginitis, es decir cuando aplica en forma indiscriminada docenas de plugins para resolver funcionalidades que bien podrían realizarse con un par de líneas de código PHP, CSS, HTML o Javascript.

Ahora bien, ¿cómo podemos optimizar la carga de nuestros javascripts desde un principio y evitar estos dolores de cabeza?

Agrupando Javascripts comunes a toda la web

Es muy probable que tu web tenga un menú desplegable que apliques con jQuery, un sistema modal de login o bien un plugin para hacer más suave el scroll de tu web. Estos ficheros puedes juntarlos en uno solo y así disminuir las peticiones al servidor. Yo lo aplico aún utilizando el protocolo HTTP2 en mi servidor.

jquery.js + scroll.js = common.js

Comprimiendo los ficheros

Podemos comprimir nuestros ficheros Javascripts (independientes o agrupados) utilizando herramientas manuales, automáticas o mediante plugins. De esta manera nuestra página web puede mantener el comportamiento (scroll, menús, validación de formularios, etc) pero con menos tráfico de datos.

• Compresores manuales
  • Google Closure Compiler
  • JS Compress
  • Javascript Minifier
• Compresores automáticos
  • Grunt
    • grunt-contrib-uglify
  • Gulp
    • gulp-uglify
• Plugins de compresión
  • WP Super Minify

Lo ideal es desarrollar un tema con ficheros Javascripts sin comprimir (para poder debuggear) y utilizar las herramientas automáticas para generar la versión de «producción» con los ficheros ya comprimidos.

Seleccionando los ficheros javascripts

Es lógico que no necesito incluir el Javascript con la validación de campos del formulario de contacto en mi página principal, entonces ¿por qué no hacer una selección de qué cargamos y en dónde?

Esto es muy sencillo en WordPress haciendo uso de las funciones wp_register_script, wp_enqueue_script y de los Tags Condicionales.

Ejemplo: Tenemos un proyecto con un fichero common.js con funcionalidad básica para toda la web y un fichero contacto.js que tiene la funcionalidad que comprueba los campos del formulario de contacto. Para hacer la carga discriminada debemos agregar un código similar al siguiente en nuestro fichero functions.php de nuestro tema.

function function_agregar_scripts() {
  // Registro los ficheros Javascripts.
  wp_register_script('commonjs', get_bloginfo('template_url') . '/js/common.js', array('jquery'),'',true);
  wp_register_script('contactojs', get_bloginfo('template_url') . '/js/contacto.js', array('jquery'),'',true);
  
  // Agrego el javascript registrado como 'contactojs' solo si la página actual es "Contacto".
  if(is_page('Contacto')):
    wp_enqueue_script('contactojs');
  endif;
  
  /* 
  * Agrego el javascript registrado como 'commonjs' a las páginas webs del tema.
  * (El condicional indica que no se cargue el fichero en el administrador de WordPress)
  */
  if(!is_admin()):
    wp_enqueue_script('commonjs');
  endif;
}
add_action( 'wp_enqueue_scripts', 'function_agregar_scripts' );

Mi técnica de carga Javascripts

Como conté en párrafos anteriores genero un fichero Javascript con la funcionalidad común para toda la web (common.js) y otros ficheros Javascript independientes para utilizar en distintas páginas (contacto.js, home.js, single-blog.js, etc).

Al finalizar el desarrollo de mi tema ejecuto una tarea Grunt para generar los nuevos ficheros Javascript comprimidos, obteniendo así:

• common.js y common.min.js
• contacto.js y contacto.min.js
• home.js y home.min.js
• single-blog.js y single-blog.min.js

Para finalizar aplico en mi functions.php la técnica de carga discriminada para cargar solo aquellos Javascripts que voy a utilizar y agrego un nuevo condicional para cargar la versión comprimida o descomprimida según el entorno de trabajo.

function function_name_scripts() {
  /*
  * Para discriminar por la versión comprimida o descomprimida agrego una constante en
  * el wp-config.php llamada 'WP_DEVELOPMENTMODE'. En caso de que sea TRUE estamos en entorno
  * de 'Desarrollo', en caso de que sea FALSE o bien que no exista estamos en el entorno de 'Producción'
  *
  * Teniendo en cuenta el valor de la constante genero la extensión del fichero '.js' para 'Desarrollo'
  * y 'min.js' para 'Producción'
  */
  $jsExtension = (defined('WP_DEVELOPMENTMODE') && WP_DEVELOPMENTMODE )?'.js':'.min.js';
  
  // Registro los ficheros Javascripts.
  wp_register_script('commonjs', get_bloginfo('template_url') . '/js/common' . $jsExtension, array('jquery'),'',true);
  wp_register_script('contactojs', get_bloginfo('template_url') . '/js/contacto' . $jsExtension, array('jquery'),'',true);
  
  // Agrego el javascript registrado como 'contactojs' solo si la página actual es "Contacto".
  if(is_page('Contacto')):
    wp_enqueue_script('contactojs');
  endif;
  
  /* 
  * Agrego el javascript registrado como 'commonjs' a las páginas webs del tema.
  * (El condicional indica que no se cargue el fichero en el administrador de WordPress)
  */
  if(!is_admin()):
    wp_enqueue_script('commonjs');
  endif;
}
add_action( 'wp_enqueue_scripts', 'function_name_scripts' );

¿Qué técnica usas?

Déjame en los comentarios qué técnica utilizas para cargar tus ficheros javascripts o si ves una posibilidad de mejorar lo aquí expuesto para que podamos compartirlo con los demás desarrolladores.