Durante o carregamento de uma página o navegador precisa analisar toda a marcação HTML e processar todas as informações sobre o layout dela. E este processo fica mais lento quando o navegador encontra um script, pois quando isto acontece é necessário que o navegador interrompa a análise do HTML até que seja executado completamente o script, bloqueando dessa forma renderização da página.
Quando for inevitável esta situação é recomendável que não seja acima da dobra da página, ou seja, do conteúdo inicial visível pelo usuário antes de rolar a página.
É importantíssimo adotar uma estratégia para minimizar o bloqueio de renderização acima da dobra, especialmente no caso de scripts externos que precisam ser buscados antes de serem executados. Uma das técnicas eficientes neste caso é carregar estes recursos (scripts) de forma assíncrona.
Carregar o script de forma assíncrona significa que o processo de renderização da página não será interrompido para que o script seja baixado e executado completamente. Ou seja, o script definido como assíncrono não mais será motivo de bloquear a execução do HTML. Vamos a um exemplo para facilitar o entendimento.
Uma chamada de recurso script normalmente é realizado a seguinte forma:
<script src="carrregar_fotos.js"></script>
Neste caso o navegador aguarda o script terminar de carregar para continuar a renderização da página. Isto pode aumentar significativamente o tempo de carregamento.
O mesmo caso agora com o atributo async.
<script async src="exemplo.js"></script>
Agora o script será executado de forma assíncrona. Ou seja, o processo de renderização da página continua em progresso enquanto o script é baixado e executado.
Esta estratégia ajuda a minimização o bloqueio de renderização, mas é importante ficar atento para o caso do script ser essencial para a construção do layout da página. É preciso uma análise da situação para que o async não atrapalhe ao invés de ajudar.
Para quem utiliza WordPress como plataforma existe um plugin muito fácil de utilizando chamado Async JavaScript que adiciona automaticamente o atributo async nas tags <script> do seu site.
Após a instalação dele no painel administrativo do WordPress, basta acessar as configurações do plugin e na guia “Settings” marcar a opção “Enable Async JavaScript”.
Continue lendo esta série no artigo Otimização do header no WordPress
