El verano, las vacaciones, el calor, no lo tengo claro, pero algo me hizo retomar un viejo pendiente en este sitio: las calorías de mi CSS.
Tener a lo menos 8 tipos de links, muchas imágenes para el layout y una buena cantidad de comportamientos gestionados por Javascript, tiene su costo: un sitio obeso que puede ser una tortura para el visitante primerizo con un ancho de banda mediocre.
La verdad es que comprimiendo estos archivos solo liberará a tu página de unos miserables kilos, y no harán gran diferencia para el usuario modem, pero por algo se empieza.
Métodos de compresión
Si te das una vuelta por internet, verás que existen dos formas de comprimir estos archivos. Una forma es del lado del servidor (mediante PHP u otros), dinámicamente; o mediante la compresión del archivo mismo, por medio de eliminar los comentarios, eliminar espacios en blanco innecesarios, o, en el caso de archivos Javascript, codificando su contenido.
Buscar la solución más optima es una tarea difícil porque todos tienen sus pro y sus contras. El problema con los archivos CSS es que cuando lo haces incluyes no solo tu código, sino que también comentarios, títulos y otras anotaciones que hacen al archivo más legible a la hora de darle un retoque.
A diferencia de los archivos Javascript, para los que hay excelentes herramientas que te permiten comprimir un archivo y luego descomprimirlo para su fácil edición, con los archivos CSS se trata de un camino sin retorno. Una vez optimizado, no hay forma de volverlo atrás.
Algunas herramientas para que comprimas tu CSS son (en ningún orden en particular):
- Css optimizer
- Css compressor
- Icey's Compressor (este tiene un rango de compresión impresionante)
- Css formater and optimizer
- Entre otros
Sin hacks por favor
Otro problema con estas herramientas (además de perder tus útiles comentarios) es que no admiten hacks en tu CSS. La razón es simple, el programa no discrimina entre comentarios o hacks, y los borra todos.
Por ejemplo, algo así:
-
#box {
-
height: 98px;
-
voice-family: "\"}\"";
-
voice-family:inherit;
-
height: 91px;
-
}
Lo desfigura a esto:
-
#box {
-
height:98px;
-
voice-family:"\"
-
}
Eliminando el hack y rompiendo, obviamente, tu layout. Y ojo que puede ser peor.
Para este sitio, opté por eliminar comentarios y espacios blancos a mano, manteniendo el original a salvo para futuras modificaciones. Quedó menos amigable para el mirón de turno, pero me salvó unos kilitos.
Buscando el santo grial
En vista de este panorama poco alentador, parece natural buscar soluciones en otro lado.
Otras métodos menos intrusivos que puedes ocupar, y que van del lado del servidor, pueden ayudarte a hacer tu sitio más ligero. La gracia es que dejan tu CSS intacta, y la compresión se hace dinámicamente.
Algunas son:
Si alguien tiene por ahí algún enlace útil, o alguna experiencia iluminadora, será gratamente bienvenido =)
Comentarios
He reducido mucho mi plantilla css con Icey’s Compressor.
:) geniales los consejos del post!
Gracias, Javier.
Mientras no tengas muchos hacks, Icey’s Compressor es definitivamente el mejor candidato para adelgazar Css’s.
[…] Como ya he dicho, el verano hace que muchos se empiecen a preocupar de su peso. Mal que mal, hay que usar poca ropa. Al alero de la sobrestimada era 2.0, han nacido una serie de aplicaciones que prometen hacerte más fácil la tarea de mantenerte en forma. […]
¿Y servir las css con gzip? Con .htaccess, ¿cierto?
Hola Felipe.
Lamento la demora, pero llevo un tiempo de vacaciones =]
En realidad, hay muchas formas de comprimir archivos para que el navegador del cliente lo descomprima.
De hecho, debí mencionarlo, así que gracias por el aporte ;]
Algunos métodos del lado del servidor son, por ejemplo, pasar tus archivos css por archivos PHP (lo que hago con los estilos de la sección del clima).
Otra forma es con mod_gzip, que tiene sus peros, como la sobrecarga para el servidor (crea un archivo temporal con la información comprimida y luego lo borra), o problemas con algunos navegadores (Netscape 4, por ejemplo), además de que necesita manipulación
.htaccess, sin contar que algunos host no lo tienen habilitado, ni dejan hacerlo.En fin, gracias por el comentario, veremos si completamos este post con tu comentario, o simplemente hago uno nuevo.
Saludos.
Para evitar los hacks, lo mejor seria separar los hacks a hojas de estilo únicas y colgarlas usando condicionales de IE. Luego comprimes todas las hojas.
Y si también tienes problemas con el peso en javascript, siempre puedes usar packer [1]
Saludos
[1] http://dean.edwards.name/packer/
Hola neojp.
Buena sugerencia la que haces. En todo caso, el tener hojas de estilo comprimidas, y otras sin comprimir de respaldo, no es muy cómodo. He decidido mantener mis hojas de estilo con comentarios y ordenadas, y luego juntarlas (para evitar requests innecesarios) para por último cachearlas.
Todo eso, sin perjuicio de separar hojas y servirlas usando comentarios condicionales.
Para javascript voy a implementar los mismo. Hay excelentes herramientas (como el packer o shrinkSafe), pero dan bastantes problemas si no se tiene cuidado con los puntos y comas (
;).Saludos, y espero que inaugures pronto tu sitio ;}
Hey RR,
Es cierto, tener dos versiones de archivos es un poco molesto a menos que se usen herramientas adecuadas.
Algunas tecnicas pueden ser avanzadas, pero es más cosa de costumbre y adaptación. Cuando uno trabaja en un proyecto grande, uno podria usar servidores SVN o CVS para mantener los archivos finales en un solo lugar, mientras se trabaja en una versión local manteniendo todas las pruebas separadas. Al final se sube todo al servidor SVN/CVS.
En el mismo servidor, uno podria usar un script shell o bash para comprimirlo y luego usar gzip para empaquetarlo, por útlimo podrías cachearlo. Terminando en algo bastante chico, el único problema que siempre le he visto a esto es que son muchos pasos :p
No importa que técnica se use, mientras el resultado sea óptimo todo será bueno, para el desarrollador, el usuario y el servidor.
Un saludo.
PD: Algo de Off Topic. Quizás te interese, pero prueba la extensión de skype para firefox y revisa los comentarios de tu blog, confunde las fechas por números telefonicos
PD2: Jaja, gracias por lo del sitio. Espero inaugurarlo algún día ;)
SVN, compimirlo, y cachearlo es una buena solución. Pero creo que es demasiado intrincado para mantener la CSS de mi sitio personal. Además que tengo mis reservas con gzip.
He ocupado SVN para proyectos donde actualizamos (bastante) código PHP , y creo que acá no se justificaría tanto gasto =)
En todo caso, es una solución hardcore que puede resultarle atractiva a más de alguno.
En cuanto a Skype y la extensión de Firefox, es bastante raro. Una lástima, aunque revisando el código que generan los comentarios, no veo porque diablos podría confundir las fechas con números de teléfonos =/. Veremos si me hago el tiempo e instalo la extensión para verificar in situ =}
De todas formas, gracias. Y ojalá que ese algún día de tu sitio se concrete ;}