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:

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

Blogger CSS
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:


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!

Comentários

  1. ::: Vou seguir todos os passos. Preciso dar uma geral no meu blog mesmo.

    ResponderExcluir
  2. ::: Só para concluir o primeiro comentário: fiz a faxina e percebi meu blog carregando mais rápido. Quando o sistema terminou a geral, encontrou muita, mas muita coisa errada no meu CSS... O blog tá até cheirando limpeza... rs rs

    ResponderExcluir
  3. Se tirar as variaveis algumas partes num vão ficar sem cores pois algumas partes do blog são definidas pelas variaveis.

    ResponderExcluir
  4. @notícia e blog, acho que você não prestou atenção pois a explicação para sua dúvida está no texto:

    Se você não utiliza o recurso Fontes e Cores para personalização sem códigos, do Painel de Controle do Blogger, 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.

    Dê uma olhada no código fonte da sua página quando carregada (CTRL + U). Você vai perceber que as variáveis apesar de definidas no início do CSS, não estão mais presentes no decorrer do código, pois são renderizadas quando a página é carregada.

    Esta renderização toma tempo, por isso é vantagem removê-las, se você não as utiliza...

    Se a remoção das variáveis retirasse as cores, você não poderia vê-las aqui, já que não usamos variáveis no nosso CSS.

    []'s
    Compulsivo

    ResponderExcluir
  5. eu nao vou fazer isso q vo acabar dando fim no meu blog

    nun entendo bulhufas de css ^^

    ResponderExcluir
  6. Tenho muito o que aprender sobre...mais com a parte da compressão ai já vai rolar...!

    ResponderExcluir
  7. Ótimo, ótimo e muito útil esse post! Puxa, como você pensou nessas benditas variáveis. Confesso que já tentei retirar as variáveis, mas, claro, dava erro, pois eu sabia onde começava, mas não quando terminava...rsrs.

    Desculpe-me a ignorância, por favor eu li todo o seu texto, mas só para confirmar uma dúvida: Esse "compressão do código CSS automaticamente" é outra opção caso eu não retire as variáveis manualmente como você me ensinou!?

    Obrigada.

    ResponderExcluir
  8. @Karlla, não a compressão automática é que vai otimizar de fato o seu código CSS. A parte anterior é só para remover as variáveis antes de começar.

    []'s
    Compulsivo

    ResponderExcluir
  9. Ótimo Post.
    Esse negócio Aí, Num Entendo muito Não.
    E tudo Autómatico mesmo.
    Assim que eu Gosto.
    Parabéns.
    Abraços.

    ResponderExcluir
  10. Olá Compulsivo,

    Esses dias eu fui fazer esse processo uns dias atrás e a sidebar acabou ficando toda desconfigurada.

    Desde então tenho um certo receio de usar esse compactador. D=

    Mas qualquer dia eu vou tomar coragem e vou futricar no CSS.

    Abraços!

    ResponderExcluir
  11. Hum, entendi, ou seja um completa o outro! Obrigada, vou arriscar esse trem num blog rascunho primeiro...rsrs.
    Obriga pela resposta e sucesso!

    ResponderExcluir
  12. Opa, valeu Compulsivo!
    Excelente dica. Eu já estava procurando algo assim faz um tempo.
    Valeu mesmo!

    Abçs;
    .::Clau::.

    ResponderExcluir
  13. Geralmente faço manualmente
    a codigos que deixo sem mecher pois ainda quero editar sem me preocupar eme ditar mais de um codigo.

    ResponderExcluir
  14. Um excelente post. O Blogger promete renovação e inovação mas tarda em dar.

    ResponderExcluir
  15. Fiz masss,a sidebar ficou menor,comendo algumas letras...
    Bom, vou tentar mais uma vez.
    Obrigado!

    ResponderExcluir
  16. Mais uma bela dica para o blogspot.
    Vou testar no meu blog!

    ResponderExcluir
  17. Interesssante. Meu blog está meio pesado e vou fazer isso pra tentar dar uma aliviada.

    ResponderExcluir
  18. não entendi quais são estes tais caracteres vermelhos. pode me dizer por favor, se possível poste um screen.

    ResponderExcluir
  19. Post extremamente útil. Exatamente o que eu estava procurando, com todos os detalhes devidamente explicados. Obrigado!

    ResponderExcluir
  20. Valeu compulsivo. Dei uma faxina geral do blog, ficou mais rápido o carregamento!!!

    Abraços!

    ResponderExcluir

Postar um comentário

Postagens mais visitadas deste blog

Nomes de todas as igrejas do Brasil

O que significa DVDRip, DVDScr, R5, etc?

Remover idiomas em arquivos Dual Audio