Publicado em 17 de agosto de 2018
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ê.
Eliminar JavaScript e CSS que bloqueiam a renderização
Para acelerar ao máximo a primeira renderização, minimize e, se possível, elimine a quantidade 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 usando um snippet especial de JavaScript. Quando o JavaScript bloqueia o analisador, força o navegador esperar pelo CSSOM e suspende a construção do DOM, o que, por sua vez, pode retardar consideravelmente a primeira renderização.
Preferir recursos JavaScript assíncronos
Os recursos assíncronos desbloqueiam o analisador de documentos e permitem que o navegador não fique bloqueado no CSSOM antes de executar o script. Muitas vezes, se o script puder usar o atributo async, quer dizer 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 retardar, algumas vezes visivelmente, as transições entre as páginas. O código abaixo
mostra como usar navigator.sendBeacon() para enviar dados ao servidor no
gerenciador pagehide em vez do gerenciador unload.
<script>
function() {
window.addEventListener('pagehide', logData, false);
function logData() {
navigator.sendBeacon(
'https://putsreq.herokuapp.com/Dt7t2QzUkG18aDTMMcop',
'Sent by a beacon!');
}
}();
</script>
O método fetch() oferece uma maneira melhor de solicitar dados de forma assíncrona. fetch() processa respostas usando promessas em vez de vários gerenciadores de eventos. Ao contrário da resposta a um XMLHttpRequest, a resposta fetch() é um objeto de stream. 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 a quantidade de trabalho que o navegador tem para renderizar a página, adie todos os scripts que não são críticos para construir o conteúdo visível da renderização inicial.
Evitar JavaScript de longa duração
O JavaScript de longa duração impede o navegador de construir o DOM, o CSSOM e de renderizar a página. Por isso, adie para depois toda lógica de inicialização que não seja essencial para a primeira renderização. Se for necessário executar uma longa sequência de inicialização, considere dividi-la em várias fases para permitir que o navegador processe outros eventos entre elas.
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. Confirme que todo CSS não essencial esteja marcado como não crítico (por exemplo, impressões e outras consultas de mídia) e que a quantidade de CSS crítico e o tempo de entrega deles sejam os menores possíveis.
Colocar CSS no cabeçalho do documento
Especifique todos os recursos CSS o mais cedo possível no documento HTML para que o navegador possa encontrar as tags <link> e despachar a solicitação do CSS o quanto antes.
Evite importações de CSS
A diretiva de importação (@import) do CSS permite que uma folha de estilo importe regras de outro arquivo de folha de estilo. No entanto, evite essas diretivas, já que elas introduzem mais idas e voltas ao caminho crítico. Os recursos CSS importados são encontrados somente após o recebimento e a análise da folha de estilo CSS com a própria regra @import.
Incorporar in-line a CSS de bloqueio de renderização
Para ter o melhor desempenho, considere a inserção do CSS crítico em linha diretamente no documento HTML. Isso elimina idas e vindas adicionais ao caminho crítico e, se feito corretamente, pode proporcionar um caminho crítico de uma ida e vinda, com o HTML sendo o único recurso com bloqueio.