Reduce el uso de CSS

Demián Renzulli
Demián Renzulli

Los archivos CSS pueden contener caracteres innecesarios, como comentarios, espacios en blanco y sangría. En producción, estos caracteres se pueden quitar de forma segura para reducir el tamaño del archivo sin afectar la forma en que el navegador procesa los estilos. Esta técnica se denomina minificación.

Cargando CSS sin reducir

Observa el siguiente bloque de CSS:

body {
  font-family: "Benton Sans", "Helvetica Neue", helvetica, arial, sans-serif;
  margin: 2em;
}

/* all titles need to have the same font, color and background */
h1 {
  font-style: italic;
  color: #373fff;
  background-color: #000000;
}

h2 {
  font-style: italic;
  color: #373fff;
  background-color: #000000;
}

Este contenido es fácil de leer, a costa de producir un archivo más grande de lo necesario:

  • Utiliza espacios para la sangría y contiene comentarios, que el navegador ignora, por lo que se pueden quitar.
  • Los elementos <h1> y <h2> tienen los mismos estilos: en lugar de declararlos por separado, "h1 {...} h2 {...}" se podrían expresar como "h1, h2{...}".
  • El background-color, #000000, podría expresarse como solo #000.

Después de realizar estos cambios, obtendrías una versión más compacta de los mismos estilos:

body{font-family:"Benton Sans","Helvetica Neue",helvetica,arial,sans-serif;margin:2em}h1,h2{font-style:italic;color:#373fff;background-color:#000}

Es probable que no quieras escribir CSS de esa manera. En su lugar, puedes escribir CSS como de costumbre y agregar un paso de reducción a tu proceso de compilación. En esta guía, aprenderás a hacerlo con una herramienta de compilación popular: webpack.

Medir

Aplicarás reducción de CSS en un sitio que se usó en otras guías: Fav Kitties. Esta versión del sitio utiliza una biblioteca CSS genial, animate.css, para animar diferentes elementos de página cuando un usuario vota por un gato armeabi.

Como primer paso, debes comprender cuál sería la oportunidad después de reducir este archivo:

  1. Abra la página de medición.
  2. Ingresa la URL https://fav-kitties-animated.glitch.me y haz clic en Ejecutar auditoría.
  3. Haz clic en Ver informe.
  4. Haz clic en Rendimiento y ve a la sección Oportunidades.

El informe resultante muestra que se pueden guardar hasta 16 KB del archivo animate.css:

Lighthouse: Reducir la oportunidad de CSS

A continuación, inspecciona el contenido del CSS:

  1. Abre el sitio de gatitos favoritos en Chrome. Es posible que los servidores de Glitch tarden un poco en responder la primera vez.
  2. Presiona "Control + Mayús + J" (o bien "Comando + Opción + J" en Mac) para abrir Herramientas para desarrolladores.
  3. Haga clic en la pestaña Red.
  4. Haz clic en el filtro CSS.
  5. Selecciona la casilla de verificación Inhabilitar caché.
  6. Vuelve a cargar la app.

Seguimiento no optimizado de CSS de Herramientas para desarrolladores

La página solicita dos archivos CSS, de 1.9 KB y 76.2 KB respectivamente.

  1. Haz clic en animate.css.
  2. Haz clic en la pestaña Response para ver el contenido del archivo.

Ten en cuenta que la hoja de estilo contiene caracteres para los espacios en blanco y las sangrías:

Respuesta no optimizada de CSS de Herramientas para desarrolladores

A continuación, agregarás algunos complementos de webpack a tu proceso de compilación para reducir estos archivos.

Reducción de CSS con webpack

Antes de pasar a las optimizaciones, tómate un tiempo para comprender cómo funciona el proceso de compilación para el sitio Fav Kitties:

De forma predeterminada, el paquete JS resultante que produce el webpack tendrá el contenido de los archivos CSS intercalados. Como queremos mantener archivos CSS separados, usamos dos complementos complementarios:

  • mini-css-extract-plugin extraerá cada hoja de estilo en su propio archivo, como uno de los pasos del proceso de compilación.
  • webpack-fix-style-only-entries se usa para corregir un problema en Wepback 4 y así evitar generar un archivo JS adicional para cada archivo CSS que aparece en webpack-config.js.

Ahora, harás algunos cambios en el proyecto:

  1. Abre el proyecto Fav Kitties en Glitch.
  2. Para ver la fuente, presiona Ver fuente.
  3. Haz clic en Remix to Edit para que el proyecto sea editable.
  4. Haz clic en Terminal. (Nota: Si no se muestra el botón Terminal, es posible que debas usar la opción Pantalla completa).

Para reducir el CSS resultante, usarás optimize-css-assets-webpack-plugin:

  1. En la consola de Glitch, ejecuta npm install --save-dev optimize-css-assets-webpack-plugin.
  2. Ejecuta refresh para que los cambios se sincronicen con el editor de Glitch.

A continuación, regresa al editor de Glitch, abre el archivo webpack.config.js y realiza las siguientes modificaciones:

Carga el módulo al comienzo del archivo: js const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");

Luego, pasa una instancia del complemento al array plugins: js plugins: [ new HtmlWebpackPlugin({template: "./src/index.html"}), new MiniCssExtractPlugin({filename: "[name].css"}), new FixStyleOnlyEntriesPlugin(), new OptimizeCSSAssetsPlugin({}) ] Después de realizar los cambios, se activará una nueva compilación del proyecto. Así se verá el webpack.config.js resultante:

A continuación, verificarás el resultado de esta optimización con herramientas de rendimiento.

Verificar

  • Para obtener una vista previa del sitio, presiona Ver app. Luego, presiona Pantalla completa pantalla completa.

Si te perdiste en algún paso anterior, puedes hacer clic aquí para abrir una versión optimizada del sitio.

Para inspeccionar el tamaño y el contenido de los archivos, haz lo siguiente:

  1. Presiona "Control + Mayús + J" (o bien "Comando + Opción + J" en Mac) para abrir Herramientas para desarrolladores.
  2. Haga clic en la pestaña Red.
  3. Haz clic en el filtro CSS.
  4. Selecciona la casilla de verificación Inhabilitar caché si aún no lo has hecho.
  5. Vuelve a cargar la app.

Respuesta no optimizada de CSS de Herramientas para desarrolladores

Puedes inspeccionar estos archivos y ver que las versiones nuevas no contienen espacios en blanco. Ambos archivos son mucho más pequeños. En particular, el archivo animate.css se redujo en un ~26% aproximadamente, lo que ahorra ~26%.

Como paso final:

  1. Abra la página de medición.
  2. Ingresa la URL del sitio optimizado.
  3. Haz clic en Ver informe.
  4. Haga clic en Rendimiento y busque la sección Oportunidades.

En el informe, ya no se muestra “Minify CSS” como “Opportunity” y ahora se trasladó a la sección “Passed Audits”:

Lighthouse aprobó auditorías para la página optimizada.

Dado que los archivos CSS son recursos que bloquean la renderización, si aplicas reducción en sitios que usan archivos CSS grandes, podrás ver mejoras en métricas como First Contentful Paint.

Pasos siguientes y recursos

En esta guía, abordamos la reducción de CSS con webpack, pero se puede seguir el mismo enfoque con otras herramientas de compilación, como gulp-clean-css para Gulp o grunt-contribu-cssmin para Grunt.

La reducción también se puede aplicar a otros tipos de archivos. Consulta la guía de reducción y compresión de cargas útiles de red para obtener más información sobre las herramientas para reducir el JS y algunas técnicas complementarias, como la compresión.