Compactar CSS

A seção "Oportunidades" do relatório do Lighthouse lista todos os arquivos CSS não reduzidos, além da possível economia em kibibytes (KiB) quando esses arquivos estão minificados:

Uma captura de tela da auditoria do CSS Minify do Lighthouse

Como a redução de arquivos CSS pode melhorar o desempenho

A redução de arquivos CSS pode melhorar o desempenho de carregamento da página. Os arquivos CSS geralmente são maiores do que o necessário. Exemplo:

/* Header background should match brand colors. */
h1 {
  background-color: #000000;
}
h2 {
  background-color: #000000;
}

Pode ser reduzido a:

h1,
h2 {
  background-color: #000000;
}

Do ponto de vista do navegador, esses dois exemplos de código são funcionalmente equivalentes, mas o segundo usa menos bytes. Os minimizadores podem melhorar ainda mais a eficiência de bytes removendo os espaços em branco:

h1,
h2 {
  background-color: #000000;
}

Alguns minificadores empregam truques inteligentes para minimizar os bytes. Por exemplo, o valor de cor #000000 pode ser ainda mais reduzido para #000. que é sua abreviação equivalente.

O Lighthouse mostra uma estimativa do potencial de economia nos comentários e espaços em branco que encontrar no CSS. Essa é uma estimativa conservadora. Como mencionado antes, minimizadores podem realizar otimizações inteligentes (como reduzir #000000 a #000). para reduzir ainda mais o tamanho do arquivo. Então, se você usar um minificador, talvez você note uma economia maior do que os relatórios do Lighthouse.

Usar um minificador de CSS para diminuir o código CSS

No caso de sites pequenos que não são atualizados com frequência, use um serviço on-line para reduzir seus arquivos manualmente. Você cola o CSS na UI do serviço, e ele retorna uma versão reduzida do código.

Para desenvolvedores profissionais, configure um fluxo de trabalho automatizado que reduz o CSS automaticamente antes de implantar o código atualizado. Isso geralmente é feito com uma ferramenta de criação como Gulp ou Webpack.

Saiba como reduzir seu código CSS em Minificar CSS.

Orientação específica da pilha

Drupal

Ative Agregar documentos CSS em Administração > Configuração > Desenvolvimento. Também é possível configurar opções de agregação mais avançadas por meio de módulos adicionais para acelerar seu site concatenando, reduzindo e compactando seu CSS estilos.

Joomla

Várias extensões Joomla pode acelerar seu site concatenando, reduzindo e compactando seu CSS estilos. Há também modelos que oferecem essa funcionalidade.

Magento

Ative a opção Minificar arquivos CSS. nas configurações de desenvolvedor da loja.

Reação

Se seu sistema de compilação reduz os arquivos CSS automaticamente, verifique se você está implantar o build de produção do seu aplicativo. Verifique isso com as ferramentas para desenvolvedores do React .

WordPress

Vários plug-ins do WordPress podem acelerar concatenando, reduzindo e compactando seus estilos. Você também pode querer usar um processo de build para fazer essa minificação antecipadamente, se possível.

Recursos