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.