-1

Estou montando uma pequena Framework de design CSS e JS para padronizar o sistema em que estou trabalhando.

Minha dúvida é como conseguir a melhor performance.

Já fiz várias coisas como habilitar o cache, organizar o código e etc...

Porém os navegadores em média fazem 6 requisição por vez ao servidor. Então pensei em colocar todo o CSS e JS em 2 arquivo. E depois fazer a versão minificada deles.

Assim o sistema faz apenas 2 requisição e carrega todo o CSS e JS para o cache.

Devo fazer assim, ou criar vários CSS e JS?

5
  • 1
    Oi Hugo, essa é uma questão bem interessante mas difícil de responder objetivamente... Penso que a melhor estrutura vai depender de vários fatores como quão frequentemente você vai atualizar o CSS / JS e se as áreas de atualização podem ser agrupadas. Temos também o HTTP/2 ganhando força. O HTTP/2 alivia bastante o custo de requests simultâneos; já existem inclusive artigos recomendando o uso de arquivos separados. Commented 28/12/2016 às 11:30
  • 1
    Minificar os recursos é uma boa idéia, e minimizar o número de requests é certamente importante do ponto de vista de performance. O que você quer fazer é minimizar o número de requests -> maximizar o número de cache hits -> minimizar latência (e.g., com uma CDN) -> não servir JavaScript / CSS desnecessário (funções e estilos não usados na página atual). Veja que esses requisitos podem ser conflitantes e não há uma bala de prata melhor em todos os casos. Commented 28/12/2016 às 11:54
  • @AnthonyAccioly o JS e CSS não vão ser atualizado, vou carregar tudo no cache do navegador. Assim sempre que eu precisar de uma classe ou função vai estar no cache. Essa e minha ideia. Estou fazendo uns testes assim e o sistema esta carregando a página em torno de 2 segundos. Quando limpo o cache ele demora ate 4 positivá-los tem que carregar tudo de novo. O que vc acha? Commented 28/12/2016 às 13:00
  • 1
    Unir em um arquivo é apenas um pequena solução, veja se isto lhe ajuda: pt.stackoverflow.com/a/169657/3635, eu ainda preciso adicionar mais detalhes, mas assim que fizer lhe aviso.
    – Syzoth
    Commented 28/12/2016 às 14:51
  • Oi @HugoBorges, é complicado te dizer se isso "é bom" sem conhecer os específicos do site e do teste. Dito isso, o Developer Tools do Chrome pode te dar uma boa visão de como esse tempo está sendo gasto e se os arquivos JS e CSS estão impactando o tempo de carregamento. Geralmente imagens soltas são o principal gargalo, e de novo, existem soluções para agrupar imagens em sprites que entram no mesmo bonde das soluções de agrupamento acima. Boas práticas hoje que não necessariamente são/serão boas práticas no HTTP/2. Commented 29/12/2016 às 9:49

1 Resposta 1

1

Unir e minify

Extremamente recomendado unir os Css e JS o mínimo possível. Os navegadores podem fazer de 6-8 requisições por segundo, quanto mais arquivos tiver, terá block no download.

Após unir o CSS's e JS's recomendo minificar ele, em sites como:

https://cssminifier.com/

https://jscompress.com/

OBS: unir o arquivo jquery com outros arquivos pode acontecer problemas, caso aconteça, coloque o jquery por CDN;

OBS²: Quando não puder unir arquivos pense no CDN, são sempre uma excelente forma de carregar arquivos.

Claro que existem ferramentas para automatizar esses processos.

Compactar Gzip

Se estiver utilizando o IIS http://www.andrecarlucci.com/dev/como-habilitar-compressao-gzip-no-iis/ Caso contrário procure como "Habilitar Compactação de cabeçalho Gzip"

Tamanho das imagens.

Verifique sempre o tamanho das imagens, normalmente elas podem ser o grande vilão. Já vi sites com imagens na casa dos 900kb.

Utilize uma ferramenta de testes Por fim, a melhor coisa é utilizar alguma ferramenta para testar o desempenho e verificar se ouve melhoras e o que falta fazer, o próprio Chrome existe ferramentas ótimas. Caso queira recomendo uma simples e eficaz https://developers.google.com/speed/pagespeed/insights/

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