Compactar CSS

Demián Renzulli

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 seguinte bloco de CSS:

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;
}

Esse conteúdo é fácil de ler, mas gera um arquivo maior que o necessário:

• Ela usa espaços para fins de recuo e contém comentários, que são ignorados pelo navegador e podem ser removidos.
• Os elementos <h1> e <h2> têm os mesmos estilos: em vez de serem declarados separadamente: "h1 {...} h2 {...}" elas podem ser expressas como "h1, h2{...}".
• A background-color, #000000, pode ser expressada apenas como #000.

Depois de fazer essas alterações, você obteria 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, escreva CSS normalmente e adicione uma etapa de minificação ao processo de criação. Neste guia, você aprenderá a fazer isso usando uma ferramenta de build conhecida: o webpack.

Medir

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

Para começar, é preciso entender qual seria a oportunidade depois de reduzir esse 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 acesse a seção Oportunidades.

O relatório resultante mostra que até 16 KBs 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 os servidores do Glitch responderem 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 Resposta para conferir o conteúdo do arquivo.

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

Em seguida, você vai adicionar alguns plug-ins de webpack ao processo de build para reduzir esses arquivos.

Minificação de CSS com o webpack

Antes de começar as otimizações, reserve um tempo para entender como funciona o processo de criação do site Fav Kitties:

Por padrão, o pacote JS resultante produzido pelo webpack teria 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 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, de modo a evitar 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:

1. Abra o projeto Fav Kitties no Glitch.
2. Para conferir a fonte, pressione Ver código-fonte.
3. Clique em Remixar para editar para tornar 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 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 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 alterações, a recriação do projeto será acionada. O webpack.config.js resultante ficará assim:

A seguir, você vai verificar o resultado dessa otimização com ferramentas de desempenho.

Verificar

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

Se você perdeu alguma etapa anterior, clique aqui, para abrir uma mais recente 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 tenha feito isso.
5. Atualize o app.

Inspecione esses arquivos e verifique se as novas versões não contêm espaços em branco. Ambos os arquivos são muito menores, em particular, o animate.css foi reduzido em ~26%, economizando ~20 KB.

Como 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 "Minificar CSS". como "Oportunidade" e foi movida para "Auditorias aprovadas" seção:

Como os arquivos CSS são recursos bloqueadores de renderização, se você aplicar a minificação em sites que usam arquivos CSS grandes, poderá notar melhorias em métricas como a First Contentful Paint.

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 compilação, como gulp-clean-css para o Gulp ou grunt-contrib-cssmin para Grunt.

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