A seção Oportunidades de seu relatório do Lighthouse lista todos os arquivos CSS não minificados, junto com a economia potencial em kibibytes (KiB) quando esses arquivos são minificados:
Como arquivos CSS minificados podem melhorar o desempenho
Minificar arquivos CSS pode melhorar o desempenho do carregamento da página. Os arquivos CSS geralmente são maiores do que precisam ser. Por 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 2 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 empregam truques inteligentes para minimizar bytes. Por exemplo, o valor da cor #000000 pode ser ainda mais reduzido para #000, que é o equivalente abreviado.
O Lighthouse fornece uma estimativa de economia potencial com base nos comentários e caracteres de espaço em branco que encontra em seu CSS. Esta é uma estimativa conservadora. Conforme 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á ver mais economia do que o Lighthouse relata.
Use um minificador CSS para minificar seu código CSS
Para sites pequenos que você não atualiza com frequência, provavelmente você pode usar um serviço online para minificar manualmente seus arquivos. Você cola seu CSS na IU do serviço e ele retorna uma versão minificada do código.
Para desenvolvedores profissionais, você provavelmente deseja configurar um fluxo de trabalho automatizado que minifica seu CSS automaticamente antes de implantar o código atualizado. Isso geralmente é feito com uma ferramenta de construção como Gulp ou Webpack.
Aprenda como minificar seu código CSS em Minificar CSS.
Orientação específica de pilha
Drupal
Ative os arquivos CSS agregados em Administração > Configuração > Desenvolvimento. Você também pode configurar opções de agregação mais avançadas por meio de módulos adicionais para acelerar seu site concatenando, minificando e compactando seus estilos de CSS.
Joomla
Uma série de extensões Joomla podem acelerar seu site concatenando, minimizando e compactando seus estilos de css. Também existem modelos que fornecem essa funcionalidade.
Magento
Ative a opção Minificar arquivos CSS nas configurações de desenvolvedor da sua loja.
React
Se o seu sistema de construção minifica os arquivos CSS automaticamente, certifique-se que você está implantando a construção de produçãodo seu aplicativo. Você pode verificar isso com a extensão React Developer Tools.
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 construção para fazer essa minificação antecipadamente, se possível.
Recursos
Updated on • Improve article