Otimizando o carregamento do frontend, como posso combinar e compactar corretamente meu JS?

8

Meu site para um cliente corporativo possui aproximadamente 90 ativos que são baixados em carga, 35 ou mais são arquivos JS. Mesmo as extensões "otimizadas" feitas para o Joomla parecem reduzir-me a 31 arquivos JS e compactar apenas os css / js combinados e não os que parecem estar desonestos.

Eu tentei alguns dos plugins gratuitos otimizados e reluto em gastar dinheiro com os pagos, se eles fizerem muito pouco pelos meus tempos de carregamento.

Meu modelo é uma base do Rockettheme com muita personalização, por isso, possui Gantry js, bootstrap js, algumas extensões, como o meu player de vídeo, usam um arquivo js, ​​etc. 1.

O que funciona e o que não funciona para melhorar essa parte do carregamento de front-end?

Toni Marie
fonte

Respostas:

9

Não será fácil lidar com todos esses arquivos. Combinar, minificar e compactar tudo isso provavelmente trará problemas. É preciso muito esforço e uma combinação de técnicas para atingir um nível de otimização satisfatório.

Minha abordagem geral para obter um site de carregamento rápido.

Um site rápido é essencial. A otimização da velocidade de um site, embora geralmente ocorra no final do desenvolvimento, é algo que deve ser considerado desde o início. Começa com o modelo apropriado.

Também instalar todas as extensões e usar qualquer tipo de módulo sofisticado provavelmente resulta em um site pesado, que será muito difícil torná-lo mais leve posteriormente.

Seja eclético - mantenha-se mínimo

Pessoalmente, quando se trata de otimização de velocidade, tento ser muito eclético com as extensões que uso. Eu pesquisar e experiência para os mais queridos eficientes e de qualidade para cada tarefa, e sempre tentar evitar de usar todas as extensões, se há coisas que podem ser alcançados manualmente dentro do núcleo.

Além disso, se eu tiver que decidir usar um recurso sofisticado de front-end não muito importante, que me causa problemas na otimização da velocidade do site, geralmente o jogarei fora ou encontrarei outra maneira de implementar o recurso sofisticado.

Também tento evitar o uso de modelos comerciais, pois eles geralmente vêm com muitos recursos extras para satisfazer diversos gostos. Eu prefiro criar o modelo e incluir apenas o que eu preciso.

Seu trabalho manual

Sugiro que você revise todas as extensões necessárias para ver como elas carregam seus arquivos de ativos e, se é possível evitar carregá-las em páginas nas quais você não precisa delas, por exemplo, você pode criar substituições de modelos sempre que possível para controlar por conta própria o carregamento dos arquivos de ativos.

Você pode achar que existem extensões desnecessárias , mas ainda carregadas, ou não possui as configurações ideais de como elas devem funcionar.
Por exemplo, o JCE Mediabox fornece a opção para ser carregado apenas em itens de menu específicos.

Veja também se é possível mesclar arquivos em um. Por exemplo, não deixe nenhum módulo carregar seu CSS, tente mesclá-lo com o arquivo CSS do modelo.

Ferramentas de otimização

COMPRESSÃO E CONTROLE DE CSS / JAVASCRIPT
Quanto às ferramentas / plugins de otimização, estou muito feliz com o plugin JCH Optimize . É gratuito, mas também tem uma versão comercial com suporte para alguns dólares. Com os ajustes adequados, ele pode produzir ótimos resultados e o desenvolvedor é bastante útil se você precisar de suporte.

Outra ferramenta que pode ser útil é o plug-in JQuery Easy . Isso pode ajudar a organizar e controlar melhor o carregamento de vários arquivos javascript, caso entrem em conflito entre si e facilite a otimização com o JCH_Optimize Plugin.

CACHE
Eu também uso o Jot Cache , para ter um melhor controle sobre o cache, pois muitas extensões têm problemas com o cache principal.

CDN
Usar o CDN para fornecer conteúdo estático é a próxima ferramenta - eu uso o NoNumber CDN para Joomla

HTACCESS
Finalmente, você terá grandes benefícios ao usar um htaccess para compactar e adicionar cabeçalhos do Expirar aos arquivos.

FFrewin
fonte
5

Não existe uma solução simples para mais de 30 arquivos JS.

Anibal
fonte
Cliquei na sugestão completa acima como a "resposta", mas também devo observar que o RokBooster funcionou muito melhor para mim do que o JCH Optimize, porque estou usando um modelo e extensões baseados no Gantry. Obrigado! Eu gostaria de poder clicar em ambos.
Toni Marie
Legal, prazer em ajudar
Anibal