08 noviembre 2011

Aligera la carga del blog comprimiendo el CSS de tu plantilla

Cuando empezamos a personalizar el blog, nos enfocamos en agregar algunas cosas para mejorar su apariencia o presentación y rara vez pensamos en el tiempo de carga. Se puede decir que es es normal, ya que el entusiasmo de ver cambios estéticos en el blog hacen que nos olvidemos de cosas que también son importantes.

Una de esas cosas importantes, es el tiempo de carga del blog. Cada caracter, espacios o comentarios que tienes en el código de tu plantilla, aumentan el peso o tamaño de tu blog. Una forma de ayudar a tu blog a que cargue más rápido es comprimiendo el CSS.

Al comprimir el CSS se eliminarán todos esos espacios innecesarios, caracteres o los comentarios que tengas agregados en el CSS, ésto último a tu elección.

Para tener más en claro en qué consiste la compresión del CSS, veamos un ejemplo:

Este es una regla de CSS que no está comprimida, y como puedes ver se entiende fácilmente:

/* Mi cajita */
.cajita_feliz {
width: 300px;
height: 200px;
position:relative;
}

Al comprimir el mismo CSS, éste lucirá así:

.cajita_feliz{width:300px;height:200px;position:relative}

Si te fijas, ahora el CSS ocupa una sola linea. Se han eliminado espacios entre la propiedad y valor, y después del valor, también quitamos los comentarios y que arriba puedes identificar porque resalté de azul y el punto y coma del último valor se ha eliminado (;). Cuando está comprimido el CSS, el navegador lo procesa y ejecuta mas rápido, y por consiguiente ayudará a que el blog cargue más rápido.

Aunque comprimir el CSS no se reduce tanto el peso de nuestro documento, comparado por ejemplo, con optimizar las imágenes, cualquier cosa que ayude a aligerar la carga del blog, es bienvenida.

Existen varias herramientas para comprimir el CSS y una que me gustó, y que conocí gracias a Balluart, es CSS Drive.

Con CSS Drive, es posible comprimir el CSS y conservar los comentarios dentro de éste, para poder localizar el CSS que corresponde a algun elemento de tu plantilla, considerando que al comprimirlo, se hace más difícil de leer para nosotros, al momento de querer editarlo.

Para mantener los comentarios, elige la opción "Don't strip any comments", aunque antes de comprimir tu CSS puedes eliminar comentarios adicionales que estén dentro del código, que son los que están entre: /*...*/y mantener solamente el comentario que viene al comienzo de los estilos de una sección específica, por ejemplo: de la cabecera, del menú de navegación, etc., aunque es tu decisión.

Otra excelente herramienta y que nos facilita Francisco Oliveros de blogandweb.com, es CSS óptimo. Esta herramienta también puede comprimir el CSS de tu plantilla, agregando solo la URL de tu blog.
Esta es la página: http://blogandweb.com/cssoptimo/.

Y me despido diciendo que los pequeños detalles si importan a la hora de optimizar tu blog ;)

Si vas a comprimir todo el CSS de tu plantilla, puede ser buena idea que antes exportes tu blog, o bien, guardes el CSS en un archivo de texto por cualquier cosa, por ejemplo, que no lo hayas copiado completo cuando lo comprimas, o que lo pegues incompleto. Algo que también recomiendo es que antes de guardar los cambios verifica en vista previa que todo luzca bien.

Ultima actualización: 08/15/2011

Artículos recomendados:

Gracias por compartir tu comentario y hacernos saber tu opinión.