Reduce el uso de CSS

En la sección Oportunidades de tu informe de Lighthouse, se enumeran todos los archivos CSS sin minimizar, junto con los posibles ahorros en kibibytes (KiB) cuando se reducen:

Captura de pantalla de la auditoría de Lighthouse Minify de CSS

Cómo la reducción de los archivos CSS puede mejorar el rendimiento

Si reduces los archivos CSS, puedes mejorar el rendimiento de carga de tu página. Los archivos CSS suelen ser más grandes de lo necesario. Por ejemplo:

/* Header background should match brand colors. */
h1 {
  background-color: #000000;
}
h2 {
  background-color: #000000;
}

Se puede reducir a:

h1,
h2 {
  background-color: #000000;
}

Desde la perspectiva del navegador, estas 2 muestras de código son equivalentes en cuanto a sus funciones, pero en el segundo ejemplo se usan menos bytes. Los minificadores pueden mejorar aún más la eficiencia de bytes quitando los espacios en blanco:

h1,
h2 {
  background-color: #000000;
}

Algunos minificadores emplean trucos ingeniosos para minimizar los bytes. Por ejemplo, el valor de color #000000 se puede reducir aún más a #000, que es su equivalente abreviada.

Lighthouse proporciona una estimación de los posibles ahorros en función de los comentarios y los caracteres de espacios en blanco que encuentra en tu CSS. Esta es una estimación conservadora. Como se mencionó antes, los minificadores pueden realizar optimizaciones inteligentes (como reducir #000000 a #000) para reducir aún más el tamaño de tu archivo. Por lo tanto, si usas un reductor, es posible que obtengas más ahorros que lo que informa Lighthouse.

Usa un minificador de CSS para reducir tu código CSS

En el caso de sitios pequeños que no actualizas con frecuencia, es probable que puedas usar un servicio en línea para reducir manualmente los archivos. Pega el CSS en la IU del servicio y se mostrará una versión reducida del código.

Si eres desarrollador profesional, es probable que desees configurar un flujo de trabajo automatizado que reduzca automáticamente tu CSS antes de implementar el código actualizado. Por lo general, esto se logra con una herramienta de compilación como Gulp o Webpack.

Obtén información para reducir tu código CSS en Minify CSS.

Orientación específica para pilas

Drupal

Habilita Agregar archivos CSS en Administración > Configuración > Desarrollo. También puedes configurar opciones de agregación más avanzadas a través de los módulos adicionales para acelerar tu sitio mediante la concatenación, la reducción y la compresión de los diseños de CSS.

Joomla

Varias extensiones de Joomla pueden acelerar tu sitio mediante la concatenación, la reducción y la compresión de tus estilos CSS. También hay plantillas que proporcionan esta funcionalidad.

Magento

Habilita la opción Minify CSS Files en la configuración del desarrollador de tu tienda.

React

Si el sistema de compilación reduce los archivos CSS automáticamente, asegúrate de implementar la compilación de producción de tu aplicación. Puedes verificar esto con la extensión de las herramientas para desarrolladores de React.

WordPress

Hay varios complementos de WordPress que pueden concatenar, reducir y comprimir los estilos para acelerar el sitio. Te recomendamos que, si es posible, uses un proceso de compilación para realizar la reducción de forma anticipada.

Recursos