Template iceBooster + Guia de Implementa??o (eBook)

O template iceBooster tem como sua principal fun??o a rapidez e leveza, permitindo que o blog seja carregado muito mais rápido e manipulado pelo leitor com maior suavidade (em computadores e browsers de baixa performance), devido à compacta??o do código, imagens e páginas. Além disso, o iceBooster é totalmente personalizável através da op??o Fontes e Cores e Elementos de Página, além de incluir os Hacks:

• Somente títulos nas páginas de arquivo e marcadores
• Removendo o link “Postagens (Atom)” do rodapé do Blogger
• Removendo a Navbar do Blogger.

O template iceBooster foi testado e otimizado com o curso Blogger Rápido - iceBreaker.

Para utilizar o iceBooster gratuitamente, n?o retire os créditos contidos no rodapé do template. Quer distribuir o iceBooster no seu blog? Entre em contato.

Com o apoio do blog UsuárioCompulsivo, o iceBreaker disponibiliza hoje seu primeiro eBook (livro digital) da série Blogger, o Blogger Rápido, que vai ajudar você a otimizar seu blog, tornando-o mais leve e rápido e assim potencializando a volta de seus leitores. O download é gratuito, e você também pode acessar o conteúdo em forma de postagens.

Otimizou seu Blog com o eBook? Ent?o coloque o selo Blogger Rápido em seu blog, com link para esta página.

 

O iceBreaker preparou um mini-curso em 7 partes para ajudar você a otimizar seu blog – especialmente para os hospedados no Blogger/Blogspot -, deixando-o muito mais rápido e assim facilitando a indexa??o pelos mecanismos de busca e aumentando a satisfa??o e navegabilidade do leitor.

1. A Importancia da Rapidez num Blog
2. O que fazer para tornar seu blog mais rápido?
3. 10 dicas para Otimizar o Código do seu Blog
4. Otimizando as Imagens do seu Blog
5. Como escrever postagens mais limpas e que carregam mais rápido
6. Otimizando os Widgets para tornar seu blog mais Rápido
7. Comparando os Resultados: seu blog está mais rápido?

Chegamos ao fim do processo de otimiza??o. Agora, vamos comparar os resultados que obtivemos no início, antes das otimiza??es, com os atuais. Ent?o vamos lá, acesse novamente o SpeedTester, digite seu endere?o do seu blog e o resultado para a soma solicitada e clique em Submit. Apenas relembrando, verifique o item Speed (Medi??o de velocidade média), Estimated Load Time (tempo de carregamento estimado em vários tipos de conex?o) e para os tamanhos totais de CSS, JavaScript e Images (tamanho em bytes da soma desses elementos).

Se ainda assim você quiser otimizar mais o seu blog, vou apresentar uma última alternativa: o analisador de sites do WebSiteOptimization.com (em inglês). Basta digitar o endere?o do seu blog que ele fará uma análise, e na última parte do relatório, recomendará modifica??es. Os itens em Verde já est?o otimizados; os itens em Amarelo ainda podem ser otimizados; já os itens em Vermelho s?o críticos e devem ser otimizados. Leve em conta que o analisador verifica sua página como um todo no estado atual, ou seja, depende muito das postagens que est?o na página inicial.

E assim chegamos ao fim do curso de otimiza??o Blogger Rápido. Para mais textos e dicas veja o índice Blogger do iceBreaker.

Agora vamos otimizar seus widgets para que eles n?o atrapalhem o carregamento do seu blog. S?o 5 dicas essenciais:

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 aqueles Widgets que você n?o precisa realmente
Widgets s?o ancorados ao seu template e podem diminuir o tempo de carregamento, portanto n?o exagere. Mais cuidado ainda com os Widgets n?o-oficiais e que dependem de arquivos JavaScript.

Avalie o impacto na navega??o 
Verifique se os widgets que você utiliza têm algum impacto positivo na navega??o para o usuário. Sempre avalie o funcionamento dos Widgets antes de decidir mantê-los. Um widget a menos pode fazer a diferen?a no tempo de carregamento do seu blog.

Otimize o posicionamento dos Widgets
Dê preferência à colocá-los (ao menos os mais pesados) na Sidebar Direita ou no Rodapé, assim eles ser?o carregados depois do conteúdo principal do Blog, por uma quest?o de posicionamento no código. Se você tem maior conhecimento em HTML, utilize posicionamento absoluto para os Widgets, assim permitindo que eles fiquem no fim do código.

Incorpore Widgets HTML no código

 

 

Se você utiliza Widgets dos tipo HTML/JavaScript, insira-os diretamente no código HTML do template, assim você elimina muitas linhas extras de código. Para fazer isso, é só dar um título ao seu widget HTML (para facilitar a localiza??o no código), encontrar a entrada no código através desse título (utilizando o Ctrl+F do seu navegador) e substituir o código do widget pelo código contido no Widget (como na imagem acima). Ao fazer isso, o widget original é excluído automaticamente, mas a funcionalidade permanece.

N?o use Rádios ou outros tipos de Players no seu Blog

Um dos grandes inc?modos para o usuário hoje em dia (e que compromete muito o tempo de carregamento da página), é quando ele visita um blog e leva um susto ao ver que uma rádio come?ou a tocar sem que ele pedisse. N?o coloque esse tipo de widget no seu blog. Se uma rádio é relevante ao seu conteúdo, coloque apenas um link para ela. Lembre-se: as pessoas n?o gostam de se sentir obrigadas a fazer e muito menos ouvir nada, como vimos na Parte 1. 

Na próxima etapa, vamos comparar os resultados obtidos e conhecer um último recurso para resolver problemas específicos de velocidade no seu blog. Ir para a Parte 7 >>

Agora que você já otimizou seu template e suas imagens é hora de tornar suas postagens mais limpas, adquirindo alguns hábitos e tomando alguns cuidados que far?o com que suas postagens sejam carregadas e indexadas mais rapidamente.

N?o exagere na formata??o
Formata??es simples geram menos código e mantêm a unidade do blog. Se tiver que usar formata??es mais elaboradas, crie classes CSS no seu template e as use. Veja a quantidade de código que é gerada pelas formata??es excessivas:

Resultado	Código
Composto por template, imagens e postagens.	<strong><em><u>Composto por template, imagens e postagens.</u></em></strong>
Composto por template, imagens e postagens.	<strong>Composto por template, imagens e postagens.</strong>

Formata??es em grupo
Formatar palavras individualmente gera muitas tags no código HTML da postagem. Formatar em grupo geralmente produz o mesmo resultado. Veja o exemplo:

Resultado	Código
Composto por template, imagens e postagens.	Composto por <strong>template</strong>, <strong>imagens</strong> e <strong>postagens</strong>.
Composto por template, imagens e postagens.	Composto por <strong>template, imagens e postagens.</strong>

Remova os espa?os e linhas em branco, Defina altura e largura para imagens e Abrevie o código
Como vistos na Parte 3.

N?o use tabelas 

O n?o-uso de tabelas é o que chamamos de Tableless, e é uma prática muito comum hoje em dia. Porém, os editores de postagens (como o Windows Live Writer) ainda oferecem o recurso para inserir tabelas. As tabelas geram muito código e podem provocar problemas de posicionamento em alguns navegadores.

N?o use Flash
A n?o ser que você seja experiente em Adobe Flash e consiga criar arquivos leves, evite o uso em suas postagens. YouTube, Slideshows e vários outros widgets também s?o feitos em Flash e pesam na hora do carregamento. Cabe a você determinar se esse conteúdo é relevante o suficiente para colocá-lo, na hora de postar.

Na próxima etapa – a penúltima parte do curso –, vamos aprender a otimizar os widgets do seu blog. Ir para a Parte 6 >>

Agora é hora de otimizar os elementos que s?o chamados pelo template, sendo o principal deles, as imagens (afinal, dificilmente você n?o utilizará nenhuma imagem no seu blog). Hoje vamos aprender como fazer a otimiza??o das imagens para que elas carreguem mais rapidamente ou carreguem de forma diferente.

Mas antes disso, 3 dicas importantes sobre o uso de imagens em blogs:

Use o mínimo de imagens possível

Mas tome cuidado para n?o empobrecer o seu blog. Tente n?o pecar, nem pela falta, nem pelo excesso.

Dê preferências ao uso de miniaturas

As miniaturas n?o obrigam a pessoa a fazer o download completo de imagens que ela n?o tem interesse. Se ela tiver, vai clicar na imagem e ver em tamanho grande. E, obviamente, ajudam a poupar tempo na hora do carregamento da página.

Hospede suas imagens em mais de um servidor

Os navegadores permitem downloads simultaneos de imagens em servidores diferentes. Ou seja, se você hospedar todas as imagens num único servidor, elas ser?o carregadas uma após à outra, mas se hospedar em vários, elas ser?o carregadas simultaneamente, o que pode melhorar muito a velocidade do seu blog, dependendo da quantidade de imagens. Você pode hospedar imagens em servidores como o Picasa, Flickr, Yahoo! Geocities, Google Sites, ImageShack ou Photobucket.

Para otimizar o peso das imagens, você poderá seguir dois caminhos: otimizar utilizando softwares como o Photoshop e Fireworks ou utilizando servi?os online como o DynamicDrive Image Optimizer e Yahoo! Smush It.

Existem diversos tipos de arquivos de imagens, mas atualmente, os melhores para uso na internet s?o o JPEG (para fotos) e o PNG (para imagens como banners, buttons, etc). Observe os resultados que podemos obter otimizando esses dois tipos de arquivo:

• JPEG

• PNG

Você pode observar que no caso do JPEG, a imagem é otimizada diminuindo sua qualidade geral, enquanto que o PNG diminui a quantidade de cores. Quanto menores esses valores, menor é o tamanho do arquivo e consequentemente, mais rápido é o carregamento. Caso você n?o tenha experiência com softwares de edi??o de imagens, recomendo que utilize os servi?os online, por serem mais automatizados. Se utilizar softwares, observe como estas configura??es s?o ajustadas no Photoshop, utilizando a op??o Salvar para a Web (Save for Web) no menu Arquivo (File):

Legendas: 1. Predefini??o de configura??es 2. Tipo de Arquivo (JPEG/PNG) 3. Predefini??o da qualidade JPEG 4. Qualidade (JPEG) 5. Imagem Progressiva: carrega múltiplas partes da imagem simultaneamente (JPEG) 6. Torna o arquivo menor, porém menos compatível (JPEG) 7. Método de capta??o das cores (PNG) 8. Quantidade de Cores (PNG) 9. Método de disposi??o das cores (PNG) 10. Porcentagem da utiliza??o do método de disposi??o (PNG) 11. Se a imagem terá ou n?o transparência (PNG) 12. Método da transparência (PNG) 13. Entrela?amento: método que carrega a imagem como um todo (PNG).

Recomendo que você fa?a testes com essas configura??es verificando a qualidade e o tamanho do arquivo para cada resultado. Adquirindo um pouco de experiência com essas configura??es, você poderá determinar quais se adequam melhor às suas necessidades.

Na próxima etapa, vamos aprender a otimizar as postagens do seu blog. Ir para a Parte 5 >>

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 >>