10 dicas para otimizar o carregamento do seu site

A alguns meses fiz um artigo sobre como otimizar o carregamento do seu site no qual eu falava sobre headers, compactação de resposta HTTP dentre outros.

Hoje vou falar sobre algumas outras dicas que fazem muito efeito tanto no carregamento do site quanto do bandwidth mensal que você vai usar.

Alguns sites por ai dizem que o tempo ideal de carregamento de um site é quatro segundos, mas isso depende muito da Internet da pessoa e, claro, do tipo de conteúdo que estamos falando. Eu acredito que um site que carregue em até 10 segundos seja de ótimo tamanho e, se for por volta disso, não vai prejudicar o número de visitantes.

1. Tag <style> e style-in-line

Muita gente ainda usa o CSS todo dentro de uma tag style ou – não menos errado – usa style-in-line, que significa usar a propriedade style=”" do elemento para mudar o estilo dele. O CSS foi lançado na década de 90 gente! Ele foi feito pra ser usado!

Além de deixar o seu código fonte muito mais limpo, o uso de CSS em folhas de estilos separadas otimiza o carregamento do site e permite uma melhor separação entre a estrutura (HTML) e a aparência (CSS) do mesmo.

Imagine que você vai fazer o papel de uma peça de teatro e lá pela terceira página, entre uma linha e outra, você encontra uma observação que diz que o seu personagem tem cabelo vermelho… Não seria melhor que isso viesse logo depois da capa, pra você já se preparar?

2. Arquivos JavaScript, uni-vos!

Falei sobre isso no outro artigo mas vale repetir: muita gente usa um site que, por exemplo, chama o jQuery mais três plugins e um script criado com os efeitos do site.. Isso dá um total de cinco arquivos, cinco requisições diferentes que o seu servidor recebe, organiza, manipula e redireciona só pra inserir o JavaScript do seu site.

Una (junte) todos os códigos JavaScript do seu site em um arquivo só, e sé isso for te dar muita dor-de-cabeça, veja sobre o Google Minify

3. Acabe com o Flash

Antes que você, designer, levante uma tocha e inicie uma caçada contra mim, essa dica vale para a exibição de conteúdo… Não daquele topo fofinho que você fez pro seu site.

Flash pesa? Sim, pesa. Evite usar objects espalhados pelo site… O Flash é mal lido pelo Google, não segue nenhum padrão de organização de código (já que trabalhamos apenas com imagens e efeitos visuais) e é muito mais dificil de alterar do que um simples (X)HTML… Tente usar efeitos com JavaScript (leia-se jQuery), que pesa muito menos que o Flash e você não precisa do .fla para editar… Qualquer problema é só entrar no FTP e mudar.

4. As futilidades da Web

Achou um chat cheio de códigos prontos de chats, sandbox, mural de recados, previsão do tempo e tudo mais? Pode sair dele agora. Não saia enfiando códigos prontos e iframes e scripts no seu site só pra tentar deixar ele mais legal… Isso é coisa de principiante e isso não traz vantagem nenhuma pro seu site! A não ser, claro, que vantagem pra você signifique coisas que ninguém vai usar.

5. Galeria de fotos

Seu site é uma galeria de fotos super transada e cheia de efeitos em JavaScript? Legal… Mas precisa mesmo carregar todas aquelas 80 fotos de uma só vez em escala real?

Crie thumbnails (miniaturas) das suas fotos e imagens que pesam muito (mais que 50Kb), isso vai economizar MUITO bandwidth (tráfego mensal) pro seu site.

6. Livro do autor

Você é um autor de livros super renomado e quer disponibilizar toda as 841 páginas do seu livro de bolso no seu site pessoal? Então, por favor, não coloque tudo em uma página só. Separe as páginas do livro em páginas do site… Várias! Quanto menor o conteúdo, melhor pro visitante, melhor pro Google, melhor pra velocidade do seu site, e melhor pro seu bolso (se você trabalhar com publicidade online). Menos é mais!

7. Meu site é HD!

Bom… Você já diviu seu site em páginas, sua galeria de fotos usa thumbnails e.. peraí… As fotos (grandes) estão com 100% de qualidade?! Pra que? O cérebro humano quase nunca conseguiu reparar a diferença entre uma imagem com 80% e outra com 100% de qualidade. Reduza a qualidade das suas fotos, vale a pena.

8. E o tamanho da minha imagem é…

Quando você usar o atributo <img … /> defina a largura e altura da imagem, isso vai economizar trabalho pro navegador do visitante que não vai ter que carregar toda a imagem antes pra descobrir o tamanho de exibição.

9. O que você vê é o que você tem, mas não é o que você precisa!

Sabe aquele seu editor de sites com suporte ao WYSIWYG (What You See Is What You Get)? Acha legal ele fazer todo o trabalho pra você de criar o HTML e o CSS sem que você precise se preocupar? Pois vá até o código fonte criado por ele e comece a fazer uma limpeza geral. Na maioria dos casos eles acabam criando códigos além do necessário, seja no HTML, seja no CSS.

Aprenda a criar sites usando um editor de texto que não te mostra uma representação visual, como o Notepad++, EditPlus, NetBeans e vários outros… Até o próprio Notepad serve!

10. Seu site não é um Centro de Convenções!

Não precisa ficar chamando um arquivo de cada site… jQuery do Google, CSS da Globo.com e por ai vai.. Quanto mais arquivos você chamar de servidores que não são o seu site, mais lento vai ser o carregamento dele pois o visitante vai precisar “resolver” vários DNSs, não só o seu.

Espero que tenham gostado! :D

13 thoughts on “10 dicas para otimizar o carregamento do seu site

  1. José Eurico

    O Flash, além de deixar o carregamento do site lerdo, gasta muita energia na renderização, prejudicando dispositivos portáteis, os quais, na maioria, nem possuem suporte a ele. Se for usar Flash, use somente em banners, infográficos, pois quando usado no menu, deixa o usuário que acessa o site pelo celular isolado na página inicial.

  2. Darc Designer

    gostei das dicas…. principalmente a de naum usar .wsf, depois que descobri outras maneiras de colocar efeitos e animar uma publicidade, procuro o máximo naum usar arqui em .wsf justamente para otimizar o carregamento de site…

    vlw mesmo essas dicas vaum ser muito útil pra mim e pra muita gente…

    vlw tt

  3. Akissel Donner Winchester

    Gostei! Nossa, foi muito interessante , e realmente melhorou muito!

    Uma das que mais me ajudou foi a 9! O meu editor “nome muito esquisito pra mim falar” , punha muitas coisas desnessarias no codigo , ate javascripst e etc!

    vlw!

  4. alexandre

    show so nao entendi alguns aspectos depende tbm muito do tipo de site tem alguns q se faz necessario flash como site onde a muita propaganda e aqui na minha regiao o pessoal gosta de script de previsao do tempo hehe pq nao passa previsao do tempo para as cidades do pessoal mas concordo q scripts de outros sites pessam muito tipo script de visitantes online etc gostei desa dica de juntar os java para nao ficar chamando varios como faz isso poderia criar tuto sobre fui la no link q vc mensionou mas nao entendi direito =D
    gostaria de colocar um chat em um site mas como vc disse so encontra chats com super codigos q mais atrapalham q ajuda =P vc conhece algum chat facil de configurar em php e mysql se possivel com administraçao? ja fucei a net toda e nuca encontri um tutorial legal de como monta um chat

    vlw abraçao seu blog e 10

  5. Andrews Lince Andrade da Costa

    Olá, Thiago!!! Mais uma vez, parabéns pelo artigo. Tenho uma dúvida com relação à dica nº 2, do javascript. Se eu unir todos os códigos de arquivos javascripts num só, isso não fará com que algumas páginas carreguem código desnecessário, tendo em vista que alguns plugins e/ou códigos podem não ser comuns a todas as páginas?

    1. Thiago Belem

      @Andrews
      Seguindo a lógica sim, carregaria codigo desnecessario… Mas o seu navegador cacheia (salva na memória) os arquivos usados pelo site (imagens, css, js, swf e etc.) e quando você for pras outras páginas, mesmo que seja carregado codigo “desnecessário” ele vai ser mais rápido, pois já está no computador do visitante. ;)

  6. Moisésw3

    Thiago, tudo que você passou e comentou, faz sentido, até porque, você é o cara da programação.
    Mas é apenas a sua opinião !!!
    Quanto ao Flash, de ser pesado, é só saber usar os actions, que fica levinho!!!. e outros segredos ???…
    Valeu.

  7. Jorge

    Ótimas dicas!! Já são bem conhecidas mas que por priguiça deixamos passar! Parabéns pelo seu artigo!

  8. Renato Reis

    @Rodrigo

    Eu já vi algo assim em algum desses CMSs prontos ou em algum site, talvez até do próprio Thiago. Se ele não fizer isso automaticamente existe uma duplinha de php e jquery que você pode redimensionar a área de seleção e até arrastar um tamanho definido pra gerar o thumnail de uma parte da imagem (se não me engano aqui no blog tem um tutorial sobre este plugin) e um php básico para salvar a nova imagem.

    Se eu estiver errado o Belém me corrige.

    @Thiago

    Muito bom o post, mas fiquei com uma duvida quanto aos javascripts. Usar uma biblioteca inteira de jQuery (apesar de ser mais certo) num seria melhor usar um AJAX bem feitinho pra poder fazer um efeito simples (caso seja soh um)?

  9. Rodrigo Berriel

    Excelente esse artigo. Todas as dicas eu já conhecia e as uso, são realmente excelente…

    Gostaria de saber, se existe alguma coisa (algoritmo) que faça com que ao fazer o upload de uma imagem, por exemplo, 800×600, ele crie outra 160×120 automaticamente, sem eu precisar fazer o upload de duas imagens.

    Gosto muito dos seus textos…

    Parabéns!

Comments are closed.