Chegamos à um dos principais pontos do Curso: o Template. é ele que o navegador lê quando o usuário digita o endere?o do seu blog, e que chama os outros elementos (postagens, imagens, widgets). Nesta etapa nós veremos 10 dicas muito importantes para alterar o código fonte do seu template e tornar seu blog mais leve, reduzindo o tempo de carregamento.
Ent?o vamos lá, acesse o seu Painel do Blogger e selecione Layout, ent?o clique em Editar HTML para entrar no modo de edi??o do código do seu Template (como na imagem abaixo).
Caso sinta muita dificuldade para fazer a edi??o do HTML, considere ler alguns textos sobre a linguagem e também sobre CSS, que define os estilos de objetos e textos dentro do seu template.
N?o se esque?a de fazer o backup do seu template antes de realizar as altera??es no código, clicando em Baixar modelo completo. Além disso, antes de salvar as altera??es à cada passo, visualize seu template para verificar se tudo está funcionando corretamente.
Remova Meta Tags desnecessárias
Mantenha somente as Meta Tags necessárias como a Title (nome do site), Description (descri??o do site) e Keywords (palavras-chaves).

Otimize o CSS do Template
Você pode simplificar a parte CSS do código utilizando o Otimizador do site CleanCSS e inserindo na caixa de texto do site tudo que estiver entre as tags <b:skin><![CDATA[/* e ]]></b:skin> do seu Template, ent?o clique em Process CSS. Ele vai gerar a vers?o compactada do CSS, ent?o é só copiar o texto e substituir o original na edi??o de HTML do seu Template.

Remova os espa?os e linhas em branco
Espa?os e linhas em branco no código consomem espa?o no arquivo. Removê-los torna o carregamento do blog mais rápido, porém pode dificultar edi??es posteriores. Ent?o remova ao menos os desnecessários.

Remova as Tags </p>
Enquanto as tags <p> iniciam os parágrafos, as tags </p> os encerram. No entanto, as tags </p> n?o s?o essenciais para o funcionamento do parágrafo e podem ser removidas. Use a pesquisa do seu navegador para encontrar as tags </p> e remova-as.

Remova os comentários do código
Comentários s?o trechos do código que n?o s?o levados em conta pelo navegador na hora de renderizar a página e tem apenas a fun??o de auxiliar a edi??o, mas mesmo assim aumentam o tamanho total do arquivo. Se você já está familiarizado com o template ou n?o utiliza os comentários, remova-os. Comentários utilizam uma marca??o diferente, por exemplo /**** Comentário****/, <!–Comentário–!> e //Comentário. Note que alguns scripts/hacks utilizam os comentários para funcionar, ent?o verifique antes de apagar.

Use a barra (/) no fim das URLs
Endere?os com barras no fim abrem mais rapidamente. Por exemplo, http://www.meusite.com.br/ abre mais rápido que http://www.meusite.com.br . O mesmo vale para diretórios, como http://www.meusite.com.br/forum/. Portanto, utilize a barra ao criar links no template. No entanto, você n?o deve acrescentar a barra à endere?os que terminam com extens?es de arquivo (.html ou .jpg, por exemplo).

Defina altura e largura para imagens
Quando você utilizar alguma imagem no seu template, n?o se esque?a de determinar altura (height) e largura (width). Quando esse atributo n?o é definido, o navegador é obrigado a determinar esses valores antes de continuar com o carregamento do restante do blog. O código de uma imagem com altura e largura definida fica assim:
<img src="endere?o URL da imagem" width="largura" height="altura"/>
Para descobrir a altura e largura das imagens, vá em
Propriedades clicando com o bot?o direito em cima da imagem. O tamanho é determinado em
pixels.

Abrevie o código
O processo realizado no item 2 já faz esse tipo de modifica??o na parte CSS do código. Esta dica é para quem já tem alguma no??o de HTML e assim integrar esses conceitos no restante do código e nas próximas edi??es que você fizer. As abrevia??es de código ajudam a diminuir o tamanho do arquivo sem que nada se perca. Por exemplo, as abrevia??es de cor, que reduzem o código de 6 dígitos para 3: - Laranja: #ff9900 pode ser abreviado para #f90
- Preto: #000000 pode ser abreviado para #000
- Amarelo: #ffff00 pode ser abreviado para #ff0
- Azul Claro: #69C7E8 n?o pode ser abreviado
é fácil entender a lógica da abrevia??o, e tendo em mente os valores abreviados é só fazer a substitui??o. Também é possível abreviar medidas, como no exemplo:
- Margin: 0 0 0 0; pode ser abreviado para Margin: 0;
- Margin: 0px; pode ser abreviado para Margin: 0; pois o zero n?o depende de qual sistema métrico é escolhido.
- Margin: 0 10px 0 0; pode ser abreviado para Margin: 0 10px; pois o que n?o é colocado é sempre entendido como 0;
Da mesma forma, é possível abreviar várias linhas de código em uma, como no exemplo:
Original | Abreviado |
body { border: 5px none #000; font: Verdana; font-size: 12px; text-align: center; margin: 0; padding: 0; } | body{border:5px none #000;font:Verdana;font-size:12px;text-align:center;margin:0;padding:0;} |

Avalie o desempenho dos Scripts/Hacks
N?o cometa o erro de colocar scripts/hacks (resumos de postagens, contador de usuários, etc) no seu template e esquecer-se deles. Fa?a uma avalia??o durante uma semana de como eles est?o afetando o tempo de carregamento e a usabilidade do seu blog e determine se o benefício proporcionado por ele é superior ao peso a mais na página. Se você já tem vários instalados em sua página, sugiro que fa?a um backup do código e remova todos. Ent?o verifique a diferen?a no carregamento da página e determine quais devem voltar ou n?o.

Remova entradas redundantes
Esta recomenda??o exige um conhecimento intermediário de HTML. Existem muitas formas de se cometer redundancia no código, por exemplo: um estilo de Título (Header) que vá manter a mesma fonte do corpo, n?o precisa declarar novamente a fonte a ser usada, já que ela vai herdar a fonte do corpo. O mesmo vale para cores, alinhamento e outras configura??es. Da mesma forma você deve eliminar elementos desnecessários, como classes CSS n?o usadas e defini??es vazias como background:url(), border:none e outras.
Na próxima etapa, vamos aprender a otimizar as imagens do seu blog e alguns truques para tirar o melhor delas. Ir para a Parte 4 >>