Dominio: gerenciandoblog.com.br
Chave: 00e39a4dc6309327334fa422703bddd1e83c509f
Hora do cache: 1474196282
Vida do cache: 1475492282
Status: 1
Mensagem: Licença válida
Chave do Pedido: 11808bbc6205bade68f0b70c302eaa74d4305945
Chave do Produto: PROKEY
Scroll Top

Hospedagem - 728 x 90

performance

Como Aumentar a Velocidade de Carregamento do Blog

velocidade130As páginas de seu blog demoram para ser carregadas?

Se você precisa esperar mais do que alguns segundos para que elas sejam exibidas, isso deve ser motivo de grande preocupação.

Isso já pode estar causando perda de visitantes e de preciosas posições no Google.

Neste artigo (um dos mais votados em meu UserVoice), mostrarei a vocês algumas dicas e ferramentas que irão ajudá-lo a tornar o seu blog mais rápido.

Introdução

Este assunto não é novidade aqui no Gerenciando Blog.

No artigo A Importância da Velocidade de suas Páginas, escrito no final de 2009, eu já abordei o tema.

Ainda assim, o tema é um dos mais solicitados pelos visitantes e merece um complemento.

Espero que você esteja convencido de que é importante que seu blog seja carregado rapidamente. Caso ainda não esteja, lhe dou dois bons motivos para isso.

O primeiro motivo é bastante prático: se um leitor vai ao seu blog e precisa esperar 30 segundos até que a página seja exibida, é grande a chance de que ele não retorne mais.

O outro motivo é técnico: há muito tempo o Google vem anunciando que a velocidade de carregamento das páginas é um dos itens utilizados para determinar o posicionamento nos resultados de busca.

Medindo a velocidade de suas páginas

O primeiro passo é medir a velocidade atual de carregamento de suas páginas.

Isso é importante para você avaliar se as ações que você tomará darão realmente resultado. Assim, você poderá medi-la a cada alteração realizada, comparando com o valor inicial.

Há diversas formas para fazer isso.

A mais simples delas é com o WebWait, que conheci anos atrás pelo artigo Quanto tempo seu blog demora para carregar?.

O uso dele é fácil: basta digitar o endereço do seu blog na caixa “Website”, determinar o número de vezes (“no. of calls”) e o intervalo entre as medições (“call interval”) e clicar em “Time It!”.

Após as execuções, a média do tempo de carregamento aparecerá numa caixa, como mostrado abaixo:

Velocidade01 

Há outras ferramentas mais complexas que, além de medir o tempo de carregamento, também já fazem sugestões de pontos que você pode trabalhar para melhorar a performance.

Um desses serviços é o GTmetrix, que conheci através do artigo Teste a performance de seu site com o GTmetrix, do Celso Lemes.

Na verdade, o GTmetrix concentra em uma única página os resultados do Google Page Speed e do Yahoo! YSlow.

Utilizá-lo também é bastante simples: basta digitar o endereço do seu blog em “Analyze Performance of:” e clicar em “Go!” para ver os resultados:

Velocidade02 

Você notará que os resultados são divididos em duas áreas. Em “Summary”, você verá o resumo das análises, com sua nota em cada um dos serviços.

Em “Breakdown”, você verá os detalhes, informando as recomendações (“recommendation”), sua nota (“grade”) e a prioridade (“priority”) para resolução.

Ao clicar em cada item, você poderá ver mais detalhes da análise e como resolver o item:

Velocidade03 

Já adianto: nem todos os itens são simples para resolver.

E há alguns que são impossíveis de serem resolvidos.

Um exemplo é o que mostrei na figura acima: as imagens mostradas vêm do gadget do Facebook, onde não é possível modificar seu tamanho.

Há também questões técnicas, como o “Leverage browser caching” que foge ao controle de quem tem um blog no Blogger, como é o meu caso.

Mas, se você tem bons conhecimentos técnicos, vale a pena investigar os itens mostrados no relatório e resolvê-los.

Ao final, realize uma nova checagem no GTmetrix para conferir as melhorias obtidas.

Não entendi nada! O que posso fazer?

Não se desespere se você chegou a essa conclusão.

O relatório é bastante técnico e pode assustar quem simplesmente possui um blog e não tem conhecimentos de HTML, desenvolvimento web etc.

Mesmo assim, há muito em que você pode trabalhar para melhorar o desempenho do seu blog.

As dicas abaixo o ajudarão a conseguir isso:

1. A primeira e mais importante dica é: só mantenha em seu blog aquilo que é realmente útil aos seus visitantes.

Avalie cada um dos gadgets que você colocou em seu blog e avalie se eles são importantes ao seus visitantes.

Normalmente, aqueles gadgets bonitinhos e divertidos são os que mais demoram a carregar e os que menos interessam a quem o visita.

2. Remova também as imagens que você utiliza em seu blog e que não são importantes aos visitantes. As imagens – especialmente as não otimizadas – também aumentam em muito o tempo de carregamento de um blog.

Deixe em suas páginas e artigos somente aquelas que forem úteis.

3. Redimensione suas imagens para o tamanho em que serão exibidas. É um erro comum colocar imagens enormes em um artigo e redimensioná-las para o tamanho em que serão exibidas.

Ao invés de fazer isso, edite a imagem e deixe-a já no tamanho exato em que será exibida.

No artigo Como Editar Imagens para seu Blog eu mostro como fazer isso com ferramentas grátis.

4. Salve as imagens no formato otimizado. Há diversas extensões que uma imagem pode ser salva (BMP, GIF, JPG, PNG etc.).

O tamanho do arquivo gerado em cada um desses tipos varia muito.

Assim, escolha o formato em que a imagem ficará com melhor tamanho.

Além disso, há ferramentas com o PunyPNG (dica do Blogueigoo) que podem otimizar ainda mais o tamanho das imagens. Passe suas imagens por ele antes de colocá-las em seus artigos.

5. Otimize o seu template. Faça uma análise completa das alterações que você fez no código HTML do seu template.

É provável que haja códigos e “hacks” lá que não sirvam para mais nada, mas que continuam impactando sua velocidade.

Se você nem se lembra mais das alterações que fez nela, pode ser a hora de começar do zero e trocar o template do seu blog.

6. Repense a utilidade dos contadores e estatísticas que você exibe em seu blog.

No início, é normal querer colocar no blog contadores de visitas, mostradores de onde vêm as pessoas, estatísticas de acesso etc.

Mas, essa é uma informação que só interessa a você, não aos seus visitantes.

Por isso, pode ser mais interessante utilizar uma ferramenta como o Google Analytics ou simplesmente acompanhar as estatísticas do Blogger.

7. Exiba menos artigos na página principal do seu blog. É possível configurar no Blogger quantos artigos serão exibidos na página principal.

Quanto menos artigos você exibir, mais rápido sua página principal será carregada.

Veja em Defina o que Será Mostrado com seus Artigos como fazer a definição.

8. Exiba apenas o resumo de seus artigos na página principal. É outra forma interessante de fazer com sua página principal carregue mais rápido.

Veja no artigo Resumo da postagem na página principal como fazer isso.

Mas, tome cuidado: há alguns códigos (como o que eu usava antes aqui no Gerenciando Blog) que fazem com que seja carrega a página completa, mas apenas exibido o resumo.

Para tirar a dúvida, exiba o código-fonte de sua página principal e procure um trecho de código que só aparece no artigo completo.

Se você o encontrar, significa que está sendo carregada a página completa.

9. Evite tocar músicas nas páginas de seu blog. Músicas e vídeos que iniciam automaticamente ao abrir um blog consomem muito tráfego e tornam o carregamento da página muito mais lento.

E não é só isso: poucos gostam de que uma música comece a tocar sem que ele tenha solicitado.

10. Remova os links para páginas que não existem mais. Se você tem uma lista enorme de blogs em sua página principal, visite-os de tempos em tempos.

Você se surpreenderá com a quantidade de blogs que foram abandonados mas continuam sendo referenciados por sua página. Isso é ainda mais grave para os gadgets que exibem a última postagem.

Conclusão

No artigo Cuide Bem de seus Visitantes e Eles Voltarão, eu defendi a ideia de que o aspecto mais importante para um blog é o visitante.

Foi isso que defendi nas dicas acima: só deve permanecer em seu blog o que é importante ao seu visitante.

Tudo o que estiver a mais ocupará tempo desnecessário – e importante – no carregamento do seu blog.

Mas, entendo que essa ideia não seja compartilhada por todos.

Há quem prefira ter um blog com gadgets animados, imagens e figuras simplesmente pelo prazer de tê-las. Isso não é errado, desde que você tenha consciência das consequências.

E há também os blogs que precisam ter esses elementos “pesados” para manter sua audiência, pois é isso o que os visitantes querem.

Então, cabe a você analisar as dicas acima e ponderar sobre o que pode ser aplicado ao seu blog.

Tenha certeza de que seus visitantes ficarão mais felizes na mesma medida em que suas páginas ficarem mais rápidas para carregar.

E você, preocupa-se com a velocidade de carregamento de seu blog?

Tem alguma dica adicional? Deixe um comentário!

Classifique este post


De um play no vídeo abaixo e aprenda a Criar blogs Profissionais




Gostou deste artigo? Ajude nosso projeto.
Compartilhe em suas redes sociais nos botões abaixo:

Sobre o autor | Website

Especialista em Marketing Digital, presta Consultoria e auxilia diversos clientes. Amante por blogs, é responsável pela administração dos blogs Afiliados na web, Gerenciando Blog e Mundo Blogger.

51 Comentários

  1. Jorge Purgly disse:

    Gostei, Adelson. Este assunto é sempre atual.
    Um forte abraço, Jorge Purgly

  2. Matheus disse:

    Adelson,

    Texto muito interessante e importante!

    Espero realmente que a maioria das pessoas leia principalmente a parte que diz para retirar as músicas e rádios automáticas.

    Acrescento somente uma coisa, além dos "hacks", é interessante verificar os seletores e códigos CSS não usados. Tenho observado que muitos blogs tem infinitos seletores no CSS, e na verdade usam poucos deles. Isso contribui e muito para aumentar a velocidade de carregamento, além de evitar que o navegador se perca no meio de tantos estilos.

    Abraço!

  3. Samanta Sammy disse:

    Olá Adelson !!!

    Excelente postagem como sempre !!
    Fazem alguns dias que comecei a me preocupar com isso e fiz um dos testes que indicou ! Tive uma surpresa, meu blog estava meio lerdinho… Então tirei os contadores de visitas, gadgets do Alexa, sitemap, histats, etc e deu uma melhorada.
    Agora esta dica de editar a imagem é maravilhosa !! Vou fazer com certeza ! Pois eu escolho sempre imagens grandes, onde a qualidade está melhor, mas não é necessário para a postagem e redimensiono ela na postagem, mas agora vou seguir seu conselho !!
    Obrigadíssimo por compartilhar !!
    O primeiro teste, foi bom, mas o segundo ainda mostra que está demorando a carregar meu blog… vou analisar o resultado e ver o que posso fazer 🙂

    Um enorme abraço e boa semana !

  4. @Jorge: Que bom que tenha gostado! E esta tem mesmo que ser uma preocupação constante para quem tem um blog.

    @Matheus: Quase ninguém gosta de ouvir uma música ao acessar um blog. Fora o aspecto da lentidão, isso também justificaria sua remoção. Quanto ao CSS, é realmente um fator muito importante levantado pelas ferramentas. Não o coloquei na lista, por ser voltada para quem não tem conhecimentos técnicos, mas é um item que vale a pena ser analisado pelos mais experientes.

    @Sam: Que ótimo vê-la aqui novamente! E é importante fazer esse exame do blog de tempos em tempos. Às vezes não percebemos, mas vamos acrescentando novos gadgets que gradativamente vão tornando-o mais lento. Por isso, é importante só manter aqueles que agregam valor ao blog.

    Abraço a todos e obrigado pela colaboração nos comentários!

  5. Ciro disse:

    Um dos melhores artigos do Adelson, no meu blog uso algumas dicas como limitar o numero de imagens e usar so PNG, GIF e JPG e não usar Java, Flash e GIF animados, mas notei que o blog continua um pouco "pesado" vou testar essas dicas para ver como fica.

  6. Ramon disse:

    -Adelson, era esses tipos de matérias que gostaria de ver no GB quando comentei na outra postagem. Parabéns pelo artigo!
    Agora, vou tentar diminuir as imagens e coisas desnecessárias do meu blog, sei que isso é muito importante para ser encontrado pelo Google, ainda mais agora com o Google Panda!
    Obrigado pelas dicas!

  7. Olá Aldeson,parabéns pelo artigo!
    Uma coisa a acrescentar:O teste do Webwait,varia de acordo com a conexão do usuário..pois veja que ele carrega a página inteira na janela do site,fiz um teste em duas conexões diferentes e tive resultados distintos!!!Um site que também faz este teste,inclusive podendo comparar resultados com outros sites é o http://www.selfseo.com/website_speed_test.php ou http://tools.pingdom.com/fpt/,estes são muito bons!!!

    Abraços!!!

  8. @Ciro: Obrigado pelos elogios! As animações em Flash podem ser grandes vilãs para a performance do blog. Vale a pena avaliar com cuidado se devem permanecer em seu blog.

    @Ramon: Que bom que eu tenha conseguido agradá-lo com este artigo! Como comentei em minha outra resposta, faço o possível para trazer dicas tanto para quem já tem experiência quanto para quem está iniciando nos blogs.

    @Reginaldo: Você tem razão: o resultado do Webwait varia de acordo com a conexão. Mas, é uma forma simples para fazer comparações e avaliar se houve melhorias. E os dois serviços que você sugeriu são realmente ótimos! Obrigado por compartilhar.

    Abraço a vocês e obrigado pela visita!

  9. Otimas dicas. Gostei muito da primeira ferramenta e sempre fico muito preocupado com o carregamento do meu blog. O Google ta punindo mesmo ai ai.

    Um abraço

  10. birapcbira disse:

    ótimas dicas cara valeu!

  11. @Alessander: As ferramentas são mesmo de grande auxílio para medir e otimizar a velocidade de carregamento.

    @BiraPCBira: Que bom que tenha gostado das dicas!

    Abraço a vocês e obrigado pela visita!

  12. Nossa o meu blog deu 11 segundos

  13. Olá!

    Espero que as dicas o ajudem a diminuir esse tempo. Com certeza, seus visitantes ficarão felizes.

    Um abraço!

  14. Tem que deixar o mínimo possível de gadets etc. Site leve rende mais. Valeu.

  15. Olá!

    Sim: o ideal é deixar no blog apenas os gadgets que têm sentido em existir. Os demais devem ser removidos.

    Um abraço!

  16. BRUNO 13 disse:

    obrigado pela dica, eu pude constatar que era o shadowbox instalado em meu Blogger que pesava a página, resolvi o problema http://www.bruno13download.com/

  17. Olá, Bruno!

    Fico feliz em saber que você conseguiu detectar e corrigir a causa da lentidão em seu blog.

    Um abraço!

  18. Rose Misceno disse:

    Nossa, descobri seu blog ontem e estou amando!!! Me ajudou em muitas coisas…
    As dicas que vôcê dá aqui são valiosas já fiz a análise do meu blog, mas como você avaliou tem coisas que não dá pra resolver!

    Abração.

  19. Adriano Luz disse:

    Olá, Rose!

    Que ótimo retorno! Fico feliz em saber que esteja gostando tanto assim do Gerenciando!

    Espero que as dicas sempre a ajudem na evolução dos seus blogs.

    Um abraço e seja sempre bem vinda!

  20. Poxa..qdo abro meu blog, o blog da minha banda, após o carregamento ele vai para o meio da página, não sei se ha como resolver ou se é um tipo de "bug", gostaria de entender se ha alguma solução…um cód. HTML , ou alguma funcionalidade nas configurações , desde ja se souber de alguma ajuda agradeço….Obrigado….
    http://bandajambra.blogspot.com/..ai
    está a página com problemas…valew!

  21. Adriano Luz disse:

    Olá!

    É necessário verificar se há algum gadget que está causando isso. Uma forma é ir removendo um a um os gadgets suspeitos (especialmente os do tipo HTML?JavaScript) para descobrir o problema.

    Se precisar de apoio, me escreva ([email protected]).

    Um abraço!

  22. Muito interessante sua abordagem de como aumentar a velocidade de carregamento do site.
    Utilizarei algumas de suas técnicas para atualizar o meu artigo http://cavas.com.br/index.php/web-design/aumente-a-velocidade-do-seu-site/

    Muito obrigado.

  23. Dos sites que apresentam dicas para blogs este foi o melhor. Mas apesar de ser de leitura fácil compreensão, não o é para um leigo em HTML como eu.
    Tenho um problema no carregamento do meu blog. Este problema foi causado por umas montagens em fotos e que durante 5 dias fui juntando na mesma postagem. Eram imagens gifs e em swf. Uma das montagens em swf começou por se repetir, ou seja, as 3 montagens swf passavam a apresentar a mesma imagem. Como tenho os swf alojados no Google Sites ia lá buscar os códigos que voltava a repor na postagem. Mas quando lá voltava a colocar uma nova foto e ao publicar verificava que depois do carregamento, as 3 swf apareciam novamente com uma só imagem. Então guardei em rascunhos para mais tarde tentar resolver. Só que essa postagem desapareceu e não aparece em lado nenhum e o blog ficou mais lento.
    Será possível uma dica para saber o que aconteceu?

    Obrigado e desculpe o tamanho do comentário.

    Um abraço.

    • Adriano Luz disse:

      Olá, Teófilo!

      É difícil dizer o que pode ter acontecido para ocorrer esses problemas com suas imagens.

      Mas, visitando seu blog, notei que há diversos elementos na página principal que contribuem para que ele se torne lento ao carregar:
      – Muitas imagens
      – Gadgets pesados
      – Imagens do LinkWithin aparecendo na página principal (quando seria melhor que aparecessem apenas nas páginas dos artigos)
      – Muitos blogs sendo exibidos em sua lista, ainda mais com imagens
      – Muitas categorias com poucos artigos em cada uma delas

      Se você acertar os itens acima, seu blog ficará muito mais rápido para carregar.

      Um abraço!

  24. MCL disse:

    Amigo, muito bom esse post. Tenho um e-commerce e estava tendo alguns problemas com a velocidade de carregamento. Tenho um banner em flash logo na página inicial e estou pensando em substituí-lo para uma imagem em gif estática.
    Quanto ao GTmetrix, foi muito útil, pois podemos comparar a velocidade do site com a de sites concorrentes.

    Um grande abraço!

  25. Sergio-F disse:

    O gmetrix mostra os erros, mas não dá para entender nada, e são erros dos próprios gadgets da google (ex:gadget seguir blog), que nem da pra ver no html.
    A google não quer blogs lentos mas seus próprios gadgets são cheios de erros.
    Muito boa a dica, só não sei como consertar erros do gtmetrix tipo:
    Enable Keep-Alive A(99%)
    Enable gzip compression A(99%)
    Minify JavaScript A(98%)
    Minify HTML A(98%)
    Remove query strings from static resources A(93%)
    Specify a cache validator A(91%)
    Minimize redirects A(91%)
    Specify a Vary: Accept-Encoding header
    Leverage browser caching
    Use efficient CSS selectors
    Remove unused CSS
    Optimize the order of styles and scripts
    Combine images using CSS sprites
    Defer parsing of JavaScript

    Se alguém explicar esses os blogs devem melhorar muito, por causa desses meu blog está com nota D.

    • Adriano Luz disse:

      Olá, Sérgio!

      Como eu disse no artigo, há muitos itens que são bastante técnicos e muitos deles não podem ser resolvidos por nós.

      Se você quer entender melhor cada um dos itens, veja que há uma opção "What does this mean" ao lado deles, onde você pode clicar para ter informações adicionais. Para saber ainda mais, clique no "Read more" e você verá detalhes sobre o assunto.

      Os itens mais importantes são os que citei na seção "Não entendi nada! O que posso fazer?", que estão ao alcance de todos.

      Um abraço!

  26. Olá,

    Parabéns pelas excelentes dicas

    Testei o meu blog em algumas ferramentas e obtive varios resultados diferentes…14 segundos…4 segundos…34 segundos.

    Fiquei meio perdido em qual devo confiar?

    Abraço!

    • Adriano Luz disse:

      Olá, Fábio!

      Infelizmente, cada ferramenta utiliza um mecanismo diferente para fazer a medição do tempo. Algumas fazem o cálculo considerando o tempo de abertura no servidor deles; outras, utilizam o tempo para abertura nas estações dos visitantes.

      No final das contas, o mais importante não é o tempo em si. O importante é você seguir as orientações para diminuir ao máximo o tempo de abertura. Ou então comparar o tempo do seu blog com o tempo de outros sites ou indicações da própria ferramenta, para saber se o seu tempo está baixo quando comparado a eles.

      Um abraço!

  27. Helena Péret disse:

    Adelson, o site não quer entrar no meu computador, você tem algum outro site que faça isso?

  28. Adelson, concordo plenamente com as dicas do tamanho da imagem!

    Ao usar o Gimp para editar minhas imagens, salvo-as no formato PNG e, em seguida, o Gimp oferece uma opção para escolher aquilo que você quer salvar na foto, o que faz com que a foto tenha uma grande diferença na hora do tamanho.
    Ex: "Salvar Gama, Salvar cor de fundo, Salvar hora de criação…".
    Eu deixo só a transparência e a informação de pixels transparentes, mas o resto eu tiro tudo, e fica muito leve a foto. Sem contar também que você pode usar a paleta de cores otimizadas para Web, o que reduz mais ainda o tamanho da imagem!

    Ainda, uma outra coisa que gostei de ver aqui foi sobre a otimização dos templates. Aprendi recentemente que um Javascript colocado no início, se este for de um link externo, tende a demorar mais a carregar, e, pior, ainda faz-se ser carregado primeiro para depois carregar os demais elementos do html do template. Dependendo da funcionalidade do javascript que se usa, ele pode ser colocado no fim da tag /body. Isso me fez ganhar segundos preciosos na velocidade do carregamento!

    Seu primeiro item me lembrou da postagem da Samanta Sammy sobre coisas irritantes em blog.
    Valeu, Adelson!

    • Adriano Luz disse:

      Olá, Wallace!

      Que ótimo que tenha gostado deste artigo! São dicas relativamente simples, mas muito importantes para deixar nossos blogs mais rápidos. E é realmente irritante acessar um blog e esperar um longo tempo para ele carregar imagens, músicas e gadgets sem utilidade.

      Um abraço e obrigado por compartilhar sua experiência!

  29. Removi varias coisas em meu blog e instalei o plugin WP SUPER Cache agora tá 100% tempo em média de carregamento é de 1,48 Se

  30. Pete disse:

    Eu recomendo este boa ferramenta on-line
    http://compresspng.com

  31. Josué Mota disse:

    Adelson,
    Muito obrigado por compartilhar estas dicas conosco.
    Fiquei feliz, por que pelos testes através das suas dicas, vi que meu blog não esta tão lento.
    Abraço!
    Sucesso! At. Josué Mota

  32. denise rangel disse:

    Obrigada pelas dicas. De tempos em tempos, faço uma limpeza em minha sidebar, e penso o que realmente seria interessante ficar ali. Realmente, menos é mais.
    abraço, garoto

    • Adriano Luz disse:

      Olá, Denise!

      Essa é uma ótima estratégia! É uma forma de garantir que só fique em seu blog o que é realmente necessário e útil ao seu leitor.

      Um abraço! E obrigado pelo "garoto"! 🙂

  33. Excelentes dicas! Obrigado!

  34. Suas orientações são realmente boas. Estou tentando melhorar o SEO do meu Blogger e o seu blog me ajuda.Fico-lhe grato.

  35. Mauricio disse:

    Muito obrigado pelas dicas, principalmente quanto as imagens, grato

  36. Rauk disse:

    você teria ideia de como faço para o tamanho da fonte aumentar em dispositivos móveis ? , o meu template é responsivo mais as letras ficam muito pequenas .

Para enviar seu comentário, preencha os campos abaixo:

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.
Quer aprender como R$173.571,73 como Afiliado em 4 meses?Quero Assistir o Vídeo!