Como Otimizar o CSS para o Máximo Desempenho do Site

Mesmo em 2021, o desempenho da web continua sendo um problema. De acordo com o HTTP Archive, a página média requer um download de 2 MB, faz mais de 60 solicitações HTTP, e pode levar 18 segundos para carregar em um dispositivo móvel completamente. As folhas de estilo são responsáveis por 60 kB divididos em sete solicitações, então raramente é uma prioridade máxima quando se tenta resolver problemas de desempenho.

Entretanto, o CSS tem um efeito, por mais leve que possa parecer. Uma vez que você tenha endereçado seu JavaScript, aprender a otimizar o CSS corretamente deve ser a próxima prioridade.

Vamos direto ao assunto!

Como o CSS afeta o desempenho da página

O CSS parece inocente, mas pode exigir algum processamento pesado.

CSS de bloqueio de renderização

Quando seu navegador encontra uma tag <link>, ele interrompe o download e o processamento de outros navegadores enquanto recupera e analisa o arquivo CSS.

O JavaScript também pode bloquear a renderização do navegador, mas o processamento assíncrono é possível com:

1. O atributo async para download de scripts em paralelo, que são executados imediatamente, eles estão prontos.
2. O atributo defer para download em paralelo, então executado em ordem quando o DOM estiver pronto.
3. O atributo type="module" para carregar um módulo ES (que se comporta como defer).

Recursos como imagens muitas vezes requerem mais largura de banda, mas formatos eficientes estão disponíveis, e podem ser carregados de forma preguiçosa (atributo loading="lazy") sem bloquear a renderização do navegador.

Nada disso é possível com o CSS. O arquivo é armazenado em cache, portanto, o carregamento de páginas subseqüentes deve ser mais rápido, mas o bloco de renderização permanece.

Grandes arquivos CSS levam tempo para serem processados

Quanto maior a sua folha de estilo, mais tempo leva para baixar e processar em um CSS Object Model (CSSOM), que o navegador e as APIs JavaScript podem usar para exibir a página. Embora as folhas de estilo CSS sejam menores do que a maioria dos outros arquivos do site, elas não estão imunes à regra de “menor é melhor”.

Os arquivos CSS ficam maiores

Pode ser difícil identificar estilos que não são mais usados, e remover os errados pode causar estragos em um site. Os desenvolvedores normalmente optam pela abordagem mais segura de “reter tudo”. Os estilos de página, componentes e widgets que não são mais usados continuam a existir no CSS. O resultado? O tamanho do arquivo, a complexidade e o esforço de manutenção aumentam exponencialmente, tornando os desenvolvedores cada vez menos propensos a remover o código redundante.

As folhas de estilo podem fazer referência a outros recursos

O CSS pode fazer referência a outras folhas de estilo usando @import rules. Estas importações bloqueiam o processamento da folha de estilo atual e carregam outros arquivos CSS em série.

Outros ativos, tais como fontes e imagens, também podem ser referenciados. O navegador tentará otimizar os downloads, mas quando em dúvida, ele irá buscá-los imediatamente. Os arquivos codificados na base64 incorrem ainda em mais processamento.

Renderização de efeitos CSS

Os navegadores têm três fases de renderização:

1. A fase de layout (ou redesenho) calcula as dimensões de cada elemento e como ele afeta o tamanho ou posicionamento dos elementos ao seu redor
2. A fase paint desenha as partes visuais de cada elemento em camadas separadas: texto, cores, imagens, bordas, sombras, etc.
3. O composto desenha cada camada na página na ordem correta de acordo com os contextos de empilhamento, posicionamento, índices z, etc.

Se você não tiver cuidado, as mudanças de propriedade e animações do CSS podem fazer com que as três fases sejam renderizadas novamente. Algumas propriedades, tais como sombras e gradientes, também são computacionalmente mais caras do que cores e margens do bloco.

Ferramentas de análise de desempenho do CSS

Admitir que você tem um problema de desempenho do CSS é o primeiro passo no caminho da recuperação! Encontrar e corrigir as causas é outra questão.

As seguintes ferramentas e serviços (não classificados em nenhuma ordem) podem ajudá-lo a identificar gargalos de estilo em seu código.

1. Painel da rede DevTools

Especialistas em desempenho Web passam um tempo considerável no DevTools e no painel da Rede em particular. DevTools é nativo da maioria dos navegadores modernos, embora nós estaremos usando o Google Chrome em nossos exemplos.

DevTools pode ser aberto no menu do navegador, normalmente em Mais ferramentas > Ferramentas do desenvolvedor, ou através dos atalhos de teclado Ctrl | Cmd + Shift + I ou F12.

Mude para a aba Network (Rede) e certifique-se de que a opção Disable cache esteja marcada para evitar que arquivos em cache afetem o relatório. Você também pode mudar a opção de estrangulamento para simular redes móveis mais lentas.

Atualize a página para ver o gráfico da queda d’água para download e processamento:

Qualquer barra longa é motivo de preocupação, mas você deve ser especialmente cauteloso com barras longas bloqueadas/estagadas (mostradas em branco). Neste exemplo, a linha destacada e todas as linhas seguintes não puderam começar o download até que os arquivos CSS e JavaScript de renderização fossem processados no topo da página HTML.

A caixa Filtro permite que você mostre ou esconda ativos específicos:

• larger-than:<S>: Limite para arquivos maiores que <S>, expresso como bytes (10.000), Kilobytes (1.000 kB), ou megabytes (1 M)
• -larger-than:<S>: Limite para arquivos menores do que <S>
• domain:*<.yourdomain.com>: Mostrar pedidos de terceiros que não são carregados do seu domínio principal. Estes são um grande contribuidor para sites lentos.

Uma página de alto desempenho com CSS otimizado normalmente tem menos ativos carregados em paralelo com barras curtas bloqueadas/estagadas.

2. WebPageTest

O WebPageTest fornece uma visão similar da cascata da rede, assim como muitos outros gráficos de desempenho:

O serviço usa dispositivos baseados em vários locais globais para que você possa avaliar o desempenho no mundo real e as otimizações do CSS.

3. Painel Chrome DevTools Lighthouse

O painel do DevTools Lighthouse é fornecido em navegadores baseados em Chromium como Chrome, Edge, Brave, Opera, e Vivaldi. Você pode gerar relatórios de Desempenho, Aplicativos Web Progressivas, Melhores Práticas, Acessibilidade e Otimização de Sites de Busca para dispositivos móveis e desktop.

A ferramenta faz sugestões de melhorias, incluindo formas de otimizar o CSS. Nem tudo pode ser prático ou possível, mas os ganhos rápidos mais benéficos são destacados.

4. Google PageSpeed Insights

PageSpeed Insights é a versão on-line do Lighthouse. Ele tem menos recursos, mas pode ser usado em qualquer navegador e fornece algumas perspectivas alternativas.

Por exemplo, um treemap mostra os maiores ativos JavaScript com uma métrica de cobertura, que indica que proporção de código é utilizada e não utilizada:

O CSS não é exibido, mas a quantidade de JavaScript terá uma influência na eficiência dos estilos.

Ferramentas similares de teste de velocidade do site incluem o Pingdom Website Speed Test e o GTmetrix.

5. Painel de cobertura do DevTools

O painel de cobertura DevTools em navegadores baseados em Chromium que ajudam a localizar código CSS (e JavaScript) não utilizado. Selecione Cobertura no submenu Mais ferramentas do DevTools, depois atualize sua página e navegue em seu site/aplicativo:

Os ativos CSS e JavaScript são mostrados no painel de cobertura , com a proporção de código não utilizado em vermelho. Clique em qualquer arquivo para visualizar seu código fonte com o código não utilizado destacado em vermelho na sarjeta de número de linha.

Algumas coisas para tomar nota:

• A métrica de cobertura é redefinida se você atualizar ou navegar para uma nova página, como é típico em um site WordPress. A métrica do código não utilizado só diminuirá se você estiver navegando em um aplicativo de página única que carrega conteúdo sem uma atualização da página.
• A ferramenta só pode contabilizar o CSS usado até um determinado momento. Ela não pode determinar se um widget não foi visualizado ou se tem múltiplos estados vinculados ao JavaScript.

6. Monitor de desempenho em tempo real do Chrome DevTools

Os navegadores baseados em Chromium têm um Monitor de Desempenho em tempo real. Novamente, isto está disponível no menu Mais ferramentas do DevTools. Os gráficos são atualizados enquanto você navega na página e aciona as animações:

As seguintes métricas são de particular interesse para otimizar o desempenho do CSS (quanto mais baixo, melhor):

• Uso de CPU: Utilização do processador de 0% a 100%.
• Layouts/segundo:A velocidade na qual o navegador deve dispor a página.
• Recálculos de estilo/segundo: A taxa na qual o navegador tem que recalcular os estilos.

As outras métricas também podem ser úteis se o CSS estiver lutando devido a fatores externos (novamente, valores mais baixos indicam melhor desempenho):

• Tamanho do JS heap: A memória total usada pelos objetos JavaScript.
• DOM Nodes: O número de elementos no documento HTML.
• Ouvintes do evento JS: O número de ouvintes de eventos JavaScript registrados.
• Documentos: O número de recursos, incluindo a página, arquivos CSS, módulos JavaScript, etc.
• Documentos frames: O número de quadros, iframes e scripts de trabalho em JavaScript.

7. Relatório de desempenho DevTools

O painel de Performance DevTools permite que você registre as atividades da página para análise posterior e ajude a identificar problemas de performance. Os relatórios gerados são complexos, e muitos desenvolvedores os evitam, mas eles fornecem informações valiosas.

O ícone de configurações do painel de desempenho permite que você defina várias opções, tais como diminuir a velocidade da rede e do CPU. Você também pode desativar amostras JavaScript para que as pilhas de chamadas detalhadas não sejam gravadas.

Para começar, clique no ícone circular Record, carregue e/ou use sua página, depois clique no botão Stop para ver o relatório:

Quase todas essas métricas serão úteis para desenvolvedores JavaScript, mas os problemas de otimização do CSS podem ser especialmente evidentes:

• Barra vermelha superior: Isto indica que a taxa de quadros caiu significativamente, o que pode estar causando problemas de desempenho. Isto é esperado no início do careegamento de uma página, mas animações CSS excessivas também podem ser um problema.
• Gráfico de resumo: O alto carregamento, renderização e métricas de pintura podem indicar problemas de CSS.

Correções indiretas de desempenho do CSS

As correções a seguir não abordarão diretamente os problemas do CSS, mas podem ajudá-lo a resolver alguns problemas de desempenho com relativamente pouco esforço.

Use uma boa hospedagem de sites

Usar uma boa hospedagem de sites com servidores fisicamente mais próximos de seus usuários trará benefícios imediatos de desempenho. Os planos de hospedagem variam, mas existem três tipos principais:

1. Hospedagem compartilhada: Seu site está hospedado em um servidor físico, possivelmente ao lado de centenas de outros sites. Espaço em disco, RAM, tempo de CPU e largura de banda são compartilhados. Os planos são frequentemente baratos, mas o desempenho e a disponibilidade são afetados por outros sites. A atualização pode ser possível, mas seu site geralmente permanecerá na mesma infraestrutura.
2. Hospedagem dedicada: Seu site é hospedado em um ou mais servidores físicos que você possui. O hardware pode ser configurado e atualizado de acordo com os requisitos. Os planos são freqüentemente caros e as falhas de hardware continuam sendo problemáticas.
3. Hospedagem em nuvem: A hospedagem em nuvem resume a infraestrutura de hardware em um conjunto de serviços que podem ser acessados on-demand. Seu site pode ser provisionado em uma variedade de dispositivos para facilitar as atualizações.

Os planos e preços da hospedagem em nuvem variam enormemente. Você poderia considerar:

1. Opções de Plataforma como Serviço (PaaS), tais como servidores web virtuais e bancos de dados, ou
2. Opções de Software como Serviço (SaaS), que oferecem aplicativos totalmente gerenciados, como o WordPress.

A troca de hospedagem pode aumentar o desempenho. É pouco provável que resolva todos os seus problemas, mas é uma solução econômica para problemas de back-end e largura de banda.

Você também pode considerar o uso de uma content delivery network (CDN) ou CDN de imagem e vídeo especializado que possa distribuir a carga por vários locais geograficamente mais próximos dos usuários.

Alavancar as funcionalidades de eficiência dos navegadores e servidores

Cerca de 10% dos sites não ativam a compressão gzip (ou melhor), que normalmente é a opção padrão do servidor. Isto reduz o tamanho do CSS em 60% ou mais através da compressão de arquivos antes da transmissão. Ele não consertará CSS ineficiente, mas o código chegará mais cedo!

Você também deve ativar o HTTP/2 (ou melhor), que envia os dados em um formato binário menor, comprime os cabeçalhos e pode enviar mais de um arquivo na mesma conexão TCP.

Finalmente, assegure-se de que o navegador possa armazenar CSS e outros arquivos de forma eficaz. Isto geralmente é uma questão de configuração Expires, Last-Modified e/ou ETag hashes no cabeçalho HTTP.

Otimize o seu CMS

Sistemas de Gerenciamento de Conteúdo como o WordPress podem ser estendidos com temas e plugins que servem seus próprios CSS. Sempre que possível, você deve acelerar o seu CMS para:

1. Remova os plugins não utilizados.
2. Use temas mais enxutos
3. Habilite o cache para evitar a regeneração excessiva de páginas.

Otimize suas imagens

As imagens não têm o mesmo processamento e renderização que o HTML, CSS e JavaScript, mas são responsáveis por uma grande proporção do peso da página e da largura de banda utilizável. Considere:

1. Remover imagens desnecessárias.
2. Redimensionar imagens grandes – talvez para não mais do que 150% do tamanho máximo que elas podem aparecer na tela.
3. Usar um formato de imagem apropriado – idealmente uma opção altamente comprimida como WebP ou AVIF, mas possivelmente SVG para logotipos e gráficos.
4. Substituir as imagens por gradientes CSS ou outros efeitos.
5. Adicionar atributos de largura e altura ao HTML <img> ou usando a nova propriedade CSS aspect-ratio para garantir que o espaço apropriado seja reservado na página antes do download da imagem.

Um CDN de imagem especializado pode lidar com alguns destes trabalhos para você. Para mais dicas, confira nosso guia sobre como otimizar imagens para a web.

Remova o CSS não utilizado

Os estilos mais rápidos são aqueles que você nunca precisa carregar ou renderizar! Tente remover/editar qualquer código CSS que você não precisa mais, como o de páginas antigas, widgets ou frameworks. Isto pode ser difícil em sites maiores, e nem sempre é claro se um conjunto particular de estilos é essencial ou não.

As seguintes ferramentas analisam o uso de HTML e CSS em tempo de compilação ou rastreando URLs para identificar código redundante. Isto nem sempre é adequado, então configurações adicionais podem ser definidas para garantir que os estilos acionados pelo JavaScript e interações do usuário sejam permitidas listadas:

• UnCSS
• UnusedCSS
• PurgeCSS
• PurifyCSS

Há uma opção melhor: Dividir o CSS em arquivos separados com níveis claros de responsabilidade e documentar de acordo. A remoção de estilos desnecessários torna-se então consideravelmente mais fácil.

Otimizar o desempenho do carregamento CSS

Nem todo CSS é carregado igualmente. A humilde tag <link>tem uma série de opções e caprichos que nem sempre são lógicos.

Otimize o uso da fonte Web

As fontes do Google e fundições de fontes similares revolucionaram as fontes da web, mas algumas linhas de código de fontes podem incorrer em centenas de kilobytes de largura de banda.

Aqui estão nossas sugestões de otimização:

1. Carregue apenas as fontes que você precisa: Remova as fontes que você não está usando e verifique se novas fontes são necessárias.
2. Carregue apenas os pesos e estilos que você precisa: A maioria das fundições de fontes pode limitar o download a certos conjuntos de caracteres (como o latim apenas), pesos (espessuras) e itálico (oblíquas). Os navegadores podem auto-renderizar estilos ausentes, embora os resultados possam ser pobres.
3. Limite os caracteres necessários: As fontes pouco usadas podem ser restritas a caracteres específicos. Por exemplo, o título “CSS tutorial” em Open Sans pode ser definido adicionando um parâmetro &text= à query string das fontes do Google: fonts.googleapis.com/css?family=Open+Sans&text=CStuorial
4. Considere as fontes variáveis: As fontes variáveis definem uma grande variedade de estilos, pesos e itálico usando interpolação vetorial. O arquivo da fonte é um pouco maior, mas você precisa apenas de uma ao invés de várias. A fonte recursiva demonstra a flexibilidade das fontes variáveis.
5. Carregue as fontes a partir do seu servidor local: As fontes auto-hospedadas são mais eficientes do que usar uma fundição. Menos pesquisas DNS são necessárias e você pode restringir o download para WOFF2, que todos os navegadores modernos suportam. Navegadores mais antigos (estou olhando para você IE) podem cair de volta para uma fonte OS.
6. Considere as fontes do sistema operacional: Essa fonte web de 500 kB pode parecer ótima, mas alguém notaria se você mudasse para a Helvetica, Arial, Geórgia ou Verdana, comumente disponíveis? As fontes OS ou web-safe são uma maneira fácil de aumentar o desempenho.

Use uma opção apropriada de carregamento de fontes

As fontes Web podem levar alguns segundos para serem baixadas e processadas. O navegador também não o fará:

1. Exibem um flash de texto sem estilo (FOUT – Flash of Unstyled Text): A primeira fonte disponível é usada inicialmente, mas é substituída quando a fonte da web está pronta.
2. Exibem um flash de texto invisível (FOIT – Flash of Invisible Text): Nenhum texto é exibido até que a fonte da web esteja pronta. Este é o processo padrão nos navegadores modernos, que normalmente esperam três segundos antes de reverter para uma fonte fallback.

Nenhum dos dois é ideal. A propriedade CSS font-display e Google Font & display = parâmetro pode selecionar uma opção alternativa:

• auto: O comportamento padrão do navegador (geralmente FOIT).
• block: Efetivamente FOIT. O texto é invisível por até três segundos. Não há troca de fonte, mas o texto pode levar tempo para aparecer.
• swap: FOUT (FOUT) efetivo. O primeiro retorno é usado até que a fonte da web esteja disponível. O texto é imediatamente legível, mas o efeito de troca de fonte pode ser jarrante. O Font Style Matcher pode ser usado para definir um fallback de tamanho semelhante.
• fallback: Um compromisso entre FOIT e FOUT. O texto é invisível por um curto período (normalmente 100 ms), então o primeiro fallback é usado até que a fonte da web esteja disponível.
• optional: Similar ao fallback, exceto que não ocorre troca de fonte. A fonte web só será usada se estiver disponível dentro do período inicial. Sua primeira visualização de página provavelmente mostrará uma fonte fallback, com visualizações subsequentes usando a fonte web baixada e em cache.

Usando swap, fallback, ou optional pode oferecer um aumento de desempenho percebido.

Evite CSS @import

O @import at-rule permite que arquivos CSS sejam incluídos dentro de outros:

/* main.css */
@import url("reset.css");
@import url("grid.css");
@import url("widget.css");

Esta parece ser uma maneira eficaz de carregar componentes e fontes menores. Infelizmente, cada @import é render-blocking, e cada arquivo deve ser carregado e analisado em série.

Múltiplas tags <link>dentro do HTML é mais eficiente e carrega arquivos CSS em paralelo:

<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="grid.css">
<link rel="stylesheet" href="widget.css">

Dito isto, é melhor..

Concatenar e minimizar o CSS

Ferramentas de construção modernas, pré-processadores CSS como Sass e plugins WordPress podem combinar todas as parciais em um grande arquivo CSS. Espaço em branco desnecessário, comentários e caracteres são então removidos para reduzir o tamanho do arquivo a um mínimo.

Múltiplos arquivos são menos problemas de desempenho com HTTP/2 e superiores, mas um único arquivo requer apenas um cabeçalho e pode ser gzipado e armazenado em cache de forma mais eficiente.

Arquivos CSS separados só são práticos quando você tem uma ou mais folhas de estilo que são trocadas com freqüência – talvez várias vezes por semana. Mesmo assim, a maioria dos códigos CSS estáticos ainda podem ser combinados em um único arquivo.

Os clientes Kinsta podem acessar o recurso de minificação de código em seu painel MyKinsta para ajudar com isso. O recurso permite que os clientes ativem a minificação automática CSS e JavaScript com um simples clique. Isto ajuda a acelerar um site com zero esforço de trabalho manual.

Evite a codificação Base64

As ferramentas podem codificar imagens para as strings base64, que você pode usar como dados URIs em HTML <img> tags e background CSS:

.background {
  fundo-imagem: url('data:image/jpg;base64,ABC123...');
}

Isso reduz o número de solicitações HTTP, mas prejudica o desempenho do CSS:

• as strings base64 podem ser 30% maiores do que seu equivalente binário.
• os navegadores devem decodificar as strings antes que uma imagem possa ser usada, e
• alterar um pixel de imagem invalida todo o arquivo CSS.

Somente considere a codificação base64 se você estiver usando imagens muito pequenas, que mudam pouco frequentemente, onde a string resultante não é significativamente maior do que uma URL.

Dito isto, você pode codificar ícones SVG reutilizáveis em UTF8, por exemplo

.svgbackground {
  fundo-imagem: url('data:image/svg+xml;utf8,');
}

Remover hacks CSS e Fallbacks IE

A menos que você seja infeliz e tenha uma alta proporção de usuários do Internet Explorer, as folhas de estilo e hacks condicionais do IE podem ser removidos do seu CSS. Na maioria dos casos, os usuários do IE ainda verão algo, especialmente se você usar um design mobile-first que mostra uma visão linear mais simples por padrão. O resultado pode não ser bonito, e não será perfeito, mas seu orçamento de desenvolvimento é melhor gasto considerando a acessibilidade para todos os usuários.

Pré-carregamento de arquivos CSS

A tag <link> fornece um atributo opcional de pré-carregamento que pode iniciar um download imediatamente ao invés de esperar pela referência real no HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My page</title>
  <!-- preload styles -->
  <link rel="preload" href="/css/main.css" as="style" />
  <!-- lots more code -->
  <!-- load preloaded styles -->
  <link rel="stylesheet" href="/css/main.css" />

Isto é especialmente benéfico no WordPress e em outros CMS onde um plugin poderia adicionar uma folha de estilo mais abaixo na página.

Use o CSS Inline crítico

As ferramentas de análise podem sugerir que você “inline critical CSS” ou “reduza as folhas de estilo de render-blocking” Isto melhora o desempenho por:

1. Identificando os estilos essenciais usados pelos elementos acima da dobra (aqueles visíveis quando a página é carregada)
2. Colocando aquele CSS crítico em um <style> etiqueta em sua <head>
3. Carregando o CSS restante de forma assíncrona para evitar o bloqueio. Isto pode ser feito carregando a folha de estilo em um estilo “imprimir” que o navegador dá uma prioridade menor. O JavaScript então muda para um estilo de mídia “todo” uma vez que a página tenha sido carregada (um <noscript> assegura que o CSS funcione é JavaScript não está disponível):

<style>
/* critical styles */
body { font-family: sans-serif; color: #111; }
</style>
<!-- load remaining styles -->
<link rel="stylesheet" 
     href="/css/main.css"
    media="print" 
   onload="this.media='all'">
<noscript>
  <link rel="stylesheet" href="/css/main.css">
</noscript>

Ferramentas como o critical e o criticalCSS podem ajudar a extrair estilos para os elementos em visualização.

A técnica melhora notavelmente o desempenho e aumenta a pontuação das auditorias. Sites ou aplicativos com interfaces consistentes deveriam ser mais simples de implementar, mas pode ser mais difícil em outros lugares:

• Uma ferramenta de construção é essencial para todos, exceto para os sites mais simples.
• A “dobra” é diferente em cada dispositivo.
• Os sites podem ter uma variedade de layouts que requerem diferentes CSS críticos.
• Ferramentas CSS críticas podem ter dificuldades com frameworks específicos, HTML gerado do lado do cliente e conteúdo dinâmico.
• A técnica beneficia principalmente o carregamento da primeira página. O CSS é armazenado em cache para as páginas subseqüentes, portanto, estilos adicionais alinhados irão aumentar o peso da página.

Use a renderização Media Query

Uma única concatenada e minerada irá beneficiar a maioria dos sites, mas sites que requerem uma quantidade significativa de estilos de tela maiores poderiam dividir arquivos CSS e carregar usando uma consulta de mídia:

<!-- core styles loaded on all devices -->
<link rel="stylesheet" href="core.css">
<!-- served to screens at least 40em wide -->
<link rel="stylesheet" media="(min-width: 40em)" href="40em.css">
<!-- served to screens at least 80em wide -->
<link rel="stylesheet" media="(min-width: 80em)" href="80em.css">

Este exemplo assume uma metodologia mobile-first. Os dispositivos móveis carregam o core.css mas podem não precisar baixar ou analisar outras folhas de estilo.

Use renderização progressiva

A renderização progressiva é uma técnica que define folhas de estilo individuais para páginas ou componentes separados. Ela pode beneficiar sites muito grandes onde páginas individuais são construídas a partir de uma extensa gama de componentes.

Cada arquivo CSS é carregado imediatamente antes de um componente ser referenciado no HTML:

<head>
  <!-- core styles -->
  <link rel="stylesheet" href="core.css" />
</head>
<body>
  <!-- header -->
  <link rel="stylesheet" href="header.css" />
  <header>...</header>
  <!-- primary content -->
  <link rel="stylesheet" href="main.css" />
  <main>
    <!-- widget styling -->
    <link rel="stylesheet" href="widget.css" />
    <div class="mywidget>...</div>
  </main>
  <!-- footer -->
  <link rel="stylesheet" href="footer.css" />
  <footer>...</footer>
</body>

Isto funciona bem na maioria dos navegadores. (o Safari mostra uma página em branco até que todo o CSS seja carregado, mas não deve ser notavelmente pior do que uma única folha de estilo grande)

A adoção de componentes Web também encoraja o uso de estilos escopados que são carregados quando o elemento personalizado é renderizado.

Otimize o desempenho do CSS

As técnicas e propriedades do CSS colocam diferentes tensões no navegador, na CPU, na memória, na largura de banda e em outros recursos. As seguintes dicas podem ajudar você a evitar processamento desnecessário e desempenho lento.

Adote técnicas modernas de layout (Grid e Flexbox)

Layouts baseados em flutuadores são difíceis de criar, usam inúmeras propriedades, requerem uma margem contínua e ajustes de preenchimento, devem ser gerenciados usando consultas de mídia, e incorrem em um considerável processamento no navegador. Eles foram o único método de layout viável por muitos anos, mas não são mais necessários. Use um ou outro:

• CSS Flexbox para layouts unidimensionais, que podem ser incluídos na próxima linha. É ideal para menus, galerias de imagens, cartões, etc.
• CSS Grid para layouts bidimensionais com linhas e colunas explícitas. É ideal para layouts de página.

Ambos são mais simples de desenvolver, usar menos código, renderizar mais rápido e adaptar-se a qualquer tamanho de tela sem consultas de mídia.

Navegadores muito antigos não reconhecerão as propriedades modernas de flexbox e grid, então cada elemento se torna um bloco. Mostre-os em um simples layout linear móvel: não há necessidade de emular o design com fallbacks baseados em flutuadores.

Substitua Imagens por Gradientes e Efeitos CSS

Sempre que possível, opte pelo código CSS ao invés de imagens. Experimente com gradientes, bordas, raios, sombras, filtros, modos de mistura, máscaras, clipping e efeitos de pseudoelementos para reutilizar ou substituir imagens existentes.

Os efeitos CSS usam consideravelmente menos largura de banda, são mais fáceis de modificar e geralmente podem ser animados.

Evite o uso excessivo de propriedades pesadas

Você pode ter um código declarativo terse, mas alguns CSS requerem mais processamento do que outros. As seguintes propriedades acionam cálculos de pintura que podem ser pesadas quando usadas em excesso:

• position: fixed
• border-radius
• box-shadow
• text-shadow
• opacity
• transform
• filter
• backdrop-filter
• background-blend-mode

Use transições e animações CSS quando possível

As transições e animações CSS serão sempre mais suaves do que os efeitos alimentados por JavaScript, que modificam propriedades similares. Eles não serão processados em navegadores muito antigos, mas, como é provável que eles estejam rodando em dispositivos menos capazes, isso é para o melhor.

No entanto, evite animação excessiva. Os efeitos devem melhorar a experiência do usuário sem afetar adversamente o desempenho ou causar enjôo de movimento. Verifique a consulta de mídia com movimento reduzido e desabilite as animações quando necessário.

Evite animar propriedades que acionam um Re-Layout

Alterar as dimensões de um elemento (largura, altura, estofamento, borda) ou a posição (topo, fundo, esquerda, direita, margem) pode fazer com que a página inteira seja re-layout em cada quadro de animação. As propriedades mais eficientes para animar são:

• opacity
• filter: Desfoque, contraste, sombra, e outros efeitos
• transform: Para traduzir (mover), escalar, ou girar um elemento

Os navegadores podem usar a GPU acelerada por hardware para renderizar esses efeitos em sua própria camada, de modo que apenas a fase de composição é afetada.

Se você tiver que animar outras propriedades, você pode melhorar o desempenho retirando o elemento do fluxo da página com posição: absoluto.

Cuidado com os seletores complexos

Os navegadores analisarão rapidamente os seletores CSS mais complexos, mas simplificando-os reduz o tamanho dos arquivos e melhora o desempenho. Seletores complexos são freqüentemente gerados quando você cria estruturas profundamente aninhadas em pré-processadores CSS como o Sass.

Indique quais elementos irão mudar

A propriedade do CSS permite que você avise como um elemento será alterado ou animado para que o navegador possa fazer otimizações com antecedência:

.myelement {
  will-change: transform, opacity;
}

Qualquer número de valores separados por vírgula pode ser definido, mas a propriedade só deve ser usada como um último recurso para corrigir problemas de desempenho conhecidos. Você não deve aplicá-la a muitos elementos, e certifique-se de dar-lhe tempo suficiente para inicializar.

Considere a contenção do CSS

A contenção é uma nova funcionalidade do CSS que pode melhorar o desempenho, permitindo que você identifique subárvores isoladas de uma página. O navegador pode otimizar o processamento ao renderizar – ou não renderizar – um bloco específico de conteúdo DOM.

A propriedade de contenção aceita um ou mais dos seguintes valores em uma lista separada por espaço:

• none: A contenção não é aplicada
• layout: O layout do elemento é isolado do resto da página – seu conteúdo não afetará outros elementos
• paint: Os elemento child não são exibidas fora de seus limites
• size: O tamanho do elemento pode ser determinado sem verificação de elementos childs – as dimensões são independentes do conteúdo

Dois valores especiais também estão disponíveis:

• strict: Todas as regras de contenção (exceto nenhuma) são aplicadas
• content: Aplica layout e paint

A contenção de CSS é suportada na maioria dos navegadores modernos. Não há suporte no Safari ou em aplicativos mais antigas, mas a contenção pode ser usada com segurança nestes porque o navegador simplesmente ignorará a propriedade.

Responder ao cabeçalho Save-Data

Save-Data é um cabeçalho de solicitação HTTP que indica que o usuário solicitou dados reduzidos. Ele pode ser rotulado como “Lite” ou “Turbo” em alguns navegadores.

Quando ativado, um cabeçalho Save-Data é enviado com cada solicitação do navegador:

GET /main.css HTTP/1.0
Host: site.com
Save-Data: on

O servidor pode responder de acordo quando o Save-Data for detectado. No caso do CSS, ele pode enviar um layout linear mais simples, usar uma fonte do SO, mudar para cores de bloco, ou carregar fundos de imagens de baixa resolução.

Note que o servidor deve retornar o seguinte cabeçalho em pedidos modificados para garantir que o conteúdo mínimo não seja colocado em cache e reutilizado quando o usuário desligar o modo Lite/Turbo:

Vary: Accept-Encoding, Save-Data

O cabeçalho também pode ser detectado pelo JavaScript do lado do cliente. O código a seguir adiciona uma classe bestUX ao elemento <html> quando Save-Data não está habilitado:

if ('connection' in navigator && !navigator.connection.saveData) {
  document.documentElement.classList.add('bestUX');
}

As folhas de estilo podem então reagir de acordo sem qualquer manipulação do servidor:

/* no hero image by default */
header {
  background-color: #abc;
  background-image: none;
}
/* hero image when no Save-Data */
.bestUX header {
  background-image: url("hero.jpg");
}

A consulta de mídia de dados preferencialmente reduzidos oferece como alternativa uma opção somente CSS, embora isto não seja suportado em nenhum navegador no momento da redação:

/* no hero image by default */
header {
  background-color: #abc;
  background-image: none;
}
/* hero image when no Save-Data */
@media (prefers-reduced-data: no-preference) {
  header {
    background-image: url("hero.jpg");
  }
}

Resumo

Há muitas opções para otimizar o desempenho do CSS, mas para novos projetos, considere as seguintes práticas:

1. Use uma abordagem mobile-first: Codifique primeiro o layout móvel mais simples, depois adicione melhorias à medida que o espaço na tela e o conjunto de recursos do navegador aumentam.
2. Divida o CSS em arquivos separados com responsabilidades identificáveis: Um pré-processador CSS ou plugin CMS pode combinar partiais CSS em um único arquivo.
3. Adicione uma etapa de construção: Estão disponíveis ferramentas que podem automaticamente forrar o código, identificar problemas, concatenar, minificar, reduzir tamanhos de imagem e muito mais. A automação torna a vida mais fácil, e é menos provável que você esqueça uma etapa de otimização.
4. Documente suas folhas de estilo: Um guia de estilo com exemplos documentados tornará seu código mais fácil de manter. Você será capaz de identificar e remover CSS antigos sem quebrá-lo.

Finalmente, aprenda CSS! Quanto mais você souber, menos código você precisará escrever, e mais rápido será seu aplicativo web. Isso fará de você um desenvolvedor melhor, independentemente de quaisquer plataformas e frameworks que você use.

Que outras dicas você tem para otimizar o desempenho do CSS? Por favor, compartilhe-as na seção de comentários!