Este guia examina as regras do PageSpeed Insights no contexto: o que devemos considerar ao otimizar o caminho crítico de renderização e por quê.
Elimine JavaScript e CSS que bloqueiam a renderização
Para agilizar a primeira renderização, minimize e, quando possível, elimine o número de recursos críticos na página, minimize o número de bytes críticos baixados e otimize o tamanho do caminho crítico.
Otimizar o uso do JavaScript
Por padrão, os recursos JavaScript bloqueiam o analisador, a menos que marcados como async
ou adicionados por um snippet especial de JavaScript. O analisador que bloqueia o JavaScript força o navegador a aguardar o CSSOM e pausa a construção do DOM, o que pode atrasar significativamente o tempo da primeira renderização.
Preferir recursos JavaScript assíncronos
Recursos assíncronos desbloqueiam o analisador de documentos e permitem que o navegador evite o bloqueio no CSSOM antes de executar o script. Muitas vezes, se o script puder usar o atributo async
, isso também significa que ele não é essencial para a primeira renderização. Considere carregar scripts de forma assíncrona após a renderização inicial.
Evitar chamadas síncronas ao servidor
Use o método navigator.sendBeacon()
para limitar os dados enviados por XMLHttpRequests em gerenciadores unload
. Como muitos navegadores exigem que essas solicitações sejam síncronas, elas podem tornar as transições da página mais lentas, às vezes visivelmente. O código a seguir mostra como usar navigator.sendBeacon()
para enviar dados ao servidor no gerenciador pagehide
em vez de no gerenciador unload
.
<script>
function() {
window.addEventListener('pagehide', logData, false);
function logData() {
navigator.sendBeacon(
'https://putsreq.herokuapp.com/Dt7t2QzUkG18aDTMMcop',
'Sent by a beacon!');
}
}();
</script>
O novo método fetch()
oferece uma maneira fácil de solicitar dados de forma assíncrona. Como ele ainda não está disponível em todos os lugares, você deve usar a detecção de recursos para testar sua presença antes do uso. Esse método processa respostas com promessas em vez de vários manipuladores de eventos. Ao contrário da resposta a um XMLHttpRequest, uma resposta de busca é um objeto de fluxo a partir do Chrome 43. Isso significa que uma chamada para json()
também retorna uma promessa.
<script>
fetch('./api/some.json')
.then(
function(response) {
if (response.status !== 200) {
console.log('Looks like there was a problem. Status Code: ' + response.status);
return;
}
// Examine the text in the response
response.json().then(function(data) {
console.log(data);
});
}
)
.catch(function(err) {
console.log('Fetch Error :-S', err);
});
</script>
O método fetch()
também pode processar solicitações POST.
<script>
fetch(url, {
method: 'post',
headers: {
"Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
},
body: 'foo=bar&lorem=ipsum'
}).then(function() { // Additional code });
</script>
Adiar a análise do JavaScript
Para minimizar o trabalho que o navegador precisa realizar para renderizar a página, adie todos os scripts não essenciais que não sejam essenciais para a construção do conteúdo visível para a renderização inicial.
Evitar JavaScript de longa duração
O JavaScript de longa duração impede que o navegador construa o DOM, o CSSOM e renderize a página. Portanto, adie a lógica de inicialização e a funcionalidade não essenciais para a primeira renderização. Se uma longa sequência de inicialização precisar ser executada, considere dividi-la em vários estágios para permitir que o navegador processe outros eventos entre eles.
Otimizar o uso do CSS
O CSS é necessário para construir a árvore de renderização, e o JavaScript geralmente fica bloqueado no CSS durante a construção inicial da página. Garanta que qualquer CSS não essencial seja marcado como não crítico (por exemplo, consultas impressas e outras mídias) e que a quantidade de CSS crítico e o tempo para entregá-los sejam os menores possíveis.
Colocar CSS no cabeçalho do documento
Especifique todos os recursos de CSS o quanto antes no documento HTML para que o navegador possa descobrir as tags <link>
e enviar a solicitação para o CSS o mais rápido possível.
Evitar importações de CSS
A diretiva de importação de CSS (@import
) permite que uma folha de estilo importe regras de outro arquivo de folha de estilo. No entanto, evite essas diretivas, porque elas introduzem idas e voltas adicionais ao caminho crítico: os recursos CSS importados são descobertos somente depois que a folha de estilo CSS com a própria regra @import
é recebida e analisada.
Incorporar in-line a CSS de bloqueio de renderização
Para obter o melhor desempenho, você pode considerar a inserção in-line do CSS essencial diretamente no documento HTML. Isso elimina idas e vindas adicionais ao caminho crítico e, se feito corretamente, pode fornecer um tamanho de caminho crítico de "uma viagem de ida e volta", em que apenas o HTML é um recurso bloqueador.