Prueba: ¿es mejor tener muchos archivos CSS pequeños o uno grande?
Radek ŠírActualizado 29/9/20254 minutos lecturaLa mejor práctica en la era de HTTP/2 sugiere dividir CSS en archivos más pequeños, según componentes y páginas. Sin embargo, ¿no será el costo de muchas solicitudes demasiado alto?
¿Por qué preocuparse?
Al optimizar un sitio web según las métricas de Core Web Vitals, intentamos cargar el elemento más grande de la página (elemento LCP) lo más rápido posible. Por lo tanto, todo lo que se descarga antes de este elemento debe cargarse y procesarse lo más pronto posible. Esto se refiere especialmente a archivos de estilos y JavaScript.
Decidimos responder a esta pregunta durante una de las optimizaciones para uno de nuestros mayores clientes, Livesport.
En el sitio web de Livesport, específicamente en la página de Fortuna liga, había 55 archivos CSS pequeños con un tamaño total de 789 kB en el momento de las pruebas. Con el uso de compresión Gzip durante la transferencia, se transfirieron 156 kB al navegador.
En esta situación, el elemento LCP se cargó en 3,700 ms. (Probado en una conexión 3G rápida).
Luego combiné todos los archivos en uno solo y lo minifiqué. Vinculé el archivo resultante en el <head> de la página y eliminé los enlaces a los archivos CSS restantes.
Así se ven los archivos CSS que se descargan en Livesport.
La minificación redujo el tamaño de los datos a 655 kB, y al usar la compresión Gzip, llegamos a 96 kB de datos transferidos. Ahorramos 54 solicitudes al descargar archivos CSS y aproximadamente ⅓ del volumen de datos transferidos.
Después de optimizar el CSS, el LCP se cargó en 3,500 ms.
El LCP (pintura de contenido más grande) se cargó 200 ms más rápido en una conexión 3G tras reemplazar 55 archivos pequeños por uno grande.
En términos porcentuales, esto resultó en solo un 5% de aceleración en el renderizado del elemento LCP.
| Número de archivos | Volumen de datos kB | LCP en ms | |
|---|---|---|---|
| Antes de la modificación | 55 | 789 | 3,700 |
| Después de la modificación | 1 | 655 | 3,500 |
Esta mejora relativamente pequeña en la carga del elemento LCP se debe, entre otras cosas, a la gran cantidad de otros archivos transferidos, como JavaScript. Su procesamiento complejo, especialmente en el lado del navegador del cliente, también influye en el tiempo total.
¿Vale la pena combinar CSS en un solo archivo?
Esta prueba demostró que no se ahorra mucho en términos de velocidad al usar un solo archivo. Un gran archivo CSS no es significativamente más rápido para el LCP que muchos pequeños.
Además, hay otros factores. Aquí solo consideramos la experiencia del usuario con una caché del navegador vacía. Sin embargo, en la operación real, la caché juega un papel importante y será más ventajoso tener muchos archivos pequeños. Siempre que los desarrolladores puedan invalidarlos uno por uno, y no todos a la vez.
Para concluir, algunos consejos generales sobre CSS. ¿En qué debería prestar atención?
- Asegúrese de que todos los CSS sean lo más pequeños posible en la salida. Siempre minifique de manera rigurosa.
- Asegúrese de que no haya duplicidades en el código: diferentes iconos, colores o incluso componentes enteros. Esto es algo que vemos frecuentemente.
- Limpie regularmente: si los archivos CSS son grandes, considere refactorizarlos, dividirlos en componentes o eliminar componentes no utilizados (muertos).
- Asegúrese del correcto caché de archivos usando la directiva
max-age. - Asegúrese de que la compresión Gzip o Brotli esté habilitada en el servidor.
- Esfuércese por no incluir estilos que no se utilicen en el HTML; no necesitamos estilos para procesos de compra en la página de inicio.
- Los estilos fuera del primer viewport se pueden cargar de manera diferida, por ejemplo, usando JS.
Martin Michálek y Harry Roberts también han escrito más sobre la optimización de CSS.