CodeWiki

O que são `preconnect`, `prefetch`, e `preload`?

Essas são diretivas que você pode adicionar ao HTML para otimizar o carregamento de recursos críticos e melhorar a experiência do usuário. Cada uma tem um propósito específico:

preconnect:
- Estabelece conexões (DNS, TCP, TLS) com um servidor antecipadamente, antes que o recurso seja realmente solicitado.
- Útil para recursos de terceiros, como APIs externas, fontes ou scripts.
prefetch:
- Carrega recursos em segundo plano que podem ser necessários para navegações futuras.
- Ideal para pré-carregar páginas ou recursos que o usuário provavelmente acessará em seguida.
preload:
- Carrega recursos críticos com alta prioridade, antes que o navegador os descubra naturalmente.
- Usado para recursos essenciais, como fontes, scripts ou estilos que são necessários no carregamento inicial da página.

Por que usar essas dicas?

Melhoria de desempenho: Reduz o tempo de carregamento de recursos críticos.
Melhor experiência do usuário: Páginas carregam mais rápido e a navegação se torna mais suave.
Otimização de recursos: O navegador prioriza o que é mais importante, evitando gargalos.

Documentação: `preconnect`, `prefetch`, e `preload`

1. `preconnect`

O que faz?

Estabelece conexões antecipadas com um servidor, economizando tempo quando o recurso for realmente necessário.

Quando usar?

Para recursos de terceiros, como APIs, fontes externas ou CDNs.
Quando você sabe que o usuário precisará de um recurso, mas ainda não o solicitou.

Sintaxe

<link rel="preconnect" href="https://exemplo.com">

Exemplo

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Dicas

Use crossorigin para recursos que exigem permissões CORS (como fontes).

2. `prefetch`

O que faz?

Pré-carrega recursos em segundo plano que podem ser necessários para navegações futuras.

Quando usar?

Para pré-carregar páginas ou recursos que o usuário provavelmente acessará em seguida (por exemplo, links na página atual).

Sintaxe

<link rel="prefetch" href="https://exemplo.com/recurso.js" as="script">

Exemplo

<link rel="prefetch" href="/proxima-pagina.html" as="document">
<link rel="prefetch" href="/imagens/logo.png" as="image">

Dicas

Use o atributo as para especificar o tipo de recurso (script, style, image, document, etc.).
Não use para recursos críticos da página atual (use preload para isso).

3. `preload`

O que faz?

Carrega recursos críticos com alta prioridade, antes que o navegador os descubra naturalmente.

Quando usar?

Para recursos essenciais que são necessários no carregamento inicial da página, como fontes, scripts ou estilos.

Sintaxe

<link rel="preload" href="https://exemplo.com/recurso.css" as="style">

Exemplo

<link rel="preload" href="/styles/main.css" as="style">
<link rel="preload" href="/scripts/app.js" as="script">
<link rel="preload" href="/fonts/roboto.woff2" as="font" type="font/woff2" crossorigin>

Dicas

Sempre use o atributo as para especificar o tipo de recurso.
Para fontes, use crossorigin e o atributo type para garantir o carregamento correto.

Comparação entre `preconnect`, `prefetch`, e `preload`

Diretiva	Prioridade	Uso
`preconnect`	Média	Estabelece conexões antecipadas com servidores externos.
`prefetch`	Baixa	Pré-carrega recursos para navegações.
`preload`	Alta	Carrega recursos críticos necessários no carregamento inicial da.

Boas Práticas

Use preconnect para recursos de terceiros:
- Fontes externas, APIs ou CDNs.
- Combine com dns-prefetch para otimização adicional.
Use prefetch para navegações futuras:
- Pré-carregue páginas ou recursos que o usuário provavelmente acessará.
Use preload para recursos críticos:
- Fontes, estilos ou scripts essenciais para o carregamento inicial.
Evite abusar:
- Usar muitas diretivas pode sobrecarregar a rede e prejudicar o desempenho.

Exemplo Completo

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Exemplo de Otimização</title>

  <!-- Preconnect para fontes externas -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

  <!-- Preload para recursos críticos -->
  <link rel="preload" href="/styles/main.css" as="style">
  <link rel="preload" href="/scripts/app.js" as="script">
  <link rel="preload" href="/fonts/roboto.woff2" as="font" type="font/woff2" crossorigin>

  <!-- Prefetch para navegações futuras -->
  <link rel="prefetch" href="/proxima-pagina.html" as="document">
  <link rel="prefetch" href="/imagens/logo.png" as="image">

  <!-- CSS principal -->
  <link rel="stylesheet" href="/styles/main.css">
</head>
<body>
  <h1>Página Otimizada</h1>
  <script src="/scripts/app.js"></script>
</body>
</html>

Considerações Finais

Essas diretivas são poderosas, mas devem ser usadas com cuidado para evitar sobrecarregar a rede.
Sempre teste o desempenho da página usando ferramentas como Lighthouse ou WebPageTest.

O que são preconnect, prefetch, e preload?

Por que usar essas dicas?

Documentação: preconnect, prefetch, e preload

1. preconnect

O que faz?

Quando usar?

Sintaxe

Exemplo

Dicas

2. prefetch

O que faz?

Quando usar?

Sintaxe

Exemplo

Dicas

3. preload

O que faz?

Quando usar?

Sintaxe

Exemplo

Dicas

Comparação entre preconnect, prefetch, e preload

Boas Práticas

Exemplo Completo

Considerações Finais

O que são `preconnect`, `prefetch`, e `preload`?

Documentação: `preconnect`, `prefetch`, e `preload`

1. `preconnect`

2. `prefetch`

3. `preload`

Comparação entre `preconnect`, `prefetch`, e `preload`