Publicado em 31 de março de 2014
Para oferecer o tempo mais rápido possível até a primeira renderização, precisamos minimizar três variáveis:
- O número de recursos críticos.
- O comprimento do caminho crítico.
- O número de bytes críticos.
Um recurso crítico é aquele que pode bloquear a renderização inicial da página. Quanto menos recursos, menos trabalho para o navegador, a CPU e outros recursos.
Da mesma forma, o comprimento do caminho crítico é uma função do gráfico de dependência entre os recursos críticos e o tamanho em bytes deles: alguns downloads de recursos só podem ser iniciados depois que um recurso anterior foi processado, e quanto maior o recurso, mais viagens de ida e volta são necessárias para fazer o download.
Por fim, quanto menos bytes críticos o navegador tiver que fazer o download, mais rápido ele poderá processar o conteúdo e renderizá-lo na tela. Para reduzir o número de bytes, podemos reduzir o número de recursos (eliminando-os ou tornando-os não críticos) e garantir que o tamanho da transferência seja minimizado compactando e otimizando cada recurso.
A sequência geral de etapas para otimizar o caminho crítico de renderização é a seguinte:
- Analise e caracterize seu caminho crítico: número de recursos, bytes, comprimento.
- Diminua o número de recursos críticos: elimine-os, adie o download, marque-os como assíncronos e outras considerações importantes.
- Otimize o número de bytes críticos para reduzir o tempo de download (número de ida e volta).
- Otimize a ordem em que os recursos críticos restantes são carregados: faça o download de todos os recursos críticos o mais cedo possível para encurtar o caminho crítico.