Aunque parezca una tontería, en muchas ocasiones por descuido de los programadores o por la simple evolución de un sitio se vuelven a incorporar partes de código repetidas y se genera mucho código sucio con comentarios que no son útiles.

Como lo ideal es enviar un único código comprimido y bien controlado, podemos usar algún sistema que genere y comprima los códigos JavaScript y CSS que podamos usar en cada una de las páginas.

REDUCIR EL TAMAÑO DE CSS Y JS
Categoría: CSS, JavaScript

Hay muchas formas de reducir el código JavaScript y CSS, aunque básicamente la idea es eliminar cualquier comentario, espacio o carácter que no sea útil en ningún sentido, de forma que el tamaño del archivo se reduzca lo máximo posible. En caso de haber varios ficheros, la idea es unirlos en uno único para que no haya un exceso de peticiones contra el servidor.

Para hacer esto podemos usar herramientas como JSMin, JSMin-PHP, YUI Compressor, Packer, JavaScript Compressor, Minify, CSSMin o CSS Compressor. Cada una de estas herramientas tiene sus cosas buenas y malas, por lo que cada uno decidirá la mejor en su caso.

OFUSCAR EL CÓDIGO
Categoría: CSS, JavaScript

Además, existen otras opciones como las de ofuscación del código. Gracias a esto, aparte de reducirlo al máximo, reduce todos los nombres de funciones y similares a otras más sencillas y cortas, por lo que se ahorra código.

Hay que tener en cuenta que la reducción de código es algo relativamente sencillo, y que la ofuscación es más compleja y puede generar más errores. Eso sí, las medias dicen que la reducción reduce cerca de un 21% los datos, y la ofuscación un 25%, pero por esas cifras casi es mejor no arriesgarse y mantener simplemente la reducción de código.

GENERAR UN ARCHIVO ÚNICO Y CACHEARLO
Categoría: CSS, JavaScript

Una vez generado estos ficheros lo mejor es cachearlos y de esta forma mantenerlo creados y con una devolución muy rápida por parte del servidor web.

Con la mayoría de los sistemas de reducción de código ya conseguimos esta unificación de todos los ficheros en uno único. Hay que pensar que puede ser bastante razonable crear un fichero que, en principio, tenga un tamaño elevado pero que sea tratado con fechas y cacheos de forma que no se tenga que descargar en toda la sesión y de cobertura a la práctica totalidad del funcionamiento del sitio web.

CÓDIGOS CORTOS DE COLOR
Categoría: CSS

Un detalle sobre los CSS es que los navegadores permiten una serie de colores que no hacen falta que estén en hexadecimal, sino que se pueden poner en texto plano. Estos 16 colores son los siguientes:

• white: #fff
• yellow: #ff0
• red: #ff0
• fuchsia: #f0f
• silver: #c0c0c0
• gray: #808080
• olive: #808000
• purple: #800080
• maroon: #800000
• aqua: #f00
• lime: #0f0
• teal: #008080
• green: #008000
• blue: #00f
• navy: #000080
• black: #000

Aunque esto puede hacer que sea mucho más sencillo, sí que hay unos de estos colores que, escritos en forma textual son más cortos que su versión hexadecimal, por lo que, de forma óptima, podríamos usar los siguientes colores:

• red
• silver
• gray
• olive
• purple
• maroon
• teal
• green
• navy