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.