DICA: Deixe 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?

  1. 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;
  2. 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).
  3. 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.
  4. 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>
  5. 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” />
  6. 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.
  7. 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.
  8. 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.
  9. 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.
  10. 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.
  11. 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”.

creditosCéditos: Templates For You

4 Responses to DICA: Deixe seu blog mais rápido

  1. Marcos disse:

    Muito boa a dica, vou aproveitar no meu blog já.

  2. Junior disse:

    Muito boa as dicas,vou testar!!!

  3. Marcio Rocon disse:

    NOVIDADE EM PRIMEIRA MÃO. FATURE UM BOM DINHEIRO EXIBINDO BANNERS EM SEU BLOG,
    ESTA É COM CERTEZA A MANEIRA MAIS FÁCIL QUE EU JÁ ENCONTREI PARA LUCRAR COM O MEU
    SITE. BASTA FAZER O CADASTRO, ESCOLHER O BANNER QUE VOCÊ DESEJA DIVULGAR, COPIAR
    O CÓDIGO E COLAR NO SEU SITE. MUITO FÁCIL E RÁPIDO.

    VOCÊ SERÁ PAGO POR CADA VISUALIZAÇÃO, OU SEJA SE O SEU SITE RECEBE 5.000 VISITAS POR
    DIA, VOCÊ VAI RECEBER EM DINHEIRO $ 15.90. SEM PRECISAR SE PREOCUPAR COM NADA.

    ENCONTREI ESTA MARAVILHA NO SITE DA PROBLOGGER
    LEMBRETE! VOCÊ PRECISA TER UMA CONTA NA PAYPAL PARA RECEBER O SEUS GANHOS
    DEPOIS É SÓ GASTAR O SEU DINHEIRO NO SITE DA CHINAVASION…

    É só fazer o cadastro, colar o código e correr para o abraço…

    http://imagensmix.com/contador/click.php?id=64

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: