Remover JavaScript de bloqueio de renderização

Mantenha tudo organizado com as coleções Salve e categorize o conteúdo com base nas suas preferências.
Esta regra é acionada quando o PageSpeed Insights detecta que seu HTML faz referência a um arquivo JavaScript externo de bloqueio na região acima da dobra da página.

Visão geral

Antes de renderizar uma página, o navegador precisa criar a árvore DOM analisando a marcação HTML. Durante esse processo, sempre que o analisador encontrar um script, ele tem que parar e executá-lo antes de continuar analisando o HTML. No caso de um script externo, o analisador também é forçado a aguardar o download do recurso, que pode ter uma ou mais viagens de ida e volta da rede e atrasar a primeira renderização da página. Consulte Adicionar interatividade com JavaScript para saber mais sobre como o JavaScript afeta o caminho crítico da renderização.

Recomendações

É preciso evitar e minimizar o bloqueio de JavaScript, especialmente no caso de scripts externos que precisam ser buscados antes de serem executados. Os scripts necessários para renderizar o conteúdo da página podem ser inseridos para evitar solicitações de rede extras, porém o conteúdo inserido precisa ser pequeno e executado rapidamente para ter um bom desempenho. Os scripts que não forem críticos para a renderização inicial precisam ser assíncronos ou adiados para depois da primeira renderização. Lembre-se de que para melhorar o tempo de carregamento você também precisa otimizar a entrega do CSS.

JavaScript in-line

Os scripts de bloqueio externos forçam o navegador a aguardar a busca do JavaScript, o que pode adicionar uma ou mais viagens de ida e volta da rede antes que a página possa ser renderizada. Se os scripts externos forem pequenos, será possível fazer a inserção in-line diretamente no documento HTML, evitando a solicitação de latência da rede. Por exemplo, se o documento HTML tiver esta aparência:
<html>
  <head>
    <script type="text/javascript" src="small.js"></script>
  </head>
  <body>
    <div>
      Hello, world!
    </div>
  </body>
</html>
E o recurso small.js for assim:
  /* contents of a small JavaScript file */
Faça a inserção in-line da seguinte maneira:
<html>
  <head>
    <script type="text/javascript">
      /* contents of a small JavaScript file */
    </script>
  </head>
  <body>
    <div>
      Hello, world!
    </div>
  </body>
</html>
A inserção in-line do conteúdo do script elimina a solicitação externa de small.js e permite que o navegador seja mais rápido na primeira renderização. No entanto, a inserção também aumenta o tamanho do documento HTML, e talvez seja preciso inserir o mesmo conteúdo de script in-line em várias páginas. Como resultado, é preciso fazer a inserção in-line de scripts pequenos para ter o melhor desempenho.

JavaScript assíncrono

Por padrão, o JavaScript bloqueia a construção de DOM e, assim, atrasa a primeira renderização. Para evitar que o JavaScript bloqueie o analisador, recomendamos usar o atributo de HTML async em scripts externos. Exemplo:
<script async src="my.js">
Consulte Bloqueio de Analisador vs. JavaScript Assíncrono para saber mais sobre os scripts assíncronos. Não é garantido que os scripts assíncronos sejam executados na ordem especificada. Além disso, eles não devem usar document.write. Para atender a essas restrições, talvez seja preciso reescrever os scripts que dependem da ordem de execução ou precisam acessar ou modificar o DOM ou CSSOM da página.

Adiar o carregamento de JavaScript

O carregamento e a execução de scripts que não são necessários para a renderização inicial da página podem ser adiados até que a renderização inicial ou o carregamento de outras partes críticas da página sejam concluídos. Isso pode ajudar a reduzir a contenção de recursos e melhorar o desempenho.

Perguntas frequentes

E se eu usar uma biblioteca JavaScript como jQuery?
Muitas bibliotecas JavaScript, como JQuery, são usadas para aprimorar a página a fim de adicionar novas formas de interatividade, animações e outros efeitos. No entanto, muitos desses comportamentos podem ser adicionados com segurança depois que o conteúdo da região acima da dobra é renderizado. Investigue essa possibilidade tornando o JavaScript assíncrono ou adie o carregamento dele.
E se eu usar uma estrutura de JavaScript para desenvolver a página?
Se o conteúdo da página for criado pelo JavaScript do cliente, investigue a inserção in-line dos módulos de JavaScript relevantes para evitar idas e voltas adicionais da rede. Da mesma forma, ao aproveitar o processamento do servidor, você melhora significativamente o carregamento da primeira página: renderize os modelos JavaScript no servidor para acelerar a primeira renderização e, em seguida, use os modelos do cliente quando o aplicativo for carregado. Para mais informações sobre a renderização realizada pelo servidor, consulte http://youtu.be/VKTWdaupft0?t=14m28s.