Minificación de CSS

Silktide comprueba si las hojas de estilo que tu página descarga han sido minificadas: reescritas para eliminar espacios, comentarios y repeticiones que solo importan a quien lee el código. Las hojas de estilo sin minificar son más grandes de lo necesario, lo que retrasa la aparición de la página.

no cambia el aspecto de la página. Por ejemplo:

\/* Antes de la minificación: legible, pero pesado *\/
h1 {
  background-color: #000000;
}
h2 {
  background-color: #000000;
}

\/* Después: resultado idéntico, con una fracción del tamaño *\/
h1,h2{background-color:#000}

Por qué es importante

Las hojas de estilo suelen bloquear el renderizado: el navegador descarga los de la página antes de mostrar nada, por lo que cada byte innecesario en una hoja de estilo alarga directamente el tiempo en blanco antes de que aparezca tu página. La minificación reduce habitualmente el tamaño de las hojas de estilo de forma sustancial, y el ahorro se repite para cada visitante en cada vista de página no almacenada en caché.

Dado que la minificación es automática y no cambia el comportamiento, las hojas de estilo de producción sin minificar casi siempre son un descuido: un paso de compilación omitido o archivos de desarrollo desplegados por error.

Cómo solucionarlo

Activa la minificación de CSS en el proceso de compilación del sitio. Todas las herramientas de construcción modernas incluyen un minificador, normalmente habilitado por defecto en los builds de producción.
Si el sitio no tiene proceso de compilación, revisa el : la mayoría tiene un ajuste o complemento que minifica las hojas de estilo automáticamente.
Como último recurso, pasa los archivos por un minificador independiente antes de subirlos. Conserva los originales legibles: edítalos y publica la salida minificada.
Si la hoja de estilo reportada pertenece a un tercero, comprueba si ofrecen una versión minificada, como hace la mayoría.

Cómo lo prueba Silktide

Carga la página en un navegador real, usando el tipo de dispositivo, la velocidad de conexión y la ubicación de prueba configurados para tus pruebas de velocidad.
Examina cada hoja de estilo que descarga la página y estima cuánto más pequeña sería si se minificara.
Informa de cada archivo con un ahorro potencial significativo y califica la página por el total: alrededor de 50 KB de ahorro potencial reduce la puntuación, y 250 KB o más se califica como deficiente.

Solución de problemas

El archivo ya parece minificado

Los minificadores difieren en su agresividad, por lo que una hoja de estilo ligeramente compactada aún puede contener ahorros significativos. La comprobación indica cuánto más pequeño podría ser el archivo; pasarlo por un minificador actual suele capturar la diferencia.

Necesitamos estilos legibles para depurar

Mantén archivos fuente legibles en tu proyecto y depura con mapas de origen (source maps), que permiten que las herramientas de desarrollo del navegador muestren los estilos originales mientras los visitantes reciben la versión minificada. Nunca necesitas servir código legible para obtener una depuración legible.