2009 Apoio:

Sérgio Estrella M. Junior

www.icebreaker.com.br usuariocompulsivo.blogspot.com
Sérgio Estrella M. Junior

2
 Realização:

Apoio:

usuariocompulsivo.blogspot.com

3
Anterior

Índice

Introdução (PG.05)

Princípios (PG.05)

Otimizando (PG.06)

Configurações (PG.06)

Template (PG.07)

Imagens (PG.10)

JPEG (PG.11)

PNG (PG.12)

Postagens (PG.14)

Widgets (PG.15)

Testando (PG.16)

4
 Introdução
Quando você navega num site que apresenta alguma lentidão, quantas páginas você resiste até
substituí-lo por outro mais rápido (e nunca mais voltar)? A resposta pode variar de pessoa pra
pessoa, mas uma coisa é certa: a não ser que aquela seja a única fonte para a informação que
você procura, cedo ou tarde vai deixá-lo. As pessoas encaram os websites como produtos, sendo
implacáveis e rejeitando aqueles que não atingem suas expectativas. E você sabe muito bem que
a paciência do internauta está a cada dia menor.

Do outro lado está o blogueiro, que finalizou seu template (ou mesmo baixou), personalizou seus
widgets, adicionou scripts, hacks, códigos para monetização e ficou satisfeito com o resultado.
Em algum momento ele se preocupou se depois de todo este processo, seu blog ficou lento?
Provavelmente sim, mas ele conhecia as medidas e os cuidados que deveria tomar para evitar ou
corrigir isso? Pois este é o tema deste livro: Como tornar seu blog mais rápido.

PRINCÍPIOS
Agora que definimos que a rapidez é uma condição para o sucesso do seu blog, peço que antes de
começarmos o processo de otimização, tenha em mente 5 princípios básicos ao criar e atualizar
seu blog:

Seja Objetivo: Não se esqueça que a maioria das pessoas visita seu blog com uma meta.
1. Através de um mecanismo de busca ou link, ela está ali procurando uma determinada
informação. O blog deve ser simples, oferecer aquilo que se propõe ao mesmo tempo em
que agrega conteúdo, incentivando a pessoa à continuar nele (e não obrigando-a). Deve ser
atrativo, mas não enganar o usuário. Isto torna a navegação mais rápida.

Seja Simples: De que adianta oferecer um blog bonito e extremamente rico em termos de
2. conteúdo, se a pessoa que o acessar possuir um sistema ou internet lenta? É possível ser
simples e criativo, sem ser medíocre.

Menos é mais! Sites que apresentam muitos elementos simultaneamente, tendem a se

3. parecer forçados ou aleatórios. Coloque apenas o essencial e mantenha uma unidade entre
todos os elementos, criando uma identidade para o seu blog. Já notou a quantidade de
elementos que o Google possui em suas páginas?

5
 Considere seu público-alvo: Até mesmo um blog que trata de dezenas de assuntos
4. diferentes possui um público-alvo, e quanto maior o escopo, maior é a demanda
por acessibilidade. Também procure obter um retorno de seus visitantes para ter a
oportunidade de aprimorar o conteúdo e a navegação. Facilidade de acesso também se
traduz em rapidez.

Verifique seus concorrentes. Consulte aqueles blogs que tratam dos mesmos assuntos que
5. o seu, ou que buscam o mesmo tipo de usuário. São rápidos o suficiente? Se não, considere
oferecer a rapidez como o diferencial do seu. Se sim, tome a velocidade média deles como
o mínimo que o seu deve oferecer.

CONFIGURAÇÕES

Pois bem, agora que já vimos a importância da velocidade num blog, por que não testamos o seu
blog e registramos o resultado? Assim você poderá compará-lo com o resultado obtido depois
da otimização. Para fazer o teste, basta acessar o SpeedTester, digitar seu endereço do seu blog
e o resultado para a soma solicitada e clicar em Submit. Atente para 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).

Agora que você já anotou os resultados, é hora de iniciar o processo de otimização do seu blog:

Ajuste a quantidade de postagens na página inicial

1. O excesso de postagens na página inicial aumenta substancialmente o tempo necessário
para carregá-la, e o visitante que possivelmente já encontrou o que queria, terá que
esperar a página toda carregar para poder ter acesso ao conteúdo de uma única postagem.
Para ajustar essa configuração, no painel do Blogger, vá em Configurações, escolha a guia
Formatação e selecione a quantidade de postagens em Exibir (como na imagem).

• Se você escreve posts pequenos com algum uso de imagens,

utilize entre 10 a 15 postagens na página inicial.
• Se você escreve posts médios e usa frequentemente imagens,
utilize entre 5 a 7 postagens na página inicial.
• Se você escreve posts grandes e sempre usa imagens,
utilize entre 4 a 5 postagens na página inicial.

6
 Otimize o sistema de comentários: Por padrão, no Blogger os comentários de postagens
2. são exibidos em páginas separadas ou janelas pop-up. Além de ser um incômodo para o
visitante, demanda maior tempo de carregamento. Para resolver este problema, ainda nas
Configurações, selecione a guia Comentários e em Posição do formulário de comentários,
selecione Postagem abaixo incorporada (como na figura abaixo).

Desta forma, tanto o formulário para a redação de comentários como os comentários em si

aparecerão abaixo da postagem. Salve as configurações e visualize o blog para ver se o novo rezz
testá funcionando.

TEMPLATE

Chegamos à um dos principais pontos do livro: 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).

7
 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émv disso, antes de salvar as alterações à
cada passo, visualize seu template para verificar se tudo está funcionando corretamente.

Remova Meta Tags desnecessárias

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

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

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

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

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

6. 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).

8
 Defina altura e largura para imagens
7. 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
8. 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 { body{border:5px none #000;font:Verdana;font-

border: 5px none #000; size:12px;text-align:center;margin:0;padding:0;}
font: Verdana;
font-size: 12px;
text-align: center;
margin: 0;
padding: 0;
}

9
 Avalie o desempenho dos Scripts/Hacks
9. 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

10.
Esta recomendação exige um conhecimento intermediário de HTML. Existem muitas
formas de se cometer redundância 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.

IMAGENS

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

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

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

3. Os navegadores permitem downloads simultâneos 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.

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

11
 PNG IMAGENS

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

12
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 dtta 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.

13
POSTAGENS

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

1. 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, <strong><em><u>Composto por template, imagens

imagens e postagens e postagens.</u></em></strong>

Composto por template, <strong>Composto por template, imagens e

imagens e postagens. postagens.</strong>

Formatações em grupo
2. 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, Composto por <strong>template</strong>,

imagens e postagens. <strong>imagens</strong> e <strong>postagens</strong>.

Composto por template, Composto por <strong>template, imagens e postagens.</

imagens e postagens. strong>

Remova os espaços e linhas em branco, Defina altura e largura para imagens e Abrevie o
3. código, como vistos na Página 9.

Não use tabelas

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

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

14
 WIDGETS

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

1. 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
2. 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
3. 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.

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

5. 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 Página 5.

15
 TESTANDO

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 deste livro. Espero que as informações contidas aqui tenham lhe
sido útil agora e no futuro. Você também poderá ver estes textos em forma de postagens, no
iceBreaker, assim como outras dicas para a plataforma Blogger.

Leia também
Com o eBook Blogger Seguro, você aprende a proteger o seu
blog dos mais diversoes problemas, como o plágio, invasões ou
acidentes. Clique aqui e confira.

16