Pré-carregamento de Conteúdo: O Que É e Como Implementar

Reduza o TTFB percebido. Entregue recursos críticos antes do usuário precisar.

1) O que é Pré‑carregamento

Pré‑carregamento é a prática de priorizar e adiantar o download de recursos essenciais. O objetivo é exibir conteúdo crítico o quanto antes. A técnica usa resource hints, cabeçalhos e atributos HTML para orientar o navegador.

2) Quando usar

• Fontes web usadas no first paint (acima da dobra).
• CSS crítico único e menor que ~20–30KB.
• JS module inicial de apps SPA/MPA.
• Imagens de hero acima da dobra.
• Rotas próximas que o usuário abrirá em seguida (prefetch).

3) Principais técnicas

3.1 preload (carregar agora, alta prioridade)

<!-- CSS crítico -->
<link rel="preload" as="style" href="/assets/critical.css" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/assets/critical.css"></noscript>

<!-- Fonte usada no H1 -->
<link rel="preload" as="font" href="/fonts/Inter-400.woff2" type="font/woff2" crossorigin>

<!-- Imagem hero -->
<link rel="preload" as="image" href="/img/hero.webp" imagesrcset="/img/hero@2x.webp 2x, /img/hero.webp 1x" imagesizes="100vw">

3.2 modulepreload (ES Modules)

<link rel="modulepreload" href="/app/bootstrap.js">
<script type="module" src="/app/bootstrap.js"></script>

3.3 preconnect e dns-prefetch (reduzir latência)

<!-- Resolver DNS e abrir TCP/TLS para CDNs/terceiros -->
<link rel="preconnect" href="https://cdn.exemplo.com" crossorigin>
<link rel="dns-prefetch" href="//cdn.exemplo.com">

3.4 prefetch (carregar depois, baixa prioridade)

<!-- Próxima rota provável -->
<link rel="prefetch" href="/proxima-pagina" as="document">

3.5 Priority Hints (fetchpriority)

<!-- Imagem hero deve ter prioridade alta -->
<img src="/img/hero.webp" fetchpriority="high" alt="Hero" width="1600" height="900">

<!-- JS não crítico pode ser low -->
<script src="/js/analytics.js" fetchpriority="low" defer></script>

3.6 Early Hints (HTTP 103) + Cloud/Proxy

# Resposta 103 com dicas de preload (no servidor/proxy)
Link: </assets/critical.css> ; rel=preload ; as=style
Link: </fonts/Inter-400.woff2> ; rel=preload ; as=font ; type="font/woff2" ; crossorigin

O navegador começa a baixar antes do 200 OK. Ganho de FCP e LCP.

4) Boas práticas e armadilhas

• Seja seletivo: pré‑carregue somente o que afeta o primeiro paint.
• Evite duplicação: se pré‑carregar CSS, não bloqueie de novo sem necessidade.
• Fonts: defina font-display: swap e use crossorigin correto.
• Imagens: coloque width e height para evitar layout shift.
• Audite: Lighthouse → “Preload key requests” e “Preload fonts”.
• Não abuse de preconnect: 2–3 hosts chave, no máximo.
• Evite push HTTP/2: obsoleto e pode piorar.

5) Implementando via cabeçalhos HTTP

5.1 Nginx

# Cabeçalhos Link para preload (exemplo)
add_header Link "</assets/critical.css>; rel=preload; as=style", always;
add_header Link "</fonts/Inter-400.woff2>; rel=preload; as=font; type=font/woff2; crossorigin", always;

5.2 Apache

<IfModule mod_headers.c>
Header add Link "</assets/critical.css>; rel=preload; as=style"
Header add Link "</fonts/Inter-400.woff2>; rel=preload; as=font; type=font/woff2; crossorigin"
</IfModule>

5.3 Express (Node.js)

app.get("/", (req, res) => {
  res.setHeader("Link", [
    '</assets/critical.css>; rel=preload; as=style',
    '</fonts/Inter-400.woff2>; rel=preload; as=font; type="font/woff2"; crossorigin'
  ].join(", "));
  res.render("home");
});

6) WordPress: formas seguras

<?php
// functions.php — Preload de fonte crítica
add_action('wp_head', function () {
  ?>
  <link rel="preload" as="font" href="/wp-content/themes/seu-tema/fonts/Inter-400.woff2" type="font/woff2" crossorigin>
  <?php
});

// Preconnect para CDN de imagens
add_filter('wp_resource_hints', function ($urls, $relation_type) {
  if ($relation_type === 'preconnect') {
    $urls[] = 'https://cdn.exemplo.com';
  }
  return $urls;
}, 10, 2);

Plugins de performance (LiteSpeed, WP Rocket) possuem campos para preload e preconnect sem editar código.

7) Imagens: preload vs lazy

• Hero acima da dobra: preload + fetchpriority="high".
• Demais: loading="lazy" e decoding="async".
• Use srcset e sizes para entregar o tamanho ideal.

<img
  src="/img/hero.webp"
  srcset="/img/hero.webp 1x, /img/hero@2x.webp 2x"
  sizes="(min-width: 1024px) 100vw, 100vw"
  fetchpriority="high"
  alt="Seção principal"
  width="1600" height="900">

8) Roteiro de decisão rápido

1. Liste recursos usados no primeiro viewport.
2. Marque fontes, CSS e imagem hero como preload.
3. Marque rotas próximas como prefetch.
4. Adicione 1–2 preconnect para hosts críticos.
5. Ative Early Hints se disponível na sua CDN.
6. Audite no Lighthouse e remova pré‑cargas inúteis.

9) Checklist

• Preload: CSS crítico, fonte do H1, imagem hero.
• Modulepreload: entry ES module.
• Preconnect: 1–2 hosts vitais e só.
• Prefetch: próxima navegação provável.
• Fetchpriority: high para hero, low para não críticos.
• Early Hints: habilitado no proxy/CDN.
• Medição: LCP/FCP/TTFB antes/depois.

Perguntas Frequentes (FAQ)

Pré‑carregar demais pode piorar a performance?

Sim. O navegador disputa banda e prioridade. Se tudo vira crítico, nada é crítico. Selecione poucos recursos essenciais. Preciso de crossorigin ao pré‑carregar fontes?

Sim, para WOFF2 em domínios próprios ou CDN. Sem isso, a fonte pode ser baixada duas vezes. Qual a diferença entre preload e prefetch?

preload baixa agora com prioridade. prefetch baixa depois com prioridade baixa para uso futuro. Devo usar HTTP/2 Push?

Não. A técnica é desaconselhada e removida de muitos servidores. Prefira preload e Early Hints. Como saber se funcionou?

Observe Waterfall em DevTools e métricas LCP/FCP. O recurso pré‑carregado deve iniciar o download cedo com prioridade alta. Isso ajuda em conexões lentas?

Sim, pois organiza prioridades. Porém, limite o número de pré‑cargas para não saturar a rede. Posso automatizar a escolha do que pré‑carregar?

Sim, ferramentas de build podem inserir preload para entradas críticas. Audite periodicamente para evitar lixo. Early Hints exige servidor especial?

Requer suporte na CDN/Proxy. Muitas CDNs já permitem ativar 103 com regras simples.fetchpriority tem suporte amplo?

Suporte é bom nos principais navegadores. Em não suportados, o atributo é ignorado sem quebrar. Como medir a melhoria real?

Compare LCP, FCP e CLS no PageSpeed e no CrUX. Valide em navegação fria e quente.

Tags

pré-carregamento, preload, prefetch, preconnect, dns-prefetch, early hints, http 103, modulepreload, fetchpriority, web performance, lcp, fcp, ttfb, otimização, cdn, wordpress, imagens, fontes web, lighthouse

“É necessário construir frases curtas. Toda otimização dividirá em, no mínimo, duas frases.”