Diseño Web

Cuando diseñas una página web, blog o aplicación web, es necesario aprender a trabajar con CSS, ya sea creando tus propios estilos desde cero o utilizando alguna librería de estilo.

Si estás buscando aprender más sobre CSS, te recomendamos nuestros cursos:

• Curso de maquetación web con CSS
• Curso de Flexbox y CSS Grid

Es posible que con los estilos que proveen las librerías como Bootstrap, Foundation, TailwindCSS, MaterializeCSS, etc. puedas maquetar la base de tu diseño, sin embargo, es seguro que no utilizarás esas librerías al 100% y que por el contrario, solo aplicarás una pequeña parte en tu web, dejando así una gran cantidad de estilos que tendrás cargados en tu aplicación pero que no te sirven.

Además, a medida que avanzas y empiezas a personalizar tu aplicación, cambiando los tipos de fuentes, colores, o si tienes la necesidad de añadir propiedades adicionales a los elementos en la página para cumplir con el diseño, agregarás nuevos estilos y por tanto aumentas cada vez más la cantidad de CSS que utilizas, lo cual hace que tu web sea más pesada y lenta al momento de cargar.

Cuando nos encontramos en esta situación, es recomendable realizar un proceso de optimización para eliminar los CSS sin utilizar, ya que reducir la cantidad de CSS en el sitio web, para que contenga estrictamente lo que se está utilizando, hará que este sea más liviano y se cargue mucho más rápido.

Una forma de optimizarlo, sería eliminar manualmente los archivos CSS o estilos específicos que no utilizas, sin embargo, esto puede ser un trabajo tedioso en la medida del tamaño de la aplicación y si por error borras el estilo incorrecto, tendrás que rehacerlo. Cuando decides trabajar de esta forma, debes inspeccionar los bytes de los CSS no utilizados, por ejemplo, a través de las herramientas de desarrollo de Chrome (dentro de la pestaña Coverage) y luego eliminar los archivos que detectes que están sin uso.

Cuando llegamos a este momento en nuestro desarrollo, es cuando nos interesa conocer y aprender a usar herramientas como PurgeCSS, porque puede ayudarnos en esa tarea de depuración y optimización, ya que la hace de forma automática por nosotros. Con PurgeCSS he podido reducir archivos que tenían un tamaño de 200 kb, hasta 15 y 20 kb, para mí, eso me sirve muchísimo y estoy seguro de que para tu web también.

Qué es PurgeCSS

PurgeCSS es una herramienta escrita en NodeJs, como una librería y aplicación de línea de comandos, que analiza el contenido de nuestra página web y lo relaciona, a través de los selectores, con las hojas de estilo CSS que carga nuestra aplicación. Si durante la verificación del contenido, no encuentra un selector, entonces lo elimina del archivo CSS. Es decir, de forma automática elimina el código CSS que no se está utilizando, reduciendo el tamaño de los ficheros CSS y por ende de la página web.

¿Cómo funciona PurgeCSS?

PurgeCSS funciona a través de un proceso simple:

1. Analiza el contenido de nuestro sitio web (HTML, Javascript) excepto los archivos CSS y obtiene una lista de selectores que se utilizan en nuestra web. Los selectores son obtenidos cuando cumplen con la siguiente expresión regular.

   /[^<>"'`\s]*[^<>"'`\s:]/g
   

2. Una vez tiene la lista de selectores en uso, analiza cada archivo CSS comparándolo con la lista.
3. Cuando encuentra un selector que se encuentra en el CSS pero no en la lista obtenida en el paso 1, para PurgeCSS significa que no está en uso y lo elimina.
4. Cuando finaliza el proceso de verificación, como salida del proceso se genera un nuevo archivo CSS que solo contiene los selectores en uso.

Extractores

El proceso que sigue PurgeCSS parece bastante simple, sin embargo, puede complicarse dependiendo de la estructura de los archivos que tenga la aplicación o sitio web. Por ejemplo, si utilizas algún lenguaje de templating como pug, Nunjucks o liquid, algunos selectores pueden pasar desapercibidos en el proceso, ya que el extractor que trae por defecto PurgeCSS, a pesar de que está hecho para trabajar con cualquier tipo de extensión, tiene sus limitaciones y es posible que no tenga soporte para el tipo de archivos o librerías CSS que estés utilizando.

Si ese es tu caso, PurgeCSS puede ser adaptado a las necesidades de tu proyecto a través de los extractores.

Un extractor es solo una función que toma el contenido de un archivo y devuelve la lista de posibles selectores. Los extractores te permiten configurar PurgeCSS para buscar selectores en cualquier tipo de archivo que necesites.

El uso de un extractor puede ser útil si notas que PurgeCSS no elimina todos los CSS que no estás utilizando, o elimina los que están en uso. Usar un extractor para una extensión específica, puede ser la mejor recomendación en estos casos.

Beneficios de usar PurgeCSS

En los puntos anteriores, hemos ido comentando un poco los beneficios que nos ofrece PurgeCSS, sin embargo, vale la pena listarlos y agregar algunos más que se obtienen en consecuencia:

• Te permite mejorar el tiempo de carga inicial de tu aplicación, página web o blog.
• Aprovechas solo lo que necesitas de las librerías CSS. Incluso puedes combinarlas sin necesidad de tener todo el paquete de estilos que ofrece cada una.
• Ayuda a mantener tus hojas de estilo en un estado más mantenible.
• Ahorras tiempo al automatizar el proceso de depuración, que de no usar PurgeCSS tendrías que hacerlo manual, y hacerlo de esa forma sin equivocarse es muy difícil.
• El reducir el tamaño y tiempo de carga de tu web tiene un impacto en el posicionamiento y SEO; y cómo Google determina el tiempo de carga de tu página.
• Igualmente el reducir el tamaño y tiempo de carga tiene un beneficio e impacto positivo en la usabilidad del sitio y en cómo los usuarios lo perciben, que puede traducirse en dinero si es lo que esperas ganar con tu sitio web.

PurgeCSS vs alternativas

La mayoría de los desarrolladores tienen mejores cosas que hacer que borrar los CSS que no necesitan uno por uno. Es por eso que aparte de PurgeCSS, existe una variedad de herramientas creadas para automatizar este proceso, a continuación veremos las más populares y cómo se comparan con PurgeCSS:

UnusedCSS

Un servicio online que rastrea el CSS que no utilizas en tu web, con tan solo darle el url. Además de identificar y eliminar las reglas CSS no utilizadas, te indica también cuánta memoria has ahorrado.

Puedes probar UnusedCSS de forma gratuita y ver el resultado del proceso en un reporte desde su página web, sin embargo, es necesario pagar una membresía mensual para descargar los archivos CSS optimizados. Cuando te suscribes a su plan mensual, puedes utilizar funciones adicionales como la de programar revisiones automáticas, entre otras; sin embargo, debes tener en cuenta que, al ser un servicio en la web, UnusedCSS, solo funciona con sitios web activos, por lo que no es útil en entornos de desarrollo y pruebas, como sí lo es PurgeCSS.PurifyCSS

Una herramienta que toma contenido (HTML / JS / PHP / etc.) y CSS, y devuelve solo el CSS utilizado. También existe un servicio online, [purifycss.online] (https://purifycss.online/), para usarlo solo colocas tu url y como resultado obtendrás un css optimizado que puedes copiar y utilizar inmediatamente en tu proyecto.

A diferencia de PurgeCSS, PurifyCSS examina todas las palabras de los archivos de tu proyecto y los compara con los selectores que tengas en tu CSS. Cada palabra se considera un selector, lo que significa que muchos selectores se pueden encontrar usados erróneamente, por ejemplo, en el caso de que una de las palabras de un párrafo de tu contenido, sea una de las palabras sea el nombre que le diste a una clase.
 

UnCSS

Cuando es ejecutado, realiza una emulación HTML a través de jsdom, y de esta forma compara los selectores de la aplicación web vs el CSS, a través de document.querySelector, filtra y descarta los selectores que no se encuentran en los archivos HTML, dejando como resultado un CSS que contiene solamente las reglas de estilo que están en uso.

Sin embargo, su emulación puede tener un costo en términos de rendimiento y practicidad. Por ejemplo, para eliminar CSS no utilizado de archivos Pug, primero necesita convertir el Pug a HTML, luego emular la página dentro de jsdom y entonces hacer la limpieza de CSS.

Por el momento, UnCSS es probablemente la herramienta más precisa para eliminar CSS no utilizado en algunas situaciones. Al compararlo con PurgeCSS en sitios web simples, da mejor resultado en términos del tamaño del CSS que se obtiene como resultado.

UnCSS también cuenta con una versión online, uncss-online.com, que se puede utilizar de forma gratuita, para utilizarla, solo pegas tu CSS y te devuelve el mismo depurado, que puede copiar y probar en tu sitio web.

Existen otras herramientas que no son tan populares entre las que podemos mencionar DropCSS y HeliumCSS.

Conclusión

Cuando eres un desarrollador web, mantener tu sitio optimizado, incluyendo la velocidad de carga inicial y su mantenibilidad, son aspectos fundamentales a considerar, por eso existen herramientas como PurgeCSS, para ayudarte a que tu trabajo sea más fácil, ya que se puede ejecutar como un comando dentro de un pipeline de desarrollo, permitiendo que siempre mantengas tu código limpio.

Así que ya sabes… ahora, a optimizar tus CSS con PurgeCSS.