Minificar CSS

Published on Updated on

Translated to: English, Português

La sección Oportunidades de su informe Lighthouse enumera todos los archivos CSS sin minificar, junto con los ahorros potenciales en kibibytes (KiB) cuando estos archivos se minifican:

Una captura de pantalla de la auditoría de Lighthouse Minify CSS

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

La minificación de los archivos CSS puede mejorar el rendimiento de carga de su página. Los archivos CSS suelen ser más grandes de lo necesario. Por ejemplo:

/* El fondo del encabezado debe concordar con los colores de la marca. */
h1 {
background-color: #000000;
}
h2 {
background-color: #000000;
}

Puede reducirse a:

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

Desde la perspectiva del navegador, estos 2 ejemplos de código son funcionalmente equivalentes, pero el segundo ejemplo usa menos bytes. Los minificadores pueden mejorar aún más la eficiencia de bytes al eliminar 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 ahorros potenciales en función de los comentarios y los espacios en blanco que encuentra en su CSS. Esta es una estimación conservadora. Como se mencionó anteriormente, los minificadores pueden realizar optimizaciones inteligentes (como reducir #000000 a #000) para reducir aún más el tamaño de su archivo. Por lo tanto, si usa un minificador, es posible que vea más ahorros de los que informa Lighthouse.

Use un minificador de CSS para minificar su código CSS

Para sitios pequeños que no usted actualiza con frecuencia, probablemente pueda usar un servicio en línea para minificar manualmente sus archivos. Debe pegar su CSS en la interfaz de usuario del servicio para que le devuelva una versión reducida del código.

Para los desarrolladores profesionales, probablemente desee configurar un flujo de trabajo automatizado que minifique su CSS automáticamente antes de implementar su código actualizado. Esto generalmente se logra con una herramienta de compilación como Gulp o Webpack.

Aprenda a minificar su código CSS en Minificar CSS.

Orientación específica de la pila

Drupal

Habilite los archivos CSS agregados en Administración > Configuración > Desarrollo. También puede configurar opciones de agregación más avanzadas a través de los módulos adicionales para acelerar su sitio al concatenar, minificar y comprimir sus estilos CSS.

Joomla

Varias extensiones de Joomla pueden acelerar su sitio al concatenar, minificar y comprimir sus estilos CSS. También existen plantillas que brindan esta funcionalidad.

Magento

Habilite la opción Minificar archivos CSS en la configuración de desarrollador de su tienda.

React

Si su sistema de compilación minifica los archivos CSS automáticamente, asegúrese de estar implementando la compilación de producción de su aplicación. Puede verificar esto con la extensión de Herramientas del desarrollador de React.

WordPress

Varios complementos de WordPress pueden acelerar su sitio al concatenar, minificar y comprimir sus estilos. También es posible que desee utilizar un proceso de construcción para hacer esta minificación por adelantado si es posible.

Recursos

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.