Minificar codigo css eliminando código no utilizado

Las hojas de estilo en cascada (a las cuales nos referiremos como CSS, por la abreviación del término anglosajón), son utilizadas para separar la estructura de la presentación de una página web.

Si has creado tu página web utilizando plantillas pre-diseñadas o otro tipo de sistema de desarrollo web, como por ejemplo el famoso framework Bootstrap de Twitter, probablemente muchas partes del código CSS sea inútiles y no se utilicen en ningún momento. Este podría ser un posible cuello de botella en el tiempo de carga de tu sitio web.

De entre todas las acciones que podemos realizar para acelerar el tiempo de carga de una web, la mejora de las hojas de estilo CSS no suele ser, ni de lejos, la principal prioridad. Sin embargo, combinando esto con otro tipo de técnicas de optimización, conseguiremos los mejores resultados, obteniendo una diferencia significativa en el factor de carga de la página.

¿El código CSS no utilizado es realmente un problema?

El propio equipo de PageSpeed de Google incluye la eliminación de reglas CSS no utilizadas como parte sus sugerencias de mejora de velocidad de carga, nos lo presentan de la siguiente manera:

Antes de que un navegador empiece a renderizar una página web, este tiene que descargar y analizar todas las hijas de estilo necesarias para presentar los datos estructurados de la forma correcta. Incluso si dicha hoja de estilos está almacenada en cache, el navegador se bloqueará hasta que la haya cargado totalmente desde memoria.

Una vez cargado, se debe recorrer dicho archivo CSS para evaluar las reglas definidas en él.

Muchos sitios web reutilizan el mismo archivo css para todas sus páginas, aunque muchas de las reglas definidas en dicho fichero no se utilicen en la mayoría de las páginas de el propio sitio.

Dicho esto, creo que muchos de vosotros quedaréis convencidos de que eliminar los selectores CSS no utilizados acelerará el renderizado de tu web por parte de los navegadores, ¿es así?. Para suerte de todos, existen diferentes métodos para realizar esto, se puede realizar de forma manual o utilizando herramientas automatizadas, en nuestro caso hemos decidido probar Unused CSS. Si quieres ver los resultados con todo tipo de detalles, mi consejo es que sigas leyendo, ahora verás… 😛

Resultados tras reducir el tamaño del CSS mediante Unused CSS

Antes de nada, adjunto las capturas de los resultados de la auditoría del rendimiento web realizada con las herramientas para desarrolladores de Google Chrome, donde se puede comprobar que existían 3251 reglas CSS sin usar en la propia página (un total del 92% de las reglas de la hoja de estilos).

css sin usar

Así como también el uso de red previa eliminación de las reglas y selectores no utilizados. El tamaño del fichero es de 408KB y tardó 251ms en trasmitirse.

uso red css

Ahora: el proceso de compresión de los archivos CSS mediante Unused CSS.

Nada más abrir la herramienta, esta nos dio la posibilidad de escanear nuestro sitio entero en busca de ficheros css con selectores no utilizados. En poco más de 5 minutos nos llegó el reporte del proceso ya finalizado.

Según UnusedCSS, solo un 28% de los selectores eran útiles, por lo que la hoja de estilos comprimida quedaría un 57% más reducida que la original.

gráfico css no utilizado

En rojo las reglas CSS no utilizadas

Estos datos se pueden corroborar en el panel de selección de UnusedCss, donde se pueden previsualizar los cambios, así como seleccionar manualmente las reglas a incluir y excluir del fichero optimizado.

Unused css

Hecho esto, exportamos las hojas de estilo Css ya optimizadas (con las reglas que no se utilizaban eliminadas), las volvimos a subir al directorio web de nuestra página y volvimos a realizar las pruebas.

Como resultado: 2725 reglas eliminadas y un tamaño de fichero y tiempo de carga casi cuatro veces menor que antes de realizar los cambios.

css sin utilizar después de las pruebas

reducir tiempo carga css

Conclusiones sobre la optimización de las hojas de estilo

Proporcionar una experiencia web ágil y rápida va ligada a la satisfacción del visitante, y, muchas veces, del cliente final. Para esto, unas de las tareas principales del desarrollador y del administrador serían reducir el tiempo de respuesta del servidor, reducir el tamaño del código Javascript, HTML y CSS procesado por el navegador del cliente y/o optimizar las imágenes del sitio.

Más específicamente y centrándonos en la reducción del tamaño de archivos CSS, eliminar las reglas CSS no utilizadas serían una de las principales prioridades.

Si crees que tienes un problemas con archivos CSS “inflados”, recomendamos recurrir a la ayuda de un profesional o intenta realizar una auditoría casera, con herramientas como las proporcionadas para desarrolladores (DevTools) por navegadores como Google Chrome, para determinar cuánto CSS de más está sin usar en todas las páginas de tu sitio web.

Viendo los resultados obtenidos con la herramienta Unused CSS, si tu web contiene una gran cantidad de hojas de estilo, las herramientas automatizadas pueden ser un gran aliado en estos casos.

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Solicitar más información