La sección Oportunidades de tu informe de Lighthouse enumera todos los archivos CSS sin reducir, junto con los posibles ahorros en kibibytes (KiB) cuando se reduzcan estos archivos:
Cómo la reducción de archivos CSS puede mejorar el rendimiento
Si reduces los archivos CSS, puedes mejorar el rendimiento de carga de la 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 funcionalmente equivalentes, pero el segundo ejemplo usa menos bytes. Los minimizadores pueden mejorar aún más la eficiencia de bytes, ya que quitan 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 abreviado.
Lighthouse proporciona una estimación de los posibles ahorros en función de
en los comentarios y caracteres de espacio en blanco que encuentre en tu CSS.
Esta es una estimación conservadora.
Como mencionamos anteriormente,
los reductores pueden realizar optimizaciones inteligentes (como reducir #000000 a #000).
para reducir aún más el tamaño del archivo.
Por lo tanto, si usas un minificador,
Es posible que veas más ahorros que lo que informa Lighthouse.
Cómo usar un reductor de CSS para reducir el código CSS
En el caso de sitios pequeños que no se actualizan con frecuencia, probablemente puedas usar un servicio en línea para reducir manualmente tus archivos. Pega el CSS en la IU del servicio, y se mostrará una versión reducida del código.
Para desarrolladores profesionales, te recomendamos que configures un flujo de trabajo automatizado que reduzca el CSS automáticamente antes de implementar el código actualizado. Esto generalmente se logra con una herramienta de compilación como Gulp o Webpack.
Obtén más información para reducir el tamaño del código CSS en Cómo reducir el uso de CSS.
Orientación específica de la pila
Drupal
Habilita Agregar archivos CSS en Administración > Configuración > Desarrollo. También puedes configurar opciones de agregación más avanzadas con módulos adicionales para acelerar tu sitio mediante la concatenación, la reducción y la compresión de CSS estilos.
Joomla
Muchas extensiones de Joomla Permiten concatenar, reducir y comprimir los CSS para acelerar el sitio. estilos. También hay plantillas que proporcionan esta funcionalidad.
Magento
Habilita la opción Minify CSS Files. en la configuración para desarrolladores de tu tienda.
React
Si tu 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 las Herramientas para desarrolladores de React .
WordPress
Hay varios complementos de WordPress que pueden agilizar tu al concatenar, reducir y comprimir los estilos. Quizás también quieras de usar un proceso de compilación para realizar la reducción por adelantado, si es posible.