Remover JavaScript de bloqueio de renderização

. Esta regra é acionada quando o PageSpeed Insights detecta que seu HTML faz referência a uma arquivo JavaScript externo na parte 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 encontra um script, ele precisa interrompê-lo 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, o que pode resultar em uma ou mais idas e voltas 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 será assim: 
  /* contents of a small JavaScript file */
 Em seguida, 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>
 A inserção in-line do conteúdo do script elimina a solicitação externa para small.js e permite ao navegador a fim de acelerar a 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 impedir que o JavaScript bloqueie o analisador, recomendamos o uso do código HTML async em scripts externos. Exemplo: 
<script async src="my.js">
Consulte Bloqueio de analisador vs. JavaScript assíncrono para saber mais sobre scripts assíncronos. Não há garantia de que os scripts assíncronos serão executados na ordem especificada e 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 ser adicionada mais 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 lado do cliente, convém investigar a inserção in-line dos módulos JavaScript relevantes para evitar idas e voltas 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 renderização pelo servidor, consulte http://youtu.be/VKTWdaupft0?t=14m28s.

Feedback

Esta página foi útil?