Dicas para deixar seu blog mais rápido
Aguarde - Carregando página
(calma! é apenas um .gif …. hehehehehe!)
Olá!
Um dos grandes problemas dos blogs hospedados no blogger/blogspot (alguns em WordPress também) é que com o tempo, eles vão ficando pesados, demorando cada vez mais para abrir a página.
As causas são variadas: pode ser um template mal planejado, pode ser um código CSS não otimizado, ou muitas widgets na sidebar, imagens com tamanho de arquivo grande, javascript, flash….
Tenha em mente uma coisa:
Ou o seu blog abre rápido mesmo em conexão discada,
Ou você pode deixar de ganhar leitores e tráfego. Isso se não perder os leitores já conquistados.
Quer testar o tempo de carregamento de página do seu blog/site? Vá até o site SpeedTester , digite a URL (endereço) do seu site/blog e o código de confirmação e clique em CHECK. Esse site gerará um pequeno relatório com o tempo de abertura de sua página em conexão discada (56k), ISDN (128k), UMTS, DSL (786k, banda larga normal no Brasil), T1 e T2 (conexões acima de 2 megas).
O ideal é que um blog abra em no máximo 6 segundos em conexão discada.
Mas o quê podemos fazer para que o blog (ou mesmo o site) fique mais rápido, com tempo menor de carregamento de página?
- Otimize suas METATAGS:
Use somente metatags importantes para indexação de seu blog. As realmente necessárias são as Metatag Title (nome do site), Description (descrição do site, é o que vai aparecer nas buscas pelo endereço do seu blog) e Keywords (palavras-chaves).
Outras metatags importantes são as de verificação do Google e do Yahoo!, e a metatag robots; - Dê fim aos espaços em branco no código seu template:
Pode parecer loucura, mas os espaços em branco do seu template consomem espaço no arquivo. Retirar os espaços em branco do código podem fazer seu blog/site abrir um pouco mais rápido.
Se você ainda não é muito confortável com edição de códigos e tem medo de se perder, retire somente as linhas em branco. Deixe o código de seu template sem linhas em branco (sem “pular” linha). - Otimize o código CSS (style) do seu template:
Além de limpar as linhas em branco, você pode “abreviar” o código de seu template. Nos sites CleanCSS e/ou CSSTweaks você pode otimizar seu código online, bastando copiar e colar o código em um dos sites, e mandar otimizar.
Há opções para otimização simples - somente abreviatura de parâmetros, bom para iniciantes; otimização normal - deixa cada classe em uma única linha, bom para quem tem boa base em CSS e HTML; e otimização profunda - deixa tudo em uma única linha, se você não tem o costume de ter uma cópia de seus códigos no PC não recomendo, pois esse método torna difícil a localização das classes para edição futura. - Deixe os códigos em javascript em arquivos externos (fora do template):
Ao invés de ficar adicionando códigos javascript na seção HEAD de seu template, adicione em páginas externas. Isso vai contribuir para que seu blog carregue mais rapidamente.
Pegue o código javascript e cole no bloco de notas. Salve como “seu-javascript.js” Hospede esse arquivo em uma conta de sites (por exemplo, o GooglePages) e adicione o seguinte código na seção HEAD:
<script language=”JavaScript” src=”http://seu-site-grátis.com/seu-javascript.js” type=”text/javascript”></script> - Se possível, deixe também o seu CSS em arquivo externo:
Igualmente ao postado acima, pegue o teu código CSS e cole no bloco de notas. Salve como “seu-estilo.css“. Hospede esse arquivo em seu host free (ou seu googlepages) e adicione o seguinte código na seção HEAD:
<link rel=”stylesheet” type=”text/css” href=”http://seu-site-grátis.com/seu-estilo.css” /> - TABLELESS
Já ouviu falar em tableless? Se não, preste atenção com carinho: tableless significa não mais usar tabelas para construir um template. Chega de TABLE, TR, TD. Essas tabela geram um enorme espaço em branco no html e fazem qualquer site carregar mais devagar, sem falar que é péssimo para indexação nos sites de busca: as tabelas “separam” o conteúdo.
Dê sempre preferência ao trabalho com CSS: DIVs e classes não cortam teu conteúdo em pedacinhos, o Google agradece e seu blog fica show de bola. - Diminua os comentários do código de seu template:
O seu template tem vários comentários do tipo: /**** início do cabeçalho****/, /**** inicio do código do fulano *****/, <!–aqui começa o conteúdo–>, <!– fim do conteúdo–>???
Se você sabe o que cada código de seu template faz, não são precisos esses comentários certo?
Apague-os, deixando seu código mais leve. - Use a barra “/” no fim dos diretórios em endereços URL
Uma dica que parece boba, mas que faz uma enorme diferença, é usar a barra no fim de endereços. http://teublog.blogspot.com/ abre mais rápido do que http://teublog.blogspot.com . Só não adicione a barra se o endereço terminar com extensão .html, .htm, .php, .asp, etc.
A barra pode e deve ser inserida em endereços absolutos e em endereços que apontem um diretório (pasta). Por exemplo, http://www.site.com/forum/. Essa dica vale tanto para o template como para postagens e sidebars. - Imagens: defina SEMPRE a largura e altura
Aqui a bronca aos preguiçosos de plantão: inserir uma imagem no seu blog, seja no código ou mesmo nas postagens e widgets, sem os atributos WIDTH e HEIGHT (largura e altura) obriga o navegados a ter que “calcular” essas medidas, deixando o carregamento da página mais lento. Essa dica vale tanto para o template como para postagens e sidebars.
Defina sempre a largura e altura de suas imagens dentro da tag IMG SRC e veja seu blog carregar mais rápido. - Mais Imagens: Use miniaturas (thumbnails) nas postagens ou diminua o tamanho de arquivo delas
Usar miniaturas, além de deixar seu blog mais profissional, pode deixar ele mais rápido a seus leitores: Se o seu leitor quiser ver a imagem no tamanho real, basta clicar sobre a miniatura. Tanto o Blogger quanto o WordPress têm suporte ao uso de miniaturas.
Se você prefere o tamanho normal, então use um programa para diminuir o tamanho de arquivo (procure por “Image Resize programs”), ou otimize para WEB em programas como Photoshop, PSP, GIMP, etc. - NÃO USE FLASH
Flash é muito bonito de se ver, mas é prá quem entende e não para quem quer. Quem trabalha ou estuda Flash vai saber fazer uma animação ou banner (ou ainda um site todo) bem leve.
Mas se você é um simples blogueiro como eu, PASSE LONGE das animações em flash: elas deixam o carregamento do blog muito lento.
Widgets em Flash normalmente também são lentos.
Se gostar de algum Widget em Flash, teste antes prá saber se ele é pesado ou não. Seus visitantes agradecem.
Há muitos outros jeitos de se deixar um site/blog bem otimizado e leve, mas essas 11 dicas já ajudam muito um blog-carroça a ganhar mais velocidade.
Todavia, não coloque widgets demais no seu blog. Eles deixam de fato qualquer site mais lento. Opte pelos realmente necessários à você e seus visitantes.
Também não abuse de parcerias: É legal ser linkado por todo mundo, mas colocar trezentos botões na barra lateral de seu blog vai deixar sua inicial lenta e seu visitante confuso (se ele não fechar a página antes). Não transforme teu blog em uma “penteadeira”.
Quer fazer parcerias com vários blogs?
Uma alternativa à essas parcerias é um sistema de troca de banners ou de botão.
Coloquei aqui no Templates para Blogger dois sisteminhas de troca de banners, um para banners de 468×60 pixels e um para botões de 120×60 pixels. Você mostra os parceiros aleatoriamente, seu banner/botão aparece em todos os sites parceiros, e teu blog não fica com botões em excesso.
Clique AQUI e prestigie nosso sisteminha 
Comments
Comment from Ariane
Time: novembro 17, 2007, 5:36 am
Excelente post, vou recomendar lá no blog. Obrigada, bjs
Comment from Donato CJ
Time: novembro 19, 2007, 4:51 am
Muito show o site, mas kd os templates? 
Favoritado !
[]’s
Comment from Erica Akira
Time: novembro 19, 2007, 12:03 pm
EAD, obrigada!
Ariane, obrigada pela força seus templates estão cada vez mais lindos!
Comment from Aurea
Time: novembro 20, 2007, 9:03 pm
Erica,
Você não existe! Este post é tudo de bom!
Vou recomendá-lo no meu blog! Valeu mesmo! Estávamos precisando de uma orientação do tipo na blogosfera!
Bjks,
Comment from Erica Akira
Time: novembro 20, 2007, 9:49 pm
Oi Áurea!
Obrigada pela força!
Eu sempre segui mais ou menos esse roteiro para converter e otimizar meus templates, e estava devendo essa postagem por aqui
Grande beijo!
Pingback from SuperJogos - Todos os jogos da internet » Dicas para deixar seu blog mais rápido
Time: novembro 21, 2007, 2:31 am
[...] Rodrigo Flausino wrote an interesting post today!.Here’s a quick excerpt Aguarde - Carregando página [IMG loading-progressbargreen] (calma! é apenas um .gif …. hehehehehe!) Olá! Um dos grandes problemas dos blogs hospedados no blogger/blogspot (alguns em WordPress também) é que com o tempo, eles vão ficando pesados, demorando cada vez mais para abrir a página. As causas são variadas: pode ser um template mal planejado, pode ser um código CSS não otimizado, ou muitas widgets na sidebar, imagens com tamanho de arquivo grande, javascript, flash…. [IMG loading-IE [...]
Comment from fabio santos
Time: novembro 21, 2007, 6:26 am
Muito bom o post! Vou fazer algo indicando este artigo. Parabens Érica.
Comment from Kaká
Time: novembro 22, 2007, 10:23 am
Olá Erica e os outros amigos do site!
Estou com uma dúvida em relação aos seus templates…. instalei hoje no blog: kkejp.blogspot.com , consegui trocar o banner, porém não descubro aonde tirar o título do blog de cima da imagem… gostaria que não aparecesse o título “Aventuras na América”, alguém pode me ajudar ? Já dei uma fuçada no código do template e não acho de jeito nenhum o código, qual seria o código ? hehe
Obs.: Visitem meu blog que vocês vão entender, o título está ficando em cima da imagem, quero que não exista esse título!
Comment from Erica Akira
Time: novembro 22, 2007, 11:18 am
Olá Kaká!
Teu blog está muito lindo! Parabéns!
Para retirar o nome de cima da imagem, vá até o código de teu template, e clique em Expandir Widgets.
Procure pelo widget do cabeçalho, e retire a linha
ou algo parecido *dentro do widget CABEÇALHO, hein?
Dessa forma, ele vai tirar o nome sem tirar o título de seu blog.
Abraço!
Comment from Kaká
Time: novembro 22, 2007, 9:07 pm
Continuo sem conseguiu! Qual exatamente é a linha que eu devo tirar do código ? Sabe me dizer ? Todas que eu tento tirar (na incerteza de que seja a certa, recebo a mensagem de erro: Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
Mensagem de erro em XML: The element type “body” must be terminated by the matching end-tag “”.)
Socorro Erica! hehehe
Comment from Gabriela
Time: novembro 25, 2007, 9:29 am
Oi, gostaria que vocês me ajudarem a criar um template no meu blog.
Comment from claudya
Time: novembro 25, 2007, 9:51 pm
Uau!!! Ótima explicação Erica!!!! Amei a parte do código Java à parte da seção head do tema!!! Útil ao extremo duas dicas! Posso linkar suas dicas lá no Memories? Bjs
Comment from Renne Boz
Time: dezembro 1, 2007, 9:58 pm
Olá Erika, eu peguei um template aqui, o andre08. Mas eu não consigo editar o cabeçalho. Sempre que tento, entra uma página dando erro. Será uqe vc pode me dar alguma dica sobre isso? Um grande beijo e parabéns pelo excelente conteúdo daqui! É show!!
Comment from Erica Akira
Time: dezembro 5, 2007, 11:36 pm
Olá Renne!
Tenta ver se você não está esquecendo nenhuma tag aberta. Como o template do blogger necessita ser em XHTML, qualquer tag aberta faz o código ser rejeitado.
Abraço!
Comment from claudya
Time: dezembro 6, 2007, 11:15 pm
Erica, obrigada por resolver o problema!!!!! Leia o post sobre em http://blog-memories.burazine.com/2007/12/plugins-contra-spamm-e-splogs-e-uma-baita-dor-de-cabeca.html.
Resolvi postar prá divulgar o que ocorreu. Bjs. mil (fico devendo essa).
Comment from claudya
Time: dezembro 8, 2007, 9:41 pm
Oi amiga! Te citei prá um prêmio em http://blog-memories.burazine.com/2007/12/premio-mulheres-que-nos-fazem-pensar.html. Como sempre, sem obrigação! Tb. fiz um post só sobre alojamento de scripts em servidor próprio (muita gente me perguntava). Bjs
Comment from Cristiane Amarante Fetter
Time: dezembro 17, 2007, 11:09 am
Olá, estou precisando de uma ajudinha, veja se você pode me ajudar. Inseri uma imagem no cabeçalho do meu blog e desde então não consiro retirá-la. Já tentei fazer isso através do editor do cabeçalho mas quando clico retirar a imagem, isto não acontece.
Você sabe como fazê-lo?
Obrigada.
Comment from Elaine
Time: dezembro 19, 2007, 5:00 am
Muito Bom o Blog!
Muito obrigada pelas dicas, ajuda muito.
Boa Semana
Comment from Ariane
Time: dezembro 22, 2007, 2:00 am
Oi Erica, passando prá te desejar um Feliz Natal e muitas felicidades prá vc e sua familia! Bjs
Comment from Aurea
Time: dezembro 23, 2007, 11:32 pm
Olá Erica,
Desejo que você e sua Família tenha um Feliz Natal que a paz e a alegria possa reinar em seus corações. E que seu ano de 2008 seja repleto de realizações e bons acontecimentos.
Grande beijo com carinho,
Áurea
Comment from Renne Boz
Time: janeiro 2, 2008, 12:05 am
Olá, td bem? Um feliz 2008!!
Eu queria tirar uma dúvida, não sei se vc pode me ajudar. Eu gostaria de retirar o título da coluna do meu template. Está escrito “Main Menu” E eu queria retirar isso, tem alguma dica? Isso poder ser feito?
Bom…desde já grata.
Um grande beijo!
Comment from Marciel
Time: janeiro 20, 2008, 12:02 pm
Adorei o comentario me ajudou muito valeu
Comment from Ricardo Rayol
Time: janeiro 21, 2008, 8:13 am
lascou-se. Meu blog principal abriria, em conexão discada, eternos 20 segundos. Gostei muito das dicas. Um show.
Comment from Tami
Time: janeiro 25, 2008, 3:47 am
Oláá,
tudo joia?
Passando mesmo pra marcar uma presença…e dizer que
estou começando um “site”, do programa photo filtre studio,
pra quem não conhece, é um editor de fotos, no estilo do photo shop…
neste site estou agrupando tudo sobre este programa, dê uma olhadinha
…mais uma coisinha, quem quiser ter parceria no site, é só falar também
http://www.pfstudio.clic3.net
beijoos
Comment from Aurea
Time: março 3, 2008, 11:15 am
Olá Érica,
Está muito sumida! Está tudo bem?
Saudades,
Muitas bjks no seu coração!
Aú
Comment from Daniela Milagres
Time: julho 19, 2008, 2:28 am
Olá! Sempre visito seu blog… Estou escrevendo pra dizer que estou disponibilizando no meu Blog Emporium Digital, alguns templates criados por mim! Caso tenha interesse, aguardo sua visita!
Comment from Durval Fernandes
Time: julho 21, 2008, 9:27 am
Nunca imaginei que os espaços em branco reduzissem a velocidade de carga das paginas .
Durval - http://www.hotmastersound.com.br
Comment from Simone
Time: julho 28, 2008, 4:55 am
Olá! Estou arrecém começando meu blog e adorei suas dicas!
Citei teu site. Beijos
Comment from Fernanda Maria
Time: julho 30, 2008, 5:14 am
Oi Erica….quria saber se vc pode me ajudar…
Tem um site cheio de temas lindos do wordpress, tem uns dois que amei mas meu blog é do blogger, você sabe converter css pra xml do blogger? ou conhece alguem que faça isso? ficaria muito feliz, os temas são lindo smesmo.
Desde ja eu te agradeço ate….
Fuiiii
Abração e fico esperando resposta
Bjs
Comment from anonimo
Time: agosto 3, 2008, 1:59 am
a dona deste site morreu??
faz tenpos que n atualiza
Comment from David
Time: agosto 8, 2008, 1:15 am
Parabéns pelo Website! Conteudo atual e relevante.
Abraço
David
Comment from Erica Akira
Time: agosto 20, 2008, 8:29 pm
Não morri não
Comment from Erica Akira
Time: agosto 20, 2008, 8:31 pm
Fernanda, Qual o site?
Comment from Rafael Salin
Time: dezembro 7, 2008, 4:01 am
Muito obrigado pela dica, meu site está carregando 50% mais rápido graças a você.
Comment from joyceanne miriam de souza
Time: setembro 23, 2009, 1:49 am
olá Estou arrecém começando meu blog e adorei suas dicas!
Citei teu site. Beijos
Comment from lucas conçeiçao
Time: setembro 23, 2009, 1:50 am
Olá! Sempre visito seu blog… Estou escrevendo pra dizer que estou disponibilizando no meu Blog Emporium Digital, alguns templates criados por mim! Caso tenha interesse, aguardo sua visita!
Comment from mateus conçeiçao
Time: setembro 23, 2009, 1:52 am
Oláá,
tudo joia?
Passando mesmo pra marcar uma presença…e dizer que
estou começando um “site”, do programa photo filtre studio,
pra quem não conhece, é um editor de fotos, no estilo do photo shop…
neste site estou agrupando tudo sobre este programa, dê uma olhadinha
…mais uma coisinha, quem quiser ter parceria no site, é só falar também
em 
em 
Comment from EAD
Time: novembro 17, 2007, 2:05 am
Oii achei essa dica mto boa,gostei bastante principalmente dos assuntos.
Parabéns,continue assim