Incluindo cargas de arquivos CSS e Javascript arquivo - Como posso otimizar

Question

duplicados: / arquivos css javascript múltipla: as melhores práticas ?

Oi pessoal, meu aplicativo está quase pronto, mas a coisa é que eu tenho notado que eu estou incluindo um monte de arquivos javascript externos e css. Eu estou usando um monte de plugins gratuitos terceiros aqui e não queria tocar no código por medo de estragar alguma coisa.

Mas o resultado é que eu noto que agora têm incluído 8 arquivos CSS externos, bem como uma gritante 20 arquivos JavaScript externos: O - Não me lembro de ter visto qualquer grande site incluem mais de 2 ou 3 arquivos css_ js combinado então eu definitivamente deve estar fazendo algo errado aqui. Como faço para resolver isso -. Eu li em algum lugar que um grande arquivo js é mais rápido para carregar do que 2 ou 3 arquivos que são ainda metade do tamanho acumulado

Qualquer ajuda seria muito apreciada

Answer 1

Um arquivo grande é melhor do que um monte de pequenas porque neste navegador caso faz um pedido para o servidor web, em vez de, digamos, 8 pedidos. O que conta mais não é as pequenas diferenças de tamanho total, mas o total latência dos pedidos.

Imagine duas situações: você baixar um arquivo de 8 kB e 8 arquivos de 1 kB cada.

1. No primeiro tempo total cenário é smth como 80 ms (o tempo de transferência) + 50 ms (latência) = 130 ms

2. No segundo cenário você tem smth como 8x10 ms (tempo de transferência) + 8x50 ms (!) De latência = 480 ms (!)

Você vê a diferença. Esta é de nenhuma maneira um exemplo abrangente, mas você começa a idéia.

Assim, se possível, mesclar arquivos juntos. conteúdo compressa para diminuir a quantidade de dados a transferência. E o uso de cache para se livrar de pedidos repetitivos.

Answer 2

YUI Compressor http://developer.yahoo.com/yui/compressor/

E um bom tutorial: http: // beardscratchers. com / journal / comprimindo-css-and-javascript-com-yui-compressor

Answer 3

Se você combinar seus arquivos CSS em um arquivo (e mesmo para JS) na ordem em que estão actualmente carregados para a página, então eles vão funcionar exatamente o mesmo de antes; que é quando você começar a mudar a ordem em que as regras podem inesperadamente substituir aqueles que não costumava fazer.

Answer 4

A maioria de seus arquivos devem acabar no cache do lado do cliente de qualquer maneira, então eu não estaria muito preocupado com isso. Apenas certifique-se que você está definindo os cabeçalhos corretos. Claro, se esta é a primeira página do seu site, então sim, você provavelmente deve ser otimizar ainda mais.

Answer 5

Leia este: Melhores Práticas para acelerar o seu Web Site

Answer 6

Em projetos anteriores, usei SmartOptimizer para comprimir arquivos JS e CSS na mosca. É um PHP baseada minifier arquivo.

Usando um apenas a tempo Minifier liberta-o de ter que manter fonte separado e arquivos minified. Claro, há um pouco de poder de processamento necessário para manter minifying os arquivos. Além disso, o carregamento de um único arquivo minified é melhor com as seguintes vantagens:

1. tamanho de arquivo menor (com certeza)
2. No componente de atraso de download paralelo porque menos scripts / folhas de estilo.