Optimizar Mootools en tu web
El compacto framework Mootools
En otro artículo ya hablé del conjunto de librerías Mootools que ayudan enormemente en la programación en JavaScript. Uno de los problemas que ya comenté en ese artículo es el tamaño de las librerías, y Joomla! a partir su versión 1.6 lo tiene incluido. Muchos usuarios, ya incluso desde la versión de Joomla! 1.5, se preguntan cómo es posible disminuir el tamaño de estas librerías, cómo desactivarlas o si son o no necesarias. Vamos a intentar resolver algunas dudas.
Si accedes a la web de Mootools ( http://mootools.net/ ), puedes ver que se desarrollan principalmente dos librerías: MooTools Core y MooTools More. Desde ese enlace puedes acceder tanto a MooTools Core como a MooTools More y, como ya comenté, puedes seleccionar los componentes que quieras para generar un sólo archivo JavaScript, puedes incluso incluir compatibilidad con versiones anteriores y comprimir el archivo resultante con YUI Compresor. Realmente "construir" (builder) estas librerías pueden ayudarte a reducir el archivo final seleccionando los componentes que realmente usas en tu web.
Como ya vimos, el principal problema que te puedes encontrar es el tamaño de estas dos librerías que incluso comprimidas pesan lo siguiente:
- mootools-more.js (aprox. 233 KB) + mootools-core.js (aprox. 86 KB) = ¡319 KB!
Es una barbaridad este tamaño. Como Joomla! 1.7 (y/o determinados componentes) las utiliza, pues muchos usuarios se preguntan si es posible desactivarlas o si es posible comprimirlas y me puse a buscar información y problemas en la red.
Posibles soluciones
Una pregunta que me hice fue ¿por qué (en Joomla! 1.7) en el front-end de mi página web se carga el archivo mootools-core.js? ¿Realmente es necesario este archivo de 86 KB?. Si te pones a investigar un poco, verás que Joomla! 1.7 carga ese archivo desde aquí:
tu_sitio/components/com_content/controller.php
Y ahí encontramos el siguiente código:
public function display($cachable = false, $urlparams = false)
{
$cachable = true;
JHtml::_('behavior.caption');
...
JHtml::_('behavior.caption') carga mootools-core.js, ya que si examinas el código de behavior.php en la función caption verás esto:
// Include MooTools framework
self::framework();
He visto que algunas personas simplemente comentan esa linea (JHtml::_('behavior.caption')) y efectivamente ya no se carga mootools-core.js pero yo no creo que sea buena idea primero porque con cada actualización de Joomla! tendrías que modificar el archivo, segundo porque no cargas caption.js y tercero porque esto se puede hacer desde la template o usando un plugin como te voy a mostrar. Además ¿puedes estar seguro que no se utiliza? Para mi no es buena idea hacer esto.
Un hilo muy interesante sobre este tema lo encontré en joomla.org en el siguiente enlace: http://forum.joomla.org/viewtopic.php?p=1232907. Como puedes observar, ese hilo comienza porque un usuario comenta la posibilidad de crear una opción global para poder desactivar MooTools cuando no sea necesario. Al final se crean varios códigos para desactivarlo. Antes de entender los códigos veamos una opción para reducir y optimizar el archivo mootools-core.js.
Reducir el tamaño de mootools-core.js
Por si no lo conoces, quiero comentarte la existencia de Google AJAX Libraries API. Es un excelente servicio en el que Google en su servidor, aloja las librerías JavaScript más populares optimizadas y que pone en descarga para usar en tu web. Esto significa que si usas mootools-core.js de un tamaño aproximado de 90 KB puedes sustituir dicha librería por otra optimizada y actualizada de Google (mediante el método google.load) y que ocupa solamente unos 27 KB. Como podrás pensar, es una solución muy buena ya que no llegas a desactivar MooTools y como la librería está actualizada te debería funcionar correctamente. Además Google se preocupa de utilizar una librería estable y sabes que no estará en tu servidor. Desde la misma página de MooTools, en la zona de descarga, te indica lo siguiente: "You can also acquire these files via the Google Ajax Libraries API.".
- Ventajas: disminuye el tamaño del archivo, es una librería estable, mejoras la velocidad de carga de tu página y descargas el archivo desde otro sitio ajeno a tu web.
- Desventajas: Se te pueden ocurrir unas cuantas pero en mi cabeza sólo baila una: que Google AJAX Libraries no tiene una librería estable para mootools-more.js que es realmente el que más nos preocupa con ¡230KB de peso!.
Usando Google AJAX Libraries en Joomla!
Para usar Google AJAX Libraries en Joomla! puedes hacer uso de este excelente plugin que lo he testeado y funciona perfectamente: http://extensions.joomla.org/extensions/site-management/content-networking/6981. Desde el mismo plugin puedes indicar la versión a la que quieres hacer referencia para sustituirla por mootools-core.js y esto es importante porque se van actualizando las librerías.
Antes de que lo utilices en tu web, te recomiendo probarlo concienzudamente ya que puede darte fallos, pero si esto ocurriese puedes modificar la versión desde el mismo plugin o simplemente desactivarlo hasta encontrar una versión adecuada.
En el siguiente artículo veremos códigos de cómo podemos desactivar MooTools. Y vamos a crear un plugin, sí un plugin para Joomla! > 1.6 que te lo voy a explicar código a código.
