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 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.
- 0
- Por admin