Divida o seu CSS em ficheiros relacionados com @media para melhorar significativamente o desempenho

Quando o CSS é agrupado num único ficheiro, mesmo após o tree-shaking, ainda contém muito CSS não utilizado devido a diferentes contextos @media (mobile, tablet, desktop, temas escuros/claros/outros, etc.).

É mau 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.

Existe uma forma de melhorar significativamente o carregamento e a renderização de CSS separando o CSS em ficheiros diferentes, onde cada ficheiro contém apenas o código necessário nesse contexto.

Separe o seu CSS em ficheiros 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 escuro

Depois, inclua os ficheiros CSS desta forma:

<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 esta abordagem, os browsers modernos priorizam o carregamento de CSS para as condições @media atuais, pelo que a renderização da página começa muito mais depressa porque os utilizadores não precisam de esperar que a parte não utilizada do CSS seja carregada.
Nos casos em que tem todo o CSS agrupado num único ficheiro e não especifica condições nos atributos media das tags link, o browser espera que todo o conjunto de CSS seja carregado antes de iniciar a renderização da página. O que atrasa drasticamente a renderização da página.

Os breakpoints neste exemplo são baseados no Bootstrap 5. Esta abordagem tornar-se-á ainda mais importante para o Bootstrap em breve, dado que irão adicionar suporte para temas claros/escuros/outros.

Se quer tornar a web melhor e mais rápida, por favor:

• partilhe este artigo,
• envie este artigo aos desenvolvedores dos frameworks que utiliza,
• implemente esta separação de CSS nos seus sites.

📃 Clique aqui para copiar o link para a área de transferência.

Partilhe nas redes sociais ou guarde para mais tarde:

Se quiser ler mais sobre esta otimização e o comportamento do browser, por favor consulte o seguinte:

• O artigo “Conditionally adaptive CSS. Browser behavior that might improve your performance” de Vadim Makeev. A captura de ecrã de capa para este artigo foi tirada do seu excelente artigo, onde ele tem mais capturas de ecrã e experiências.
• MDN Web Docs: Otimização de desempenho de CSS.