Minificar CSS

May 2, 2019

Available in: English, Español, and 한국어

Appears in: Tempos de carregamento rápidos

Demian Renzulli

TwitterGitHubGlitch

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:

1. Abra a página de medição.
2. Digite o URL https://fav-kitties-animated.glitch.me e clique em Run Audit (Executar auditoria).
3. Clique em View report (Exibir relatório).
4. 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:

1. 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.
2. Click the Network tab.
3. Clique no filtro CSS.
4. 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.

1. Clique em animate.css.
2. 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:

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

1. No console do Glitch, execute npm install --save-dev optimize-css-assets-webpack-plugin.
2. 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:

1. Press `Control+Shift+J` (or `Command+Option+J` on Mac) to open DevTools.

2. Click the Network tab.

3. Clique no filtro CSS.

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

1. Abra a página de medição.
2. Insira a URL do site otimizado.
3. Clique em View report (Exibir relatório).
4. 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.