23, Set 2015
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>
     type="text/javascript" src="small.js">
  </head>
  <body>
    
      Hello, world!       </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>
     type="text/javascript">
      /* contents of a small JavaScript file */
    
  </head>
  <body>
    
      Hello, world!       </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 frequenteshttp://blogs-images.forbes.com/oracle/files/2014/03/Java-horz-clr.png

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.

Deixe um comentário

O seu endereço de email não será publicado. Campos obrigatórios marcados com *