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:
- Abra a página de medição.
- Digite o URL
https://fav-kitties-animated.glitch.me
e clique em Executar auditoria. - Clique em Ver relatório.
- 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:
- Abra o site Fav Kitties no Chrome. Pode levar um tempo para que os servidores Glitch respondam na primeira vez.
- Pressione "Control + Shift + J" (ou "Command + Option + J" no Mac) para abrir o DevTools.
- Clique na guia Rede.
- Clique no filtro CSS.
- Marque a caixa de seleção Desativar cache.
- Atualize o 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 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:
- Abra o projeto Fav Kitties no Glitch.
- Para ver a fonte, pressione View Source.
- Clique em Remixar para editar e torne o projeto editável.
- 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:
- No console do Glitch, execute
npm install --save-dev optimize-css-assets-webpack-plugin
. - 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:
- Pressione "Control + Shift + J" (ou "Command + Option + J" no Mac) para abrir o DevTools.
- Clique na guia Rede.
- Clique no filtro CSS.
- Marque a caixa de seleção Desativar cache, caso ainda não esteja ativada.
- 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:
- Abra a página de medição.
- Insira o URL do site otimizado.
- Clique em Ver relatório.
- 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.