Muchos han considerado que minimizar el tamaño del archivo de la hoja de estilo CSS es una buena forma de aumentar la velocidad de carga de su sitio. De hecho, al reducir el archivo CSS en varios kilobytes, el servidor tardará menos tiempo en cargar y generará una página web más rápida.
En caso de que sus artículos lleguen a la página principal de Digg, este también podría ser uno de los pocos factores decisivos (hay muchos más) si su servidor fallará o no.
Algunos de los métodos más comunes utilizados para minimizar / optimizar una hoja de estilo CSS implican la eliminación de selectores no utilizados, espacios en blanco no deseados, pestañas, comentarios y cambiar la declaración a mano alzada a notaciones taquigráficas.
Sé que algunos de ustedes no son lo suficientemente conocedores de la tecnología como para editar su propio código CSS, así que aquí les proporcionaré algunas de las herramientas útiles que pueden usar para optimizar su código CSS, incluso si no tienen ningún conocimiento de Codificación CSS
Verifica tu código CSS
Validador de W3C CSS
El validador W3C CSS es una herramienta que puede usar para validar su CSS. Puede descargar el validador Java a su computadora y usarlo fuera de línea, o usar el formulario en línea para verificar su código CSS.
Complemento de CSS Validator para Firefox
Para facilitarle la validación de su código CSS, existe esta extensión de Firefox - Validador de CSS - que puede instalar en su navegador. Una vez instalado, puede verificar su código fácil y rápidamente con un clic derecho del mouse.
CSSCheck
Aunque su código CSS esté validado, no significa que esté libre de errores. La validación solo significa que cumple con los estándares de CSS establecidos por el W3C. Si desea validar, así como investigar algunos problemas de compatibilidad del navegador con su hoja de estilo, entonces CSSCheck es una buena herramienta para usted.
Analizador de CSS
CSS Analyzer es una herramienta útil que le permite validar su hoja de estilo contra el estándar del W3C, realizar una prueba de contraste de color y una prueba para garantizar que los tamaños pertinentes se especifiquen en unidades de medida relativas.
En caso de que se lo pregunte, la prueba de contraste de color consiste en verificar que las combinaciones de colores de primer plano y de fondo proporcionen suficiente contraste cuando se ven por alguien con déficits de color o cuando se ven en una pantalla en blanco y negro.
Limpia tu código CSS
Selectores Dust-Me
Dust-Me Selectors es una extensión de Firefox que encuentra selectores de CSS no utilizados en la página que estás viendo. A medida que prueba páginas posteriores del mismo dominio, el resultado se verifica con los datos anteriores y los selectores encontrados se tachan de la lista. Puede usarlo para probar páginas individuales o para obtener arañas en todo el sitio.
Al final, obtendrá un informe sobre los selectores que no se utilizan en ningún lugar del sitio. A continuación, puede eliminar esos selectores de su hoja de estilo (un código menor significa un tamaño de archivo más pequeño).
Comprobador de redundancia de CSS
Al igual que Dust-Me Selectors, esta herramienta revisa su sitio para ver los selectores de CSS redundantes y no utilizados. Lo único que es diferente es que debe ingresar manualmente el URI para cada página que desee probar.
Optimizar y comprimir su código CSS
Una vez que haya completado la verificación de la validez de su CSS y haya limpiado el código innecesario, es hora de optimizar el archivo CSS y reducirlo al tamaño más pequeño posible.
CSS Tidy
CSS Tidy es un software de código abierto que puede usar para optimizar y comprimir su archivo CSS. Está disponible en formato .exe (solo Windows) y en formato de script php comprimido (todas las plataformas, para desarrolladores web). Lo que hace CSS Tidy es principalmente eliminar el comentario, espacios en blanco innecesarios y cambiar algo del código a taquigrafía. Durante la compresión, puede elegir entre la legibilidad del código o la compresión máxima. Dependiendo de la longitud de su código, puede lograr fácilmente una relación de compresión de hasta 30% o más.
Desde CSS Tidy es un proyecto de código abierto, ha habido varios sitios web que utilizan el código y lo convirtió en una herramienta en línea para que las personas lo usen. Éstos son algunos de ellos:
- CLEAN CSS
- Code Beautifier
- Formateador CSS y Optimizador desde CSS Portal
Otros optimizadores de CSS
FlumpCakes CSS Optimizer
Un optimizador simple que viene con varias opciones para que usted elija.
Compresor Robson CSS
Si bien puede parecer lo mismo que otros, he encontrado que la tasa de compresión de Robson CSS Compressor es la más alta entre todas. Aunque viene con varias opciones para modificar la configuración, dejar intactas todas las opciones (todas las opciones marcadas) siempre produce el mejor resultado.
Compresor CSS CSS Drive
El compresor CSS ofrecido por CSS Drive viene en dos modos que puede usar: Regular y Avanzado. En el modo Regular, solo necesita seleccionar qué nivel de compresión desea (Light, Normal o Super Compact) y el CSS Compressor hará el resto. En el modo Avanzado, tiene más opciones y más información sobre cómo desea que se optimice su hoja de estilo.
CSS Optimizer
CSS Optimizer de mabblog.com es una aplicación de línea de comandos para Mac y Linux. Está destinado a aquellos que se sienten más cómodos con el terminal que con una interfaz en línea. También hay una versión en línea simple disponible para aquellos que quieran terminarla rápidamente.
Con suerte, las herramientas enumeradas aquí son suficientes para modificar y optimizar su hoja de estilo CSS. Si ha utilizado otras herramientas que son más útiles que las mencionadas anteriormente, compártalo con nosotros en los comentarios.