Sabemos que páginas com tempo de carregamento otimizado tem impacto em SEO tanto pensando pelo lado do usuário quanto pelo lado do webcrawler. Uma página muito carregada ou muito suja de código, dificulta o trabalho dos webcrawlers e, possivelmente, te prejudica ao ter o conteúdo analisado.
Webcrawlers não vão perder tempo se esforçando para abrir seu site pois ele tem milhares de outros sites para analisar. Pensando no usuário, acontece a mesma coisa, o usuário possivelmente sairá do seu site antes mesmo de esperar ele carregar por inteiro. Assim, trago neste artigo, 20 dicas que ajudam a diminuir o tempo de carregamento de páginas de websites.
20 Dicas para Deixar Páginas Web Mais Leves
- Comprima suas imagens
Se você usa o photoshop use sempre a opção “Save for Web”. Se você não possui, pode usar alternativas gratuitas também. - Não reduza as imagens com HTML
Nunca use HTML puro para redimensionar suas imagens. Elas serão carregadas com o tamanho original (grande) e será redimensionada no browser. Isso também deixa as imagens feias (distorcidas, mal-redimensionadas ou de resolução alterada), o tratamento do browser não é eficiente e as imagens perdem suas características. - Especifique as dimensões da imagem
Sempre especifique os tamanhos das imagens no código HTML. Isso irá reduzir o tempo de renderização da página pois o browser saberá como encaixar os elementos na tela. - Imagens grandes? Corte-as
Se você precisa carregar uma imagem muito grande no seu site, divida-as em algumas partes para agilizar o carregamento. Claro, não reduzirá o tamanho mas passará impressão de agilidade na abertura do site. - Não corte demais!
Isso poderá gerar muitas requisições HTTP e consequentemente deixará mais lento e fará o efeito contrario do esperado. É preciso saber ponderar muito bem ao dividir ou não, e em quantas partes será dividido. - Use CSS ao invés de imagens
Use CSS para criar os efeitos necessários para seu site quando possível. Obviamente, o conteúdo a ser carregado será muito menor. - Não use tabelas quando não forem necessárias
Tabelas são feitas para apresentar dados tabelados, para layout arquitetura da pagina você deve usar CSS que tem esse propósito. Isso também deixará seu código mais limpo e melhor para ser lido e entendido. Os crawlers conseguem ler sites com tabelas, mas você irá dar uma mãozinha para ele usando tableless. - Use arquivos CSS externos
Usando arquivos externos, você irá ajudar o crawler e o seu usuário, pois uma vez lido o CSS externo, ele será jogado no cache e não precisará ser recarregado a cada nova página. - Use arquivos Javascript externos também
Segue o mesmo princípio do CSS externo, principalmente para Javascript, para o qual será mais importante o cache dos arquivos. - Remova os espaços em branco do seu HTML
Lembre-se, espaço em branco também é um caracter e consome banda e espaço em disco. É muito comum deixarmos sujeiras de espaço em branco em nossos códigos, remova-os sempre. - Imagens com CSS ao invés de imagens em tag HTML
Pode parecer estranho, mas o carregamento das imagens como background de uma div é mais rápido do que carregar a imagem com as tags HTML. - Uso de links relativos
Pensando ainda na questão de tamanho dos arquivos HTML, usar caminhos relativos ajuda a remover os caracteres http://www.seusite.com.br/ cada vez que criar um link. Será uma economia significativa no código, mas é um peso para SEO, considerando quando “emprestam” seu conteúdo. Em termos de SEO, o melhor é usar o caminho absoluto. - Especifique o DocType
Páginas que tem DocType definido tendem a ser mais rápidas para serem carregadas. - Reduza requisições HTTP do seu site
Cada vez que você faz uma requisição HTTP, será necessário pedir o pacote, esperar a resposta, receber o pacote e confirmar sua chegada. Por isso, quanto menos requisições HTTP você tiver, mais rápido será o carregamento da sua página. - Não use HTTPS desnecessariamente
Somente use HTTPS quando for necessário. Esse tipo de conexão segura é pelo menos 3 vezes mais lentas que o HTTP normal. - Use Gzip para reduzir o tamanho do HTML
Uma alternativa muito válida é comprimir seu HTML para ser entregue. Isso não tem impacto para imagens, flash ou arquivos embarcados, mas para HTML faz uma grande diferença. - Separe servidores de conteúdo e de banco de dados
Se você possui um alto tráfego no seu site, criar servidores dedicados pode ajudar, e muito, na velocidade do seu site. Cada servidor será otimizado para um serviço. - Use AJAX quando puder
Usar AJAX ao invés de ficar recarregando seu site pode ser muito útil para otimizar a velocidade. Isso reduzirá o número de requisições HTTP do seu site e apresentará uma aparência de velocidade na entrega do seu conteúdo. - Coloque imagens indicando carregamento
É importante também, ao se utilizar AJAX ou Javascript, colocar imagens que indiquem que o conteúdo está sendo carregado. Isso não melhora o desempenho real, mas passa mais conforto para o usuário que está utilizando seu site saber que está sendo processado o pedido. - Reduza o número de cookies
Cada vez que um browser faz uma requisição, cookies são transmitidos. Isso quer dizer que se você não tomar cuidado, pode sobrecarregar a página com cookies. Atente-se também para o tamanho de cada cookie transmitido.
Essas foram 20 dicas rápidas para otimizar a velocidade do seu site. Não foi especificado exatamente como fazer algumas dicas dessas acima, mas caso tenha dúvidas, poste em nosso fórum e debata sobre o assunto. Afinal, o debate é o que realmente gera conhecimento, concordam?
Até a próxima!
Divulgue este artigo!
Luiz Gustavo
Estudante do curso de Sistemas de Informação no UNIVERSITAS. Trabalha com web há mais de 10 anos, atualmente focado em JQuery, PHP e MYSQL além de SEO.
16 de setembro de 2009 às 2:19 pm
Perfeito. Portanto, atenção voltada para as plataformas de E-Commerce que encontramos por aí. Existem casos sérios onde as imagens são redimensionadas no HTML puro, bem na hora em que o usuário final carrega a página no Browser. Consome muito do servidor e provavelmente seu e-consumidor irá embora.
[Responder]
16 de setembro de 2009 às 4:56 pm
Tudo isto é muito bom!!
[Responder]
16 de setembro de 2009 às 10:03 pm
Quanto a 1 dica, o ideal é testar a qualidade das imagens para ficarem leves e não perderem qualidade, a dica 4 e 5 já cortei muito imagens para dificultar as pessoas copiarem as imagens, hoje com um aumenta de banda larga, faço ou inteira ou com menos pedaços. Ótimas dicas!
[Responder]
17 de setembro de 2009 às 1:11 pm
[...] 20 Dicas para Otimizar a Velocidade do seu Site – Sabemos que páginas com tempo de carregamento otimizado tem impacto em SEO tanto pensando pelo lado do usuário quanto pelo lado do webcrawler. Uma página muito carregada ou muito suja de código, dificulta o trabalho dos webcrawlers e, possivelmente, te prejudica ao ter o conteúdo analisad [...]
17 de setembro de 2009 às 5:01 pm
[...] 20 Dicas para Otimizar a Velocidade do seu Site – Sabemos que páginas com tempo de carregamento otimizado tem impacto em SEO tanto pensando pelo lado do usuário quanto pelo lado do webcrawler. Uma página muito carregada ou muito suja de código, dificulta o trabalho dos webcrawlers e, possivelmente, te prejudica ao ter o conteúdo analisad [...]
17 de setembro de 2009 às 9:24 pm
Primeiramente, Tópico perfeito, dicas valiosas que realmente fazem diferença!
Eu só possuo 2 dúvidas relacionadas as dicas:
No caso, quando estou construindo um arquivo css faço deste modo:
body{
margin:0px;
background-color:#FFF;
}
No caso seria melhor construilo deste modo?
body{margin:0px; background-color:#FFF;}
Outra pergunta é relacionado ao link absoluto e relativo, qual a diferença de um para o outro
Boa noite e parabéns!
[Responder]
Luiz Gustavo disse,
setembro 18th, 2009 às 2:18 pm
Olá Wallysson!
Primeiramente obrigado pelo comentário, quanto a sua dúvida, eu acho que não precisa ser tão radical a ponto de escrever todo o CSS sem uma formataçao que fique fácil de ser trabalhada. A principal idéia é economizar em espaços em branco desnecessários. Muitas vezes por facilidade distanciamos cada bloco de código um do outro. A formatação e indentação correta possui várias vantagens e vale a pena ser mantida.
Quanto aos links, link absoluto é aquele que você inclui todo o endereço da página de destino, usando http://wwww.seu-site.dominio/area-do-site/artigo.html. Já esse mesmo link na forma relativa seria /area-do-site/artigo.html. Ou seja, você economizou os caracteres do endereço do site, entende?
Caso tenha mais dúvidas, pergunte sempre. Até a próxima!
[Responder]
18 de setembro de 2009 às 1:45 pm
Em relação as imagens que for usar o Wordpress recomendo usar o Plugin Smush it,
ele faz uma otimização das imagem removendo alguns metadados , alem de comprimir o seu tamanho.
[Responder]
23 de setembro de 2009 às 10:17 pm
Muito legal o post, Wallysson.
Acompanho a tempos o MestreSEO, mas só hj me cadastrei.
Sempre tive essa preocupação com o tamanho das imagens. Acredito que meu site seja bem clean nesse ponto. Se puder dar uma olhada e me dizer, ficaria muito agradecido.
Abraço!
Mauricio
http://www.4corescomunicacao.com.br
[Responder]
01 de junho de 2010 às 12:08 pm
Gosto deste site, mas acho que este seu texto diz pouca coisa para nós leigos no assunto. Porque não explicar melhor os assuntos ou pelo menos colocar um link. Como entender isso, sem ir para outro site:
8. Use arquivos CSS externos
Usando arquivos externos, você irá ajudar o crawler e o seu usuário, pois uma vez lido o CSS externo, ele será jogado no cache e não precisará ser recarregado a cada nova página.
Acho que você deveria explicar como se faz isso. Achei vago.
15. Não use HTTPS desnecessariamente????????????????????????
Somente use HTTPS quando for necessário. Esse tipo de conexão segura é pelo menos 3 vezes mais lentas que o HTTP normal.
Somente use HTTPS quando for necessário. Esse tipo de conexão segura é pelo menos 3 vezes mais lentas que o HTTP normal.
[Responder]
Luiz Gustavo disse,
junho 1st, 2010 às 2:13 pm
Ola Jackson! Obrigado pelo comentário.
Respondendo suas dúvidas:
8. Evite usar CSS embutido na página. Procure usar os arquivos externamente com ( pois esses arquivos externos entram no cache do navegador e não precisa ser recarregado toda hora.
15. Use HTTPs somente quando for fazer uma página segura (formulários de contatos pessoais ou senhas). O HTTPs é 3 vezes mais lento que o HTTP, então não vale a pena usar no site inteiro.
Tentei ser um pouco mais claro na resposta, caso ainda tenha dúvidas, sinta-se à vontade para perguntar.
Abraços!
[Responder]
26 de junho de 2010 às 6:26 pm
Gostaria de saber se a url que ntermin com .html é melhor indexada ou não é necessaria? Vejo que aqui no site vocês não usam.
[Responder]