Blog personal de IT, viajes y otros hobbies

Caja de herramientas

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.

Una lista infernal de ficheros javascripts

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.

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

Anterior

Mockups con elementos HTML de WordPress

Siguiente

wp_posts el corazón de WordPress

  1. Luis Pineda

    De Momento me quedo con el termino: pluginitis tendré que cuidarme la salud de padecerlo.

  2. Muy buen artículo. Importante no dejar la web llena de plugins¡!!!

  3. Aupa Mauricio,

    Una duda, ¿no usas algún plugin o estrategia para comprimir los js y los css en un solo fichero?

    Veo que usas muchos ficheros separados, ¿es por algún motivo?

    De todas maneras me gustaría conocer esos plugins que comentas 🙂

    saludos

    • Hola Ruben, de momento estoy usando también el «Autoptimize» que comenta Gerardo. Este plugin «encapsula» todos las dependencias javascript de una plantilla dada y lo comprime en un solo fichero.
      Esta técnica sirve si lo sumamos a una buena estrategia de caché para que el servidor no tenga que procesar cada pedido del cliente.
      Un saludo!

  4. Yo utilizo el plugin autoptimize que comprime varios códigos entre ellos el javascript y la verdad que es genial le gane 1 segundo entero a la carga de mi web.

Deja una respuesta

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

Funciona con WordPress & Tema de Anders Norén