¿Tu sitio tarda bastante en cargar? 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

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

Contenido exclusivo para los suscriptores del Feed RSS

¡Gracias por seguirnos cada día!. Tu fidelidad será premiada con contenidos exclusivos. Hoy puedes descargar:

20 iconos futuristas

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

• 50 herramientas muy útiles para CSS

• 6 útiles herramientas gratis para CSS3

• Herramientas online para CSS

Clean CSS es de los mejores compresores para CSS ya que comprimirá nuestro código, aumentando la velocidad de carga del blog o la web, pero sin alterar la ilegibilidad del código, lo que es un punto muy a favor para que sea el mejor.

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

• CSS-JS-Booster, combina y comprime CSS y JS

• Comprime tu código CSS con CSS Compressor

• Comprime CSS con Icey

CSS Compressor es otro compresor para CSS que te permitirá adelgazar tu código CSS para que ocupe menos espacio y tu blog/web vaya más rápido, a cambio de que este sea más ilegible, claro está.

Enlace: CSS Compressor

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

• Comprime CSS con Icey

• CSS-JS-Booster, combina y comprime CSS y JS

• Comprime tu CSS con Clean CSS

Icey CSS Compressor es un compresor de archivos CSS con altas opciones de configuración, que permitirá que nuestros archivos CSS ocupen menos espacio. El único pero es, que el archivo se vuelve casi ilegible y es muy complicado leerlo luego.

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

• Comprime tu código CSS con CSS Compressor

• CSS-JS-Booster, combina y comprime CSS y JS

• Comprime tu CSS con Clean CSS