Quando o CSS é agrupado em um único arquivo, mesmo após o tree-shaking, ele ainda contém muito CSS não utilizado devido aos diferentes contextos de @media (mobile, tablet, desktop, temas claro/escuro/outros, etc.).
Isso é ruim para as Core Web Vitals: First Input Delay (FID), Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), bem como outras métricas vitais de desempenho e usabilidade: First Contentful Paint (FCP), Total Blocking Time (TBT), Time to Interactive (TTI) e evento DOMContentLoaded.
Há uma forma de melhorar consideravelmente o carregamento e a renderização de CSS ao dividir o CSS em arquivos distintos, cada um contendo apenas o código pertinente ao contexto.
Separe seu CSS em arquivos diferentes:
📄main.css - contém CSS necessário para todas as condições @media
📄screen.css - contém CSS necessário apenas para a condição @media screen
📄print.css - contém CSS necessário apenas para a condição @media print
📂breakpoints
📄x-small.css - contém CSS necessário apenas para o breakpoint X-Small
📄sm.css - contém CSS necessário apenas para o breakpoint Small
📄md.css - contém CSS necessário apenas para o breakpoint Medium
📄lg.css - contém CSS necessário apenas para o breakpoint Large
📄xl.css - contém CSS necessário apenas para o breakpoint Extra large
📄xxl.css - contém CSS necessário apenas para o breakpoint Extra extra large
📂themes
📄light.css - contém CSS necessário apenas para o tema claro
📄dark.css - contém CSS necessário apenas para o tema escuroEm seguida, inclua os arquivos CSS assim:
<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)">Com essa abordagem, os navegadores modernos priorizam o carregamento do CSS para as condições de @media atuais, então a renderização da página começa muito mais rápido porque os usuários não precisam esperar pelo carregamento da parte não utilizada do CSS.
Em casos em que você tem todo o CSS agrupado em um único arquivo e não especifica condições nos atributos de mídia das tags link, o navegador espera que todo o conjunto de CSS seja carregado antes de iniciar a renderização da página. O que desacelera drasticamente a renderização da página.
Os breakpoints neste exemplo são baseados no Bootstrap 5. Essa abordagem se tornará ainda mais importante para o Bootstrap em breve, visto que eles adicionarão suporte para temas claro/escuro/outros.
Se você quer tornar a web melhor e mais rápida, por favor:
- compartilhe este artigo,
- envie este artigo para os desenvolvedores dos frameworks que você usa,
- implemente essa separação de CSS em seus sites.
Compartilhe nas redes sociais ou salve para depois:
Se você quiser ler mais sobre essa otimização e o comportamento do navegador, por favor, veja o seguinte:
- O artigo “Conditionally adaptive CSS. Browser behavior that might improve your performance” de Vadim Makeev. A captura de tela de capa para este artigo foi tirada de seu excelente artigo, onde ele tem mais capturas de tela e experimentos.
- MDN Web Docs: Otimização de desempenho de CSS.