Optimizar ficheros js para disminuir tiempo de carga web

En muchas ocasiones nos encontramos con un problema que afecta al tiempo de carga de nuestra web. Llamamos a muchos ficheros javascript desde nuestra página, con lo que se crea una petición al servidor por cada llamada. Hay una manera de optimizar este proceso para comprimir los ficheros javascript y unirlos en uno solo para hacer una sola llamada.

Partimos del siguiente código

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html>
<head>
<title>Titulo pagina</title>
...
<script type="text/javascript" src="http://www.laweb.es/js/jquery.fancybox-1.3.4.js"></script>
<script type="text/javascript" src="http://www.laweb.es/js/jquery.easing-1.3.pack.js"></script>
<script type="text/javascript" src="http://www.laweb.es/js/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="http://www.laweb.es/js/jquery.cycle.all.js"></script>
....
</head>
<body>
...
</body>
</html>

Podemos ver que dentro de la carpeta js tenemos varios ficheros javascript que llamamos desde la web. Esto solo es un ejemplo, y normalmente puede llamarse a muchos mas ficheros…

Primer paso

Descargamos el fichero Custom_rhino.jar que nos permitirá comprimir los ficheros. Se pude descargar des del web BetterExplained. Dejadlo en la misma carpeta donde estan los ficheros javascript.

Segundo paso

Vamos a unir todos los ficheros .js en uno solo. Esto va para los que trabajáis en Linux ( los windowseros buscad el equivalente … ). Desde la consola, navegáis hasta la carpeta donde estan todos los ficheros y ejecutáis la siguiente orden:

1
cat *.js > allfiles.lib.js

Con esto unimos el contenido de todos los ficheros un uno solo, allfiles.lib.js

Tercer paso

Ahora que lo tenemos todo en un solo fichero, podemos comprimirlo (quitar espacios, lineas, comentarios… ). Eso lo hacemos con Rhino que es el escript que hemos descargado en el primer paso. Pues bien ejecutamos la siguiente orden desde consola (recuerda que custom_rhino.jar debe estar en la misma carpeta que todos los javascript )

1
java -jar ./custom_rhino.jar -c allfiles.lib.js > libreria.min.js 2>&1

Ahora tenemos todos los javascript en un solo fichero y comprimido. Ahora solo haría falta llamarlo desde la página.

1
2
3
4
5
6
7
8
9
10
11
<html>
<head>
<title>Titulo pagina</title>
...
<script type="text/javascript" src="http://www.laweb.es/js/libreria.min.js"></script>
....
</head>
<body>
...
</body>
</html>

Las ventajas son la reducción de carga. La desventaja, es que cada cambio o modificación requerirá hacer de nuevo todo el proceso. Para dos minutos que cuesta una vez lo tienes claro, merece la pena.

Más información

Artículos relacionados

MySQL – Listar registros aleatorios Pequeño código para que MySQL liste un determinado número de registros aleatoriamente. Ejemplo: En una tabla 'jugadores' tenemos los datos de los j...
Directrices Google para webmasters Cada cierto tiempo, en el blog de webmasters de Google van publicando artículos y resúmenes de las directrices que debemos seguir los que desarrollamo...
HTML Kick Start Os facilitamos el enlace de un nuevo framework para la creación de páginas web de forma rápida y sencilla con HTML5 y CSS. http://www.99lime.com/el...
Diseño web con HTML5 y CSS3 Vídeo de 1hora 30 minuts donde nos muestran las novedades de HTML5 y CSS3 Un buen vídeo introductorio a las nuevas especificacions de HTML y CSS

Deja un comentario

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

*