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 são reduzidos:
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 deveriam. Exemplo:
/* Header background should match brand colors. */
h1 {
background-color: #000000;
}
h2 {
background-color: #000000;
}
Pode ser reduzido a:
h1,
h2 {
background-color: #000000;
}
Da perspectiva 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 os 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 ainda mais reduzido a #000,
que é a abreviação equivalente.
O Lighthouse fornece uma estimativa de economia em potencial com base
nos comentários e caracteres de espaço em branco encontrados no seu CSS.
Essa é uma estimativa conservadora.
Como mencionado anteriormente,
os minimizadores podem realizar otimizações inteligentes (como reduzir #000000 a #000)
para diminuir ainda mais o tamanho do arquivo.
Portanto, se você usar um minificador,
poderá ter mais economia do que os relatórios do Lighthouse.
Usar um minificador de CSS para reduzir o código CSS
Para sites pequenos que você não atualiza com frequência, provavelmente é possível usar um serviço on-line para reduzir manualmente seus arquivos. Você cola o CSS na interface do serviço e ele retorna uma versão reduzida do código.
Os desenvolvedores profissionais provavelmente querem configurar 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ções específicas para a pilha
Drupal
Ative Agregar arquivos CSS em Administração > Configuração > Desenvolvimento. Também é possível configurar opções de agregação mais avançadas com módulos adicionais para acelerar o site, concatenando, minificando e compactando os estilos CSS.
Joomla
Várias extensões Joomla podem acelerar seu site concatenando, minificando e compactando seus estilos CSS. Há também modelos que oferecem essa funcionalidade.
Magento
Ative a opção Minimizar arquivos CSS nas configurações do desenvolvedor da sua loja.
Reação
Se o sistema de compilação reduzir os arquivos CSS automaticamente, verifique se você está implantando o build de produção do seu aplicativo. É possível verificar isso com a extensão das Ferramentas para desenvolvedores do React.
WordPress
Vários plug-ins do WordPress podem acelerar seu site concatenando, minificando e compactando seus estilos. Você também pode usar um processo de compilação para fazer essa minificação antecipadamente, se possível.