Compactar CSS

Os arquivos CSS podem conter caracteres desnecessários, como comentários, espaços em branco e recuo. Na produção, esses caracteres podem ser removidos 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 reduzido

Confira o bloco de CSS a seguir:

body {
  font-family: "Benton Sans", "Helvetica Neue", helvetica, arial, sans-serif;
  margin: 2em;
}

/* all titles need to have the same font, color and background */
h1 {
  font-style: italic;
  color: #373fff;
  background-color: #000000;
}

h2 {
  font-style: italic;
  color: #373fff;
  background-color: #000000;
}

Este conteúdo é fácil de ler, mas o arquivo pode ser 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, para que possam 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 background-color #000000 pode ser expressa como apenas #000.

Depois de fazer essas mudanças, você teria 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 um CSS assim. Em vez disso, é possível programar CSS como de costume e adicionar uma etapa de minificação ao processo de compilação. Neste guia, você vai aprender a fazer isso usando uma ferramenta de build muito usada: o webpack.

Medida

Você vai aplicar a minificação de CSS a um site que já foi usado em outros guias: Gatinhos favoritos. Esta versão do site usa uma biblioteca CSS interessante: animate.css, para animar diferentes elementos da página quando um usuário vota em um gato Fullscreen.

Como primeiro passo, você precisa entender qual seria a oportunidade após a redução desse arquivo:

1. Abra a página de medição.
2. Digite o URL https://fav-kitties-animated.glitch.me e clique em Executar auditoria.
3. Clique em Ver relatório.
4. Clique em Desempenho e vá para a seção Oportunidades.

O relatório resultante mostra que até 16 KB podem ser salvos do arquivo animate.css:

Agora inspecione o conteúdo do CSS:

1. Abra o site Fav Kitties no Chrome. Pode levar um tempo para que os servidores Glitch respondam na primeira vez.
2. Pressione "Control + Shift + J" (ou "Command + Option + J" no Mac) para abrir o DevTools.
3. Clique na guia Rede.
4. Clique no filtro CSS.
5. Marque a caixa de seleção Desativar cache.
6. Atualize o app.

A página está solicitando dois arquivos CSS, de 1,9 KB e 76,2 KB, respectivamente.

1. Clique em animate.css.
2. Clique na guia Response para ver o conteúdo do arquivo.

Observe que a folha de estilo contém caracteres para espaços em branco e recuo:

Em seguida, você adicionará alguns plug-ins do webpack ao seu processo de compilação para reduzir esses arquivos.

Minificação de CSS com webpack

Antes de passar para as otimizações, reserve um tempo para entender como funciona o processo de compilação do site Fav Kitties (link em inglês):

Por padrão, o pacote JS resultante produzido pelo webpack tem o conteúdo in-line dos arquivos CSS. Como queremos manter arquivos CSS separados, estamos usando dois plug-ins complementares:

• O mini-css-extract-plugin extrai cada folha de estilo no próprio arquivo, como uma das etapas do processo de compilação.
• O webpack-fix-style-only-entries é usado para corrigir um problema no Wepback 4 e evitar a geração de um arquivo JS extra para cada arquivo CSS listado em webpack-config.js.

Agora você fará algumas mudanças no projeto:

1. Abra o projeto Fav Kitties no Glitch.
2. Para ver a fonte, pressione View Source.
3. Clique em Remixar para editar e torne o projeto editável.
4. Clique em Terminal. Observação: se o botão "Terminal" não aparecer, talvez seja necessário usar a opção "Tela cheia".

Para reduzir o CSS resultante, use o optimize-css-assets-webpack-plugin:

1. No console do Glitch, execute npm install --save-dev optimize-css-assets-webpack-plugin.
2. Execute refresh para que as mudanças sejam sincronizadas com o editor do Glitch.

Em seguida, volte para o 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: js const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");

Em seguida, transmita uma instância do plug-in para a matriz plugins: js plugins: [ new HtmlWebpackPlugin({template: "./src/index.html"}), new MiniCssExtractPlugin({filename: "[name].css"}), new FixStyleOnlyEntriesPlugin(), new OptimizeCSSAssetsPlugin({}) ] Depois de fazer as mudanças, a recriação do projeto vai ser acionada. O webpack.config.js resultante vai ficar assim:

Em seguida, você vai verificar o resultado dessa otimização com as ferramentas de performance.

Verificar

• Para visualizar o site, pressione Ver app e Tela cheia .

Caso você tenha se perdido em alguma etapa anterior, clique aqui para abrir uma versão otimizada do site.

Para inspecionar o tamanho e o conteúdo dos arquivos:

1. Pressione "Control + Shift + J" (ou "Command + Option + J" no Mac) para abrir o DevTools.
2. Clique na guia Rede.
3. Clique no filtro CSS.
4. Marque a caixa de seleção Desativar cache, caso ainda não esteja ativada.
5. Atualize o app.

Você pode inspecionar esses arquivos e ver que as novas versões não contêm espaços em branco. Ambos os arquivos são muito menores. Especificamente, o animate.css foi reduzido em ~26%, economizando aproximadamente 20 KB.

Na etapa final:

1. Abra a página de medição.
2. Insira o URL do site otimizado.
3. Clique em Ver relatório.
4. Clique em Desempenho e localize a seção Oportunidades.

O relatório não mostra mais "Minificar CSS" como "Oportunidade". Ele foi movido para a seção "Auditorias aprovadas":

Como os arquivos CSS são recursos que bloqueiam a renderização, se você aplicar a minificação em sites que usam arquivos CSS grandes, vai conseguir ver melhorias em métricas como a Primeira exibição de conteúdo.

Próximas etapas e recursos

Neste guia, abordamos a minificação de CSS com o webpack, mas a mesma abordagem pode ser seguida com outras ferramentas de build, como gulp-clean-css para Gulp ou grunt-contrib-cssmin para Grunt.

A minificação também pode ser aplicada a outros tipos de arquivos. Confira o guia Minimizar e compactar payloads de rede para saber mais sobre as ferramentas para reduzir o JS e algumas técnicas complementares, como a compactação.