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.
Evite 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 as transições de página, às vezes visivelmente. 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 manipuladores 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 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 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 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. O JavaScript frequentemente 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.
Evite 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 mais viagens de ida e volta no caminho crítico: os recursos CSS importados são descobertos somente depois que a folha de estilos 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 proporcionar um caminho crítico de uma ida e vinda, com o HTML sendo o único recurso com bloqueio.