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 ?
-
2Juntar tudo em um arquivo só (1 JS e 1 CSS), comprimidos e gzipados.– user622Commented 3/05/2014 às 21:02
-
EU já tentei fazer isso, porém, o site fica tudo bugado.– Alexandre LopesCommented 3/05/2014 às 21:05
-
Estava pensando em usar CloudFlare, e cachear os arquivos.– Alexandre LopesCommented 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".– bfavarettoCommented 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.– user622Commented 3/05/2014 às 23:00
3 Respostas
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
ebackground-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.
-
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>
.– LucasCommented 3/05/2014 às 23:34 -
-
-
Obrigado! eu uso os JS depois da TAG
</body>
entre</body>
e</html>
tá errado? Commented 3/05/2014 às 23:46
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.
-
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.– user7261Commented 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?– user7261Commented 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
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.