22

Meu site tem 10 folhas de estilos (CSS) e 15 scripts (JavaScript / jQuery), fora as imagens, isso influencia muito no carregamento. Na opinião de vocês, qual a melhor maneira de deixar o site mais rápido/leve ?

6
  • 2
    Juntar tudo em um arquivo só (1 JS e 1 CSS), comprimidos e gzipados.
    – user622
    Commented 3/05/2014 às 21:02
  • EU já tentei fazer isso, porém, o site fica tudo bugado. Commented 3/05/2014 às 21:05
  • Estava pensando em usar CloudFlare, e cachear os arquivos. Commented 3/05/2014 às 21:12
  • No caso do JavaScript passe o código por um linter (como jslint ou jshint) antes de minificar, isso deve resolver o "bugado".
    – bfavaretto
    Commented 3/05/2014 às 21:48
  • Só mais uma coisa: para comprimir JS, recomendo o Closure Compiler ou o UglifyJS. Para compactar CSS, recomendo o YUI compressor. Acesse também o PageSpeed e o GTmetrix, para descobrir o que fazer para melhorar seu site.
    – user622
    Commented 3/05/2014 às 23:00

3 Respostas 3

15

Vou listar as principais práticas que ajudam no desempenho:

  • Juntar JS em 1 arquivo e CSS em 1 arquivo, ambos minificados. Existem ferramentas online para isso, por exemplo, Javascript Minifier e CSS Minifier.
  • Se o servidor permitir, utilize gzip/deflate, assim ele envia os arquivos compactados. Aqui tem um artigo tutorial.
  • Colocar CSS no <head> e JS no final, logo antes de fechar o </body>.
  • Considere utilizar o atributo async (assíncrono) no carregamento de JS. Faz com que o carregamento do arquivo ocorra junto com a renderização da página.
  • Otimize as imagens. Parte do tamanho de uma imagem são metadados, que não fazem diferença numa página web. Existem ferramentas online que fazem isso como TinyPNG e JPEG Mini.
  • Utilize CSS Sprites. Isto é, juntar todas as imagens em 1 só e utilizar CSS para posicioná-las através das propriedades background-image e background-position. Também existem ferramentas online para isso, como a Sprite Cow.

Se você pesquisar sobre isso, vai achar muitos artigos com dicas para melhorar o desempenho. Vou deixar o link de uma página que eu gosto: se chama Como perder peso no browser. Tem um resumo das principais práticas, feito por desenvolvedores de grandes páginas web.

8
  • como se usa esse atributo async? você conhece alguma ferramenta para ajudar na criação de sprites? Commented 3/05/2014 às 23:30
  • Para sprites, existem ferramentas online, como essa: spritecow.com. Faz o upload e depois é só clicar na imagem que deseja e ele te dá o CSS. O async, é só adicionar na tag script, exemplo: <script type="text/javascript" src="arquivo.js" async></script>.
    – Lucas
    Commented 3/05/2014 às 23:34
  • Obrigado! e esse ASYNC??? Commented 3/05/2014 às 23:36
  • Eu editei o comentário anterior falando do async, desculpe.
    – Lucas
    Commented 3/05/2014 às 23:46
  • Obrigado! eu uso os JS depois da TAG </body> entre </body> e </html> tá errado? Commented 3/05/2014 às 23:46
5

A implementação do protocolo HTTP tem uma deficiência que para cada arquivo o browser precisa abrir a conexão, fazer download e depois fechá-la. No novo HTTP 2.0, que deve demorar para ser lançado, isso será corrigido: o browser manterá a conexão ativa enquanto a aba estiver aberta (fonte).

No teu caso o seu site está criando uma nova conexão com o servidor pelo menos 26 vezes. Juntar os CSSs e Javascripts, ainda que sem qualquer minificação / compressão, diminuiria o tempo de carregamento por causa disso. Se o teu site ficou bugado depois que tu tentou juntá-los pode ser bug da ferramenta que tu usou. Tente usar outra ou mesmo fazê-lo manualmente para conferir o resultado.


Sobre aquilo que o @Lucas falou sobre usar sobre jogar o JS pro final da página e usar o atributo async é preciso tomar alguns cuidados:

  • Provavelmente entre os Javascripts que você tem, alguns são dependentes de outros. Por exemplo, muitos dependem do jQuery. Nesse caso você não deve usar async, pois o browser pode estar tentando carregar outros scripts dependentes do jQuery (por exemplo), antes do próprio jQuery.

  • Jogar o Javascipt pro final também não funciona se você possui Javascript inline na sua página que dependem de scripts que só serão carregados no final da página. (Uma solução para isso é usar unobtrusive Javascript).

  • O mesmo cuidado se deve ter ao minificar os scripts, seja automática ou manualmente: a ordem correta deve ser respeitada.


Para conferir quase tudo que tu pode fazer para melhorar o desempenho de um site, confira: Como perder peso no browser

Não deixe de conferir também a extensão PageSpeed do Google para Chrome e Firefox. Ela faz uma análise da parte client side da sua aplicação tentando identificar problemas de desempenho e apontando soluções.

5
  • Eu fiz manualmente mesmo, através do adobe DreamWeaver, porém não funcionou. Vou olhar as ferramentas que os outros membros indicaram para ver como se sai. Commented 3/05/2014 às 23:33
  • @AlexandreLopes Atualizei a resposta. Se tu não se importa, postar o código sempre ajuda.
    – user7261
    Commented 4/05/2014 às 17:31
  • Sim @user3153542 eu já tinha feito isso e deu problema, ai eu vi há alguns dias atrás fuçando que tem que manter a ordem, ou seja, se minha página tem script jQuery, primeiro tem que vir a livraria do jQuery, e depois os plugins, se não não funciona. Commented 4/05/2014 às 21:45
  • @AlexandreLopes Sendo assim nós precisamos de mais informações para saber porque está ficando bugado. Que bibliotecas tu está usando? O console do Firefox ou do Chrome acusa algum erro?
    – user7261
    Commented 5/05/2014 às 10:55
  • No console do Chrome está normal. Estou usando jQuery. Acho que deve ter ficado bugado porque eu acho que não fiz em ordem, vou tentar fazer na mesma ordem que está, acho que vai funcionar. :D Commented 5/05/2014 às 15:38
2

Uma idéia que me ajudou muito foi instalar a extensão google pagespeed no chrome e usá-la para identificar pontos de baixa performance; com isso consegui um ganho de quase 70% na carga de algumas páginas.

Outro método que usei (sugerido pelo pagespeed) foi carregar os ".js" de forma assíncrona através de uma função na página; dessa forma posso bloquear os elementos ativos ou retardar a parte js até que todas as bibliotecas estejam disponíveis.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .