Temos muitos arquivos CSS e JS pequenos e ativar a mesclagem parece ser uma boa escolha.
Muitos dos arquivos CSS e JS são usados em todas as páginas (página inicial, página de categoria, página de detalhes do produto).
Sempre que vimos que um arquivo mesclado diferente é carregado novamente em cada página, mesmo o CSS contido deve estar sobreposto.
Como podemos evitar isso e reutilizar mais dados?
css
javascript
frontend
Alex
fonte
fonte
.csse adicionais.js. Em uma instalação padrão do Magento, na verdade, os.cssarquivos são praticamente os mesmos globalmente, portanto, o arquivo mesclado tem um hash idêntico. Mas.jsisso difere muito - portanto, há um arquivo recentemente combinado para páginas de produtos, páginas de categorias e assim por diante - sempre incluindo a lib protótipo completa.Respostas:
Resposta curta: nunca ative a função de mesclagem JS / CSS do Magento. No geral, é pior para o desempenho durante o ciclo de vida de um checkout típico do que enviar cada ativo individualmente.
Resposta longa: você deve veicular apenas um arquivo CSS para os usuários. Vários arquivos bloqueiam a renderização até que todo o CSS seja baixado. A menos que você esteja servindo uma grande quantidade de CSS, é vantajoso enviar tudo de uma vez, então o navegador o armazena em cache. Usar um pré-processador como Sass ou LESS pode trazer essa etapa para o seu processo de compilação, em vez de deixar o Magento fazer isso de maneira ineficiente.
Para JS, idealmente, você não deve combinar estes do lado do servidor. Os carregadores de scripts do lado do cliente, como o AMD / RequireJS, são melhores opções e ajudam a gerenciar dependências, o que o Layout XML do Magento não. No mundo real, embora o Magento solte scripts em vários pontos do fluxo de caixa. Ainda é melhor aproveitar o hit de carregamento da página inicial de várias solicitações e ter ativos separados, mas armazenados em cache posteriormente.
A extensão Fooman Speedster Advanced é sua melhor aposta para combinar ativos de maneira inteligente sem duplicação (hoje).
Você está um pouco limitado pela arquitetura Magento 1.x, que começa com um monte de práticas ruins para desempenho de front-end. Não é realista mudar o curso desse navio. Contribua para o Magento 2.
fonte
Temos usado a extensão Fooman Speedster Magento . É uma extensão maravilhosa que lida com a fusão de arquivos CSS e JS para aumentar o desempenho da sua página.
Na página:
fonte
uglifyjs --compresse lidar melhor com os comentários, poderia obter uma melhoria adicional de cerca de 4% menor no meu código. estou usando o uglifyjs v3 do nó.