Para garantir o tempo mais rápido possível na primeira renderização, precisamos minimizar três variáveis:
- O número de recursos críticos.
- O tamanho do caminho crítico.
- o número de bytes críticos.
Recursos críticos podem bloquear a renderização inicial da página. Quanto menos esses recursos, menor será o trabalho do navegador, da CPU e de outros recursos.
Da mesma forma, o tamanho do caminho crítico é uma função do gráfico de dependências entre os recursos críticos e o tamanho deles em bytes: alguns downloads de recursos só podem ser iniciados depois que um recurso anterior tiver sido processado, e quanto maior o recurso, mais idas e voltas são necessárias para fazer o download.
Por fim, quanto menos bytes críticos o navegador precisar transferir por download, mais rápido ele poderá processar e renderizar o conteúdo visível na tela. Para diminuir o número de bytes, podemos diminuir o número de recursos (eliminá-los ou torná-los não críticos) e minimizar o tamanho da transferência compactando e otimizando cada recurso.
A sequência geral de etapas para otimizar o caminho crítico de renderização é:
- Analisar e caracterizar o caminho crítico: número de recursos, bytes, tamanho.
- Minimize o número de recursos críticos: elimine-os, adie o download, marque-os como assíncronos e assim por diante.
- Otimize o número de bytes críticos para reduzir o tempo de download (número de idas e voltas).
- Otimizar a ordem em que os recursos críticos restantes são carregados: faça o download de todos eles o mais cedo possível para reduzir o tamanho do caminho crítico.