Critical Path 2. | Automação e Performance

Critical Path 2.

Pessoal, bom dia!

Fiquei com uma dúvida a respeito de realizar otimizações no site para melhorar a performance. No curso "Performance Web II: Critical Path, HTTP/2 e Resource Hints" foi falado em várias técnicas para a melhoria do desempenho - em especial focar na execução do critical path com 1 RTT de, no máximo, 14 KB zipado. Dentre as técnicas citadas foi o inline do essencial (css, imagens, etc) quando a página carrega os demais recursos de forma assíncrona. Esse carregamento inline penaliza o cache pois para cada página com essa técnica aplicada implica em baixar novamente os recursos que poderiam ter sido cacheados anteriormente sendo assim um tradeoff entre cache e performance.

A minha reflexão é a seguinte: Eu posso me valer do cache ainda para baixar de forma assíncrona um script completo (estando na página inicial) com os recursos necessários para as demais páginas (os recursos que são reutilizados por todo o site - não implica aqui em baixar coisas que são exclusivas de outras páginas) para que ele seja cacheado e na hora de carregar as outras páginas esse recursos já estejam disponíveis evitando de se utilizar o inline nas demais páginas.

Faz sentido seguir nesse caminho? Existe uma outra solução para minimizar essa perca de cache em função da performance inicial?

Ola, a tua linha de raciocínio faz bastante sentido, Jefferson. Esse dilema entre inline (performance inicial) e cache (reuso de recursos) é justamente um dos pontos centrais quando se fala de otimização do critical path.

O que geralmente se faz é combinar estratégias:

Inline apenas o crítico e mínimo possível
- O inline deve conter só o necessário para renderizar o above the fold (ex.: CSS essencial).
- Assim você garante um carregamento rápido na primeira pintura.
Recurso compartilhado via cache
- Scripts e estilos que são reaproveitados em múltiplas páginas podem, sim, ser servidos como arquivos externos.
- O navegador vai cachear e reutilizar esses recursos, evitando downloads repetidos.
Pré-carregamento inteligente
- Usar resource hints como preload ou prefetch para indicar ao navegador quais arquivos serão usados em breve (como no caso da navegação para outras páginas).
- Isso ajuda a equilibrar cache + performance sem depender só do inline.
HTTP/2 e divisão de arquivos
- Se seu servidor já roda com HTTP/2, você pode se dar ao luxo de trabalhar com arquivos menores e mais granulares, porque a multiplexação diminui a penalidade de múltiplas requisições.

Então, resumindo:

Inline só o essencial para a renderização inicial. Reaproveite recursos comuns (CSS/JS) como externos, para que o cache entre em ação. Use resource hints para melhorar a experiência de navegação entre páginas.