Las hojas de estilo CSS en cascada son esenciales para dar estilo a un sitio web, pero los archivos CSS de gran tamaño pueden ralentizar o bloquear la representación de la página. La minificación de CSS hace que los archivos CSS sean más pequeños.
Después de leer este artículo podrás:
Contenido relacionado
¿Por qué usar Minify Javascript?
Rendimiento y tasa de conversión
Cómo la velocidad del sitio aumenta la optimización de motores de búsqueda (SEO)
Elementos básicos de la Web
¿Qué es HTTP/3?
Suscríbete a theNET, el resumen mensual de Cloudflare sobre las ideas más populares de Internet.
Copiar el enlace del artículo
La minificación de CSS reduce el tamaño de los archivos de hojas de estilo CSS en cascada para que se carguen más rápido. La minificación de CSS funciona al eliminar todos los caracteres y espacios innecesarios del marcado CSS sin afectar cómo lo interpretan los navegadores.
Los archivos CSS contienen las instrucciones para dar formato a los elementos HTML. Cuando se cargan más rápido, las páginas web se cargan más rápido en general, al igual que llevar ropa ligera ayuda a un corredor a correr más rápido. Una carga rápida mejora la experiencia del usuario y el valor SEO de la página y las mejoras en la velocidad de la página pueden incluso ayudar a aumentar los porcentajes de conversión.
Por ejemplo, esta sencilla hoja de estilo tiene varias líneas de código, junto con comentarios para los desarrolladores que la lean:
/* paragraph styling here */
p {
font-family: arial;
color: green;
background-color: white;
}
/* links */
a:link {
color: blue;
}
a:visited {
color: white;
}
Después de la minificación CSS, es solo una línea comprimida y se eliminan los comentarios:
p{font-family:arial;color:green;background-color:white;}a:link{color:blue;}a:visited{color:white;}
Aunque este texto es menos fácil de leer para los humanos, un navegador lee e interpreta la segunda versión exactamente igual que la primera. La versión minificada tiene la ventaja de cargarse más rápido porque ocupa menos espacio.
Antes de que un navegador pueda mostrar una página web, tiene que saber qué elementos (como texto, imágenes y otros multimedia) hay en la página web y dónde va cada cosa en la página. Al igual que los contratistas necesitan los planos de un edificio antes de empezar a construirlo, los navegadores necesitan los "planos" de una página web antes de empezar a representar la página.
Al recibir el archivo HTML de una página web, los navegadores empiezan a construir algo llamado árbol del Modelo de objeto de documento (DOM). Esto es como un esquema o boceto de todos los elementos de la página. Los navegadores también analizan todas las etiquetas de estilo <style> y los archivos CSS enlazados para construir un árbol CSSOM, que traza cómo se aplicará el estilo a todos esos elementos de la página.
Por último, los navegadores combinan el modelo de objeto de documento (DOM) y CSSOM para crear un "árbol de representación". Una vez creado el árbol de representación, el navegador empieza a pintar la página. Hasta que esto ocurra, el usuario verá una pantalla en blanco.
El resultado: hasta que el navegador no termine de descargar y leer el CSS, la página no puede verse.
En desarrollo web, cualquier elemento o función que tenga que cargarse antes de que la página pueda mostrarse al usuario final se denomina "recurso de bloqueo de representación". El CSS es un recurso de este tipo. Los recursos que bloquean la representación deben optimizarse para una carga rápida siempre que sea posible.
Los recursos grandes que bloquean la representación tardan más en descargarse lo que hace que el navegador tenga que esperar —bloqueando literalmente la página— de modo que al usuario le parece que nada está ocurriendo. Retrasos como este suelen provocar que los usuarios abandonen la página ("rebote").
También influyen en el Core Web Vitals, las métricas que Google utiliza para medir el rendimiento de las páginas, en particular la pintura con contenido mayor (LCP), que mide cuánto tarda en cargarse el elemento más grande de una página. Las puntuaciones bajas de Core Web Vitals pueden dar lugar a que Google sitúe la página en una posición más baja en los resultados de búsqueda, por lo que la página puede recibir menos tráfico en general.
Afortunadamente, existen muchas herramientas de minificación para el CSS. Quizá lo más conveniente sea utilizar las herramientas de minificación integradas en la red de entrega de contenido (CDN) de un sitio web, un servicio que almacena en caché y entrega de contenido. Las CDN deben ser capaces de proporcionar servicios de minificación para aumentar aún más el rendimiento.
El Minificador automático de Cloudflare se incluye con la CDN de Cloudflare. Los propietarios de los sitios web pueden seleccionar los archivos CSS (junto con los archivos JavaScript y HTML) para minificarlos desde su panel de control de Cloudflare.
Básicamente, la minificación de CSS es diferente de la compresión de CSS, aunque el objetivo de ambas es el mismo: reducir el tamaño del archivo. La minificación altera el código al eliminar comentarios y caracteres. La compresión hace que el archivo sea más pequeño mediante el uso de un algoritmo de compresión (como gzip) y realmente no altera el contenido del archivo.
Dado que el CSS minificado suele ser menos legible, la minificación puede hacer que sea difícil para los desarrolladores llevar a cabo la identificación manual y la corrección de errores en el marcado CSS.
Además, minificar el CSS por sí solo no es suficiente para mejorar el rendimiento de un sitio web. Puede comprar milisegundos a un sitio web, pero hay acciones adicionales que los operadores de sitios web deben llevar a cabo para ver mejoras significativas en el rendimiento —incluyendo la optimización de imagen, el almacenamiento en caché HTTP del navegador, entre otros.
La minificación de JavaScript es un concepto similar, pero para código JavaScript ejecutable. Los comentarios, espacios y otros caracteres adicionales se eliminan para que el archivo .js se puede cargar y ejecutar más rápidamente. Tanto la minificación de JavaScript como la de CSS contribuyen a que el sitio web se cargue más rápido y pueden mejorar la participación del usuario y aumentar el tráfico orgánico.
Los operadores de sitios web pueden utilizar la CDN de Cloudflare para minificar tanto CSS como JavaScript — conoce sobre los planes disponibles de Cloudflare aquí.