Herramientas ??tiles para optimizar CSS

  • septiembre 25, 2010

??Tu sitio tarda bastante en cargar? Una de las formas paraincrementar 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.
w3c-validator - check css code

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.
firebug

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.
clean css tool

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:
Otros optimizadores CSS

Optimizador CSS FlumpCakes

Un simple optimizador que viene con varias opciones para que puedas elegir.
flumpcakes-css-compressor

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.

No Comments Found