Cuando el CSS se agrupa en un solo archivo, incluso después del tree-shaking, todavía contiene mucho CSS innecesario debido a los diferentes contextos de @media (móvil, tableta, escritorio, temas oscuros/claros/otros, etc.).
Es perjudicial para las métricas web vitales: First Input Delay (FID), Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), así como otras métricas vitales de rendimiento y usabilidad: First Contentful Paint (FCP), Total Blocking Time (TBT), Time to Interactive (TTI) y el evento DOMContentLoaded.
Existe una manera de mejorar significativamente la carga y el renderizado de CSS separando el CSS en diferentes archivos, donde cada archivo contiene solo el código necesario en ese contexto.
Separa tu CSS en diferentes archivos:
📄main.css - contiene el CSS necesario para todas las condiciones @media
📄screen.css - contiene el CSS necesario solo para la condición @media screen
📄print.css - contiene el CSS necesario solo para la condición @media print
📂breakpoints
📄x-small.css - contiene el CSS necesario solo para el breakpoint X-Small
📄sm.css - contiene el CSS necesario solo para el breakpoint Small
📄md.css - contiene el CSS necesario solo para el breakpoint Medium
📄lg.css - contiene el CSS necesario solo para el breakpoint Large
📄xl.css - contiene el CSS necesario solo para el breakpoint Extra large
📄xxl.css - contiene el CSS necesario solo para el breakpoint Extra extra large
📂themes
📄light.css - contiene el CSS necesario solo para el tema claro
📄dark.css - contiene el CSS necesario solo para el tema oscuroLuego, incluye los archivos CSS de esta manera:
<link rel="stylesheet" href="main.css" media="all">
<link rel="stylesheet" href="screen.css" media="screen">
<link rel="stylesheet" href="print.css" media="print">
<link rel="stylesheet" href="x-small.css" media="(max-width: 575px)">
<link rel="stylesheet" href="sm.css" media="(min-width: 576px)">
<link rel="stylesheet" href="md.css" media="(min-width: 768px)">
<link rel="stylesheet" href="lg.css" media="(min-width: 992px)">
<link rel="stylesheet" href="xl.css" media="(min-width: 1200px)">
<link rel="stylesheet" href="xxl.css" media="(min-width: 1400px)">
<link rel="stylesheet" href="light.css" media="(prefers-color-scheme: light)">
<link rel="stylesheet" href="dark.css" media="(prefers-color-scheme: dark)">Con este enfoque, los navegadores modernos priorizan la carga de CSS para las condiciones @media actuales, por lo que el renderizado de la página comienza mucho más rápido porque los usuarios no tienen que esperar a que se cargue la parte no utilizada del CSS.
En los casos en los que tienes todo el CSS agrupado en un solo archivo y no especificas condiciones en los atributos media de las etiquetas link, el navegador espera a que se cargue todo el conjunto de CSS antes de comenzar el renderizado de la página. Lo que ralentiza drásticamente el renderizado de la página.
Los breakpoints en este ejemplo se basan en Bootstrap 5. Este enfoque será aún más importante para Bootstrap pronto dado que añadirán soporte para temas claros/oscuros/otros.
Si quieres hacer que la web sea mejor y más rápida, por favor:
- comparte este artículo,
- envía este artículo a los desarrolladores de los frameworks que utilizas,
- implementa esta separación de CSS en tus sitios.
Comparte en redes sociales o guarda para más tarde:
Si quieres leer más sobre esta optimización y el comportamiento del navegador, consulta lo siguiente:
- El artículo «CSS condicionalmente adaptable. Comportamiento del navegador que podría mejorar tu rendimiento» de Vadim Makeev. La captura de pantalla de portada de este artículo está tomada de su excelente artículo, donde tiene más capturas de pantalla y experimentos.
- MDN Web Docs: Optimización del rendimiento CSS.