Estás en... Home > Otras cosas > Optimiza tu javascript para mejorar el rendimiento de tu web

Hoy en día estamos acostumbrados a añadir uno o varios scripts de javascript en las páginas web que hacemos. Normalmente lo que hacemos es incluir una librería javascript, como jQuery, Prototype, Mootools... y después incluir plugins que funcionen sobre la libreria elegida. Además, también podemos añadir uno o varios scripts propios y otra librería de efectos. El resultado son cientos de kilobytes extra en varios archivos, lo que repercute en el rendimiento final de la página.

Es importante optimizar estos scripts para reducir el proceso de descarga y ejecución de los mismos.

Para ello tenemos varias técnicas:

Minimizar las peticiones HTTP

La mayoría del tiempo que tarda una página web en mostrarse se debe a la carga de componentes de la página tales como imágenes, hojas de estilo CSS, archivos javascript, etc. de forma que si reducimos el numero de componentes reduciremos el numero de peticiones necesarias para renderizar la página y por tanto obtendremos páginas más rápidas.

En este caso, podemos combinar todos nuestros scripts en un único archivo para mejorar los tiempos de respuesta de la página, ya que solo tendrá que establecer una única conexión HTTP para descargar los scripts.

Minimizar Javascript

Consiste en eliminar los caracteres innecesarios del código para reducir su tamaño y por tanto mejorar los tiempos de carga. Estos caracteres innecesarios son espacios, saltos de linea y tabulaciones.

Comprimir los archivos javascript.

La compresión gzip reduce los tiempos de respuesta reduciendo el tamaño de los datos a enviar.

Los navegadores actuales indican el soporte de esta compresión enviando en encabezado Accept-Encoding en la petición. Si el servidor web tiene la compresión gzip activada detectará la cabecera y enviará los datos comprimidos. El navegador descomprimirá los datos automáticamente.

Con esta técnica se reduce el tiempo de respuesta en aproximadamente un 70%.

Google Closure Compiler

Closure Compiler de Google es una herramienta que permite minimizar el código Javascript. Además permite parsear y analizar el javascript, eliminar el código no utilizado, reescribirlo y, por último, minimizarlo.

Podemos acceder al compilador desde aquí: Closure Compiler

Closure Compiler tiene 3 niveles de compilación en función de su agresividad de optimización.

Tomaré como referencia la librería jQuery 1.4.2.

Este archivo tiene un tamaño de 160.01KB. Si lo abrimos con cualquier editor de texto veremos que contiene multitud de comentarios y lineas en blanco.

En caso de no hacer nada, el servidor tendría que enviar 160.01 KB o, en caso de tener la compresión gzip activada, 45.04KB.

Niveles de optimización:

WhiteSpace Only

En este nivel se eliminan los comentarios del código, los saltos de linea y los espacios innecesarios. El resultado es funcionalmente idéntico al Javascript fuente.

Tras aplicar este nivel de optimización el resultado es un archivo de 95.91KB o 27.37KB comprimido con gzip. Esto es un ahorro del 40.06% sobre el código original y el 39.22% sobre el comprimido.

Simple

La optimización simple elimina comentarios, saltos de linea y espacios innecesarios al igual que el nivel WhiteSpace Only, pero va un paso más allá renombrando las variables locales y abreviando los nombres de los parámetros. Este es el nivel por defecto y no modifica el funcionamiento interno del código.

Tras aplicar este nivel de optimización el resultado es un archivo de 70.12KB o 23.82KB comprimido con gzip lo que nos da un ahorro del 56% sobre el código original y un 47.11% sobre el comprimido.

Advanced

Por último la optimización avanzada realiza la optimización simple, pero añade una serie de transformaciones más agresivas para conseguir una compresión más alta. Entre ellas, se modifican también las variables globales, elimina código no usado y por último sustituye las llamadas a funciones por el cuerpo mismo de la función. También se sustituyen las constantes y otras variables cuando el compilador determina que puede hacerse con seguridad.

Este nivel hace fuertes asunciones sobre el código. Si el código no tiene en cuenta estas asumciones el código javascript resultante no funcionará. Más información.

Aplicando este nivel de optimización obtenemos un archivo de 63.86KB y 22.75KB comprimido, es decir, un ahorro del 60.09% sobre el código original y un 49.49% sobre el comprimido.

Con estas optimizaciones duplicaríamos la velocidad de descarga de nuestros scripts acelerando el renderizado de la página web.

Más información sobre Closure Compiler.