CSS y ahorro de ancho de banda

Andrés recientemente hablo sobre poner a dieta ficheros CSS y explica ejemplos interesantes del llamado “short hand” o método corto de escribir las cosas, aunque el método lo conozco y uso siempre, no está nada mal recordarlo en forma de entrada:

 margin-top: 10px;
 margin-right: 20px;
 margin-bottom: 30px;
 margin-left: 40px;

Es lo mismo a:

 margin: 10px 20px 30px 40px;

Luego, se puede aplicar una regla vertical - horizontal.

 margin-top: 10px;
 margin-bottom: 10px;
 margin-left: 20px;
 margin-right: 20px;

Es lo mismo a:

 margin: 10px 20px;

Cuando no queremos aplicar ninguna cantidad, no hace falta añadir el sufijo “px” o sus otras opciones (em, pt, etcétera). Supongamos 10 pixeles para el margen derecho y inferior pero ninguno para el izquierdo/superior:

 margin: 0 10px 10px 0;

Lo mismo se puede aplicar a padding. Luego podemos quitar casi cualquier espacio:

 p{margin:0;padding:0 10px;}

Pero no me limitaré a explicar lo mismo que Andrés, me interesa comentar algunos puntos más.

El primero es que muchas de esas optimizaciones del llamado short hand se pueden realizar fácilmente online con CSS Formatter and Optimiser el cual es bastante potente y basado en CSS Tidy: permite elegir el nivel de compresión (manteniendo legibilidad humana, manteniendo o no comentarios, etcétera) e incluso llegar a eliminar las propiedades que no sean validas conforme CSS 2.1.

Por ejemplo, con las opciones por defecto ahora mismo el CSS se reduce un 16% (de 8.3kB a 6.9kB) y sigue siendo perfectamente legible, con las opciones más radicales baja un 24% a los 6.3kB.

¡Y eso que mis CSS son bastante óptimos! (faltaría pasar los hacks para IE a un fichero CSS aparte, una de esas cosas que siempre quedan pendientes).

Otra solución es la que comenta JustMe en los foros de XeoWeb de enviar el CSS comprimido con gzip. No deja de ser una opción pero hay que tener en cuenta dos advertencias:

1. Internet Explorer (sobretodo la versión 6) no suele cachear muy bien (baja y vuelve a bajar continuamente) los ficheros CSS y…
2. Se lleva de puta madre (nótese la ironía) con CSS comprimido bajo Gzip.

Mi recomendación en este paso quedaría en un intermedio. Crear tres ficheros CSS: el legible para editar/mostrar a desarrolladores, el optimizado para la web (en modo estándar: sin llegar a ser riguroso que por 0.6kB no vale la pena) y la versión optimizada+comprimida.

Un inciso: la versión optimizada+comprimida debería ser enviada a usuarios de Firefox o navegadores que no sean Internet Explorer y no debe ser generada cada vez. Es decir nada de código PHP que pille el CSS, lo comprima y lo envíe: mejor reducirlo a lo más simple, un detector de navegador para decidir que CSS mostrar.

PD: Y quien dice problemas de IE con CSS comprimido por GZIP también dice problemas de JavaScript comprimido por GZIP. ¡Así que cuidado!.

Comentarios cerrados