Minify: Combinar y Minimizar JS y CSS

Optimización WebDentro 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):

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

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

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

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

Deja un comentario

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

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>