Remover os JavaScripts de bloqueio de processamento

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 processar uma página para o usuário, o navegador precisa analisá-la. Se encontrar um script externo de bloqueio durante a análise, o navegador deverá parar e fazer o download do Javascript. Sempre que faz isso, ele adiciona um movimento de ida e volta na rede, que atrasará o momento de processar a página pela primeira vez.

Recomendações

O JavaScript necessário para processar a região acima da dobra deve ser inserido in-line, e o JavaScript necessário para adicionar outras funções à página deve ser adiado até que o conteúdo da região acima da dobra seja exibido. Para que este processo melhore o tempo de carregamento, também é preciso que você otimize o fornecimento de CSS.

Integrar JavaScript pequenos

Se os scripts externos forem pequenos, será possível incluí-los diretamente no documento HTML. A inserção in-line de pequenos arquivos permite ao navegador prosseguir com o processamento da página. 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 */

Insira o script 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>

Essa metodologia elimina a solicitação externa do small.js ao inseri-lo in-line no documento HTML

Adiar o carregamento de JavaScript

Para evitar que o JavaScript bloqueie o carregamento da página, recomendamos usar o atributo HTML assíncrono ao carregar o JavaScript. Por exemplo:

<script async src="my.js">

Se os recursos de JavaScript usarem document.write, não é seguro usar o carregamento assíncrono. Recomendamos que os scripts que usam document.write sejam recriados para usar uma técnica diferente.

Além disso, durante o carregamento de JavaScript de forma assíncrona, se a página carregar scripts que dependem um do outro, é preciso ter cuidado para que seu aplicativo carregue os scripts na ordem de dependência adequada.

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 é processado. Investigue movendo a execução e o carregamento desse JavaScript para após o carregamento da página.
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 na rede. Da mesma forma, ao aproveitar o processamento do servidor, você melhora significativamente o carregamento da primeira página: processe os modelos de JS no servidor, insira os resultados in-line no HTML e, em seguida, use os modelos do cliente quando o aplicativo for carregado. Para mais informações sobre o processamento realizado pelo servidor, consulte http://youtu.be/VKTWdaupft0?t=14m28s.