Una de las formas para incrementar la rapidez de carga de los sitios web es minimizar el tamaño de los archivos CSS. Reduciendo dicho tamaño, el servidor cargará más rápidamente las páginas, obteniendo así una página web mucho más rápida. Si alguna vez recibes un efecto menéame en tu sitio, este es uno de los factores que hará que tu servidor caiga o no.
Uno de los métodos más comunes para optimizar la hoja de estilos (CSS) es eliminar los selectores que no se utilicen, quitar los espacios en blanco no deseados, comentarios y cambiar de larga declaración (longhand) a declaración corta (shorthand).
Muchos adoran lo automático, las herramientas, así que a continuación os ofreceré una excelente lista de herramientas útiles para optimizar tu código CSS, aunque no tengas ningún conocimiento de las hojas de estilo en cascada. Si deseáis más, ya publiqué anteriormente otro listado.
Herramientas de chequeo CSS
W3C CSS Validator
W3C CSS Validator es una herramienta con la que podrás validar tu código CSS. Puedes descargar el validador Java y usarlo en tu ordenador, en modo offline, o si lo prefieres, usar el online para comprobar tu código CSS.
Extensión para Firefox CSS Validator
Esta extensión para Firefox te ayudará a validar tu código CSS, al igual que la anterior, aunque con esta podrás iniciarla desde Firefox, sin necesidad de ir al sitio web de origen. Una vez instalado puedes comprobar el código CSS de cualquier página web con un solo click. Si te interesa, anteriormente publiqué una lista de extensiones para Firefox relacionadas con CSS.
CSSCheck
Aunque tu código CSS esté validado, no quiere decir que esté libre de error, únicamente que cumple los estándares de la W3C. Si deseas arreglar fallos de compatibilidad entre navegadores, CSSCheck es una excelente herramienta para tí.
CSS Analyzer
CSS Analyzer es una herramienta que te permitirá validar tu hoja de estilos siguiendo los estándares W3C, realizar un test de contraste del color, y chequear que los tamaños relevantes están especificados en unidades relativas de medida. Muy útil.
El test del contraste de color simplemente comprueba si el fondo y la combinación de colores de nuestro sitio es adecuada para personas con dificultad para diferenciar colores, o cuando el sitio web se muestra en una pantalla en blanco y negro.
Firebug es una completa extensión que te permite editar, ver y comprobar tu código CSS, HTML, entre otras muchas opciones.
Limpiar tu código CSS
Selectores Dust-Me
Otra extensión para Firefox que encuentra selectores CSS que no están siendo usados en la página que estás viendo. Dust-Me Selectors is a Firefox extension that finds unused CSS selectors on the page that you are viewing. Puedes usarlo en páginas individuales o ordenar que rastree todo el sitio web.
Obtendrás un reporte con los selectores que no son usados, puedes eliminarlos de tu hoja de estilos, disminuyendo así el tamaño del archivo CSS y consiguiendo finalmente una velocidad más rápida para el sitio web.
Herramientas para optimizar y comprimir tu código CSS
Una vez que has comprobado si tu sitio tiene una hoja de estilos válida, limpiando cualquier selector no necesario de por medio, es hora de optimizar los archivos CSS y reducirlos al menor tamaño posible.
CSS Tidy
CSS Tidy es un software libre que te permitirá comprimir y optimizar tu código CSS. Está disponible en formato .EXE (sólo para Windows) o en un script PHP comprimido compatible con todas las plataformas, para los desarrolladores web. CSS Tidy elimina los comentarios, espacios en blanco no necesarios y cambiar partes del código a shorthand. Mientras está comprimiendo puedes elegir entre mayor o menor índice de compresión. Dependiendo del tamaño de tu archivo, obtendrás un ratio de compresión de un 30% o más.
Otras herramientas parecidas a esta son:
- CLEAN CSS
- Code Beautifier
- CSS Formatter and Optimizer de CSS Portal
Otros optimizadores CSS
Optimizador CSS FlumpCakes
Un simple optimizador que viene con varias opciones para que puedas elegir.
Compresor CSS Robson
Entre todas las herramientas que os puse anteriormente, la que mayor ratio de compresión tiene es Robson CSS. Además, viene con varias opciones, aunque dejando todas las opciones activadas obtendremos el mejor resultado.
Compresor CSS Drive
Este compresor tiene dos modos: Normal y Avanzado. En el modo normal solo tendrás que elgir que índice de compresión deseas (ligera, normal o super compacta) y la herramienta hará el resto. En el modo avanzado tienes más opciones para poder elegir, por lo tanto es más completo.
CSS Optimizer
La herramienta CSS Optimizer de mabblog.com es una línea de comando para Mac y Linux. Está dirigido a personas que se sienten más cómodas usando el terminal que las interfaces online. Hay una versión online bastante simple disponible para todos aquellos que quieran un método más directo.
Espero que estas herramientas os hayan gustado, si sabéis alguna más, por favor, enviadla por los comentarios. Muchas gracias.
Vía | Makeuseof
