Minificar CSS
Os arquivos CSS podem conter caracteres desnecessários, como comentários, espaços em branco e recuos. Na produção, é possível remover esses caracteres com segurança, para reduzir o tamanho do arquivo sem afetar a forma como o navegador processa os estilos. Essa técnica é chamada de minificação.
Carregando CSS não minificado #
Confira o seguinte bloco CSS:
body {
font-family: "Benton Sans", "Helvetica Neue", helvetica, arial, sans-serif;
margin: 2em;
}
/* todos os títulos precisam ter o mesmo plano de fundo, fonte e cor */
h1 {
font-style: italic;
color: #373fff;
background-color: #000000;
}
h2 {
font-style: italic;
color: #373fff;
background-color: #000000;
}
Esse conteúdo é fácil de ler, mas produz um arquivo maior do que o necessário:
- Ele usa espaços para fins de recuo e contém comentários, que são ignorados pelo navegador, então podem ser removidos.
- Os elementos
<h1>
e<h2>
têm os mesmos estilos: em vez de declará-los separadamente, "h1 {...} h2 {...}
", eles podem ser expressos como "h1, h2{...}
". - A cor de plano de fundo
#000000
pode ser expressa apenas como#000
.
Depois de fazer essas alterações, você obtém uma versão mais compacta dos mesmos estilos:
body{font-family:"Benton Sans","Helvetica Neue",helvetica,arial,sans-serif;margin:2em}h1,h2{font-style:italic;color:#373fff;background-color:#000}
Você provavelmente não quer escrever CSS assim. Em vez disso, pode escrever normalmente e adicionar uma etapa de minificação ao processo de desenvolvimento. Neste guia, você aprenderá a fazer isso usando uma ferramenta conhecida de desenvolvimento: o webpack.
Medição #
Você aplicará a minificação de CSS a um site que foi usado em outros guias: o Fav Kitties. Essa versão do site usa uma boa biblioteca CSS (animate.css) para animar diferentes elementos da página quando um usuário vota em um gato 😺.
Primeiro, você precisa entender qual é a oportunidade de minificação desse arquivo:
- Abra a página de medição.
- Digite o URL
https://fav-kitties-animated.glitch.me
e clique em Run Audit (Executar auditoria). - Clique em View report (Exibir relatório).
- Clique em Performance (Desempenho) e acesse a seção Opportunities (Oportunidades).
O relatório resultante mostra que até 16 KB podem ser poupados no arquivo animate.css:

Agora inspecione o conteúdo do CSS:
- Abra o site Fav Kitties no Chrome. Pode demorar um pouco para que os servidores do Glitch respondam pela primeira vez. 1. Press `Control+Shift+J` (or `Command+Option+J` on Mac) to open DevTools.
- Click the Network tab.
- Clique no filtro CSS.
- Marque a caixa de seleção Disable cache (Desativar cache). 1. Reload the app.

A página está solicitando dois arquivos CSS, de 1,9 KB e 76,2 KB, respectivamente.
- Clique em animate.css.
- Clique na guia Response (Resposta) para ver o conteúdo do arquivo.
Observe que a folha de estilo contém caracteres de espaços em branco e recuos:

A seguir, você adicionará alguns plug-ins do webpack ao processo de desenvolvimento para minificar esses arquivos.
Minificação de CSS com webpack #
Antes de pular para as otimizações, dedique algum tempo para entender como funciona o processo de desenvolvimento do site Fav Kitties:
Por padrão, o pacote JS produzido pelo webpack contém o conteúdo dos arquivos CSS embutidos. Como queremos manter arquivos CSS separados, estamos usando dois plug-ins complementares:
- O mini-css-extract-plugin extrai cada folha de estilo para um arquivo próprio, como uma das etapas do processo de desenvolvimento.
- O webpack-fix-style-only-entries é usado para corrigir um problema no wepback 4, evitando a geração de um arquivo JS extra para cada arquivo CSS listado em webpack-config.js.
Agora você fará algumas alterações no projeto:
- Abra o projeto Fav Kitties no Glitch. 1. To view the source, press View Source. 1. Click Remix to Edit to make the project editable. 1. Click Terminal (note: if the Terminal button does not show you may need to use the Fullscreen option).
Para minificar o CSS resultante, você usará o optimize-css-assets-webpack-plugin:
- No console do Glitch, execute
npm install --save-dev optimize-css-assets-webpack-plugin
. - Execute
refresh
para sincronizar as alterações com o editor do Glitch.
Em seguida, volte ao editor do Glitch, abra o arquivo webpack.config.js e faça as seguintes modificações:
Carregue o módulo no início do arquivo:
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
Em seguida, transmita uma instância do plug-in para a matriz plugins:
plugins: [
new HtmlWebpackPlugin({template: "./src/index.html"}),
new MiniCssExtractPlugin({filename: "[name].css"}),
new FixStyleOnlyEntriesPlugin(),
new OptimizeCSSAssetsPlugin({})
]
Depois de fazer as alterações, será acionada uma recriação do projeto. Esta é a aparência do webpack.config.js resultante:
A seguir, você verificará o resultado dessa otimização com as ferramentas de desempenho.
Verificação #
- To preview the site, press View App. Then press Fullscreen
.
Se você se perdeu em alguma das etapas anteriores, clique aqui para abrir uma versão otimizada do site.
Para inspecionar o tamanho e o conteúdo dos arquivos, faça o seguinte:
Press `Control+Shift+J` (or `Command+Option+J` on Mac) to open DevTools.
Click the Network tab.
Clique no filtro CSS.
Marque a caixa de seleção Disable cache (Desativar cache) se ainda não tiver feito isso. 1. Reload the app.

É possível inspecionar esses arquivos e ver se as novas versões não contêm nenhum espaço em branco. Ambos os arquivos são muito menores, principalmente o animate.css, que foi reduzido em aproximadamente 26%, poupando cerca de 20 KB!
Siga esta última etapa:
- Abra a página de medição.
- Insira a URL do site otimizado.
- Clique em View report (Exibir relatório).
- Clique em Performance (Desempenho) e encontre a seção Opportunities (Oportunidades).
O relatório não mostra mais "Minify CSS" (Minificar CSS) como uma oportunidade e foi movido para a seção "Passed Audits" (Auditorias aprovadas):

Como os arquivos CSS são recursos de bloqueio de renderização, se você aplicar a minificação em sites que usam arquivos CSS grandes, poderá ver melhorias nas métricas, como a First Contentful Paint (FCP), ou primeira exibição de conteúdo.
Próximas etapas e recursos #
Neste guia, discutimos a minificação de CSS com o webpack, mas a mesma abordagem pode ser seguida com outras ferramentas de desenvolvimento, como gulp-clean-css para o Gulp ou grunt-contrib-cssmin para o Grunt.
A minificação também pode ser aplicada a outros tipos de arquivos. Confira o guia Minificar e compactar cargas de rede para saber mais sobre as ferramentas de minificação de JS e algumas técnicas complementares, como a compactação.