Minify: Combinar y Minimizar JS y CSS

Dentro del pack de mejoras que apliqué a Phylosoft hace unos meses hubo algunas técnicas enfocadas a la eficiencia técnica del blog. Una de ellas fue la reducción de «llamadas» a objetos y su optimización utilizando Minify (entre otras cosas).

Para lograr disminuir el tiempo de carga de una web y, en consecuencia, aumentar la velocidad con la que un usuario navega por ella es conveniente reducir al máximo el número de imágenes, estilos, funciones, … que deben cargarse para que se muestre correctamente.

Para empezar, lo mejor es eliminar imágenes y funciones que «solo hacen bonito» pero no aportan valor pero, tras ese primer doloroso paso, cuando ya no se puede eliminar nada, llega el momento de aplicar alguna técnica que reduzca todavía más lo que queda.

En esta entrada explicaré una técnica que sirve para que la mayoría de llamadas a archivos javascript (*.js) y de estilos (*.css) de resuman en una sola por tipo de archivo, con la funcionalidad añadida de que esta misma técnica reduce el peso de los archivos a los que llama. Es decir, que aplica dos mejoras en una: reducción de peso y reducción de llamadas.

Se trata de utilizar Minify, una aplicación PHP5 que combina, minimiza y cachea varios archivos js y css bajo petición para aumentar la velocidad de descarga de las webs. La puedes encontrar en Google Code: Minify

Es muy sencilla de instalar y utilizar, al menos la parte más básica. Se descarga, se descomprime, se sube a la raíz del servidor la carpeta /min/ y listo, ya puede comenzar a utilizarse.

Tiene un archivo «config.php» al que para empezar no es necesario modificarle nada.

Para ayudar en las primeras operaciones lo mejor es visitar http://tudominio.com/min/builder/ donde te ayuda a construir tu llamada a varios css o js con indicaciones y trucos sobre como hacerlo.

Yo estoy utilizando Minify en Phylosoft para rducir las llamadas a archivos JS que no están incluidos en plugins (puesto que algunos no me deja quitarlos), sobre todo desde que utilizo jQuery, que implica la llamada a la librería principal y tras eso a las funciones propias se me había disparado el número de llamadas a .js y su peso. Con Minify he reducido considerablemente ambas

Mi código antes (4 llamadas, 115 kb):

[html]<script type="text/javascript" src="http://midominio.com/wp-content/themes/mitheme/js/fichero1.js"></script>
<script type="text/javascript" src="http://midominio.com/wp-content/themes/mitheme/js/fichero2.js"></script>
<script type="text/javascript" src="http://midominio.com/wp-content/themes/mitheme/js/fichero3.js"></script>
<script type="text/javascript" src="http://midominio.com/wp-content/themes/mitheme/js/fichero4.js"></script>[/html]

Mi código ahora (1 llamada, 92 kb):

[html]<script type="text/javascript" src="/min/b=wp-content/themes/mitheme/js&f=fichero1.js,fichero2.js,fichero3.js,fichero4.js"></script>[/html]

Lo mismo puede aplicarse a archivos .css

Tiene otra ventaja, para los más técnicos: si modificas archivos js o css y no quieres estar optimizándolos a mano cada vez que haces una modificación, puedes olvidarte: llámalos a través de Minify, y él lo hará por tí puesto que ejecuta las acciones bajo demanda (es decir, cuando alguien quiere acceder a tu web).

10 respuestas a «Minify: Combinar y Minimizar JS y CSS»

  1. Si utilizas wordpress recomiendo total cache que será una de las mejores herramientas para optimizar tu web , ademas tiene un modulo especial para cdn que viene muy bien.

    Un saludo

  2. Qué pena, lo he probado y sólo he reducido 1 kb los JS y 1 KB los CSS. De todas formas está bien saber que existe esto, lo probaré con otras plantillas que tengo a ver si reduce más.

    Yo lo que hice con los CSS y archivos de la plantilla, fue ordenar y quitar espacios, reduciendo el tamaño de los archivos.

    Y sí se reduce algo, sobre todo en el CSS se le puede meter bastante mano para reducirlo, quizás por eso el minifier no pudo reducir mucho.

    Por otra parte, el otro día me enteré que hay ciertos JS que están alojados por Google
    https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js

    ¿Qué sentido tiene entonces alojarlo uno mismo si así se ahorra en cada carga que nuestro servidor lo presente, imagino que Google tendrá buenos servidores y no hará falta alojarlo uno mismo ¿no? ¿Qué piensas de esto?

    Es por si acaso me equivoco. Si la versión 1.5.2 del Jquery es igual ¿para qué sirve bajarla del sitio oficial y servirla desde tu servidor si Google la tiene alojada en un sitio y se puede aprovechar?

    1. Hola, pues sí, si ya te tomaste tu la molestia de optimizar los archivos a mano, minifu cas i no podrá hacer nada.
      Uno de los objetivos de alojar uno mismo librerías como jquery es reducir el número de llamadas a objetos. Si no la alojara en mi seridor, no podría llamarla en la misma línea de código que a otras, tendría que hacer una llamada para las externas y otra para las internas.
      Saludos,

  3. ¿Y no sale mejor realizar dos llamadas o las que haga falta que bajar 83 kb que por ejemplo ocupa la versión 1.5.2 de Jquery? ¿Se supone que es la misma no?

    Por cierto, en el servicio de Google Sites puedes hacerte una cuenta y puedes subir ahí ficheros, ¿y si se suben ahí los JS? Aunque tengas que hacer las llamadas externas ¿no resulta mejor que servirlas uno mismo y se ahorra uno uno 100 kb de media menos en cada carga de página?

    1. La página carga igual esos 100kb da igual de donde vengan, puesto que se ejecutan en el navegador del usuario. Otra cosa es que tú, en tu servidor, ahorres esos 100 kb/página vista de ancho de banda. Pero de cara al usuario es lo mismo. De cara a uso de CPU de servidor, cuantas menos llamadas mejor, eso seguro!

  4. Lo que me interesaba saber es si prima el hacer 4 llamadas de Jquery a archivos exteriores o 1 llamada a un archivo propio. ¿Seguro que mientras el servidor sirve esos 100 kb no se satura más que el hecho de realizar 4 llamadas exteriores?

    De todas formas se puede uno descargar el archivo creado con el minify y subirlo por ejemplo al Google Sites y creo que valdría también.

    1. Creo que necesitamos a alguien más técnico para asegurarlo al 100 %. Yo diría que los 100 kb (sea de una vez o de varias) los va a tener que descargar igual, así que cuantas menos llamadas mejor, por otra parte no se pueden paralelizar llamadas a .js (a imágenes sí) si bien estos podrían llamarse al final de la página (en el footeer en vez de en el header)… Igual algún otro lector nos puede dar más luz, yo la información la saqué entre el Page Speed de Google y el Yslow de Yahoo…

  5. Si sé que ahora lo que menos importa en los hostings es el ancho de banda consumido por mes, ya que muchos lo tienen ilimitado (esa moda empezó en los servidores extranjeros), por lo que dicho ahorro no merece la pena.

    Pero pensaba que si se utiliza el Minify para reducir los JS y CSS, y aparte se suben a otro lugar, como por ejemplo Google Sites, que permite subir ficheros de esa clase, creo que también liberarán carga extra al servidor, al no tener que estar ocupado sirviendo esos kb de más por página.

    Saludos.

  6. Muy buen dato, aunque esto se puede hacer con el plugin W3 Total Cache para WordPress, aunque claro, este es un buen recurso para quienes no utilicen el CMS, lo voy a probar, ya que ultimamente estoy teniendo problemas con este plugin.

    saludos y gracias por compartir 😀

  7. Amigos aquí les traigo una herramienta que optimiza las hojas de estilo: Thin CSS. Esta herramienta surge a raíz de resolver principalmente el problema que trae consigo el afamado framework css avanzado Twitter Bootstrap, que luego de brindarnos confortables interfaces de usuario nos deja con un pesado archivo CSS. Esta aplicación se proponede manera gratuita y con un alto valor de compresión resolver esta y otras problemáticas. Aquí les dejo el link: thincss.github.com

Deja una respuesta

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