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 com um snippet de JavaScript especial. O JavaScript que bloqueia o analisador força o navegador a aguardar o CSSOM e pausa a construção do DOM, o que, por sua vez, pode atrasar significativamente o tempo da primeira renderização.
Dar preferência a recursos JavaScript assíncronos
Recursos assíncronos desbloqueiam o analisador de documentos e permitem que o navegador evite bloqueios 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 do servidor
Use o método navigator.sendBeacon()
para limitar os dados enviados por XMLHttpRequests nos gerenciadores unload
. Como muitos navegadores exigem que essas solicitações sejam síncronas, eles podem retardar, às vezes visivelmente, as transições entre as páginas. 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, use a detecção de recursos para testar a presença dele 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, a resposta de busca é um objeto de stream 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 de JavaScript
Para minimizar a quantidade de trabalho que o navegador precisa executar para renderizar a página, adie todos os scripts não essenciais que não são 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. Por isso, adie todas as lógicas e funcionalidades de inicialização que não forem essenciais para a primeira renderização. Se for necessário executar uma sequência de inicialização longa, considere dividi-la em várias etapas 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 é bloqueado no CSS durante a construção inicial da página. Verifique se todos os CSSs não essenciais estão marcados como não críticos (por exemplo, impressões e outras consultas de mídia) e se a quantidade de CSS crítico e o tempo para enviá-los são 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 descobrir as tags <link>
e enviar a solicitação do 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 mais idas e voltas 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, considere a inserção do CSS essencial em linha diretamente no documento HTML. Isso elimina idas e voltas adicionais no caminho crítico e, se feito corretamente, pode proporcionar um tamanho de caminho crítico de "uma ida e volta", em que apenas o HTML é um recurso bloqueador.