Publicado em 17 de agosto de 2018
Este guia examina as regras do PageSpeed Insights no contexto: o que observar ao otimizar o caminho de renderização crítico e por quê.
Eliminar JavaScript e CSS que bloqueiam a renderização
Para reduzir o tempo de renderização, minimize e, sempre que possível, elimine o número de recursos críticos na página, minimize o número de bytes críticos transferidos por download e otimize o comprimento do caminho crítico.
Otimizar o uso do JavaScript
Os recursos JavaScript são bloqueados por padrão, a menos que sejam marcados como async ou adicionados usando um snippet JavaScript especial. O parser que bloqueia o JavaScript força o navegador a esperar pelo CSSOM e pausa a construção do DOM, o que pode atrasar significativamente o tempo de renderização.
Preferir recursos JavaScript assíncronos
Os 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 de servidor síncronas
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 de forma perceptível. 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. O fetch() processa respostas usando promessas em vez de vários manipuladores de eventos. Ao contrário da resposta a um XMLHttpRequest, uma 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>
Aguardar a análise do JavaScript
Para minimizar a quantidade de trabalho que o navegador precisa realizar para renderizar a página, adie todos os scripts não essenciais que não são essenciais para construir o conteúdo visível para a renderização inicial.
Evitar JavaScripts de longa duração
O JavaScript de execução longa impede que o navegador construa o DOM, o CSSOM e renderize a página. Portanto, adie até mais tarde qualquer lógica de inicialização que não seja essencial para a primeira renderização. Se uma sequência de inicialização longa precisar ser executada, considere dividi-la em várias etapas para permitir que o navegador processe outros eventos no meio.
Otimizar o uso de CSS
O CSS é necessário para construir a árvore de renderização, e o JavaScript geralmente bloqueia o CSS durante a construção inicial da página. Verifique se todos os CSS não essenciais estão marcados como não críticos (por exemplo, impressão e outras consultas de mídia) e se a quantidade de CSS crítico e o tempo para entregá-lo são os menores possíveis.
Colocar CSS no cabeçalho do documento
Especifique todos os recursos de CSS o mais cedo possível 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 do 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 de CSS importados são descobertos somente depois que a folha de estilo CSS com a regra @import é recebida e analisada.
Incorporar in-line a CSS de bloqueio de renderização
Para ter a melhor performance, considere inserir o CSS crítico diretamente no documento HTML. Isso elimina as viagens de ida e volta adicionais no caminho crítico e, se feito corretamente, pode fornecer um caminho crítico de "uma viagem de ida e volta" em que apenas o HTML é um recurso de bloqueio.