Quantcast
Channel: Freedev - Tips » client-side
Viewing all articles
Browse latest Browse all 5

Tip 4 – Compactar Javascript, Css y porque no el HTML

$
0
0

Para los ansiosos, el tip: Compactar el CSS y Javascript la página.

La explicación:

Si pensamos que nuestro objetivo es disminuir el tiempo de carga de un nuevo usuario en nuestra web site o webapp.  Debemos entender que el peso de los archivos que se transmiten entre el servidor web y el browser importa en el tiempo final. Ya que los archivos de CSS y Javascript son código que interpretará el browser, podemos de manera muy simple compactarlo, utilizando alguna de las varias herramientas online que aplican algoritmos de simplificado y minimizado del código. Esto reduce el código sin afectar la capasidad del browser de interpretarlo.

Tipicamente estos algoritmos eliminan los comentarios, remplazan el nombre de variables por letras, eliminan los “enter” y otras cosas. Con esto podemos ganar hasta un 60% o mas de reducción en los archivos y disminuir así el tiempo de transferencia.

Para los mas exigentes, también es posible compactar el HTML, eliminando “enter” y comentarios. Y aunque no se consigue el mismo porcentaje de compresión, todo suma ;) .

Algunas herramientas online:

Para CSS:

  • http://www.csscompressor.com/

Para JS:

  • http://javascriptcompressor.com/
  • http://developer.yahoo.com/yui/compressor/

Consejo:

Es importante tener en cuenta que el código compactado es muy complejo de analizar, por lo que no conviene compactarlo hasta que no implementemos los cambios en el ambiente de producción. O sea, no lo compacten mientras desarrollan.

Adicionalmente, y pensando en otra de las reglas que nos dice que debemos “minimizar la cantidad de componentes(archivos)”, podemos implementar, de manera muy simple un script (en PHP o Python o ASP, etc) que compacte todos los JS y CSS que utiliza nuestra web y los deje en uno solo CSS y un solo JS compactado y minificado.  Con esto matamos dos pajaros de un tiro ;) .

Suerte


Viewing all articles
Browse latest Browse all 5

Trending Articles