Otimização no carregamento de recursos é algo muito, muito complicado, dependendo do estado do sistema e do objetivo que você quer alcançar.
Não está muito claro para mim seu objetivo, isto é, se você quer apenas fazer sua página passar bem numa ferramenta ou se você quer realmente melhorar a experiência do usuário no sistema, o que vai depender muito de como o sistema funciona.
Definindo objetivos e prioridades
Em termos gerais, se você tem um HTML gerado dinamicamente por alguma linguagem no lado do servidor, você pode querer mostrar essas informações o mais rapidamente possível, sem pausas para execução de scripts ou para renderização do CSS, e postergar estes até para depois. Isso pode ser feito porque o usuário consegue ler as informações da tela, mas em média, ele vai demorar um segundo ou mais para interagir com a tela, portanto o código que adiciona eventos e outras funcionalidades pode esperar um pouco para dar uma sensação de fluidez no carregamento.
Entretanto, isto nem sempre é verdade. Muitas vezes algumas funcionalidades críticas precisam estar presentes sempre e cabe aos desenvolvedores decidirem quais funcionalidades entram de forma síncrona e quais podem ser postergadas assincronamente ou mesmo mais tarde.
Técnicas para melhorar o desempenho do CSS
CSS geralmente não é o problema porque ele já é carregado de forma assíncrona.
Entretanto, algumas vezes ele pode se tornar um problema quando os assets ficam muito grandes.
A melhor forma que eu conheço de otimizar isso é separar o que é essencial e colocar no topo da página e deixar o que não é essencial para depois ou ainda para ser carregado assincronamente.
Além disso, estilos específicos que servem apenas para uma página podem ser colocados inline ou em estilos separados.
Uma boa organização seria assim:
- Estilo comum para todo o sistema
- Estilo específico para a página
- Estilo específico para o usuário, se houver
Enfim, aqui organização é tudo.
Isso porque você não quer postergar muito o carregamento do CSS, pois em geral é algo que faz falta na interface.
É importante ainda lembrar que uma boa organização melhora o uso do cache tanto pelo navegador quanto pelo CDN, afinal, você separa o que muda mais do que muda menos. Isso ajuda a que seu site tenha um tempo de carregamento e renderização menor, demorando apenas um pouco mais no primeiro acesso.
Técnicas para melhorar o desempenho do JavaScript
Otimização de scripts, além da organização, exigem um conhecimento mais profundo das muitas opções disponíveis e de como os navegadores funcionam.
Idealmente, você quer que os scripts comecem a ser carregados o mais cedo possível, mas somente executem, pausando a página, depois que o conteúdo crítico já foi exibida.
Uma forma simples de fazer isto é usando os atributos async
e defer
que, respectivamente:
- Executam os scripts carregados assim que baixados em qualquer ordem (
async
)
- Executam os scripts carregados depois de terminar de exibir a página, na ordem em que eles aparecem na página (
defer
)
Qual é o melhor? Depende. async
é melhor quando você quer que a funcionalidade adicionada pelo script esteja presente assim que possível, provavelmente algo crítico. defer
é melhor para algo que não vale a pena pausar a renderização da página.
Mas dizer que apenas usar tais atributos nas suas tags <script>
é ser muito simplista.
Dificuldades em scripts assíncronos
Os problemas começam porque inline scripts não podem ser assíncronos nem deferidos.
Portanto, se eles dependem de algum script incluído de fonte externa você precisa de algum mecanismo para que eles executem somente quando tais dependências forem satisfeitas.
O mesmo vale para scripts assíncronos, que podem executar em qualquer ordem.
Uma forma simplista de resolver o problema é usar o evento window.onload
. Só que tem um sério problema com esta abordagem: ela posterga tudo até o fim, o que significa que mesmo as funcionalidades críticas terão que esperar tudo da página ser carregado.
Um mecanismo melhor é escrever seu JavaScript modular, usando padrões como AMD, ES6, SystemJS. Módulos JavaScript geralmente são definidos em termos do que eles definem (define
) e do que eles dependem (require
).
Então, você adiciona um pequeno script loader no começo da página (síncrono) que é capaz de identificar quando as dependências de um certo script estão satisfeitas e executa ele assim que possível.
Um script loader não necessariamente significa que ele vai baixar os scripts sob demanda, mas que ele mantém um registro do módulos presentes na página e consegue saber quando eles podem ser executados.
Dentro dos módulos, você ainda pode adicionar eventos onload
para postergar a execução do que não é tão importante.
Ou ainda pode usar o modo lazy mais agressivo, que é carregar o código de uma funcionalidade somente quando ela for ativada pelo usuário. Por exemplo, imagine que no seu sistema existe uma janela Popup complexa aberta quando o usuário clica num botão que está presente em todas as páginas. Você não quer que o código seja carregado em todas as páginas, porque a janela não é usada sempre. Então você pode fazer o carregamento do código e dos estilos usados na popup dentro do evento click
do botão. Da primeira vez que o usuário clicar, vai demorar um pouco mais para abrir, até os assets entrarem no cache, mas vai permitir que o site seja mais rápido no geral.
No seu caso, que parece não haver muitos scripts, eu transformaria todos eles em módulos AMD e assim usaria o async
ou defer
em todos os scripts.
Se você tem inline scripts que não pode transformar em um módulo, uma técnica para postergar a execução deles é mudar o type
, exemplo:
<script type="delay/javascript">
E depois você cria um módulo que avalia o conteúdo dessas usando eval
(não é pecado quando você sabe o que está fazendo).
<script src='jquery.js'></script> <script src='scriptQueDependeDoJquery.js'></script>
.