Otimização e compressão do CSS no Blogger

Não basta só navegar. Otimizar também é preciso...

Uma das principais etapas na construção de um template é a otimização do seu código fonte. Apesar de não trazer nenhum benefício estético aparente, a otimização trará resultados no tempo de carregamento da página, o que melhora muito a experiência do seu leitor.

A otimização do código fonte do seu template também ajuda a melhorar a indexação do seu blog junto aos mecanismos de busca. A lógica é simples: quanto menos lixo no seu código, mais fácil para os robôs do Google (e outros indexadores) trabalharem.

Apesar da sua grande importância, a otimização do código é solenemente ignorada por muita gente que se aventura na manipulação dos templates do Blogger. A maioria preocupa-se apenas com a aparência, deixando de lado o que ocorre por baixo dos panos.

Você acaba encontrando templates que tem definições de formatação repetidas ou redundantes para um mesmo elemento HTML. Incompatibilidade entre navegadores, variáveis que nunca mais serão utilizadas e muitos outros problemas invisíveis, que atrapalham o bom desempenho da sua página.


Otimização / Compressão do código CSS no Blogger

Existem diversas otimizações que podem ser feitas no seu template, hoje vamos falar apenas da otimização e compressão CSS para blogs hospedados no Blogspot, que basicamente consiste em retirar todos os excessos do código como variáveis, comentários e redundâncias.

É importante que você já tenha concluído toda a parte estética e de design do seu template antes de começar, pois após esta otimização ficará um pouco mais difícil personalizar o CSS no seu blog. Esta não é uma alteração muito complicada, mas é importante tomar algumas precauções antes de começar:

- Faça um backup completo do seu template;
- Por precaução crie um clone do seu blog, sem estas otimizações;

Para começar acesse através do Mozilla Firefox o blog cujo código CSS do template você deseja otimizar. Exiba o código fonte da página, através do menu Exibir / Código-fonte ou atalho Crtl + U e copie no bloco de notas o código CSS, que no caso já deve estar sem as variáveis.

As variáveis de fontes e cores são úteis apenas para quem costuma utilizar a opção Fontes e Cores para personalização sem códigos, do Painel de Controle do Blogger. Se você não utiliza este recurso, pode eliminar tranqüilamente todas as variáveis do seu código CSS. Pois elas são resolvidas pelo navegador durante o carregamento da página.

A parte mais complicada para os leigos é identificar onde começa e termina o código CSS que deve ser copiado. No exemplo abaixo estou exibindo o início e o final do código no template padrão Mínima White:

Início do código CSS, copie a partir deste ponto.


Final do código CSS, copie até este ponto.

Depois de identificar e copiar o trecho de código correspondente as definições CSS do seu template, cole o conteúdo num arquivo do Bloco de Notas e salve num local seguro.

Você pode fazer a otimização manualmente, mas seria muito demorado e trabalhoso. Por isso existem diversos sites que fazem a compressão do código CSS automaticamente. Meu preferido, por uma questão de inércia, é o Clean CSS:

Otimize códigos CSS automaticamente como Clean CSS.

O funcionamento do site não poderia ser mais simples: Cole seu código original, escolha o nível de compressão, balanceando entre legibilidade e tamanho do código, entre outras opções adicionais.

Em seguida clique em Process CSS e será gerada uma versão otimizada do seu código. O nível de compressão pode chegar a mais de 30% na configuração mais agressiva:

Opções de otimização e compressão do CleanCSS.

Feito isto, copie o código otimizado num novo arquivo do Bloco de Notas, salve em local seguro e vamos substituir o seu CSS original por este código otimizado que acabamos de gerar.

Acesse a opção Editar HTML na aba Layout do Painel de Controle do Blogger. Substitua tudo o que estiver compreendido entre as linhas abaixo, pelo código otimizado que você gerou anteriormente:

<b:skin><![CDATA[/*

Substitua todo o conteúdo entre estas duas linhas pelo
código otimizado que você gerou com ajuda do CleanCSS.

Atenção: Os caracteres destacados em vermelho, devem ser removidos!

]]></b:skin>

Visualize para testar. Se não ocorrer nenhum erro e o layout do seu blog for exibido corretamente, pode salvar que está pronto!