Evitar el CSS 'despilfarrador' en sus proyectos

Parece que los diseñadores web se esfuerzan constantemente por optimizar sus creaciones. A corto plazo esto beneficia el rendimiento. A largo plazo, también puede simplificar el mantenimiento.

Muy a menudo, esto significa optimizar imágenes, implementar el almacenamiento en caché de páginas y servir archivos a través de una red de entrega de contenido (CDN). Todas estas son medidas efectivas. Pero un elemento que no recibe suficiente atención es la posible hinchazón en el CSS de un sitio web.

Si bien puede minimizar sus hojas de estilo o servirlas a través de un CDN, se puede hacer más. Específicamente, deshacerse del marcado derrochador que no se usa y ajustar los estilos que aún son relevantes.

Esto se hace mejor desde el principio del proceso de construcción. Pero también es posible aligerar la carga en los sitios web existentes. Echemos un vistazo a los desafíos involucrados, junto con algunas herramientas y técnicas que pueden hacer que un sitio web sea más rápido.

Lidiar con la hinchazón integrada en temas y marcos

Antes, los sitios web se construían esencialmente desde cero. Este fue un gran enfoque en el que los diseñadores podían incluir solo los estilos y guiones que se necesitaban. Si se hace con cuidado, este proceso podría dar como resultado un sitio web bien ajustado.

Por supuesto, hay una serie de razones por las que muchos de nosotros hemos abandonado esa práctica. Simplemente no es eficiente en términos de tiempo y restricciones presupuestarias.

Los sitios web modernos a menudo se construyen sobre un producto preconstruido. Eso podría ser un marco CSS como Bootstrap o un tema elaborado de WordPress. En algunos casos, un tema de CMS puede incluso incluir un marco.

Estos productos están destinados a ser de talla única. Al incluir todo lo que pueda necesitar, hace que el desarrollo sea mucho más rápido. Desafortunadamente, no se puede decir lo mismo de su impacto en el rendimiento.

Entonces, ¿qué se puede hacer para mejorar la situación?

Utilice marcos ligeros o basados ​​en componentes, cuando sea posible

Teóricamente, es posible obtener las ventajas de un marco y evitar la hinchazón. Esto se puede lograr mediante el uso de paquetes basados ​​en componentes que le permiten cargar funciones específicas y dejar otras fuera. El Bootstrap antes mencionado permite este tipo de personalización, hasta cierto punto.

Otra alternativa es Tailwind CSS, que proporciona estilos básicos y supone que construirá sobre ellos. Si está buscando un excelente punto de partida, en lugar de un producto más terminado, este podría ser el adecuado.

No hay nada de malo en usar un marco. Pero busque uno que: a) le permita elegir qué componentes cargar, o; b) ofrece una hoja de estilo básica que se puede personalizar fácilmente. De cualquier manera, su proyecto se beneficiará de la carga reducida.

¿Qué hacer con los temas de CMS?

Los productos como los temas comerciales de WordPress pueden ser complicados, ya que a menudo incluyen una gran cantidad de estilos, ya sea que los necesite o no.

Es posible que un tema específico esté bien organizado hasta el punto en que sea bastante fácil eliminar las hojas de estilo que no desea. Incluso puede haber un panel de opciones de tema que le permita hacer esto con unos pocos clics. Sin embargo, esto es más probable que sea la excepción que la regla.

La mejor manera de evitar un tema inflado es crear uno propio. Por ejemplo, un tema de inicio de WordPress ofrecerá algunos CSS básicos que puede personalizar. Esto ayuda a garantizar una hoja de estilo más sencilla y elimina al menos un poco de la sobrecarga asociada con un CMS.

Limpiar las hojas de estilo existentes

Cambiar nuestro enfoque a un sitio web existente, ordenar y refactorizar CSS se puede hacer de dos maneras:

Revisión manual de estilos

Iniciar su editor de código favorito y abrir las hojas de estilo de su sitio siempre es un buen lugar para comenzar. Sí, puede ser una experiencia tediosa. Pero también es una forma efectiva de cuidar la fruta madura.

No es necesario examinar cada línea de CSS. En cambio, la idea es encontrar cualquier elemento que sepa que no se está utilizando o que no es tan eficiente como podría ser.

Por ejemplo, supongamos que ejecuta un sitio web de WordPress que tiene algunos estilos personalizados para sobrescribir los de un complemento. ¿Qué sucede si ya no usa ese complemento en particular? En este caso, los estilos se pueden eliminar fácilmente.

O quizás hay una selección de estilos que solo usas esporádicamente, como durante las vacaciones de invierno. Puede valer la pena mover esos estilos a un archivo separado y llamarlos solo cuando sea necesario.

Luego están los selectores de CSS que simplemente no están muy bien escritos. Tal vez tengan una serie de prefijos de navegador que ya no son necesarios o propiedades duplicadas innecesarias. Esta es un área madura para la limpieza.

Si el diseño de su sitio tiene más de un par de años, es posible que se sorprenda de la cantidad de exceso de estilo que puede encontrar.

Usar una herramienta automatizada

Hay una serie de herramientas que escanearán su sitio (o, al menos, una parte de él) e informarán con una lista de CSS no utilizados. Sin embargo, no contenga la respiración mientras espera la perfección.

Al igual que las herramientas de accesibilidad automatizadas, los escáneres CSS no utilizados solo pueden brindarle cierta información. Por lo tanto, es mejor tomar los resultados con pinzas y usarlos como una guía, no como una respuesta final a su pregunta.

Chris Coyier de CSS-Tricks escribió un artículo destacado sobre este tema en particular que vale la pena revisar. No solo prueba algunas de estas herramientas, sino que también analiza los problemas más importantes, como las consultas de los medios.

Sin embargo, si está interesado en probar una o más de estas herramientas, algunas de las opciones más populares son:

• JitBit
• PurgarCSS
• PurificarCSS
• CSS sin usar

Una combinación de una herramienta automatizada y una revisión manual es probablemente el mejor curso de acción. Hacer ambas cosas le dará una imagen más completa de las posibles optimizaciones de rendimiento. Es posible que no capte todos los elementos, pero aún existe la oportunidad de tener un impacto medible. Puedes hacer algunas pruebas antes y después con una herramienta como GTmetrix para ver los resultados.

Cuando se trata de CSS: no desperdiciar, no querer

Es increíble lo grande que puede llegar a ser una hoja de estilo, especialmente cuando se utiliza un marco CSS listo para usar. Claro, es bueno que el autor haya hecho gran parte del trabajo duro por ti en términos de elementos de estilo. Al mismo tiempo, deja mucho sobre la mesa cuando se trata de renderizado de páginas y tiempos de carga.

Esto es algo a lo que vale la pena prestar atención desde el comienzo de un proyecto. Al buscar reducir el peso de una hoja de estilo, está ayudando a exprimir hasta la última gota de optimización de su sitio.

Si su sitio web ya está disponible para que el mundo lo vea, todavía hay pasos positivos que puede tomar. Revise el CSS y busque elementos para simplificar o eliminar. Utilice una de las muchas herramientas automatizadas que existen para encontrar elementos que podría haber pasado por alto.

La conclusión es que reducir su CSS a lo esencial no es un proceso perfecto. Sin embargo, sigue siendo uno digno de su tiempo y esfuerzo.