• Facebook
• WhatsApp
• Twitter
• Pinterest
• LinkedIn

De que adianta você passar horas personalizando seu blog se a página apresenta lentidão excessiva no carregamento? Em outras palavras, você deixou seu blog com sua cara, seu estilo, mas parou pra pensar se todos os elementos que você inseriu deixou o seu blog lento demais?
Quando criamos um blog queremos que ele seja visualizado e acessado por várias pessoas, mas se um visitante chega até sua página, e se depara com uma lentidão de carregamento até conseguir chegar ao conteúdo que ele foi buscar, com certeza ele fechará a página e vai buscar a informação em outro lugar.
Mesmo que tenhamos uma internet rápida, devemos sempre pensar naqueles que estão do outro lado e que são nosso foco principal: os leitores!
E se a pessoa que acessa seu blog possui uma internet lenta?
Afim de tentar ajudar você a ter um melhor desempenho no carregamento do seu blog, aqui vou disponibilizar uma série de dicas para otimizar seu blog e evitar que você deixe sua página lenta no carregamento e tornar seu blog mais rápido.

1) Simplicidade e objetividade é sempre fundamental:

Procure ser simples e objetivo. Evite inserir elementos (widgets) demais no seu blog. Blogs que apresentam elementos demais simultâneamente acabam tornando os elementos mais visiveis que seu próprio conteúdo.

2) Quantidade de postagens na página inicial:

Procure ajustar a quantidade de postagens que aparecerão na sua página inicial. Utilizar o “leia mais” é uma excelente forma de otimizar o carregamento do seu blog. Ao acessar seu blog, o visitante buscará o título do post que lhe interessou. Ao apresentar muitas postagens na home de forma completa, obriga o leitor a ter que navegar por uma longa jornada até o final da página para conseguir visualizar seus posts pelo título e finalmente escolher qual vai ler, qual lhe chamou mais atenção.
E em razão disso, duas coisas podem acabar ocorrendo: ou ele é realmente persistente e vai até o final da página até encontrar o que ele quer, ou vai desistir de procurar e vai sair da sua página.
Portanto, pense sempre em seu leitor, não deixe-o cansado e não torne suas publicações cansativas de serem visualizadas.
Se você escreve posts grandes e sempre utiliza imagens em sua postagem, procure usar o “Leia Mais” e defina de 4 a 5 postagens no máximo para a home.

3) Sistema de Comentários:

Otimize o sistema que você disponibiliza para que seu leitor deixe um comentário em seu blog.
A Forma de comentar em páginas separadas ou janelas pop-up, acaba tornando um verdadeiro incômodo para o visitante, sem falar que demanda maior tempo de carregamento da página, o que pode acabar causando que ele desista de comentar em seu blog.
Procure utilizar o modo de “Postagens abaixo incorporada”.
Se você não sabe como configurar: Vá em “Configurações”, selecione a aba “Comentários” e em “Posição do formulário de comentários”, selecione “Postagem abaixo incorporada”.

4) Scripts e Hacks:

Procure colocar no corpo HTML do seu template apenas scripts que você realmente utiliza. Se você instalou scripts e não utiliza mais as funções dele, remova-o!
Evite carregar seu template e sua sidebar com scripts demais. Não faça uma “salada” de scripts, pois muitos deles simultaneamente, por vezes apresentam conflitos entre si.
Por exemplo: o script “marquee” quando utilizado com o script JQuery dá um conflito tremendo no carregamento. Demora horas para finalizar o carregamento de ambos e até que carregue tudo, sua página se apresenta de forma toda desconfigurada.
Portanto, evite ao máximo utilizar script “marquee” (geralmente usado para banner dos parceiros rotativos)
Faça uma avaliação de quais realmente são necessários.
Quando você abre a página do blog, o navegador vai buscar cada endereço de arquivo JavaScript que está nas chamadas do seu template, antes de carregar os estilos de sua página. E cada vez que atualizamos sua página, o navegador irá buscar e carregar tudo novamente.
Dê preferência em hospedar javascripts pequenos no próprio template.E para Javascripts maiores hospede todos em um único lugar. Uma dica: confira aqui uma lista de Sites para hospedagem de arquivos. Leva muito menos tempo se o navegador buscar apenas um endereço para carregar tudo de uma só vez.

5) Evite usar Flash:

Evite o uso de widgets em flash, até mesmo em suas postagens.
Widgets feitos em Flash pesam muito na hora do carregamento. Faça uma avaliação se esse conteúdo realmente é relevante o suficiente para seus leitores antes de colocá-los em suas postagens ou em sua sidebar.

6) Uso de tabelas:

Evite usar tabelas em suas postagens. Tabelas geram muito código e tornam o carregamento pesado demais.

7) Imagens no post:

Procure usar imagens pequenas nas postagens.
Opte por hospedar no próprio blogger as imagens que você vai publicar em seu post, clicando no icone “inserir imagem” na edição HTML da postagem.
Mas atenção: Quando você hospeda no post uma imagem de 1024px x 800px , por exemplo, ainda que o Blogger a transforme em uma imagem com largura de 300px, é a imagem original que vai pesar em sua página.Faça um redimensionamento da imagem antes de posta-la, adaptando o tamanho dela ao tamanho da sua área de postagem, a não ser que você precise que seu leitor clique na imagem para amplia-la e ver alguns detalhes dela (como em ilustrações de tutoriais, por exemplo).
Dê preferência ao uso de imagens no modo “Pequena”.Isso ajuda a poupar tempo na hora do carregamento da página.
Só utilize imagens em gif ou png se for realmente necessário, por exemplo,para imagens como banners, botões, etc.
Imagens meramente ilustrativas no post, dê preferência para as do tipo “jepg”.
Isso ajuda a melhorar o carregamento.

8) Imagens no Template:

Procure definir altura e largura para imagens utilizadas em seu layout e você pode hospedar as imagens no próprio blogger.
Quando você utiliza alguma imagem no seu template, determine altura (height) e largura (width)no elemento onde sua imagem ficará, de acordo com o tamanho que a imagem original apresenta.
Por exemplo: Se vai utilizar uma imagem como background em “outer-wrapper” e a imagem que você vai utilizar possui 900px de largura(widht) e 500px de altura(height), defina essas exatas medidas na folha de estilos do template referente a “outer-wrapper”.
Veja como ficaria esse exemplo:

#outer-wrapper{
width:900px; height:500px;
background: url(endereço-da-imagem) no-repeat top center;
}

Quando não se define esse atributo, o navegador é obrigado a determinar todos esses valores antes de continuar a carregar o restante do blog.
Caso você não saiba o tamanho da imagem e queira descobrir a altura e largura das imagens, clique com o botão direito em cima da imagem e vá em ‘Propriedades’.

9) Uso de rádio ou player é o maior vilão:

Uso de rádio e players na sidebar além de ser um incômodo para o leitor, compromete muito o tempo de carregamento da página.Lembre-se sempre: as pessoas não gostam de se sentir obrigadas a ouvir algo que ela não queira. É muito chato quando visitamos um blog e de repente uma rádio , ou música começa a tocar sem que a gente peça.
Muitas vezes o usuário está ouvindo uma música no próprio computador, imagina o desconforto e o conflito de melodia que isso iria causar?
Não coloque esse tipo de widget no seu blog. Caso a inserção de uma rádio seja muito relevante ao seu conteúdo, coloque apenas um link para ela, e nunca em “autoplay”.

10) Uso de Widgets em excesso:

Não exagere na quantidade de widgets. E tenha maior cuidado com os Widgets que dependem de arquivos JavaScript, principalmente porque javascripts em excesso podem causar conflitos entre si.
Verifique e analise sempre se o uso de certo Widget realmente causará algum impacto positivo no seu conteúdo e na navegação para o seu leitor. Faça uma avaliação constante no funcionamento dos Widgets e decida se há mesmo necessidade em mantê-los. Um widget a menos pode fazer muita diferença no carregamento do seu blog.
Procure colocar os widgets mais pesados no Footer (Rodapé), assim eles serão carregados depois de carregar o conteúdo principal do Blog.
Existem certos widgets que não fazem o menor sentido permanecerem nas páginas internas e outros que não tem necessidade de ficarem na página inicial.
No próximo post vou ensinar como melhorar a usabilidade dos seus widgets de modo que eles apareçam nas páginas onde são mais importantes. Assim poderá definir quais widgets aparecerão na home e quais aparecerão na páginas internas.

Finalizando:

Lembre-se que a cada atualização (mudança) de página todos os estilos contidos dentro da linha <body> serão carregados novamente e cada elemento contido ali terá uma nova chamada HTTP que também será carregada novamente.
Quanto mais elementos, mais requisições HTTP e quanto mais requisições HTTP, mais o blog vai demorar a carregar.
Se você procurar definir os estilos do seu template dentro da folha de estilos (na CSS) do template, elas carregam só no primeiro acesso e ficam lá no cache do usuário. (Eu digo elementos, como imagens de background, por exemplo).
Os estilos devem ser inseridos sempre entre as tags <b:skin> e ]]></b:skin>

Analizando o carregamento do seu blog:

Depois de todas essas dicas, que tal verificar os aspectos de seu site, inclusive a velocidade de carregamento?
Vamos utilizar ferramentas para fazer estas análises:

O site Seo Centro analisa a velocidade de carregamnento do seu blog, bem como as metas tags.

O Yahoo Site Explorer verifica o tamanho das páginas do seu blog, e checa quais são as páginas que precisam de mais otimização. Basta acessar o site e inserir a URL do seu blog conforme a imagem abaixo:

Outra opção de análise é no site Website Speed Test, basta acessar o site , digitar o endereço do seu blog e clique em Submit.

Se você quiser otimizar mais o seu blog,utilize o analisador de sites do WebSiteOptimization.com. Basta acessar o site, digitar o endereço do seu blog que ele fará uma análise com relatório e ainda recomendará modificações que podem ser feitas.
O site demonstra cada item em cores diferentes apontando a situação de cada um:
Verde é porque está tudo ok;
Amarelo são os que ainda podem ser otimizados;
Vermelho são os críticos e devem ser otimizados o mais breve possível!

• Facebook
• WhatsApp
• Twitter
• Pinterest
• LinkedIn