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.
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 este comentário ]
Tudo isto é muito bom!!
[ Responder este comentário ]
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 este comentário ]
[...] 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 [...]
[...] 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 [...]
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 este comentário ]
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 este comentário ]
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 este comentário ]
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 este comentário ]
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 este comentário ]
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 este comentário ]
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 este comentário ]
Fala Luiz Gustavo,
Parabéns pelo post/artigo. Bem direto nas dicas sem ficar enrolando.
Gosto desse esquema da Mestre SEO que sempre faz a galera ficar escrevendo. Isso aumenta o conhecimento, antes de mais nada, da própria empresa e claro, também ajuda a compartilhar o conhecimento.
Grande abraço para a galera.
Domicio Neto
[ Responder este comentário ]
Detalhe que as dicas são de antes do anúncio do Google sobre a velocidade de carregamento de sites como fator de rankeamento! =)
Bom para o usuário, bom para o Google.
[ Responder este comentário ]
No começo a idéia era estimular os meus colegas a escreverem. Hoje eles tem motivação própria e escrevem sempre que desejam.
É uma evolução muito legal que está acontecendo com a nossa empresa.
[ Responder este comentário ]
Oi Luiz Gustavo, ótimas suas dicas!
Eu estou a dias pesquisando pra deixar o meu blog mais leve, já tentei usar o CleanCSS mas quando otimizo e coloco no blog ele não aceita, já tentei de tudo e nada
Acho que talvez não esteja fazendo certo, então se você puder me indicar quem possa me dar uma ajuda agradeço!
Abraços
[ Responder este comentário ]
Gostaria de tirar 3 duvidas com os grandes mestres…hehehe
Ouvi falar que para otimizar o peso de um site também seria ideal criar sprite nas imagens (as que aparecem em quase todas as paginas), usar um subdominio para imagens e o ultimo é usar “/” no final de cada url.
Queria saber se isso é verdade e se vale a pena mesmo…rs
Vlw galerinha e abraços
[ Responder este comentário ]
E um post mais antigo porem muito bom, e sempre bom deixar os sites mais leves, não so pelo seo, mais muito mais pelo usuario que acessa ele.
Otimo post
[ Responder este comentário ]
estou começando agora e gostaria de saber o que é css,DocType, ajax.
obrigado
[ Responder este comentário ]