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:
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.