Preload, Prefetch e Preconnect
Oriente o navegador a buscar recursos essenciais antecipadamente.
Preload, Prefetch e Preconnect é uma aula grátis de HTML Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de HTML Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de HTML Academy inclui 4 aulas no total.
Por que usar dicas de recursos
Os navegadores modernos descobrem recursos apenas enquanto analisam o HTML. As dicas de recursos (atributos rel de link no <head>) permitem informar ao navegador "precisarei disso em breve" — assim, a solicitação de rede começa antes do que a descoberta normalmente permitiria.
preload carrega agora
<link rel="preload" as="..." href="..."> informa ao navegador que deve buscar o recurso imediatamente, com a prioridade adequada ao tipo de as. Use-o para recursos de que a página certamente precisará: imagens principais, fontes essenciais e JavaScript no nível da rota.
<link rel="preload" as="font" type="font/woff2" href="/inter.woff2" crossorigin>O atributo as
Sempre defina as — ele determina a prioridade da solicitação, o cabeçalho Accept e a aplicação da CSP. Valores comuns: "script", "style", "font", "image", "fetch". Sem as, os navegadores ignoram o preload e registram um aviso.
crossorigin para fontes
As pré-cargas de fontes exigem crossorigin mesmo quando a fonte tem a mesma origem. Sem ele, o navegador busca a fonte no modo CORS para o uso real, mas no modo anônimo para o preload, duplicando o download — um problema de desempenho sutil e comum.
prefetch carrega depois
<link rel="prefetch" href="..."> indica que um recurso será necessário em uma navegação futura. O navegador o busca com a menor prioridade durante o tempo ocioso e depois o armazena em cache para que a próxima página seja renderizada instantaneamente.
<link rel="prefetch" href="/next-page.html">preconnect aquece as conexões
<link rel="preconnect" href="https://api.example.com"> informa ao navegador que deve realizar a negociação de DNS, TCP e TLS com uma origem de terceiros antes que chegue a primeira solicitação. Use-o para hosts de API e CDNs que sua página acessará.
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>dns-prefetch é a alternativa mais leve
<link rel="dns-prefetch"> realiza apenas a consulta DNS — é mais econômico que preconnect. Use-o para muitos hosts de terceiros quando não puder fazer uma conexão preconnect completa com cada um; use preconnect com as poucas origens mais críticas.
Limite as dicas
Um número excessivo de preloads compete pela mesma largura de banda e torna a página mais lenta. Faça preload apenas de recursos que bloqueiam o caminho crítico de renderização — geralmente uma imagem principal e uma ou duas fontes essenciais. Todo o restante pode ser descoberto normalmente.
modulepreload para módulos ES
<link rel="modulepreload" href="/app.js"> faz preload não apenas do arquivo do módulo, mas também da sua árvore de dependências. Isso evita o efeito cascata de downloads típico dos módulos ES nativos, nos quais cada importação espera a análise da anterior.
Medindo o impacto
Use a coluna Iniciador do painel de Rede para confirmar que os recursos em preload realmente foram buscados cedo e a verificação "Conectar previamente às origens necessárias" do Lighthouse para detectar oportunidades perdidas. Remover um preload lento, mas não utilizado, muitas vezes traz um ganho tão grande quanto adicionar um bom preload.
Particularidades de cada dica
preload emite um aviso no console se o recurso não for usado em ~3 segundos. prefetch pode ser cancelado pelo navegador sob pressão de rede ou memória. As conexões preconnect são encerradas após ~10 segundos de inatividade — use-o para recursos que serão solicitados em breve.
Verificação de conhecimento
O que preconnect faz que dns-prefetch não faz?
Resumo
preload busca recursos críticos agora (com as e crossorigin quando necessário). prefetch armazena em cache recursos prováveis da próxima navegação durante o tempo ocioso. preconnect (TCP+TLS) e dns-prefetch (somente DNS) aquecem conexões com origens de terceiros. modulepreload estende o preload à árvore de dependências dos módulos ES. Use com moderação e meça.
Perguntas Frequentes
A aula “Preload, Prefetch e Preconnect” é grátis?
Sim — o texto completo de “Preload, Prefetch e Preconnect” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de HTML Academy, atualize para CoddyKit PRO. O curso de HTML Academy inclui 4 aulas no total.
O que vou aprender em “Preload, Prefetch e Preconnect”?
Oriente o navegador a buscar recursos essenciais antecipadamente. Você pratica HTML Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar HTML Academy?
Nenhuma experiência prévia é necessária. HTML Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.
Quanto tempo leva a aula “Preload, Prefetch e Preconnect”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de HTML Academy?
Sim. Cada aula de HTML Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Os atributos async e defer
- Preload, Prefetch e Preconnect
- Carregamento tardio de imagens loading=lazy
- Dicas de recursos: modulepreload