2009Sérgio Estrella M. Juniorwww.icebreaker.com.br

Apoio:

usuariocompulsivo.blogspot.com

2

Sérgio Estrella M. Junior

3

Realização:

Apoio:

usuariocompulsivo.blogspot.com

4

Índice

Introdução (PG.05)

Princípios (PG.05)

Otimizando (PG.06)

Testando (PG.16)

Configurações (PG.06)

Template (PG.07)

Postagens (PG.14)

Imagens (PG.10)

Widgets (PG.15)

JPEG (PG.11)

PNG (PG.12)

Anterior

5

IntroduçãoQuando 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.

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

1.

2.

3.

PRINCÍPIOS

6

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

1.

CONFIGURAÇÕES

Considere seu público-alvo: Até mesmo um blog que trata de dezenas de assuntos 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 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.

4.

5.

7

Otimize o sistema de comentários: Por padrão, no Blogger os comentários de postagens 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).

2.

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.

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

TEMPLATE

8

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.

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 Mantenha somente as Meta Tags necessárias como a Title (nome do site), Description (descrição do site) e Keywords (palavras-chaves).

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

1.

2.

3.

4.

5.

6.

9

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:

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

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

Abreviado

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

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

7.

8.

10

Avalie o desempenho dos Scripts/HacksNã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 redundantesEsta 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.

Use o mínimo de imagens possívelMas 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 miniaturasAs 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 servidorOs 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.

9.

10.

1.

2.

3.

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:

11

IMAGENSJPEG

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:

12

IMAGENSPNG

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

13

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.

14

POSTAGENS

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:

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:

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

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.

1.

2.

3.

4.

5.

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.

Resultado

Composto por template, imagens e postagens

Composto por template, imagens e postagens.

Resultado

Composto por template, imagens e postagens.

Composto por template, imagens e postagens.

Código

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

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

Código

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

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

15

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

WIDGETS

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.

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.

Incorpore Widgets HTML no código

Não use Rádios ou outros tipos de Players no seu BlogUm 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.

1.

2.

3.

4.

5.

16

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.

TESTANDO

Leia tambémCom 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.