3

Cenario: Um site X possui 5 arquivos .css e 5 arquivos .js todos com 5KB, um site Y possui o mesmo HTML que o site X porém seus recursos .css e .js estão unidos entre si (.js com .js e .css com .css).

Pergunta: Qual a diferença de tempo de carregamento entre as duas páginas (pode ser em porcentagem, valor bruto, o objetivo é ver se há ganho em unificar todos os recursos e quando o ganho começa)? existe/qual o overhead de multiplas conexões para download de .css e .js?

OBS: Levo em consideração CSS de reset, CSS de bibliotecas externas, CSS geral e CSS especifico da página, JS de libs externas, geral e específicos da página.

OBS2: Tendo como base o Apache 2.4 mas exemplos em outros servidores são bem vindos

2
  • 1
    A diferença de tempo é relativa, de qualquer forma, quanto menor o tamanho mais rápido vai carregar. Nas opções de desenvolvedor do Chrome você pode ver o tempo que cada arquivo leva para carregar na pagina. 6/11/2015 às 14:58
  • 1
    Sim, existe overhead, você parece já saber disso. Agora, não dá pra mensurar isso de maneira geral, são muitas variáveis envolvidas. Você precisa medir a performance no seu próprio site. Mas eu diria que costuma ser vantajoso unir os arquivos sim.
    – bfavaretto
    6/11/2015 às 15:12

1 Resposta 1

3

No caso em que os arquivos estão juntos apenas um único request ao servidor é necessário para obter o conteúdo. Além disso compactação do arquivo tende a funcionar melhor que nos arquivos separadamente. Por este motivo geradores de Build como Grunt ou Gulp possuem opções para juntar os arquivos, "mitifica-los", e compacto-los para melhor performance geral do site.

Por outro lado isso deve ser verificado medindo para cada site específico pois arquivos JavaScript, por exemplo, podem ser carregados on-demand a medida que a página vai precisando de recursos. Por exemplo, Asynchronous Module Definition (AMD) permite carregar apenas o necessário para o funcionamento inicial da página. A medida que o usuário interage com a página outros recursos podem estar sendo carregados em background dando a sensação de fluidez na Interface Visual.

Em resumo, não existe uma resposta simples. A resposta dependerá do problema que esteja sendo resolvido. Se a performance é critica se faz necessário testes de Benchmark.

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 .