2009

Apoio: Srgio Estrella M. Junior www.icebreaker.com.br usuariocompulsivo.blogspot.com

Srgio Estrella M. Junior

Realizao:

Apoio:
usuariocompulsivo.blogspot.com

ndice
Introduo (PG.05) Princpios (PG.05) Otimizando (PG.06) Configuraes (PG.06) Template (PG.07) Imagens (PG.10) JPEG (PG.11) PNG (PG.12) Postagens (PG.14) Widgets (PG.15) Testando (PG.16)

www.icebreaker.com.br

Introduo
Quando voc navega num site que apresenta alguma lentido, quantas pginas voc resiste at substitu-lo por outro mais rpido (e nunca mais voltar)? A resposta pode variar de pessoa pra pessoa, mas uma coisa certa: a no ser que aquela seja a nica fonte para a informao que voc procura, cedo ou tarde vai deix-lo. As pessoas encaram os websites como produtos, sendo implacveis e rejeitando aqueles que no atingem suas expectativas. E voc sabe muito bem que a pacincia 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, cdigos para monetizao 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 curso: Como tornar seu blog mais rpido.

PRINCPIOS
Agora que definimos que a rapidez uma condio para o sucesso do seu blog, peo que antes de comearmos o processo de otimizao, tenha em mente 5 princpios bsicos ao criar e atualizar seu blog: Seja Objetivo: No se esquea que a maioria das pessoas visita seu blog com uma meta. Atravs de um mecanismo de busca ou link, ela est ali procurando uma determinada informao. O blog deve ser simples, oferecer aquilo que se prope ao mesmo tempo em que agrega contedo, incentivando a pessoa continuar nele (e no obrigando-a). Deve ser atrativo, mas no enganar o usurio. Isto torna a navegao mais rpida. Seja Simples: De que adianta oferecer um blog bonito e extremamente rico em termos de contedo, se a pessoa que o acessar possuir um sistema ou internet lenta? possvel ser simples e criativo, sem ser medocre.

1.

2.

3.

Menos mais! Sites que apresentam muitos elementos simultaneamente, tendem a se parecer forados ou aleatrios. 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 pginas?

www.icebreaker.com.br

4.

Considere seu pblico-alvo: At mesmo um blog que trata de dezenas de assuntos diferentes possui um pblico-alvo, e quanto maior o escopo, maior a demanda por acessibilidade. Tambm procure obter um retorno de seus visitantes para ter a oportunidade de aprimorar o contedo e a navegao. Facilidade de acesso tambm 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 usurio. So rpidos o suficiente? Se no, considere oferecer a rapidez como o diferencial do seu. Se sim, tome a velocidade mdia deles como o mnimo que o seu deve oferecer.

5.

CONFIGURAES
Pois bem, agora que j vimos a importncia da velocidade num blog, por que no testamos o seu blog e registramos o resultado? Assim voc poder compar-lo com o resultado obtido depois da otimizao. Para fazer o teste, basta acessar o SpeedTester, digitar seu endereo do seu blog e o resultado para a soma solicitada e clicar em Submit. Atente para o item Speed (Medio de velocidade mdia), Estimated Load Time (tempo de carregamento estimado em vrios tipos de conexo) 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 otimizao do seu blog:

1.

Ajuste a quantidade de postagens na pgina inicial O excesso de postagens na pgina inicial aumenta substancialmente o tempo necessrio para carreg-la, e o visitante que possivelmente j encontrou o que queria, ter que esperar a pgina toda carregar para poder ter acesso ao contedo de uma nica postagem. Para ajustar essa configurao, no painel do Blogger, v em Configuraes, escolha a guia Formatao 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 pgina inicial. Se voc escreve posts mdios e usa frequentemente imagens, utilize entre 5 a 7 postagens na pgina inicial. Se voc escreve posts grandes e sempre usa imagens, utilize entre 4 a 5 postagens na pgina inicial.

www.icebreaker.com.br

2.

Otimize o sistema de comentrios: Por padro, no Blogger os comentrios de postagens so exibidos em pginas separadas ou janelas pop-up. Alm de ser um incmodo para o visitante, demanda maior tempo de carregamento. Para resolver este problema, ainda nas Configuraes, selecione a guia Comentrios e em Posio do formulrio de comentrios, selecione Postagem abaixo incorporada (como na figura abaixo).

Desta forma, tanto o formulrio para a redao de comentrios como os comentrios em si aparecero abaixo da postagem. Salve as configuraes e visualize o blog para ver se o novo recurso est funcionando.

TEMPLATE
Chegamos um dos principais pontos do Curso: o Template. ele que o navegador l quando o usurio digita o endereo do seu blog, e que chama os outros elementos (postagens, imagens, widgets). Nesta etapa ns veremos 10 dicas muito importantes para alterar o cdigo fonte do seu template e tornar seu blog mais leve, reduzindo o tempo de carregamento. Ento vamos l, acesse o seu Painel do Blogger e selecione Layout, ento clique em Editar HTML para entrar no modo de edio do cdigo do seu Template (como na imagem abaixo).

www.icebreaker.com.br

No se esquea de fazer o backup do seu template antes de realizar as alteraes no cdigo, clicando em Baixar modelo completo. Almv disso, antes de salvar as alteraes cada passo, visualize seu template para verificar se tudo est funcionando corretamente. Remova Meta Tags desnecessrias Mantenha somente as Meta Tags necessrias como a Title (nome do site), Description (descrio do site) e Keywords (palavras-chaves).

1.

2.

Otimize o CSS do Template Voc pode simplificar a parte CSS do cdigo 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, ento clique em Process CSS. Ele vai gerar a verso compactada do CSS, ento s copiar o texto e substituir o original na edio de HTML do seu Template. Remova os espaos e linhas em branco Espaos e linhas em branco no cdigo consomem espao no arquivo. Remov-los torna o carregamento do blog mais rpido, porm pode dificultar edies posteriores. Ento remova ao menos os desnecessrios.

3.

4.

Remova as Tags </p> Enquanto as tags <p> iniciam os pargrafos, as tags </p> os encerram. No entanto, as tags </p> no so essenciais para o funcionamento do pargrafo e podem ser removidas. Use a pesquisa do seu navegador para encontrar as tags </p> e remova-as.

5.

Remova os comentrios do cdigo Comentrios so trechos do cdigo que no so levados em conta pelo navegador na hora de renderizar a pgina e tem apenas a funo de auxiliar a edio, mas mesmo assim aumentam o tamanho total do arquivo. Se voc j est familiarizado com o template ou no utiliza os comentrios, remova-os. Comentrios utilizam uma marcao diferente, por exemplo /**** Comentrio****/, <!Comentrio!> e //Comentrio. Note que alguns scripts/hacks utilizam os comentrios para funcionar, ento verifique antes de apagar.

6.

Use a barra (/) no fim das URLs Endereos com barras no fim abrem mais rapidamente. Por exemplo, http://www.meusite. com.br/ abre mais rpido que http://www.meusite.com.br. O mesmo vale para diretrios, como http://www.meusite.com.br/forum/. Portanto, utilize a barra ao criar links no template. No entanto, voc no deve acrescentar a barra endereos que terminam com extenses de arquivo (.html ou .jpg, por exemplo).

www.icebreaker.com.br

7.

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

8.

Abrevie o cdigo O processo realizado no item 2 j faz esse tipo de modificao na parte CSS do cdigo. Esta dica para quem j tem alguma noo de HTML e assim integrar esses conceitos no restante do cdigo e nas prximas edies que voc fizer. As abreviaes de cdigo ajudam a diminuir o tamanho do arquivo sem que nada se perca. Por exemplo, as abreviaes de cor, que reduzem o cdigo de 6 dgitos 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 no pode ser abreviado

fcil entender a lgica da abreviao, e tendo em mente os valores abreviados s fazer a substituio. Tambm possvel 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 no depende de qual sistema mtrico escolhido. Margin: 0 10px 0 0; pode ser abreviado para Margin: 0 10px; pois o que no colocado sempre entendido como 0; Da mesma forma, possvel abreviar vrias linhas de cdigo 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;fontsize:12px;text-align:center;margin:0;padding:0;}

www.icebreaker.com.br

9.

Avalie o desempenho dos Scripts/Hacks No cometa o erro de colocar scripts/hacks (resumos de postagens, contador de usurios, etc) no seu template e esquecer-se deles. Faa uma avaliao durante uma semana de como eles esto afetando o tempo de carregamento e a usabilidade do seu blog e determine se o benefcio proporcionado por ele superior ao peso a mais na pgina. Se voc j tem vrios instalados em sua pgina, sugiro que faa um backup do cdigo e remova todos. Ento verifique a diferena no carregamento da pgina e determine quais devem voltar ou no. Remova entradas redundantes Esta recomendao exige um conhecimento intermedirio de HTML. Existem muitas formas de se cometer redundncia no cdigo, por exemplo: um estilo de Ttulo (Header) que v manter a mesma fonte do corpo, no 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 configuraes. Da mesma forma voc deve eliminar elementos desnecessrios, como classes CSS no usadas e definies vazias como background:url(), border:none e outras.

10.

IMAGENS
Agora hora de otimizar os elementos que so chamados pelo template, sendo o principal deles, as imagens (afinal, dificilmente voc no utilizar nenhuma imagem no seu blog). Hoje vamos aprender como fazer a otimizao 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:

1.

Use o mnimo de imagens possvel Mas tome cuidado para no empobrecer o seu blog. Tente no pecar, nem pela falta, nem pelo excesso. D preferncias ao uso de miniaturas As miniaturas no obrigam a pessoa a fazer o download completo de imagens que ela no 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 pgina. Hospede suas imagens em mais de um servidor Os navegadores permitem downloads simultneos de imagens em servidores diferentes. Ou seja, se voc hospedar todas as imagens num nico servidor, elas sero carregadas uma aps outra, mas se hospedar em vrios, elas sero 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.

2.

3.

www.icebreaker.com.br

10

Para otimizar o peso das imagens, voc poder seguir dois caminhos: otimizar utilizando softwares como o Photoshop e Fireworks ou utilizando servios 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 so 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

www.icebreaker.com.br

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 rpido o carregamento. Caso voc no tenha experincia com softwares de edio de imagens, recomendo que utilize os servios online, por serem mais automatizados. Se utilizar softwares, observe como estas configuraes so ajustadas no Photoshop, utilizando a opo Salvar para a Web (Save for Web) no menu Arquivo (File):

www.icebreaker.com.br

12

Legendas: 1. Predefinio de configuraes 2. Tipo de Arquivo (JPEG/PNG) 3. Predefinio da qualidade JPEG 4. Qualidade (JPEG) 5. Imagem Progressiva: carrega mltiplas partes da imagem simultaneamente (JPEG) 6. Torna o arquivo menor, porm menos compatvel (JPEG) 7. Mtodo de captao das cores (PNG) 8. Quantidade de Cores (PNG) 9. Mtodo de disposio das cores (PNG) 10. Porcentagem dtta utilizao do mtodo de disposio (PNG) 11. Se a imagem ter ou no transparncia (PNG) 12. Mtodo da transparncia (PNG) 13. Entrelaamento: mtodo que carrega a imagem como um todo (PNG). Recomendo que voc faa testes com essas configuraes verificando a qualidade e o tamanho do arquivo para cada resultado. Adquirindo um pouco de experincia com essas configuraes, voc poder determinar quais se adequam melhor s suas necessidades.

www.icebreaker.com.br

13

POSTAGENS
Agora que voc j otimizou seu template e suas imagens hora de tornar suas postagens mais limpas, adquirindo alguns hbitos e tomando alguns cuidados que faro com que suas postagens sejam carregadas e indexadas mais rapidamente.

1.

No exagere na formatao Formataes simples geram menos cdigo e mantm a unidade do blog. Se tiver que usar formataes mais elaboradas, crie classes CSS no seu template e as use. Veja a quantidade de cdigo que gerada pelas formataes excessivas: Resultado Composto por template, imagens e postagens Composto por template, imagens e postagens. Cdigo <strong><em><u>Composto por template, imagens e postagens.</u></em></strong> <strong>Composto por template, imagens e postagens.</strong>

2.

Formataes em grupo Formatar palavras individualmente gera muitas tags no cdigo HTML da postagem. Formatar em grupo geralmente produz o mesmo resultado. Veja o exemplo: Resultado Composto por template, imagens e postagens. Composto por template, imagens e postagens. Cdigo Composto por <strong>template</strong>, <strong>imagens</strong> e <strong>postagens</strong>. Composto por <strong>template, imagens e postagens.</ strong>

3. 4.

Remova os espaos e linhas em branco, Defina altura e largura para imagens e Abrevie o cdigo, como vistos na Pgina 9. No use tabelas O no-uso de tabelas o que chamamos de Tableless, e uma prtica muito comum hoje em dia. Porm, os editores de postagens (como o Windows Live Writer) ainda oferecem o recurso para inserir tabelas. As tabelas geram muito cdigo e podem provocar problemas de posicionamento em alguns navegadores. No use Flash A no ser que voc seja experiente em Adobe Flash e consiga criar arquivos leves, evite o uso em suas postagens. YouTube, Slideshows e vrios outros widgets tambm so feitos em Flash e pesam na hora do carregamento. Cabe a voc determinar se esse contedo relevante o suficiente para coloc-lo, na hora de postar.

5.

www.icebreaker.com.br

14

WIDGETS
Agora vamos otimizar seus widgets para que eles no atrapalhem o carregamento do seu blog. So 5 dicas essenciais: No se esquea de fazer o backup do seu template antes de realizar as alteraes no cdigo, clicando em Baixar modelo completo. Alm disso, antes de salvar as alteraes cada passo, visualize seu template para verificar se tudo est funcionando corretamente.

1.

Remova aqueles Widgets que voc no precisa realmente Widgets so ancorados ao seu template e podem diminuir o tempo de carregamento, portanto no exagere. Mais cuidado ainda com os Widgets no-oficiais e que dependem de arquivos JavaScript. Avalie o impacto na navegao Verifique se os widgets que voc utiliza tm algum impacto positivo na navegao para o usurio. Sempre avalie o funcionamento dos Widgets antes de decidir mant-los. Um widget a menos pode fazer a diferena no tempo de carregamento do seu blog. Otimize o posicionamento dos Widgets D preferncia coloc-los (ao menos os mais pesados) na Sidebar Direita ou no Rodap, assim eles sero carregados depois do contedo principal do Blog, por uma questo de posicionamento no cdigo. Se voc tem maior conhecimento em HTML, utilize posicionamento absoluto para os Widgets, assim permitindo que eles fiquem no fim do cdigo. Incorpore Widgets HTML no cdigo

2.

3.

4.

Se voc utiliza Widgets dos tipo HTML/JavaScript, insira-os diretamente no cdigo HTML do template, assim voc elimina muitas linhas extras de cdigo. Para fazer isso, s dar um ttulo ao seu widget HTML (para facilitar a localizao no cdigo), encontrar a entrada no cdigo atravs desse ttulo (utilizando o Ctrl+F do seu navegador) e substituir o cdigo do widget pelo cdigo contido no Widget (como na imagem acima). Ao fazer isso, o widget original excludo automaticamente, mas a funcionalidade permanece.

5.

No use Rdios ou outros tipos de Players no seu Blog Um dos grandes incmodos para o usurio hoje em dia (e que compromete muito o tempo de carregamento da pgina), quando ele visita um blog e leva um susto ao ver que uma rdio comeou a tocar sem que ele pedisse. No coloque esse tipo de widget no seu blog. Se uma rdio relevante ao seu contedo, coloque apenas um link para ela. Lembre-se: as pessoas no gostam de se sentir obrigadas a fazer e muito menos ouvir nada, como vimos na Pgina 5.

www.icebreaker.com.br

15

TESTANDO
Chegamos ao fim do processo de otimizao. Agora, vamos comparar os resultados que obtivemos no incio, antes das otimizaes, com os atuais. Ento vamos l, acesse novamente o SpeedTester, digite seu endereo do seu blog e o resultado para a soma solicitada e clique em Submit. Apenas relembrando, verifique o item Speed (Medio de velocidade mdia), Estimated Load Time (tempo de carregamento estimado em vrios tipos de conexo) 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 ingls). Basta digitar o endereo do seu blog que ele far uma anlise, e na ltima parte do relatrio, recomendar modificaes. Os itens em Verde j esto otimizados; os itens em Amarelo ainda podem ser otimizados; j os itens em Vermelho so crticos e devem ser otimizados. Leve em conta que o analisador verifica sua pgina como um todo no estado atual, ou seja, depende muito das postagens que esto na pgina inicial.

E assim chegamos ao fim do curso. Espero que as informaes contidas aqui tenham lhe sido til agora e no futuro. Voc tambm poder ver estes textos em forma de postagens, no iceBreaker.

www.icebreaker.com.br

16