Adiar a análise de JavaScript é simplesmente diminuir a quantidade de scripts necessária para processar o carregamento da página, reduzindo o tempo de renderização. Enquanto o download de todos os scripts não tiver terminado, o navegador fica impedido de realizar o processo de parser do DOM, então se o seu projeto tiver muitos arquivos JS (Jquery, JqueryUI, AngularJS, ExtJS e etc) o brownser terá que baixar cada um, parsear e executar antes de qualquer outra coisa, fazendo com que o usuário tenha que esperar um tempo maior para ter acesso ao conteúdo.
Às vezes esse tipo de comportamento é desejável, devido a alguma funcionalidade específica do seu sistema, mas na maioria das vezes não é, já que ter que ficar esperando não é nada agradável.
Uma forma bem conhecida por todos (ou pelo menos deveria ser) de minimizar esse problema é colocar todos os JavaScripts no rodapé do site, dessa forma eles serão os últimos a serem baixados e não vão bloquear o carregamento da página. Porém é possível melhorar isso ainda mais fazendo o carregando dosscripts de forma assíncrona e é disso que vamos falar a seguir.
Fazer o adiamento da análise de JavaScript pode ser mais fácil do que você imagina, veja:
<script async defer src="meu-arquivo.js"></script>
Note que existem dois atributos novos na tag script: async e defer.
O async informa ao navegador que o download do meu-arquivo.js deve ser feito de forma assíncrona, enquanto acontece o processo de renderização da página. O script será executado só depois que o download dele tiver terminado.
O defer tem a mesma função, porém o script só será executado depois que todo o processo de renderização estiver concluído.
Por quê eu devo usar os dois? Simples, nem todos os navegadores suportam o async, dessa forma o defer fica como um fallback para os brownsers que não tem suporte para o outro atributo.
A outra forma de carregar os seus scripts de forma assíncrona é bem mais trabalhosa. Você precisará centralizar todas as suas funções JavaScript que não são usadas pelo documento antes do evento onload em um arquivo JSseparado (minhas_funcoes.js). Depois crie uma função no cabeçalho da página que obrigue o arquivo com as demais funções ser carregado após o evento onload (downloadJSAtOnload()). Veja no código abaixo:
<script type="text/javascript">
/* Adiciona o elemento script como filho do body */
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "minhas_funcoes.js";
document.body.appendChild(element);
}
/* Verifica se o navegador tem suporte para os eventos e chama a função */
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>
Tome cuidado com as dependências entre seus arquivos JS ao usar esse método, pode ser necessário algum refatoramento do seu código.
Independente do método utilizado, usar o carregamento assíncrono de scripts é uma excelente prática de performance, que pode diminuir muito o tempo de carregamento da sua página, te fazer ganhar muitos pontos no PageSpeed e consequentemente com o seu usuário.