Compactar CSS

A seção "Oportunidades" do seu relatório do Lighthouse lista todos os arquivos CSS não minificados, junto com a possível economia em kibibytes (KiB) quando esses arquivos são minificados:

Captura de tela da auditoria de minificação de CSS do Lighthouse

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

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

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

Pode ser reduzido para:

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

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

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

Alguns minificadores usam truques inteligentes para minimizar bytes. Por exemplo, o valor de cor #000000 pode ser reduzido ainda mais para #000, que é o equivalente abreviado.

O Lighthouse fornece uma estimativa de economias potenciais com base nos comentários e caracteres de espaço em branco encontrados no CSS. Essa é uma estimativa conservadora. Como mencionado anteriormente, os minificadores podem realizar otimizações inteligentes (como reduzir #000000 para #000) para reduzir ainda mais o tamanho do arquivo. Portanto, se você usar um minificador, poderá ter mais economia do que o que o Lighthouse informa.

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

Para sites pequenos que você não atualiza com frequência, provavelmente pode usar um serviço on-line para reduzir manualmente seus arquivos. Você cola o CSS na UI do serviço, e ele retorna uma versão reduzida do código.

Para desenvolvedores profissionais, provavelmente você vai querer configurar um fluxo de trabalho automatizado que reduza o CSS automaticamente antes de implantar o código atualizado. Isso geralmente é feito com uma ferramenta de build, como Gulp ou Webpack.

Aprenda a reduzir o código CSS em Reduzir CSS.

Orientações específicas para a pilha

Drupal

Verifique se você ativou a opção "Agregar documentos CSS" na página "Administração » Configurações » Desenvolvimento". estilos.

Joomla

Várias extensões do Joomla podem acelerar seu site concatenando, reduzindo e compactando seus estilos css. Há também modelos que fornecem essa função.

Magento

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

Reação

Se o sistema de build reduzir os arquivos CSS automaticamente, verifique se você está implantando o build de produção do seu aplicativo. Você pode verificar isso com a extensão de Ferramentas para Desenvolvedores do React.

WordPress

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

Recursos